Fall 2002 CS/PSY 6750 1

Graphic Design 2More on the “look & feel”

Agenda• Typography• Color• Icons• Project review• Exam review

Fall 2002 CS/PSY 6750 2

Your Screen?

Fall 2002 CS/PSY 6750 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 readingHOW MUCH FUN IS ITTO READ ALL THIS TEXTWHEN IT’S ALL IN CAPITALS AND YOUNEVER GET A REST

How much fun is itto read all this textwhen it’s all in capitals and younever get a rest

Fall 2002 CS/PSY 6750 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)

Fall 2002 CS/PSY 6750 5

Wow

Yuk

Fall 2002 CS/PSY 6750 6

Typography

• Serif font - readability

• Sans serif font - legibility− (both are variable spaced)

• Monospace font

Fall 2002 CS/PSY 6750 7

Fonts

• Serif− Times, Bookman

• Sans serif− Tahoma, Arial

• Decorative− Comic Sans

• Script− Script

• Monspaced− Courier, Lucida

Fall 2002 CS/PSY 6750 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

Fall 2002 CS/PSY 6750 9

More Wow

Fall 2002 CS/PSY 6750 10

Font Control

Fall 2002 CS/PSY 6750 11

Example

CRAFTS AND GAMESARTS FESTIVAL

OF ATLANTA AND DECATUR

COME AND ENJOY

SEPTEMBER 19-24

Crafts and Games

Arts FestivalOf Atlanta and Decatur

September 19-24

Come and Enjoy!

Which do you prefer?

Applies lots of these principles

Fall 2002 CS/PSY 6750 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• On monitors, typically RGB scheme

− 0-255 value each red, green, blue

− R: 170 G:43 B: 211

Fall 2002 CS/PSY 6750 13

Color Attributes

• Hue− native color, pigment

• Saturation− relative purity, brightness, or intensity of a

color• Value

− lightness or darkness of a color

Fall 2002 CS/PSY 6750 14

Color

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

Fall 2002 CS/PSY 6750 15

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

Fall 2002 CS/PSY 6750 16

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

Fall 2002 CS/PSY 6750 17

Visual Exercise

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

Fall 2002 CS/PSY 6750 18

How many...

Fall 2002 CS/PSY 6750 19

Visual Exercise

• Left: Find the red letter

• Right: Find the ‘A’

Fall 2002 CS/PSY 6750 20

Find the...

V

RZ

M

F

G

Q

J

C

T

D

W

WP

KV

LH

IN

E B

S

U O

X

Y

VR

Z

M

F

GQ

JC

TD

W

AP

K

V

L HI N

E B

S

U

OXY

RZ

DK

S W V

S

X

Fall 2002 CS/PSY 6750 21

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

Fall 2002 CS/PSY 6750 22

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)

Fall 2002 CS/PSY 6750 23

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

Fall 2002 CS/PSY 6750 24

Color Suites

• Designers often pick a palette of 4 or 5 colors

Professional

Monochromatic

Southwestern

Fall 2002 CS/PSY 6750 25

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

Fall 2002 CS/PSY 6750 26

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

Fall 2002 CS/PSY 6750 27

Icon Design

What do each of these signify?

Almost always want to accompany your iconsby a text label

Fall 2002 CS/PSY 6750 28

It’s All About Design...