Eva Anderson - Graphic Design for Readability

1,816 views

Published on

"Graphic Design for Readability" was presented at the Center for Health Literacy Conference 2011: Plain Talk in Complex Times by Eva Anderson.

Description: Learn design strategies that improve the readability and usability of print and Web materials. This workshop is for people who aren't designers but have to do their own graphic design at work and for people who hire graphic designers.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,816
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Eva Anderson - Graphic Design for Readability

  1. 1. Design that delivers! EVA ANDERSON Center for Health Literacy Plain Talk in Complex Times | Alexandria, VA | September 22, 2011
  2. 2. <ul><ul><li>Design basics </li></ul></ul><ul><ul><li>Critiquing design </li></ul></ul><ul><ul><li>Group critique </li></ul></ul>
  3. 3. Design basics <ul><ul><li>T ypography </li></ul></ul><ul><ul><li>White space </li></ul></ul><ul><ul><li>Imagery </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Branding </li></ul></ul>
  4. 4. Typography
  5. 5. 95% of what is commonly referred to as web design is typography. informationarchitects.jp/100E2R
  6. 8. Samples of fonts for legibility
  7. 9. Recommended standard PC fonts
  8. 10. In search of the perfect line length <ul><li>A maximum of 50 characters (or 7-14 words) is an optimum line length. Any longer, and you lose the reader’s ability to stay focused. </li></ul>
  9. 11. Fonts for visually impaired <ul><li>A sans serif font in a medium weight is preferred for its consistent stroke widths. </li></ul><ul><li>(Normal character spacing) </li></ul><ul><li>A sans serif font in a medium weight is preferred for its consistent stroke widths. (Character spacing expanded 0.3) </li></ul>
  10. 12. KISS me and I ’ll read you <ul><li>Choose two fonts at most, preferably a sans serif for headers and a serif for text. </li></ul>
  11. 13. Never force condense fonts Meta Plus Bold Meta Plus Bold condensed 70% Helvetica Neue Bold Condensed
  12. 14. <ul><li>An illegible type, set it how you will, cannot be made readable. </li></ul><ul><li>But the most legible of types can be made unreadable if it is set to too wide a measure, or in too large or too small a size for a particular purpose. </li></ul><ul><li>Dowding 1957, p.5; in Lund, 1999 </li></ul>
  13. 17. <ul><li>This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). This is ten pt type on 13 pt leading (line spacing). </li></ul>This is ten pt type on 14 pt leading (line spacing). This is ten pt type on 14 pt leading (line spacing). This is ten pt type on 14 pt leading (line spacing). This is ten pt type on 14 pt leading (line spacing). This is ten pt type on 14 pt leading (line spacing). This is ten pt type on 14 pt leading (line spacing). This is ten pt type on This is ten pt type on 15 pt leading (line spacing). This is ten pt type on 15 pt leading (line spacing). This is ten pt type on 15 pt leading (line spacing). This is ten pt type on 15 pt leading (line spacing). This is ten pt type on 15 pt leading (line spacing). This is ten pt type on 15 pt leading (line spacing). This is ten pt type on A good rule for leading: 140% of the font size. Minimally 130% and comfortably 150%. 130 140 150
  14. 20. Think white space
  15. 21. <ul><li>Whether a website or a brochure, packing your layout with information isn’t difficult, but making it simple and easy-to-use is. </li></ul><ul><li>Distill! Distill! Distill! Then distill again! </li></ul><ul><li>Give active white space to the layout to reduce eye stress. </li></ul><ul><li>White space keeps the reader engaged – it makes it easier to focus on the content. </li></ul><ul><li>If used properly, white space should act like corridors, helping the reader navigate the layout. </li></ul>
  16. 22. It's a dance between type and graphic elements. White space is the music. Hierarchy is the beat, defined by color and size.
  17. 23. Think in terms of units
  18. 24. CA PCIP examples
  19. 25. <ul><li>Forms need white space too! </li></ul>
  20. 27. Imagery
  21. 28. <ul><li>Tips for engaging imagery </li></ul>Images should be high quality, of good contrast, not fuzzy or pixelated, and to scale, never stretched 300 ppi at 100% 100 ppi at 300%
  22. 29. <ul><li>The image should: </li></ul><ul><ul><li>elicit a feeling of relating to the subject </li></ul></ul><ul><ul><li>convey the story quickly </li></ul></ul><ul><ul><li>arouse curiosity about the story behind the image </li></ul></ul><ul><li>The right cropping helps! </li></ul>
  23. 30. <ul><li>The viewer should feel that they could walk into a landscape photo </li></ul>
  24. 31. Color
  25. 32. Reflective vs Transmissive <ul><ul><li>Paper and ink bounce light (reflective) </li></ul></ul><ul><ul><li>Monitors emit light (transmit) </li></ul></ul>
  26. 33. For screen design, too much contrast is not ideal. Black type on a stark wh ite background starts to flicker and tires the eye. { R=90 G=77 B=82} For screen design, too much contrast is not ideal. Black type on a stark white background starts to flicker and tires the eye. { Black}
  27. 34. For best contrast when designing for the visually impaired, choose dark colors from the bottom half of the color wheel, and lighter colors from the top half. Lighthouse International, lighthouse.org/accessibility
  28. 37. Branding <ul><ul><li>Why brand? </li></ul></ul><ul><ul><li>Tips </li></ul></ul>
  29. 38. <ul><li>Why bother branding? </li></ul><ul><ul><li>A consistent image creates a strong image </li></ul></ul><ul><ul><li>Unifies all the pieces of an organization, program or campaign </li></ul></ul><ul><ul><li>Tells the public your entity is professional and reliable </li></ul></ul><ul><ul><li>A good brand is distinctive, easily recognizable and increases memorability </li></ul></ul>
  30. 39. Brand your campaign with consistent fonts, graphic elements, photo treatments and color palette. KISS!!!
  31. 46. <ul><li>Simple tips for successful branding </li></ul><ul><ul><li>Choose a simple color palette </li></ul></ul><ul><ul><li>Choose strong, recognizable graphic elements </li></ul></ul><ul><ul><li>Establish a photo or illustration treatment </li></ul></ul><ul><ul><li>Leave the tricks to the experts </li></ul></ul><ul><ul><li>Remember: Novices want to play. Experts know to throw away. </li></ul></ul>
  32. 47. <ul><li>When in doubt, keep it simple. </li></ul>
  33. 48. <ul><li>Thank you. </li></ul>

×