Visual Graphic Design

1
Visual (Graphic) Design

• The look feel

2
Who Needs Substance?
3
Graphic Design

• The look of an interface or web site, as in
  look and feel
• The overall set of images, colors, layouts, fonts
• Conveys an impression, mood

4
Role of Graphic Design

• Create a look, an impression
• What someone initially encounters
• Sets a framework for understanding content

5
Role of Graphic Design

• The look of an interface
• What someone initially encounters
• Sets a framework for understanding content

6
Role of Graphic Design

• The look of an interface
• What someone initially encounters
• Sets a framework for understanding content

7
Role of Graphic Design

• The look of an interface
• What someone initially encounters
• Sets a framework for understanding content

8
Role of Graphic Design

• The look of an interface
• What someone initially encounters
• Sets a framework for understanding content

9
Role of Graphic Design

• The look of an interface
• What someone initially encounters

10
Graphic Design

• It shares aspects of design practices in
  engineering and CS, but focuses on the cultural,
  symbolic affective aspects.
• useful, usable, desirable

11
Graphic Design

• As a practice, it has been around for thousands
  of years.

12
Graphic Design

• With the industrial revolution, art and design
  began to diverge
• Design for mass-production - of printing, of
  artifacts

13
Graphic Design

• In the US, graphic design developed into a
  profession after WWII.

14
Graphic Design

• Relies on a BALANCE and integration of
• Objective relies on quantitative studies, like
  usability testing
• Does the look work?

15
Graphic Design

• Subjective look relies on subjective judgment
  by experts, and depends on contextual factors

16
Graphic Design

• Subjective look is contextual, based on
  culture
• Culture is learned
• Cultural meanings change
• There can be multiple meanings
• Uniqueness is valued (not programmable)

You cannot empirically measure the subjective
aspects, but there is a discipline to its study
17
Graphic Design

• Is rigorous in its own realm
• Knowing graphic design principles will
• Enhance your ability to communicate w/designers
• Enable you to create more user-friendly
  interfaces

18
Design Philosophies

• One point of view
• Economy of visual elements
• Less is more
• Clean, well organized
• Form follows function Bauhaus

Color
Imagery
Sequencing
Layout
Typography
Organization
19
Graphic Design Principles

• Metaphor
• Clarity
• Consistency
• Alignment
• Proximity
• Contrast

20
Metaphor

• Tying presentation and visual elements to some
  familiar relevant items
• e.g., Desktop metaphor
• If youre building an interface for a grocery
  application, maybe mimic a person walking through
  a store with a cart

21
Example
Overdone?
www.worldwidestore.com/Mainlvl.htm
22
Clarity

• Every element in an interface should have a
  reason for being there
• Make that reason clear too!
• Less is more

23
Clarity

• White space
• Leads the eye
• Provides symmetry and balance through its use
• Strengthens impact of message
• Allows eye to rest between elements of activity
• Used to promote simplicity, elegance, class,
  refinement

24
Example
Clear, clean appearance Opinion?
www.schwab.com
25
Example
Clear, clean appearance Opinion?
26
Clarity via White Space

• White space

27
Clarity via White Space

• White Open

28
Consistency

• In layout, color, images, icons, typography,
  text,
• Within screen, across screens
• Stay within metaphor everywhere
• Platform may have a style guide
• Follow it!

29
Example
Home page
Content page 1
Content page 2
www.santafean.com
30
Alignment

• Western world
• Start from top left
• Allows eye to parse display more easily

31
Alignment

• Grids
• (Hidden) horizontal and vertical lines to help
  locate window components
• Align related things
• Group items logically
• Minimize number of controls, reduce clutter

32
Alignment

• Grids - use them

33
Grid Example
34
Alignment

• Left, center, or right
• Choose one, use it everywhere
• Novices often center things
• No definition, calm, very formal

Here is somenew text
Here is somenew text
Here is somenew text
35
Proximity

• Items close together appear to have a
  relationship
• Distance implies no relationship

Time
Time
36
Example
Name
Name
Name
Addr1
Addr1
Addr1
Addr2
Addr2
Addr2
City
City
City
State
State
State
Phone
Phone
Phone
Fax
Fax
Fax
37
Alignment Dialogue Box Example
38
Dialogue Box Example
39
Dialogue Box Example
40
Dialogue Box Example
41
Contrast

• Pulls you in
• Guides your eyes around the interface
• Supports skimming
• Take advantage of contrast to add focus or to
  energize an interface
• Can be used to distinguish active control

42
Contrast

• Can be used to set off most important item
• Allow it to dominate
• Ask yourself what is the most important item in
  the interface, highlight it
• Use geometry to help sequencing

43
Example
Importantelement
www.delta.com
44
UI Exercise

• Look at interface and see where your eye is
  initially drawn (what dominates?)
• Is that the most important thing in the
  interface?
• Sometimes this can (mistakenly) even be white
  space!

45
Example
Disorganized
46
Example
Visual noise
47
Example
Overuse of 3D effects
48
Economy of Visual Elements

• Less is more
• Minimize borders and heavy outlining, section
  boundaries (use whitespace)
• Reduce clutter
• Minimize the number of controls

49
Coding Techniques

• Blinking
• Good for grabbing attention, but use very
  sparingly
• Reverse video, bold
• Good for making something stand out
• Again, use sparingly

50
Characterizing Color - HSV Model

• Hue
• basic color, pigment
• Saturation
• relative purity, brightness, or intensity of a
  color
• Value
• lightness or darkness of a color
• Most commonly-used model

Image from Adventures in HSV Space, Darrin
Cardani, dcardani_at_buena.com
51
HSV Color Model

• Hue
• Wavelength (red, green, yellow, blue)
• Spectrum (VIBGYOR)
• Saturation
• Pastel versus strong (baby blue, sky blue, royal
  blue)
• Value
• amount of energy (white, light gray, dark gray,
  black)
• Usually V 0.299R 0.587G 0.114B

52
HSV Color Space

• Typical color selection tools

53
Color Reflected and Emitted

• We see the world via reflected color light
  strikes a surface and is reflected to our eyes
  properties of surface dictate color (printers,
  objects)
• Subtractive color model - Cyan Magenta Yellow
  primaries
• Colors on CRT are emitted light is generated by
  phosphors and emitted
• Additive color model - Red Green Blue primaries

54
Color

• Use it for a purpose, not to just add some color
  in

55
Color Guidelines

• Use color sparingly--Design in b/w then add color
  where appropriate
• Use color to draw attention, communicate
  organization, to indicate status, to establish
  relationships
• Avoid using color in non-task related ways

56
Color Guidelines

• Color is good for supporting search
• Do not use color without some other redundant cue
• Color-blindness
• Monochrome displays
• Redundant coding enhances performance
• Be consistent with color associations from jobs
  and cultures

57
Color Guidelines

• Display color images on a black, white, or gray
  background
• Be sure foreground colors contrast (in both
  brightness and hue) with background colors
• Avoid using color in non-task related ways

58
How many small ovals?
59
Now how many small ovals?
60
Visual Exercise

• How many small objects?
• How many rectangles?
• How many orange objects?

61
How Many Small objects?
62
How Many Rectangles?
63
How Many Orange objects?
64
Visual Exercise

• Find the red letter
• Find the A

65
Find the Red Letter Find the A
B
P
X
V
F
E
U
U
W
S
O
C
C
A
B
Z
L
L
E
M
K
H
I
J
S
G
R
R
N
T
H
T
G
V
V
P
D
Q
Q
F
X
O
D
I
V
W
W
S
K
N
X
Y
Y
Z
V
W
K
D
M
S
R
Z
J
66
Find the Q and Z
C
V
M
G
R
T
D
P
Q
F
A
Z
W
J
67
Searching and Color

• Search for a particular item on a display
• Color generally faster
• Shapes (60)
• Size (40)
• Brightness (40)
• Alpha characters (40)
• Letters (10)
• Score Achromatic search time color search
  time
• Achromatic search time
• An initial decrease in search time occurs as the
  first few colors are used, but then search times
  go up as more colors are added.

68
Accuracy and Color Coding

• Redundant coding increases discrimination
• Red triangle
• Green square
• Viewer cues on either code, results are
• Brightness color (104)
• Size brightness color (61)
• Size color (60)
• Score Redundant Color Only
• Color Only

69
Color Guidelines

• To express difference, use high contrast colors
  (and vice versa)
• Make sure colors do not vibrate

These colors vibrate they willgive you a
headache
70
Color Meanings Contextually Specific

• Red
• aggression, love
• hot, warning, stop, radiation
• Pink
• female, cute, cotton candy
• Orange
• warm, autumn, Halloween
• Blue
• cold, off

• Yellow
• happy, caution, joy
• Brown
• warm, fall, dirt, earth
• Green
• go, on, safe, envy, lush, pastoral
• Purple
• royal, sophisticated, Barney

71
Color Meanings Culturally Specific
http//www.ricklineback.com/culture2.htm
72
Color Palettes

• Color palette set of colors used on one screen
• Choose color palette from HSV space by varying
  and two of H, S, and V.
• Dont vary hue, saturation and brightness at the
  same time.
• Unless want continuous tone or artsy effect,
  best to use only 4-6 colors per screen

73
Color Palettes/Suites

• Designers often pick a palette of 4 or 5 colors

Variations of 2 colors
Monochromatic (variations of 1 color)
Southwestern (culturally evocative)
74
Color Palettes

• Use of pastels and primaries
• Varyies all of hue, saturation and value

75
Color Palettes

• Redesign increased saturation of blue
• All colors are primary

76
Effect of Colored Text on Colored Background
Black text on red Gray text on red Yellow text on
red Light yellow text on red Green text on
red Light green text on red Blue text on red Pale
blue text on red Dark red text on red Red text on
red Rose text on red
77
Effect of Colored Text on Colored Background
Black text on dark blue Gray text on dark
blue Yellow text on dark blue Light yellow text
on dark blue Green text on dark blue Light green
text on dark blue Blue text on dark blue Pale
blue text on dark blue Dark red text on dark
blue Red text on dark blue Rose text on dark blue
78
Effect of Colored Text on Colored Background

• Not enough contrast between blue text and grey,
  textured background
• Inconsistency may cause user to puzzle over icons
  being different sizes

79
Effect of Colored Text on Colored Background

• Substituted black text for blue
• Increased contrast

Match your interest, find out whats new online,
discover our most loved services, and make your
time online fun and informative. Start by
clicking on A Letter from Steve, and come back
to explore the other areas featured here.
80
Icon Design

• Represent object or action in a familiar and
  recognizable manner
• Limit number of different icons
• Avoid excessive detail
• Make icon stand out from background

81
Icon Design

• Relies on drawing ability hire someone to do it
  (there are standards and ways to critique icon
  design)
• Avoid meaningless, gratuitous use of icons
• Too many icons quickly become illegible

82
Icon Design
What do each of these signify? Almost always
want to accompany your icons by a text label
83
Use a Graphics Alphabet

• Use a basic graphics alphabet from which to form
  icons

84
Use a Graphics Alphabet

• Icons created from the graphics alphabet

85
What do these icons mean?
Icons should be recognizable, memorable, and
discriminable
86
What do these icons mean? Answers
From Windows Start menu
Common document icons
cut
open
copy
new
paste
save
spell check
print
Icons should be recognizable, memorable, and
discriminable
87
Your Screen?