Eva Anderson - Graphic Design for Readability

Design that delivers! EVA ANDERSON Center for Health Literacy Plain Talk in Complex Times | Alexandria, VA | September 22, 2011

Design basics
Critiquing design
Group critique

Design basics
T ypography
White space
Imagery
Color
Branding

Typography

95% of what is commonly referred to as web design is typography. informationarchitects.jp/100E2R

Samples of fonts for legibility

Recommended standard PC fonts

In search of the perfect line length
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.

Fonts for visually impaired
A sans serif font in a medium weight is preferred for its consistent stroke widths.
(Normal character spacing)
A sans serif font in a medium weight is preferred for its consistent stroke widths. (Character spacing expanded 0.3)

KISS me and I ’ll read you
Choose two fonts at most, preferably a sans serif for headers and a serif for text.

Never force condense fonts Meta Plus Bold Meta Plus Bold condensed 70% Helvetica Neue Bold Condensed

An illegible type, set it how you will, cannot be made readable.
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.
Dowding 1957, p.5; in Lund, 1999

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

Think white space

Whether a website or a brochure, packing your layout with information isn’t difficult, but making it simple and easy-to-use is.
Distill! Distill! Distill! Then distill again!
Give active white space to the layout to reduce eye stress.
White space keeps the reader engaged – it makes it easier to focus on the content.
If used properly, white space should act like corridors, helping the reader navigate the layout.

It's a dance between type and graphic elements. White space is the music. Hierarchy is the beat, defined by color and size.

Think in terms of units

CA PCIP examples

Forms need white space too!

Imagery

Tips for engaging imagery
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%

The image should:
elicit a feeling of relating to the subject
convey the story quickly
arouse curiosity about the story behind the image
The right cropping helps!

The viewer should feel that they could walk into a landscape photo

Reflective vs Transmissive
Paper and ink bounce light (reflective)
Monitors emit light (transmit)

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}

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

Branding
Why brand?
Tips

Why bother branding?
A consistent image creates a strong image
Unifies all the pieces of an organization, program or campaign
Tells the public your entity is professional and reliable
A good brand is distinctive, easily recognizable and increases memorability

Brand your campaign with consistent fonts, graphic elements, photo treatments and color palette. KISS!!!

Simple tips for successful branding
Choose a simple color palette
Choose strong, recognizable graphic elements
Establish a photo or illustration treatment
Leave the tricks to the experts
Remember: Novices want to play. Experts know to throw away.

When in doubt, keep it simple.

Thank you.

Eva Anderson - Graphic Design for Readability

by PlainTalkConf

Accessibility

Categories

Upload Details

Usage Rights

Statistics