Graphic Design Principles

1
Graphic Design Principles

• Prof. Diane Gromala, LCC ID

2
Graphic Design

• the look feel
• NOT look feel at the expense of function, but
  form function

3
Graphic Design

• the look feel
• NOT look feel at the expense of function, but
  form function
• (Norman Neilsen havent done their homework
  when they say graphic design impedes legibility
  or obscures functionality)

4
Graphic Design

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

5
Graphic Design

• As a practice, it has been around for thousands
  of years.
• Useful visual communication using text and image

6
Graphic Design

• With the industrial revolution, art and design
  began to diverge.

7
Graphic Design

• In the US, it grew into a profession after WWII.

8
Graphic Design

• It relies on a BALANCE and integration of
• feel

9
Graphic Design

• Objective relies on quantitative studies, like
  usability testing.
• Does the look and feel work?

10
Graphic Design

• Subjective look and feel relies on subjective
  judgement by experts, and depends on contextual
  factors.

11
Graphic Design

• Subjective look and feel Culture is learned,
  cultural meanings change, and meanings
  can be multiple.
• Uniqueness is valued (not programmable).

12
Graphic Design

• You cannot empirically measure the subjective
  aspects, but it is rigorous in its own
  epistemological realm (knowledge base).

13
Graphic Design

• It is rigorous in its own epistemological realm.
• 1. Graphic Design experts.
• vs.
• 2. Deploying graphic design principles (anybody).
• feel

14
Graphic Design

• So what?
• Deploying graphic design principles will
• - enhance your ability to communicate
  w/designers
• feel

15
Graphic Design

• Deploying graphic design principles will
• - enable you to create more user-friendly
  interfaces

16
Graphic Design

• Deploying graphic design principles will
• - enhance the knowledge base of HCI, which
  is increasingly necessary with millions of more
  users
• feel

17
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

18
Role of Graphic Design

• The look and feel portion of an interface
• What someone initially encounters

19
Role of Graphic Design

• The look and feel portion of an interface
• What someone initially encounters
• Sets a framework for understanding content
• Conveys an impression, mood

20
Role of Graphic Design

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

21
Role of Graphic Design

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

22
Role of Graphic Design

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

23
Role of Graphic Design

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

24
Role of Graphic Design

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

25
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

26
Principles of Graphic Design

• Concept/Metaphor
• Hierarchy
• Clarity
• Consistency
• Alignment
• Proximity
• Contrast

27
Principles Concept/Metaphor

• Concept what is the overarching idea that every
  visual aspect of the interface relates to?
  (It MUST be relevant)
• Metaphor (specific subset of concept)
  If youre building an interface
  for a grocery application, maybe mimic a person
  walking through a store with a cart.

28
Principles Concept/Metaphor

• Concept what is the overarching idea that every
  visual aspect of the interface relates to?
  (It MUST be relevant)
• Apple accessible, fun, familiar for the rest
  of us
• Metaphor (specific subset of concept)
  If youre building an interface
  for a grocery application, maybe mimic a person
  walking through a store with a cart. desktop
  metaphor

29
Principles Hierarchy

• What are the relative levels of importance?
• What should the user see first? Second?

30
Principles Hierarchy

• What are the relative levels of importance?
• What should the user see first? Second?
• Remember this one!

31
Principles Hierarchy

• What are the relative levels of importance?

32
Principles Hierarchy

• .

33
Principles Clarity
Every element in an interface should have a
reason to be there. Make that reason
clear! Less is more Dont use clip art
cliches, like gratuitous 3D buttons every
decision should descend directly from your
concept and metaphor, not because it is a
standard default or because you just like it
34
Principles Clarity

• White space (blank space)
• Directs the eye
• Provides balance through its use
• Strengthens impact of message
• Allows eye to rest between elements of activity
  
• (increases legibility, clarifies hierarchy)
• Used to promote simplicity and elegance

35
Principles Clarity

• White space

36
Principles Clarity

• White space

37
Principles Clarity
38
Principles Consistency

• Be consistent in every aspect
• In layout, color, images, icons, typography, text
• Within screen, across screens
• Stay within metaphor everywhere
• Platform may have a style guide -- follow it!

39
Principles Alignment

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

40
Principles Alignment

• Grid the invisible, underlying structure of a
  site
• Grid essential you must use one

41
Principles Alignment

• Grid the invisible, underlying structure of a
  site
• Grid essential you must use one

42
Principles Alignment

• Grid the invisible, underlying structure of a
  site
• Grid essential you must use one

43
Principles Alignment

• Grids
• Help locate window components
• Align related things
• Group items logically
• Minimize number of controls, reduce clutter

44
Principles Alignment

• Grids
• Help locate window components
• Align related things
• Group items logically
• Minimize number of controls, reduce clutter

45
Principles Alignment

• Left, center, or right
• Choose one, use it everywhere
• Novices often center things
• No definition, calm, very formal
• Use only in small quantities (hard to read)

Here is somenew text
Here is somenew text
Here is somenew text
46
Principles Proximity

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

Time
47
Principles Proximity

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

Time
48
Principles Contrast

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

49
Principles 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

50
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

51
Animation/Rollovers
Blinking Good for grabbing attention, but easily
becomes obnoxious use very sparingly Remember,
animations are constantly yelling for your
attention
52
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

53
Typography Letterforms

• Because of optical illusions, spacing between
• letterforms are not standard or one measurement,
• but are adjusted according to the shape of the
• letter (kern pairs).

54
(No Transcript)
55
Typography Letterforms
56
Typography Letterforms
57
Typography Letterforms
58
Typography Sizes

• Type is measured in points
• Type sizes are not standard, but are based on
• old measurements of the piece of metal
• So it appears to be larger

59
Typography Case

• Upper and lower case
• Except in small amounts (headlines),
• text that is all uppercase is difficult to read

60
Typography Legibility

• Characters and symbols should be easily
• noticeable and distinguishable
• AVOID HEAVY USE OF ALL UPPERCASE
• Studies have found that
  
• mixed case promotes fastest reading and that
• 55 75 characters per line is optimal

61
Typography Legibility

• Readability
• How easy is it to read a lot of text
• Legibility
• How easy is it to recognize a short burst of text
• Typeface font

62
Typography Fonts

• Two basic kinds of font shapes
• 1. Serif font
• 2. Sans serif font

63
Typography Fonts

• Use regularly
• Serif Times,
• Sans serif Arial, Verdana

• Dont use
• Decorative Comic Sans,
• Script
• Monospaced Courier

64
Typography Fonts

• Guidelines
• Use serif for long, extended text
• sans serif for headlines (rule of thumb)
• Use 1-2 fonts/typefaces
  
• Use 1-3 point sizes max. (dist. w/bold, space)

65
Typography Fonts

• Use normal/roman
• Italics bold for emphasis
• Never use bold, italics, or capitals for large
• sections of text

66
Typography Letterspacing

• Because of optical illusions, spacing between
• letterforms are not standard or one measurement,
• but are adjusted according to the shape of the
• letter (kern pairs).

67
Typography Letterspacing

• Because of optical illusions, spacing between
• letterforms are not standard or one measurement,
• but are adjusted according to the shape of the
• letter (kern pairs).

68
Typography Letterspacing

• Strive for regular spacing and a uniform texture.

69
Typography Letterspacing

• The space between TWO letters is kerning.
• The space AMONG more than 2 letters is tracking.
• .

70
Typography Letterspacing

• Monospaced fonts typewriters, not very legible
• The quick brown fox jumped over the
• Variably spaced fonts spaces between each
• letterform varies with the shape of that
  letterform
• (called kerning pairs).
• The quick brown fox jumped over the lazy dog.
• .

71
Typography Letterspacing

• The quick brown fox
• jumped over the lazy
• The quick brown fox jumped
• over the lazy dog.
• .

72
Typography Letterspacing

• Use ONE space between sentences.
• Two spaces are a TYPEWRITING convention
• only. In the digital realm, the space between
• sentences is variable, and is calculated to work
• with one space. Using two spaces between
• sentences in the digital realm creates rivers
  of
• white space that impede legibility.
• .

73
Typography Line spacing

• Line spacing Leading
• Line spacing is measured in points
• From baseline to baseline
• It is usually 20 larger than the point size of
  text
• (10 pt. Type generally defaults to 12pt. Leading)

74
Typography Line spacing

• In a paragraph, more line spacing generally
• results in greater legibility (in MSWord, 1.5),
• until the lines seem to be separate lines
• Lines of text are generally more legible Lines
  of text are generally more legible Lines of
  text are generally more legible
• with more line spacing than defaults,
• until they appear to separate into distinct with
  more line spacing than defaults,
• lines. When squinting, the paragraph with
  more line spacing than defaults,
• should appear as regular and grey until they
  appear to separate into distinct
• texture.
• lines. When squinting, the paragraph until
  they appear to separate into distinct
• should appear as regular and grey
• lines. When squinting, the paragraph
  texture.

75
Typography Alignment

• In a paragraph, flush left, rag right
• is the most legible
• (to readers of Western alphabets).

76
Typography Alignment

• In a paragraph, flush left, rag right is the most
• legible (to readers of western alphabets).
• Lines of text are generally more legible Lines
  of text are generally more legible Lines of
  text are generally more legible
• with more line spacing than defaults,
• until they appear to separate into distinct with
  more line spacing than defaults,
• lines. When squinting, the paragraph with
  more line spacing than defaults,
• should appear as regular and grey until they
  appear to separate into distinct
• texture.
• lines. When squinting, the paragraph until
  they appear to separate into distinct
• should appear as regular and grey
• lines. When squinting, the paragraph
  texture.

77
Typography Alignment

• Justified type results in irregular spacing
  between
• words, or between words and letters.
• It also results in rivers of white space.
• Both impede legibility.
• Justified type results in irregular
  spacing
• Between words, or between words and letters.
• It also results in rivers of white
  space.
• Both impede legibility.
  Newspapers
• Historically only justify type for reasons
  of
• Tradition and visual real estate ( per
  inch).

78
Typography Alignment

• Centered type (except in small amounts) generally
  
• impedes legibility.
• Justified type results in irregular spacing
• Between words, or between words and letters.
• It also results in rivers of white space.
• Both impede legibility. Newspapers
• Historically only justify type for reasons of
• tradition and visual real estate ( per inch).
• Try writing your thesis this way and see how
• far you get.

79
Typography Alignment

• Centered type (except in small amounts) generally
  
• impedes legibility.
• This is because most of us are trained to read
  left
• to right, and because the shape created on the
  left
• side becomes a figure or shape that competes for
• attention (figure/ground). The shape of the
• paragraph itself dominates, impeding legibility.

80
Typography Alignment

• Centered type (except in small amounts) generally
  
• impedes legibility.
• Justified type results in irregular spacing
• Between words, or between words and letters.
• It also results in rivers of white space.
• Both impede legibility. Newspapers
• Historically only justify type for reasons of
• tradition and visual real estate ( per inch).
• Try writing your thesis this way and see how
• far you get.

81
Typography Line length

• For text, the optimum line length is
• 55 75 characters per line (counting spaces).
• .

82
Typography Margins

• ALWAYS provide a margin
• lack of margins interfere
• with readability and legibility

83
Typography Margins

• ALWAYS provide a margin
• lack of margins interfere
• with readability and legibility
• Remember this!

84
Typography Hierarchy

• How do you lead the user through visual
• information (by visual means)?
• Some traditional navigation devices
  (conventions)
• Size
• Color
• Composition (where it is on the rectangle)
• Page numbers
• Type and Image emphases

85
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

86
Color

• Reflective vs. Emitted
• 1. We see the world via a reflective color model
  Light strikes a surface and is reflected to our
  eyes properties of surface dictate color
  (printers, objects)
• 2. Colors on display follow the emitted model

87
Color

• Monitors typically work on the RGB scheme
• 0255 value each red, green, blue
• R 170 G43 B 211

88
Color Attributes

• Hue
• native color, pigment
• Saturation
• relative purity, brightness,
• or intensity of a color
• Value
• lightness or darkness
• of a color
• Image from Adventures in HSV Space
• Darrin Cardani dcardani_at_buena.com

89
Color

• Use it for a purpose, not just because you can
• or to just add some color

90
Color Guidelines

• Display color images on a black, white, or
• grey background
• Avoid brown and green as background colors
• Be sure foreground colors contrast
• (in both brightness and hue)
• with background colors

91
Color Guidelines

• Use color sparingly design in b/w
• then add color where appropriate
• Use color to
• draw attention
• communicate organization
• indicate status
• establish relationships

92
Color Guidelines

• Avoid using color in non-task related ways
• (experiment coming next)

93
How many small rectangles?
94
How many small rectangles?
95
How many small ovals?
96
How many small ovals?
97
Find the Q and Z
98
Find the...
C
V
M
G
R
T
D
P
Q
F
A
Z
W
J
99
Color Guidelines

• Color is good for supporting search
• Do not use color without another redundant cue
• Color-blindness
• Monochrome monitors
• Be consistent with color associations from jobs
  and cultures

100
Color Guidelines

• Limit coding to 4 distinct colors
• Avoid using saturated blues for text
• or small, thin lines
• Use color on b/w or gray, or b/w on color

101
Color Guidelines

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

These colors vibrate they will give you a
102
Color Associations
Culturally specific, contextually specific

• Red
• aggression, love
• hot, warning
• Pink
• female, cute, cotton candy
• Orange
• warm, autumn, Halloween

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

103
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)
104
Agenda

• The Role of Graphic Design
• Principles of Graphic Design
• Animation/Rollovers
• Typography
• Color
• Icons

105
Icon Design

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

106
Icon Design

• Represent object or action in a familiar and
• recognizable manner

107
Icon Design

• Represent object or action in a familiar and
• recognizable manner

108
Icon Design

• Represent object or action in a familiar and
• recognizable manner

109
Icon Legibility

• Limit number of different icons
• Make icon stand out from background
• Ensure that a singly selected icon is clearly
  visible
• when surrounded by unselected ones

110
Icon Legibility

• Make each icon distinctive (legible)
• but
• Make icons harmonious members of an icon family
• Avoid excessive detail
• Accompany with names
• (though it shouldnt be necessary)

111
Icon Design

• Is the symbolic aspect of the icon meaningful?

112
Icon Design

• Is the symbolic aspect of the icon meaningful?

113
Icon Design

• Is the symbolic aspect of the icon meaningful?

114
Icon Design

• Meaning is ASCRIBED to icons -- they dont have
• an essential, measurable essence.

115
Role of Graphic Design in HCI

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

116
Role of Graphic Design in HCI

• The look and feel portion of an interface
• What someone initially encounters
• Sets a framework for understanding content
• Thus, reduces cognitive load

117
Role of Graphic Design in HCI

• The look and feel portion of an interface
• What someone initially encounters

118
Role of Graphic Design in HCI

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