Graphic Design

1. Graphic Design Christine Robson October 23, 2007

2. 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.

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

4. First off… what’s wrong with this Picture?

6. 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

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

8. Form but not Function • MIT Stata Center

9. Form and Function • Modern Art Museum of Fort Worth

10. Form Follows Function

11. Good Graphic Design • Simplicity • Contrast • White space • Balance • Alignment

12. 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)

13. 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.

14. 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

15. White Space Avoids Visual Noise

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

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

19. 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

20. 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! Grid Design

22. 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

24. 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?

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

30. Proximity

31. Closure

32. Connectedness

33. Continuity • Smooth vs. sharp lines

34. Common Fate

35. Animation

36. 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

37. 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

38. 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

39. How not to use Animation http://www.brown.edu/

40. Color & Fonts

41. 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

42. Color Perception

43. 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

44. Munsell Color Utility http://www.wallkillcolor.com

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

46. 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!

47. 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

48. Serif and Sans Serif

49. Web Fonts The generic font families defined in HTML and CSS are: (Under Windows API, they are identified as Roman, Swiss, Script, Decorative, and Modern, respectively).

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