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 the most effective designs are usually 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 8 7 2 1 0 4 3 6 5 Mary Suzie Peter Bob Jane 9 8 7 1 0 3 2 6 5 4 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 : Sans-serif : Cursive : Fantasy: Monospace: The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

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