Graphic Design 2

1
Graphic Design 2

• More on the look feel

2
Agenda

• Typography
• Color
• Icons
• Project part 1 review
• Project part 2 preview

3
Typography

• Characters and symbols should be easily
  noticeable and distinguishable
  
• Avoid heavy use of all upper case
• Studies have found that mixed case promotes
  faster reading

HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT
S ALL IN
CAPITALS AND YOU NEVER GET A REST
How much fun is it to read all this text when it
s all in
capitals and you never get a rest
4
Typography

• 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 (not really, but close enough)

5
Wow
Yuk
6
Typography

• Serif font - readability
• Sans serif font - legibility
• (both are variable spaced)
• Monospace font

7
Fonts

• Serif
• Times, Bookman
• Sans serif
• Tahoma, Arial

• Decorative
• Comic Sans
• Script
• Script
• Monspaced
• Courier, Lucida

8
Typography

• Guidelines
• Use serif for long, extended text sans serif for
  headlines
  
• Use 1-2 fonts/typefaces (3 max)
• Use of normal, italics, bold is OK
• Never use bold, italics, capitals for large
  sections of text
  
• Use 1-3 point sizes max
• Be careful of text to background color issues

9
More Wow
10
Font Control
11
Example
Which do you prefer?
CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DE
CATUR
Crafts and Games Arts Festival Of Atlanta and De
catur
SEPTEMBER 19-24
September 19-24 Come and Enjoy!
COME AND ENJOY
Applies lots of these principles
12
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

13
Color

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

14
Color Attributes

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

15
Color

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

16
Color Guidelines

• Display color images on black background
• Choose bright foreground color (white, bold
  green,)
  
• Avoid brown and green as background colors
• Be sure fg colors contrast in both brightness and
  hue with bg colors

17
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
• (experiment coming next)

18
How many...
19
Find the...
U
O
C
B
L
M
H
R
G
T
V
D
P
Q
F
V
I
A
E
N
Y
Z
W
K
X
S
J
20
Color Guidelines

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

21
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)
  

22
Color Associations

• 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

23
Color Suites

• Designers often pick a palette of 4 or 5 colors

Professional
Monochromatic
Southwestern
24
Icon Design

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

25
Icon Design

• Ensure that singly selected icon is clearly
  visible when surrounded by unselected ones
  
• Make each icon distinctive
• Make icons harmonious members of icon family
• Avoid excessive detail

26
Icon Design
What do each of these signify?
Almost always want to accompany your icons by
a text label
27
Its All About Design...
28
Project Part 1

• Grading
• Strengths weaknesses

29
Project Part 2

• Design alternatives (many!)
• No working system
• Drawings, sketches, mock-ups, etc.
• What not to do
• UIWeb article
• Critique each design (strengths, weaknesses)
• What in part 1 leads to this design?

30
Exam

• Sample test
• Short answer

31
Upcoming

• Rapid prototyping
• Exam (Wed 3rd)
• Dialog design
• lots of styles