Graphic Design Christine Robson October 23, 2007

MySpace Worm Samy’s little script (October 4, 2005) Samy’s little script (October 4, 2005) "but most of all, Samy is my hero" "but most of all, Samy is my hero" Viewing the profile caused the payload to be planted on their page Viewing the profile caused the payload to be planted on their page Executing the payload triggered a friend request Executing the payload triggered a friend request Within 20 hours over one million users had run the payload Within 20 hours over one million users had run the payload Cross-site scripting Cross-site scripting Never trust user entered data. Never. Never trust user entered data. Never.

Topics Graphic Design Graphic Design Simplicity and Elegance Simplicity and Elegance Grid-based Design Grid-based Design Grouping Principles Grouping Principles Animation Animation Color & Fonts Color & Fonts

First off… what’s wrong with this Picture?

Design Design is about communication Design is about communication –What information are you trying to communicate? Form & Function Form & Function –Form- good designs are a pleasure to use –Function- good design supports user tasks

Principles of Modern Design Form follows function Form follows function Economy of form Economy of form Limited vocabulary Limited vocabulary Minimalism Minimalism Integrity of materials Integrity of materials

Form but not Function MIT Stata Center MIT Stata Center

Form and Function Modern Art Museum of Fort Worth Modern Art Museum of Fort Worth

Form Follows Function

Good Graphic Design Simplicity Simplicity Contrast Contrast White space White space Balance Balance Alignment Alignment

Simplicity & Elegance Simple, minimalist designs are usually the most effective Simple, minimalist designs are usually the most effective Elegance: 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 Approachability –Visual elements rapidly understood –Invites further exploration Recognizability Recognizability –Less visual clutter makes it easier to recognise what is there Immediacy Immediacy –Eye is immediately drawn to important visual elements –Details that remain are more prominent Unity Unity –Unifying themes –Forms, colors, components with like qualities.

White Space Use white space for grouping, instead of lines Use white space for grouping, instead of lines Use margins to draw eye around design Use margins to draw eye around design Integrate figure and ground Integrate figure and ground –Object should be scaled proportionally to its background Don’t crowd controls together Don’t crowd controls together –Crowding creates spatial tension and inhibits scanning

White Space Avoids Visual Noise

Balance & Symmetry Choose an axis (usually vertical) Choose an axis (usually vertical) Distribute elements equally around the axis Distribute elements equally around the axis –Equalize both mass and extent

Alignment Align elements to one axis Align elements to one axis –i.e. vertical left Keep consistency with your content Keep consistency with your content –Same things on the same axis

Grids Achieves both alignment and balance Achieves both alignment and balance Keep *exactly* to the grid Keep *exactly* to the grid –Those 20 Pixels really matter! Proximity and grouping are the key elements of your layout Proximity and grouping are the key elements of your layout –Be wary of false groupings

Grid Design Structure Content using hidden lines Structure Content using hidden lines Organize text and images in a rational, easy to absorb manner Organize text and images in a rational, easy to absorb manner Yes it’s a buzzword, but it’s worth the buzz! Yes it’s a buzzword, but it’s worth the buzz!

White Space Lines and boxes are a failure of design 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 The grid is a good way to avoid lines and push white space

Squint to Find Groups Think your design makes sense? Think your design makes sense? Take off your glasses, squint your eyes, and look for groups Take off your glasses, squint your eyes, and look for groups Is the layout still clear? Is the layout still clear?

Grouping Principles Figure/ground Figure/ground Proximity Proximity Similarity Similarity Symmetry Symmetry Connectedness Connectedness Continuity Continuity Closure Closure Common fate Common fate Transparency Transparency

Proximity

Closure

Connectedness

Continuity Smooth vs. sharp lines Smooth vs. sharp lines

Common Fate

Animation

Why Animate? Purpose of application Purpose of application –Games, simulations, video players etc Feedback Feedback –Visualizing changes not made by user –Keeping user oriented during transitions –Displaying progress Help Help –“animated icons” –Moving mouse around to show now to user UI Reinforcing illusion of direct manipulation Reinforcing illusion of direct manipulation Aesthetic appeal and engagement Aesthetic appeal and engagement

Why not to Animate… Existing events are often enough to provide incremental screen changes 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 But bursty or slow events may need animation Short distances and short time periods Short distances and short time periods –Time < 100 ms –Distance < width of the moving object

Animation Design Big jumps are disruptive 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! Keep it simple! –Use animation sparingly –Keep feedback animation short

How not to use Animation

Color & Fonts

Colors Use few 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 Avoid saturated colors –0x00FFFF is visually painful Be consistent and match expectations Be consistent and match expectations

Color Perception

Color Pickers Let someone else pick for you Let someone else pick for you Pick colors based on graphics Pick colors based on graphics Complementary colors Complementary colors –Don’t clash! Use colors already chosen for you Use colors already chosen for you –Ie, the facebook blue

Munsell Color Utility

What Color is the Web? Most common “color” Lot’s of gray, but tending to blue.COM.KR Varies based on domain!

Accessibility: Color Color Blindness Color Blindness Red on blue text Red on blue text Small blue text can be very hard to read Small blue text can be very hard to read Color should not be the only way you establish contrast! Color should not be the only way you establish contrast!

Fonts Most fonts were designed for printing on paper Most fonts were designed for printing on paper –Smoother fonts are easy to read Who likes to read Impact? 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 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: SerifSerif: The quick brown fox jumps over the lazy dog. Sans-serifSans-serif: The quick brown fox jumps over the lazy dog. CursiveCursive: 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). Windows API

Font & Color Black Background, White text… Do Your eyes hurt yet? How about now?

KISS: Keep It Simple Stupid! Good rules of thumb: 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! Don’t try to get fancy!

Steal Good Design Ideas “Good artists borrow [from other artists], but great artists steal! “ “Good artists borrow [from other artists], but great artists steal! “ –Pablo Picasso Good graphic designers have much more training then you do Good graphic designers have much more training then you do –They are artists Feel no shame about stealing their ideas and designs Feel no shame about stealing their ideas and designs

Nuts & Bolts

Exams Back Thursday Exams Back Thursday Homework assignment handout Homework assignment handout –Final Project Demo + Poster Readings for Thursday on Google Group later today Readings for Thursday on Google Group later today