Graphic Design

1
Graphic Design

• Continued!

2
Agenda

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

3
Color

• 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
• Colors on display follow the emitted model

4
Color

• On monitors, typically RGB scheme
• 0-255 value each red, green, blue
• R 170 G43 B 211

5
Color Attributes

• Hue
• native color, pigment
• Saturation
• relative purity, brightness, or intensity of a
  color
• Value
• lightness or darkness of a color

6
Color

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

7
Color Guidelines

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

8
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

9
Color Guidelines

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

10
Color Guidelines

• Limit coding to 8 distinct colors (4 better)
• Avoid using saturated blues for text or small,
  thin lines
• Use color on b/w or gray, or b/w on color
• To express difference, use high contrast colors
  (and vice versa)
• Make sure colors do not vibrate

11
Color Associations
Culturally specific, contextually specific

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

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

12
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)
13
Agenda

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

14
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

15
Icon Design

• Represent object or action in a familiar and
  recognizable manner

16
Icon Design

• Represent object or action in a familiar and
  recognizable manner

17
Icon Design

• Represent object or action in a familiar and
  recognizable manner

18
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

19
Icon Legibility

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

20
Icon Design

• Is the symbolic aspect of the icon meaningful?

21
Icon Design

• Is the symbolic aspect of the icon meaningful?

22
Icon Design

• Is the symbolic aspect of the icon meaningful?

23
Icon Design

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

24
Role of Graphic Design in HCI

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

25
Quotable Quotes Practice

• The secret to having good ideas is to have many
  ideas -- Bill Buxton
• Youve got 100,000 bad drawings inside you.
  Youre here at art school to get them out. --
  Chuck Jones
• Design takes practice!!

26
Quotable Quotes

• Where principle is put to work, not as a recipe
  or as a formula, there will always be style --
  Le Corbusier
• Every curve and line has to have real meaning
  it cant be arbitrary. -- Frank Lloyd Wright

27
Design Guidelines/Principles

• General guidelines (rules of thumb) to help
  create more usable systems
• Can be subtle, even contradictory