Design that delivers!

EVA ANDERSON Center for Health Literacy

Plain Talk in Complex Times | Alexandria, VA | September 22, 2011

1. Design basics

2. Critiquing design

3. Group critique

Design basics

• Typography• 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

Color

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