Visual Design for Instruction: Using Graphic Design Principles to Improve

Legibility and Readability

Abbie Brown, PhD

Professor and Author:

Instructional Design/Technology

Legibility and Readability

• Readability = understandability

– One’s ability to receive the intended message of the whole document

• Legibility = clarity of words and images

– One’s ability to determine what the letters and pictures are supposed to be

Readability Example (the good)

Comedy and Tragedy

Classical comedy is often presented as the rise in fortune of a sympathetic central character.

Classical tragedy is often presented as the downfall of a basically good person who suffers based on a fatal error or misjudgment.

The masks of Thalia (the muse of comedy) and

Melpomene (the muse of tragedy) are a

traditional symbol of theater arts.

Readability Example (the bad)

Comedy and Tragedy

Classical comedy is often presented as the rise in fortune of a sympathetic central character.

Classical tragedy is often presented as the downfall of a basically good person who suffers based on a fatal error or misjudgment.

The masks of Thalia (the muse of comedy) and Melpomene (the muse of tragedy) are a traditional symbol of theater arts.

Legibility Example (the good)

Comedy and Tragedy

Classical comedy is often presented as the rise in fortune of a sympathetic central character.

Classical tragedy is often presented as the downfall of a basically good person who suffers based on a fatal error or misjudgment.

The masks of Thalia (the muse of comedy) and

Melpomene (the muse of tragedy) are a

traditional symbol of theater arts.

Legibility Example (the bad)

Comedy and Tragedy

Classical comedy is often

presented as the rise in

fortune of a sympathetic central character.

Classical tragedy is often presented

as the downfall of a basically good

person who suffers based on a fatal

error or misjudgment. The masks of Thalia

(the muse of comedy)

and Melpomene (the

muse of tragedy) are

a traditional symbol of

theater arts.

We apply tested and reliable visual design principles to increase the readability and legibility of anything we want people to read and understand.

Design Tip: Use images with faces to attract readers. People immediately focus attention on faces (human, animal, or cartoon).

Basic Visual Design Principles

• Contrast

• Repetition

• Alignment

• Proximity The unfortunate acronym - Williams, 2008

Why a duck? We’ll be using this image in our examples of contrast, repetition, alignment and proximity. It’s a thematic element (repetition) – more on this in just a moment.

Examples of C.R.A.P. in action

Getting our ducks in a row

Contrast

Getting our ducks in a row

Repetition

Getting our ducks in a row

Alignment

Getting our ducks in a row

Alignment

Getting our ducks in a row

Proximity

Getting our ducks in a row

Visual Design Principles!

Proximity

Getting our ducks in a row

Visual Design Principles!

Proximity

Getting our ducks in a row

Visual Design Principles!

Negative Space

Design Critique

Telecommuting

Working from home full-time or part-time is an attractive option for some people. Ensuring telecommuters have the resources they need to be productive employees takes careful planning and regular systemic evaluation. It might come as a surprise to know that over 20% of Londale, Inc. staff telecommute at least three days a month.

Londale, Inc. A division of P.L. Enterprises

Thank You Notes

Sending a Thank You note can help establish a warm,

personal connection with prospective client. The note

can thank the client for taking a meeting with you,

formalizing a business relationship, or

acknowledging a gesture on the client’s part.

Londale, Inc. A division of P.L. Enterprises

Working for Londale, Inc. Corporate and personal goals working in concert.

Full-time or Part-time?

Employee Benefits

Career Training

Retirement Planning

Design Critique Advertisements and Labels

Visual Design for Instruction: Using Graphic Design Principles to Improve

Legibility and Readability

Abbie Brown, PhD

Professor and Author:

Instructional Design/Technology