Graphic Design

1
Graphic Design
213 User Interface Design and Development

• Professor Tapan Parikh (parikh_at_berkeley.edu)
• TA Eun Kyoung Choe (eunky_at_ischool.berkeley.edu)
• Lecture 9 - February 21st, 2008

2
Graphic Design

• Modern design implies a rational, functional,
  information-oriented perspective
• Design implies a balance between functional and
  aesthetic goals
• A clear visual organization is essential for
  effective communication

Source Mullet and Sano, Designing Visual
Interfaces
3
(No Transcript)
4
(No Transcript)
5
Principles of Graphic Design

• Simplicity
• Contrast
• White Space
• Balance
• Alignment

Adapted from Rob Miller
6
Simplicity

• Perfection is achieved not when there is nothing
  more to add, but when there is nothing left to
  take away.
• -- Antoine de St-Exupery

7
Simple Designs Are

• Approachable - Do not intimidate the user
• Recognizable - Can be more easily recognized and
  remembered
• Immediate - Provide immediate cues about what to
  do
• Usable - Reduce the likelihood of confusion or
  error

8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
Enemies of Simplicity

• Clutter
• Overly literal translation
• Gratuitous use of 3D
• Excessive detail

Source General Magic
12
Ways to Achieve Simplicity

• Reduction
• Regularization
• Combination

Source Mullet and Sano, Designing Visual
Interfaces
13
Reduce a Design to its Essence
14
Reducing a Design

• Determine the essential elements
• Examine each element, and ask yourself whether
  its needed
• If it isnt, then remove it
• Even if it is, try to remove it, and see if the
  design remains coherent

Source Mullet and Sano, Designing Visual
Interfaces
15
Regularize the Components

• Repeat elements according to a discernible rule
  principle or rhythm
• Limit inessential variation

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
16
Regularizing a Design

• Use regular geometric forms and muted colors
  wherever possible
• If similar forms are required, make them as close
  to indentical as possible
• Limit variation in font size, type
• Make sure elements intended to stand out are not
  regularized

Source Mullet and Sano, Designing Visual
Interfaces
17
Combine Components

• Find ways for screen components to play multiple
  roles clearly and succinctly

title bar
help prompt
scrollbar thumb
Adapted from Rob Miller
18
Combining Components

• Review the role played by each element in the
  design
• Look for places where multiple components are
  doing the same thing
• See whether an elements role could be performed
  by an adjacent component, possibly with some
  minor changes
• Combine redundant elements into a single, simpler
  unit

Source Mullet and Sano, Designing Visual
Interfaces
19
Contrast

• Information consists of differences that make a
  difference -Edward Tufte
• There are many ways to encode information along
  visual dimensions

size
texture
position
Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
20
Using Contrast

• Differentiation - Distinguish relevant form from
  background
• Emphasis - Emphasize certain aspects of the
  presentation
• Activity - Guide the users eye in a predictable
  way
• Interest - Add excitement by juxtaposing very
  different elements

Source Mullet and Sano, Designing Visual
Interfaces
21
Scale

• Comparisons that a visual dimension affords
• Nominal - Decide if two values are equal
• All dimensions
• Ordered - Decide relative ordering
• Position, size, value, texture granularity
• Not orientation, hue, shape
• Quantitative - Decide relative difference
• Position, size
• Not value, texture, orientation, shape, hue

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
22
Scale

• Nominal - Decide if two values are equal
• Ordered - Decide relative ordering
• Quantitative - Decide relative difference

size
texture
position
Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
23
Length

• Length implies how much variation a dimension can
  support
• Shape is very long - infinite variety
• Position is long and fine-grained (but may be
  limited by screen size)
• Orientation is very short (4 alternatives)
• Others are in between (7-10 alternatives)

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
24
Selective Perception

• Can observer quickly focus on one value,
  excluding all the others?
• Example Find all the blue marbles
• Selective position, size, orientation, hue,
  value, texture
• Not selective shape

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
25
Can you find all the green letters?
N
N
Z
M
Z
M
N
K
K
M
K
Z
N
N
K
M
M
Z
K
M
N
Z
K
K
N
Z
Z
M
M
M
N
K
M
N
K
Z
N
K
K
Z
N
M
Adapted from Rob Miller
26
Can you find all the Ms?
N
N
Z
M
Z
M
N
K
K
M
K
Z
N
N
K
M
M
Z
K
M
N
Z
K
K
N
Z
Z
M
M
M
N
K
M
N
K
Z
N
K
K
Z
N
M
Adapted from Rob Miller
27
Associative Perception
K

• Can variable be ignored when more concerned with
  other variables?
• Associative position, shape, orientation, hue,
  texture
• Not associative size, value
• Small size and value interferes with our ability
  to perceive position, shape, orientation, hue,
  texture
• Can you find the green K on this page?

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
28
Using Contrast Effectively

VS.
Adapted from Rob Miller
29
The Squint Test

• Close one eye, and squint with the other
• What do you see? That is the structure that
  matters

Adapted from Rob Miller
30
Using Contrast Effectively

• Can you distinguish the labels from editable
  fields?
• Use of color, text position does not provide
  sufficient contrast

Adapted from Rob Miller
Source Interface Hall of Shame
31
White Space

• Use white space to group elements, instead of
  explicit lines
• Make sure to leave a margin
• Scale composition to make sure neither positive
  or negative space dominate
• Usually should be centered
• Do not crowd controls together - creates tension
  and inhibits scanning

Adapted from Rob Miller
32
Example of a Crowded Dialog
Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
33
Use White Space to Group Elements
Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
34
Gestalt Principles

• How visual perception constructs a gestalt
  (whole) out of individual elements

proximity
similarity
continuity
closure
area
symmetry
Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
35
Balance

• Choose an axis (usually vertical)
• Make sure the visual weight of elements on each
  side are approximately equal
• Symmetric layouts are implicitly balanced and
  aesthetically pleasing
• Asymmetric layouts are harder to balance, but can
  increase tension and activity

Adapted from Rob Miller
36
(No Transcript)
37
Alignment

• Either left- or right-justify your labels
• Try to align your controls on the left and the
  right
• Align controls and labels on the same baseline

Adapted from Rob Miller
38
Breaking all the Rules
Adapted from Rob Miller
39
Grids

• Regular grids are helpful for achieving both
  balance and alignment

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
40
Using Color

• Be aware of human limitations
• Color-blindness, visual perception
• Use a consistent palette
• Avoid loud, saturated colors

Adapted from Rob Miller
Source Mullet and Sano, Designing Visual
Interfaces
41
Choosing Icons

• If you are trying to represent a concrete,
  tangible thing, use an icon
• If it is used repeatedly, establish a convention,
  especially if one can be borrowed from the real
  world
• Otherwise, especially if its an action or
  abstract process, use text
• Dont mix text, icons, symbols

Source Mullet and Sano, Designing Visual
Interfaces
42
Closing Thought

• Problem-solving and communication, not personal
  expression, is the key to effective visual
  design for graphical user interfaces.

Source Mullet and Sano, Designing Visual
Interfaces
43
For Next Time

• Lo-Fi Project Presentations!
• Any questions?