Graphic Design
Christine Robson
October 23, 2007
MySpace Worm







Samy’s little script (October 4, 2005)
"but most of all, Samy is my hero"
Viewing the profile caused the payload to be
planted on their page
Executing the payload triggered a friend
request
Within 20 hours over one million users had
run the payload
Cross-site scripting
Never trust user entered data. Never.
Topics






Graphic Design
Simplicity and Elegance
Grid-based Design
Grouping Principles
Animation
Color & Fonts
First off… what’s wrong
with this Picture?
Design

Design is about communication
– What information are you trying to
communicate?

Form & Function
– Form- good designs are a pleasure to use
– Function- good design supports user
tasks
Principles of Modern Design





Form follows function
Economy of form
Limited vocabulary
Minimalism
Integrity of materials
Form but not Function

MIT Stata Center
Form and Function

Modern Art Museum of Fort Worth
Form Follows Function
Good Graphic Design





Simplicity
Contrast
White space
Balance
Alignment
Simplicity & Elegance


Simple, minimalist designs are usually
the most effective
Elegance:
– Reduction: include only essential
elements
– Regularization: use one set of shapes
colors forms etc
– Leverage: Use elements in multiple roles
(i.e. scrollbar)
Benefits

Approachability
– Visual elements rapidly understood
– Invites further exploration

Recognizability
– Less visual clutter makes it easier to recognise what is
there

Immediacy
– Eye is immediately drawn to important visual elements
– Details that remain are more prominent

Unity
– Unifying themes
– Forms, colors, components with like qualities.
White Space



Use white space for grouping, instead of
lines
Use margins to draw eye around design
Integrate figure and ground
– Object should be scaled proportionally to its
background

Don’t crowd controls together
– Crowding creates spatial tension and inhibits
scanning
White Space Avoids
Visual Noise
9
9
8
8
7
7
6
6
5
5
4
4
3
3
2
2
1
1
0
0
Mary
Suzie
Peter
Bob
Jane
Mary
Suzie
Peter
Bob
Jane
Balance & Symmetry


Choose an axis (usually vertical)
Distribute elements equally around the
axis
– Equalize both mass and extent
Alignment

Align elements to one axis
– i.e. vertical left

Keep consistency with your content
– Same things on the same axis
Grids


Achieves both alignment and balance
Keep *exactly* to the grid
– Those 20 Pixels really matter!

Proximity and grouping are the key
elements of your layout
– Be wary of false groupings
Grid Design



Structure Content
using hidden lines
Organize text and
images in a
rational, easy to
absorb manner
Yes it’s a buzzword,
but it’s worth the
buzz!
White Space

Lines and boxes are a failure of design
– If your design relies on the presence of
the line or box, you’ve failed at layout

The grid is a good way to avoid lines
and push white space
Squint to Find Groups



Think your design makes sense?
Take off your glasses, squint your
eyes, and look for groups
Is the layout still clear?
Grouping Principles









Figure/ground
Proximity
Similarity
Symmetry
Connectedness
Continuity
Closure
Common fate
Transparency
Proximity
Closure
Connectedness
Continuity

Smooth vs. sharp lines
Common Fate
Animation
Why Animate?

Purpose of application
– Games, simulations, video players etc

Feedback
– Visualizing changes not made by user
– Keeping user oriented during transitions
– Displaying progress

Help
– “animated icons”
– Moving mouse around to show now to user UI


Reinforcing illusion of direct manipulation
Aesthetic appeal and engagement
Why not to Animate…

Existing events are often enough to
provide incremental screen changes
– Users mouse events drive scrolling
– Program events can drive a progress bar


But bursty or slow events may need
animation
Short distances and short time periods
– Time < 100 ms
– Distance < width of the moving object
Animation Design

Big jumps are disruptive
– Frame rate >20 fps
– Use motion blur if frame rate can’t keep up with
object speed
– Rule of Thumb: if object moves more then it’s
width between frames, fill in with motion blur
(smear of color or multiple images)

Keep it simple!
– Use animation sparingly
– Keep feedback animation short
How not to use Animation
http://www.brown.edu/
Color & Fonts
Colors

Use few colors
– Unless you’re Monet, limit yourself to 3
– Use hues
– Ensure good color contrast for text
– Use color pickers

Avoid saturated colors
– 0x00FFFF is visually painful

Be consistent and match expectations
Color Perception
Color Pickers



Let someone else pick for you
Pick colors based on graphics
Complementary colors
– Don’t clash!

Use colors already chosen for you
– Ie, the facebook blue
Munsell Color Utility
http://www.wallkillcolor.com
What Color is the Web?
Lot’s of gray,
but tending to
blue
Most common “color”
.COM
.KR
Varies based on domain!
Accessibility: Color




Color Blindness
Red on blue text
Small blue text
can be very hard to read
Color should not be the only way you
establish contrast!
Fonts

Most fonts were designed for printing
on paper
– Smoother fonts are easy to read

Who likes to read Impact?
– Times font was commissioned by the London
Times
– Courier is the most readable
font for paper printing

The Pixel Problem
Serif and Sans Serif
Sans Serif font
Serif font
Serif font with serifs
highlighted in red
Web Fonts
The generic font families defined in HTML and CSS are:
Serif:
The quick brown fox jumps over the lazy dog.
Sans-serif:
The quick brown fox jumps over the lazy dog.
Cursive:
The quick brown fox jumps over the lazy dog.
Fantasy:
The quick brown fox jumps over the lazy dog.
Monospace:
The quick brown fox jumps over the lazy dog.
(Under Windows API, they are identified as Roman, Swiss,
Script, Decorative, and Modern, respectively).
Font & Color
Black Background, White text… Do Your eyes hurt yet?
How about now?
KISS: Keep It Simple
Stupid!

Good rules of thumb:
– You get one font
– You get ~three colors
– You shouldn’t need boxes or lines
– If you can remove something, do so

Don’t try to get fancy!
Steal Good Design Ideas

“Good artists borrow [from other
artists], but great artists steal! “
– Pablo Picasso

Good graphic designers have much
more training then you do
– They are artists

Feel no shame about stealing their
ideas and designs
Nuts & Bolts

Exams Back Thursday

Homework assignment handout
– Final Project Demo + Poster

Readings for Thursday on Google
Group later today