ABSTRACT
Thinking about the User’s Experience . . . . . . . . . . . . . . . 3
Defining Visual Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Design Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Role of the Designer . . . . . . . . . . . . . . . . . . . . . . . . . . 4
The Process of Good Design-How Do We Get
There from Here? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
An Information-Design Process Is an Informed
Design Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Phase 1: The Audit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Audit Questions A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Audit Questions B . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Phase 2: Design Development . . . . . . . . . . . . . . . . . . . . . . . 5
Phase 3: Implementation and Monitoring . . . . . . . . . . . . . . 5
Visual Design Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Universal Principles of Visual Communication
and Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Visual Design Tools and Techniques . . . . . . . . . . . . . . . . 6
The Five Criteria for Good Design . . . . . . . . . . . . . . . . . . . . 7
Visual Design Principles at Work . . . . . . . . . . . . . . . . . . . . . 7
Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
How the Human Eye Sees, and then Reads . . . . . . . . . . . 9
Typeface Size and Selection . . . . . . . . . . . . . . . . . . . . . . . . 9
Serif and sans serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Families of type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Variations in Letterforms . . . . . . . . . . . . . . . . . . . . . . . . . 11
Variations in Stress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Variations in Thick and Thin . . . . . . . . . . . . . . . . . . . . . . . 11
Variations in Serifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Typographic Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Combining Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Contrast in Weight (Boldness) . . . . . . . . . . . . . . . . . . . . . . 11
Output Device and Viewing Environment . . . . . . . . . . . . . 11
Letter Spacing and Word Spacing . . . . . . . . . . . . . . . . . . . 12
Line Spacing/Leading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Line Length/Column Width . . . . . . . . . . . . . . . . . . . . . . . . 12
Justified vs. Ragged Right (Flush Left) . . . . . . . . . . . . . . . . 12
Highlighting with Type . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Decorative Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Black on White vs.White on Black and Dark
on Light Background vs. Light on
Dark Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Positive and negative type . . . . . . . . . . . . . . . . . . . . . 12
Design Principles: Page Design . . . . . . . . . . . . . . . . . . . . 13
Building the Design of a Page . . . . . . . . . . . . . . . . . . . . . . 13
Gray page or screen . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Chunking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Queuing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Mixing modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Abstracting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Other Page Design Techniques . . . . . . . . . . . . . . . . . . . . . 15
White space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Field of vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Proximity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The illusion of depth . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Charts, Diagrams, Graphics, and Icons . . . . . . . . . . . . . 16
Tables, Charts, Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Icons and Visual Cues . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Illustrations and Photographs . . . . . . . . . . . . . . . . . . . . . . 17
Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Visuals should reinforce the message . . . . . . . . . . . . . 18
Create a consistent visual language . . . . . . . . . . . . . . 18
Consider both function and style . . . . . . . . . . . . . . . . 18
Focus on quality vs. quantity . . . . . . . . . . . . . . . . . . . . 18
Work with a professional . . . . . . . . . . . . . . . . . . . . . . 18
Build a library to create visual consistency,
organizational identity, and a streamlined
process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Reinforce shared meaning (common
visual language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Basic Principles of Color . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Additive primaries . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Subtractive primaries . . . . . . . . . . . . . . . . . . . . . . . . . 19
How to Use Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Less is more . . . useful and understandable . . . . . . . . . 19
Create a color logic; use color coding . . . . . . . . . . . . . 19
Create a palette of compatible colors . . . . . . . . . . . . . 20
Use complementary colors with
extreme caution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Decisions regarding color in typography
are critical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Consider the viewing medium . . . . . . . . . . . . . . . . . . 20
Context is everything . . . . . . . . . . . . . . . . . . . . . . . . . 20
Contrast is critical when making
color choices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Quantity affects perception . . . . . . . . . . . . . . . . . . . . 20
Use color as a redundant cue when
possible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
We live in a global world, so when in Rome . . . . . . . . 20
Creating a System: Graphic Standards . . . . . . . . . . . . . . 20
What does a system cover? . . . . . . . . . . . . . . . . . . . . . 22
Developing the system . . . . . . . . . . . . . . . . . . . . . . . . 22
Audit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
