Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids.

Slides:



Advertisements
Similar presentations
MS® PowerPoint.
Advertisements

Presented by: Benefits Systems Support. Getting Started ê Open Powerpoint, create a blank presentation. ê Select a style for your first slide from the.
Graphic Design, part 1.
Lesson 2 — Working with Text
Visual Basic 2010 How to Program. © by Pearson Education, Inc. All Rights Reserved.2.
Visual Basic 2010 How to Program Reference: Instructor: Maysoon Bin Duwais slides Visual Basic 2010 how to program by Deitel © by Pearson Education,
Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts.
James Tam Graphical Screen Design CRAP (contrast, repetition, alignment, proximity) Grids are an essential tool for graphical design Other important graphical.
Saul Greenberg Graphical Screen Design Grids are an essential tool for graphical design Important graphical design concepts include visual consistency.
CRAP contrast, repetition, alignment, proximity Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as.
 2006 Pearson Education, Inc. All rights reserved Introduction to the Visual C# 2005 Express Edition IDE.
Graphic Design 1 The “look & feel”. Fall 2002CS/PSY Agenda Principles Examples SHW discuss.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 27, 2003.
This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation. All.
Lab 10: Creating a Presentation
Saul Greenberg Graphical Screen Design Grids are an essential tool for graphical design Important graphical design concepts include visual consistency.
SIMS 213: User Interface Design & Development Marti Hearst Tues Mar 15, 2005.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
Microsoft PowerPoint ® 2003 Carl B. Struck Presentation Graphics n Educational, business, sales and other presentations (slide shows) n Combination of.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Saul Greenberg, James Tam Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other.
Visual design The “look” of your interface. Agenda Poster information Errors review Visual design.
1 Introduction to the Visual Studio.NET IDE Powerpoint slides modified from Deitel & Deitel.
Screen Design. Guidelines for controls (Dix et al.) Place controls that are functionally related together. If controls are used sequentially, organize.
Sheelagh Carpendale Graphical Screen Design Important graphical design concepts include visual consistency visual relationships visual organization legibility.
Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Microsoft PowerPoint 2002 Working with External.
Presentation Template
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
>To add a component via Page Editor, go to the View tab and check the Designing checkbox to enter Designing mode. >Next, simply click the Component button.
BASIC PRINCIPLES OF DESIGN DESIGN, MULTIMEDIA, AND WEB TECHNOLOGIES (DMWT)
Graphical Screen Design Part 2: Analyzing designs and other visual design concepts Lecture /slide deck produced by Saul Greenberg, University of Calgary,
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 2 Welcome Application Introducing the Visual Basic 2008 Express Edition IDE.
Graphic Design The “look & feel” portion of an interface What someone initially encounters Conveys an impression, mood.
This is the first sheet of a spreadsheet workbook. The workbook begins initially with 3 work sheets. A spreadsheet is made of columns and rows. The intersection.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
® Microsoft Office 2010 Access Tutorial 3 Maintaining and Querying a Database.
VERITAS Confidential Graphic Design Shashank Deshpande VERITAS Software July, 2003.
Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.
Chapter 2 – Introduction to the Visual Studio .NET IDE
Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content.
Chapter 4 Working with Information Graphics
Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.
Lesson 6 Formatting Cells and Ranges. Objectives:  Insert and delete cells  Manually format cell contents  Copy cell formatting with the Format Painter.
Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
1 Chapter 15 Creating a Presentation. Practical Computer Literacy, 2 nd edition Chapter 15 2 What’s inside and on the CD? In this chapter, you will learn.
Desktop Publishing Lesson 2 — Working with Text. Lesson 2 – Working with Text2 Objectives  Create a blank document.  Work with text boxes.  Work with.
Conjunctiva Zonula Retina Aqueous humour Fovea Lens Pupil Optic nerve Cornea Iris Image by MIT OpenCourseWare.
Creating Tables Word Lesson 6. Creating Table Methods  There are a number of options to create tables. Each of these options can be accessed by clicking.
Image by MIT OpenCourseWare.
Dive Into® Visual Basic 2010 Express
Principles of Good Screen Design
Chapter 2 – Introduction to the Visual Studio .NET IDE
Graphical Screen Design
Who Needs Substance? Fall 2002 CS/PSY 6750.
Module 6: Creating Web Pages and Working with Channels
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Graphical Screen Design
Interface Design Interface Design
Chapter 4 Enhancing the Graphical User Interface
Presentation transcript:

Page Design CMPT 281

Announcements

Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids – Visual economy Graphical redesign exercise

Graphic design Must account for: – a comprehensible mental image – an appropriate organization of data, functions, and tasks – quality appearance characteristics the “look” – effective interaction sequencing the “feel”

Components of visual language Layout – formats, proportions, and grids Typography – typefaces and typesetting Imagery – signs, icons, symbols – concrete to abstract Sequencing – how the interaction unfolds

Components of visual language Visual identity – unique appearance Animation – dynamics of display Color and Texture – convey complex information and pictorial reality

Design factors for interfaces Visual organization Visual consistency Navigational cues

Visual organization

Which elements to put on the screen? Clustering of widgets or data Use of white space and alignment

Visual organization

Visual organization What components must be in the display? – what are the necessary visual affordances – frequent actions use direct manipulation for core activities use buttons, forms, toolbar, or special tools for frequent and immediate actions use menus or property window for less frequent actions use secondary windows for rare actions How are components related? – organize related items as “chunks” What are familiar and expected idioms? – cross-application look and feel

Visual organization

Link related elements, separate unrelated – create clusters based on related functionality – use white (negative) space – use alignment – provides implicit structure to the information

Visual organization Mmmm:  

Visual consistency

internal consistency – same conventions and rules for all elements of the GUI (unless a good reason not to) – application-specific grids encourage consistency external consistency – follow platform and interface style conventions – use platform and widget-specific grids – deviate only when it provides a clear benefit to user

Visual consistency Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss  

Visual consistency (?)

Navigational cues

Where should people look first? – provide an initial focus – direct attention to important, then secondary items – assist in navigation through material – order should follow a user’s conceptual model of sequences – people read top-bottom, left-right

Navigational cues  

How can window navigation be reduced? – avoid long paths – avoid deep hierarchies

Navigational cues

Techniques Clustering Grids Visual economy

Clustering

Grids Window components organized on horizontal and vertical lines – aligns related components Organization – contrast to bring out dominant elements – grouping of elements by proximity – show organizational structure – alignment Consistency – location – format – repetition – organization

Grids

Window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed

Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow

Haphazard layout from mullet & sano

Repairing a Haphazard layout from mullet & sano

Redesigning a layout from mullet & sano

Visual economy minimize the number of controls – include only those that are necessary eliminate or move others to secondary windows – minimize clutter so information is not hidden

Visual economy NNNN MMMM xxx: ____ MMMM NNNN  

Repairing excessive display density from mullet & sano

Visual economy Tabs – excellent means for encapsulating related items – but can be overdone!

Graphical redesign exercise Redesign a window using a grid Create a grid emphasising: – visual consistency – relationships between screen elements – navigational cues – economy – legibility and readability – imagery

Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... DoneCancel Caption Direction Ascending Descending

A possible solution Step 1. Maintain visual consistency – locate standard components including title bar, window controls, dialog boxes... – create the grid: organizes elements into rows and columns also shows where generic components will appear – these generic components may have their own grids Step 2. Determine visual qualities – navigational layout – white space – legibility – typography

The grid Slide Show Options Title bar - see other grid Image in empty column First order labels: - 10pt Bold Arial Radio / checkboxes - standard widget set Second order controls - 10pt Normal Arial Spacing between groups Dialog box controls - see other grid

Using the grid Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 3. Determine relationships and navigational structure – map navigational structure onto the grid Step 4. Economize – collapse two windows into one – trim sound dialog

Finished version Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending

Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... Done Cancel Caption Direction Ascending Descending

Further economization Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 5: can we remove other elements? – can remove image – compare two versions

Reading Text: – Pattern group I: Designing Effective Page Layouts Pages