CMPUT 301: Lecture 25Graphic Design
Lecturer: Martin JagersandDepartment of Computing Science
University of Alberta
Notes based on previous courses byKen Wong, Eleni Stroulia
Martin Jagersand
2
Graphic Design
• What:– the use of typography, symbols, color, and
other static and dynamic graphics to convey facts, concepts, and emotions
3
Graphic Design
• Why:– can be used in user interface design to convey
information effectively about system functionality and state
4
Graphic Design
• Visible language:– layout
– formats, proportions, alignment
– typography– typefaces, typesetting
– color– colors, texture
– imagery– signs, symbols, icons
– sequencing– animation, order of operations
5
Graphic Design
• Basic principles of design:– organize
– provide a clear and consistent conceptual structure
– economize– maximize the effectiveness of a minimal set of cues
– communicate– match the presentation to the capabilities of the user
6
Graphic Design
• Apply these principles to design menus, control panels, dialog boxes, icons, etc.
7
Organize
• Internal consistency:– observe the same conventions and rules for all
elements of the user interface
8
9
10
11
12
Organize
• External consistency:– follow existing platform and cultural
conventions across user interfaces
13
14
Organize
• World consistency:– make conventions consistent with real-world
experience
15
16
17
18
19
20
Organize
• Lexical consistency:– coding consistent with common usage
– e.g., left = less, right = more
– consistent abbreviation rules– e.g., Jan, Feb, Mar, etc. (equal length)
– devices used consistently– e.g., esc key to cancel
– symbols used consistently– e.g., ellipsis (…) to bring up a dialog box from a
menu item or button
21
Organize
• Syntactic consistency:– status messages consistently placed
– e.g., for Internet Explorer, at bottom of window
– commands come first or last– e.g., verb then noun (command line)
– e.g., noun then verb (direct manipulation)
– menu items always at the same place– i.e., perceived stability; muscle memory
22
23
Organize
• Semantic consistency:– global commands always available
– e.g., help, cancel, undo
– e.g., cut/copy/paste
CMPUT 301: Lecture 25b Graphic Design
Lecturer: Martin JagersandDepartment of Computing Science
University of Alberta
Notes based on previous courses byKen Wong, Eleni Stroulia
Martin Jagersand
25
Graphic Design
• Basic principles of design:– organize
– provide a clear and consistent conceptual structure
– economize– maximize the effectiveness of a minimal set of cues
– communicate– match the presentation to the capabilities of the user
26
Tools in graphic design
• Visible language:– layout
– formats, proportions, alignment
– typography– typefaces, typesetting
– color– colors, texture
– imagery– signs, symbols, icons
– sequencing– animation, order of operations
27
Organize
• Screen layout:– use grids and alignment– group related elements– use balance and symmetry– use task analysis for ordering– standardize placements
– e.g., cancel button to left of OK button
– address perceived stability
28
29
Organize
• Grouping methods:– proximity– alignment– separators– borders– background color– indentation
30
31
32
Organize
• Navigability– provide an initial focus for attention– direct attention to important, secondary, or
peripheral items– assist navigation among the elements
33
Example: Navigability
34
Economize
• Simplicity:– KISS principle
– i.e., keep it simple, stupid
– minimize the use of colors and styles– avoid the “circus” effect
– minimize clutter– but do not hide essential information
– e.g., reveal details, use tabs
35
Example: KISS
36
Economize
• Clarity:– design all elements so that their meaning is not
ambiguous– use affordances– use plain language
37
Economize
• Distinctiveness:– distinguish important properties of essential
elements and make the most important elements obvious
38
39
Communicate
• Legibility:– design individual characters, symbols, and
graphic elements to be easily noticeable and distinguishable
• Readability:– design detailed displays to be comprehensible,
inviting, and attractive
40
Communicate
• Typography:– limit the number of typefaces
– e.g., max 3 legible/readable typefaces
– limit the length of lines– i.e., max 40 to 60 characters
– use appropriate justification– e.g., right justified for columns of numbers
– avoid all caps for body text
41
Example: Typography for edit boxes
• Proportional spacing:– Hard to see errors when typing in:
• Fixed spacing, bold: – Easy to see individual characters:
42
Communicate
• Imagery:– signs, symbols, icons– icon design is difficult– use standards if possible– label unfamiliar icons– avoid gratuitous images
– e.g., animated icons
43
44
Communicate
• Color and texture:– use appropriate highlighting and deemphasis
techniques to convey meaningful semantic distinctions
45
46
Communicate
• Aspects of visual design:– scale
– size of a specific element relative to other elements and the whole composition
– contrast– noticeable differences along a common visual
dimension
– proportion– balance and harmony of the relation between
elements
47
Specific design examples
• Look at Joel's writings on UI:http://static.userland.com/gems/joel/uibookcomplete.htm