WHITE SPACE IS NOT YOUR ENEMY

A BEGINNER’S GUIDE TO COMMUNICATING

VISUALLY THROUGH GRAPHIC, WEB &
MULTIMEDIA DESIGN
WHITE SPACE IS NOT YOUR ENEMY
A beginner’s guide
to communicating visually through graphic,
web & multimedia design

rebecca hagen &

kim golombisky
First published 2013
by Focal Press
70 Blanchard Road, Suite 402, Burlington, MA 01803

Simultaneously published in the UK

by Focal Press
2 Park Square, Milton Park, Abingdon, Oxon OX14 4RN

Focal Press is an imprint of the Taylor & Francis Group, an informa business

© 2013 Taylor & Francis

7KHULJKWVRI5HEHFFD+DJHQDQG.LP*RORPELVN\WREHLGHQWLÀHGDVDXWKRUVRI
this work has been asserted by them in accordance with sections 77 and 78 of the
Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this book may be reprinted or reproduced or utilised in
any form or by any electronic, mechanical, or other means, now known or hereafter
invented, including photocopying and recording, or in any information storage or
retrieval system, without permission in writing from the publishers.

Notices
.QRZOHGJHDQGEHVWSUDFWLFHLQWKLVÀHOGDUHFRQVWDQWO\FKDQJLQJ$VQHZUHVHDUFK
and experience broaden our understanding, changes in research methods, professional
practices, or medical treatment may become necessary.

Practitioners and researchers must always rely on their own experience and
knowledge in evaluating and using any information, methods, compounds, or
experiments described herein. In using such information or methods they should be
mindful of their own safety and the safety of others, including parties for whom they
have a professional responsibility.

Product or corporate names may be trademarks or registered trademarks, and are used
RQO\IRULGHQWLÀFDWLRQDQGH[SODQDWLRQZLWKRXWLQWHQWWRLQIULQJH

ISBN: 978-0-240-82414-7 (pbk)

ISBN: 978-0-240-82443-7 (ebk)
 To our students,
who make us look forward to Mondays—and Fridays
CONTENTS
TABLE OF CONTENTS
white space is not your enemy: a beginner’s guide
to communicating visually through graphic,
web & multimedia design

acknowledgments XV
preface XVII
chapter 1
what is design? 1
making visuals & type play nice in space
» form follows function in design
» design drives visual culture
» graphic design communicates
» computers democratized graphic design
» the www changed all the rules
» graphic design is planned
» make pictures & words work together in space
» know the rules. break the rules if you have a reason.
» try this

VII
 chapter 2
step away from the computer 9
for research & brainstorming
» research
» brainstorming
» sketches
» try this

chapter 3
i need to design this today 21
the works-every-time layout
» why the works-every-time layout works
» parts of the works-every-time layout
» final thoughts
» try this
» the works-every-time layout: a gallery

chapter 4
layout sins 31
13 amateur errors
» sin no. 1: centering everything
» sin no. 2: warped or naked photos
» sin no. 3: too many fonts
» sin no. 4: bulky borders & boxes
» sin no. 5: cheated or missing margins
» sin no. 6: stairstepping
» sin no. 7: 4 corners & clutter
» sin no. 8: trapped negative space
» sin no 9: busy backgrounds
» sin no. 10: tacky type emphasis
» sin no. 11: bad bullets
» sin no. 12: widows & orphans
» sin no. 13: justified rivers
» try this

VIII
chapter 5
mini art school 43
the elements, principles & theories of design
» element no. 1: space
» element no. 2: line
» element no. 3: shape/form
» element no. 4: size/scale
» element no. 5: color
» element no. 6: texture
» element no. 7: value
» principle no. 1: focal point/emphasis
» principle no. 2: contrast
» principle no. 3: balance
» principle no. 4: movement
» principle no. 5: rhythm/pattern
» principle no. 6: unity
» gestalt theory
» try this

chapter 6
layout 63
where to put visuals & type for impact
» how do i know where to put stuff?
» where do i put the rest of my stuff?
» creating hierarchy
» layouts with multiple topics on the same screen or page
» multiple-page layouts
» exit here
» try this
» layout ideas you can swipe: beyond the works-every-time layout

IX
 chapter 7
type 85
what you don’t know can hurt you
» font, typeface, font family, glyph
» font categories
» choosing & using fonts
» applying additional font styling
» typesetting lengthy copy
» taking a page from newspaper design
» type: not just for reading anymore
» icing on the cake
» try this
» what you need to know about logo design

chapter 8
color basics 113
choosing & using color
» the power of color: impact, organization & emotion
» color theory
» how to choose color: working the color wheel
» how to choose color: culture
» how to choose color: history
» how to choose color: nature
» tips for designing with color
» color technology: that’s not the color i chose. what happened?
» working with screen color
» specifying color for print
» color rules!
» try this

chapter 9
adding visual appeal 135
working with photos & illustrations
» image content
» resolution, file format & size

X
 » choosing more than one photo
» ethics of shooting & editing
» diversity as craft excellence
» where to get photos
» where not to get photos
» alternatives to photos
» try this

chapter 10
infographics 159
maximum information in minimum space
» a terse history of infographics
» you might need an infographic if…
» where do infographics come from?
» multimedia infographics
» graphics packages
» designing infographics
» try this

chapter 11
storyboarding 177
planning visual storytelling
» getting started
» framing the shot
» perspective
» pov
» camera angle
» movement
» continuity
» transitions
» lighting
» type
» audio
» after the storyboard
» try this

XI
 chapter 12
multimedia components 193
sometimes more is more
» thumbnails, storyboards & site maps
» working with images
» video clips
» animation
» apps and plug-ins and widgets, oh my!
» multimedia storytelling
» try this

chapter 13
designing for the web 213
starring on the small screen
» what to expect when working with websites
» how the web works (the 5-second version)
» designing for the web
» designing web pages & websites
» a website isn’t always the best tool for the job
» keep on your toes
» try this

chapter 14
fit to print 237
an overview of papers & printing
» plan ahead for printing: choosing paper
» types of printing & printers
» get a printing estimate
» prepare your document for printing
» what to give the printer: a checklist
» now what?
» other things your printer can do
» try this

XII
chapter 15
conclusion 259
now that you know enough to be dangerous,
thanks for stopping by
» everything is changing
» there’s nothing new under the sun
» sometimes you just need to hire a professional
» words of encouragement

glossary 263
index 275

For more content please visit the companion site:

http://www.whitespacedesignbook.com
Register using the passcode: space816

XIII
ACKNOWLEDGMENTS
Once again, thanks go all around to our supportive and talented
husbands Guy and Greg; sons Ben and Karl; cats Finn, Kylie, Salsa
and the late Whitey; and dog Duke. Beyond their psychosocial support,
their contributions—from modeling to design—are literally visible
throughout WSINYE.
Special acknowledgments are due to Tim Price, Cliff Keller and Kristin
Arnold Ruyle for their photography. Shout-outs go to Carrie Matteoli
and Will Payne for their artistic abilities, and to Vidisha Priyanka for her
technical inspiration. Thanks to bff Elizabeth Bell and her impeccable eye.
We’re still grateful for the stellar contributions of some former
students, including Sarah Wilson, Susan Snyder, Meaghan Rose,
Hunter Taylor and Michael Hardcastle.
We also credit our generous reviewers:
» Scott Farrand, University of South Carolina
» Jennifer George-Palilonis, Ball State University
» Lori Pindar, Clemson University
» Juliet Davis, University of Tampa

Last we thank Focal Press for letting us do this affordable 4-color

2nd edition.

XV
PREFACE
This second edition of White Space is not Your Enemy or WSINYE is
still for the “beginning” visual communicator. Whether you’re already
a media pro or hoping to be one soon, we assume our book is your
introduction to graphic design and layout. We also assume you’re busy.
So we try to cover the basics quickly without being too boring.

OUR BIG IDEA

Our humble little book can’t be everything to everyone. But we did plan
it to combine some things typically treated separately:
1. News, PR, advertising & marketing communications:
We address different communications careers together as if
they actually interact in the real world. Today’s communications
professionals all have to be visual, even the writers. And visual
foundations are the same for all beginners. At the same time, where
differences between journalism and the strategic communication arts
remain sacred, we honor them.
2. Web & print media:
We embrace design for new and traditional media since the former is
here to stay and the latter isn’t going away. Because communications
professionals need to be ambidextrous with both, we attend to visual
practices across platforms and formats.
3. Visual communication, design & layout:
We integrate three traditionally segregated approaches: visual
communication, graphic design and layout. Beginners need
elementary how-to rules (layout). But without thinking about the
rules as functional messaging (visual communication) and without
developing a good eye (design), the rules remain rote ideas either
soon forgotten or ploddingly applied without creativity or innovation.
 THEMES
The book relies on three themes that chapters return to again and again
in order to reinforce concepts and practices:
1. Effective graphic design does four things: It captures attention,
controls eye movement, conveys information and evokes emotion.
2. All design uses three building blocks: visuals, type and negative space.
3. Beginners need to learn the conventional rules first before earning
the right to break said rules.

TONE, DICTION & STYLE

WSINYE is intentionally light-hearted and conversational. We employ
an informal tone and diction to avoid reading like a traditional textbook.
Most people find textbooks unappealing. Our students don’t bother to
read them.
Our goal has been to make WSINYE a fast, effortless read. We present
information in a down-to-earth fashion without talking down to anyone.
We use humor to avoid taking the book’s content or ourselves too
seriously.
Given the book’s applied emphasis, we use the Associated Press as our
style guide—except where we take creative license.

CHAPTER PREVIEWS
Although each chapter flows from the previous one and segues to
the next, by design the chapters also make sense read out of order or
standing alone. We envision WSINYE useful as either a primary text or a
supplemental resource. We also see it complementing media writing and
editing courses.
Chapters 1–4 represent a book within a book. By the end of Chapter 4,
the casual and impatient reader can opt out with dramatically improved
skills.
» Chapter 1 answers the beginning student’s perennial question:
“What is design?”
» Chapter 2 reminds new designers to “step away from the computer”
for the predesign work of “research & brainstorming.”
» Chapter 3 covers the “works-every-time layout,” which allows us
to describe Western layout in its most universal form while also
teaching introductory rules for working with visuals, type and
negative space.
XVIII
 » Chapter 4 preempts the most common visual, type and
composition “layout sins” in a checklist of “amateur errors.”
After Chapter 4, readers have enough elementary skill to begin
executing assignments, whether for the classroom or the office. So
chapters 5 and 6 shore up some foundational details:
» Chapter 5 sends readers to “mini art school” to learn the
“elements, principles and theories of design” that develop the
good eye.
» Chapter 6 then fills in the blanks on “layout” format and
composition from aspect ratio, grids and focal point to visual
hierarchy and modular design for single, complex and multiple-
screen/page designs.
Next, readers can drill down on more advanced rules for type, color
and visuals:
» Chapter 7 expands the rules and uses of “type” from text-heavy
formats and projects to creative type as art.
» Chapter 8 deals with “choosing & using color,” including
sources of color inspiration as well as color as culture, science and
technology.
» Chapter 9 spells out technique, technology and ethics of
designing with “photos & illustrations.”
Remaining chapters touch on more complex design work:
» Chapter 10 serves up a quickie lesson on “infographics” as
“maximum information in minimum space.”
» Chapter 11 describes elementary concepts for “storyboarding 101:
planning visual storytelling” for moving pictures, such as video,
film and animation.
» Chapter 12 moves on to planning visual communication as
“multimedia components,” including slideshows and audio clips.
» Chapter 13 introduces visual communication issues in “designing
for the Web” from fonts and colors behaving badly to navigating
intuitively and getting GUI.
» Chapter 14 details mechanical printing from papers, folding and
binding to working with commercial printers.
» Chapter 15 wraps things up with a few words of encouragement
before saying, “thanks for stopping by.”
Each chapter concludes with exercises thinly disguised as “Try This.”

XIX
 You’ll find a glossary at the back of the book.
We also invite readers to visit the companion website for this book:
www.whitespacedesignbook.com.
The how-to’s of design and layout as visual communication are
the same regardless of career track. We planned WSINYE as a
comprehensive introduction for any communications major, track or
sequence, across traditional and new media formats: one concise and
practical source surveying the fundamentals for any platform
for anybody.

WSINYE COMPANION WEBSITE

For more content please visit the companion site:
http://www.whitespacedesignbook.com
Register using the passcode: space816

XX
Colum-bash Day
EXHIBITION MATCH
1SARASOTAVSSLAMMERS
WHAT IS DESIGN?
making visuals & type play nice in space

BRANDON BRUISERS

NOV.
Palm Ci
Skate Pa
TICKETS
$15 advan
$18 at do
 Y ou live in a visual culture. All day every day, you read the
messages of visual culture, from the logo on your shirt to
traffic signals. Unless you’re blind or visually impaired, you
hardly give it a thought—until you come across a visual message you
don’t understand.
Visual culture is a language, and, like any language, visual culture has
rules that make communication possible. Like English grammar, you
may not be able to say exactly what the rules are, but you know when
breaks someone them.
The rules of design are equivalent to visual culture’s grammar. This
book gives you some basic rules of graphic design and layout so you
can begin to speak the visual language that you already read. Think
of this book as your primer for graphic design. Don’t worry. This
grammar is the fun stuff, and, hopefully, we’ll whet your appetite to
Visual culture is a learn even more about visual culture and design.
language, and, like any
Before we get started on the rules, though, let’s cover a little
language, visual culture
background on design, visual culture, visual communication and
has rules that make
graphic design.
communication possible.
Above: Some designs are
classic, like the Taj Mahal. FORM FOLLOWS FUNCTION IN DESIGN
Others are universal, like Chances are, right now, you’re surrounded by the work of designers
the international symbol from fashion to furniture to architecture. There are interior designers
set. and landscape designers, product designers and product packaging
Below: This type of designers, and, of course, graphic designers. Believe it or not, there are
communication is so even font designers and color designers. Today, Web designers are the
powerful that breaking new media technology test pilots. The list could go on, but the point is
convention communicates you live with design.
as well. Despite its variety, all design is related through the expression, “Form
follows function.” Good design results from a partnership between
“form” as art and “function” as utility.
“Form” refers to material artistry—what something looks like. Design,
triggered by the industrial revolution and mass production capitalism
(function), grew out of and continues to be inspired by the visual and
even performing arts (form). Most designers have some background
or training in art. Knowing something about art can improve your eye
for design. But what people consider aesthetically beautiful, or even
interesting, changes across history, cultures and individuals. “Aesthetics,”
a branch of philosophy, deals with the expression and perception of
beauty.Your personal aesthetic dictates what you like in terms of style.
Unlike fine artists, however, designers don’t have the luxury of creating
art for art’s sake or wholly yielding to personal taste. Design always
has a job to do, and that job influences the design’s form. Design
2
has to be practical. The “function” in “form follows function”
refers to the usefulness of the design, whether it’s an ergonomic
dashboard in your car or your car manufacturer’s website.

DESIGN DRIVES VISUAL CULTURE

Beyond form and function, all design is related by style trends,
too. To a great degree, designers engineer visual culture. If you
have a good eye, you can make a game of matching any kind of
design to the historical period that produced it.
Time warp. If you have a
Think about how you can date a movie by hundreds of visual clues, good eye, you can make a
including cars, décor, fashion and superimposed typography during the game of matching any kind
credits. Though all these things have different functions, they generally of design to the historical
share a similarity of form if they were designed at roughly the same time. period that produced it.
Changing technology also influences design. Refrigerators in the Above: Minerva Motorcycle
1950s and ’60s sported just as much chrome as cars from the same ad, circa 1910, and vintage
period because they both emerged from the same technological and vegetable crate label, circa
design era. Think about how the designs of televisions, computers and 1940.
cellular phones have changed in your lifetime.
Images reproduced by permission of
Some designs don’t stand the test of time. They go out of style to Dover Publications, Inc.
become old-fashioned, “old school” or even the objects of jokes.
Maybe you’ve heard the expression, “The ’80s called, and they want
Chapter 1: What Is Design? 3
 Graphic design is planned.
Designers plan their projects in detail on
paper before ever sitting down
at the computer.
Small sketches, called “thumbnail
sketches,” help the designer establish
attention-grabbing focal points and
determine placement of the remaining
elements for logical and effective order.
Readability, usability and visual
appeal are critical.
A poorly designed, poorly organized
layout fails to communicate and costs
both the designer and the organization
time and money.
Right: Thumbnail sketches for the cover,
gatefold and inside spread of a brochure.
Below: The finished brochure spread.

4
their shoulder pads back.” Some designs are said to be timeless or
classic, such as the Parthenon and the Taj Mahal. Other designs become
universal, such as international symbols.Yet other design trends recycle
earlier styles, usually with modifications or updates. Cooper Black
typeface took the U.S. advertising world by storm in the 1920s, fell out
of favor and then became stylish again in the 1970s.
All this is to say that visual culture changes as a result of design’s changing
forms and functions, both related to technology and social trends.This is
equally true of graphic design.

GRAPHIC DESIGN COMMUNICATES Cooper Black typeface. Just

as ugly in the 1970s as it was
While the forms of graphic design, like all design, change with the
in the 1920s.
winds of visual culture and technology, the specific function of graphic
design remains constant: to communicate messages visually. Graphic
designers have to be professional communicators. They understand
that, for better or worse, in visual culture we judge and are judged by
appearances. In fact, everyone can benefit from knowing something
about the mostly unspoken rules of visual communication. That’s called
media literacy.

COMPUTERS DEMOCRATIZED
GRAPHIC DESIGN
Once upon a time, only professionals produced graphic design. Graphic
designers spent years learning the art and craft of visual communication
PEACE
(and still do, by the way). Today, however, anyone with a computer has
access to the tools for producing visual communication.
Unfortunately, not everyone knows the design rules for using
technology tools. The result is a lot of bad graphic design in a visual Top image reproduced by
culture already on overload. While ugly design may offend your permission of Dover
Publications, Inc.
good taste, it can lead to a more serious functional problem: poor
communication. Learning some fundamentals will dramatically improve
your visual messages, whether it’s your resume, a multimedia website or
slides for a presentation.

THE WWW CHANGED ALL THE RULES

To say the World Wide Web changed everything for graphic designers
is gross understatement. And just as they started figuring out the Web,
everything migrated to smartphones and tablets. Who knows what’s next?
Seismic changes in technology present us with dilemmas in organizing
this book. For many topics, there’s a “Yeah, but” for the Web. Yeah, but

Chapter 1: What Is Design? 5

 there’s a whole other color wheel for the Web. Yeah, but fonts behave
badly on the Web. And so on. Most Web “yeah, buts” have more to do
GOOD with technique and production than actual design, however.
GRAPHIC DESIGN Oh, well, so we’ll deal with it. Life’s full of contradictions. Best to
DOES FOUR embrace the adventure.
THINGS:
GRAPHIC DESIGN IS PLANNED
It captures attention.
Technically, “graphic design” refers to a plan for organizing visual
It controls the eye’s objects in space. Generally, that space is a two-dimensional plane,
movement across the meaning some kind of flat surface such as paper or an electronic
screen. The key ideas are “plan” and “organize” for the purpose of
page or screen.
“communication.” If you were writing a speech or research report, you
It conveys information. would make an outline to organize your ideas in a logical and effective
order. In graphic design, you organize all your elements from copy
It evokes emotion. (text) to visuals (pictures) in a logical and effective order.
Good graphic design does four things: It captures attention, controls the
eye’s movement across the page or screen, conveys information and
evokes emotion.
So graphic design refers to your plan for capturing the audience’s
attention from among everything else competing for its interest.
Once you have the audience looking at your design, its arrangement
or layout should control the audience’s eyes to move in a particular
sequence from one thing to the next on the page or screen. The whole
point of guiding the eye is to convey information. Think eye-catching,
flowing, interesting and evocative.

MAKE PICTURES & WORDS WORK

TOGETHER IN SPACE
Now you need some building blocks for capturing, controlling,
conveying and evoking. In the simplest sense, effective design and
layout teams up pictures and words to communicate a unified
message, regardless of the visual medium or vehicle. At the risk of
oversimplifying, you really have only three building blocks: visuals,
typography and space.
Visuals—symbols, icons, drawings, illustrations, photographs, film and
video, etc.—are self-explanatory, literally. But there are rules for using
them in graphic design. We’ll be talking more about those rules later.
About type, we generally represent copy graphically with typography,
a visual form of language. There are rules for typography, too, which
you’ll be learning. But words may be represented with handwriting,
such as calligraphy, or even pictures. And type treatments can make
6
beautiful visuals. Additionally, some kinds
of visuals, such as logos and infographics, tampa bay black-n-blue birds present:

Colum-bash Day
require text. We’ll be covering that, too.
Imagine space as the sandbox that encourages
visuals and typography to play well together.
Beginners often make the mistake of
forgetting to account for space. Too much
space, and visuals and type get lost or don’t EXHIBITION MATCH
talk to each other. Not enough space, and SARASOTA SLAMMERS
they start to fight with each other. VS
The idea is to arrange visuals and type BRANDON BRUISERS

NOV. 11
harmoniously in space. Don’t think of space as
immaterial or invisible. Nor is space a vacuum
to be filled. Space is real, even when we call
Palm City
it “white space” or, more properly, “negative Skate Park
space” (since not all white space is white).
Negative space always has weight and structure TICKETS
in graphic design.There’s an old saying: “White $15 advance
space is nice.” Amateurs tend to pack every $18 at door
nook and cranny of space with visuals and type.
Don’t. White space is not your enemy.
Our best advice for improving your visual
communication is to practice looking.
Pay attention to the layout of visuals and
typography in space. Think about what
you’re seeing. Rules? What rules? This
promotional roller derby
poster breaks more than
KNOW THE RULES. BREAK THE RULES a few typesetting rules.
IF YOU HAVE A REASON. Yet, it works. It works
because it evokes the
Our students like to find exceptions to the rules of design we teach right grungy, hard-knock
them. That tickles us because it means our students are tuning in to feel one would expect
design. Often the exceptions to the rules of design that students show from a sport that features
us are good examples of bad design. But sometimes the exceptions are tough women on roller
good examples of good design. Then we have to explain how breaking skates.
the rules can produce good design that communicates. Usually, our
explanations fall into two categories: professional license and changing Design based on original photo by
Charlie Chu, “Shutter Thug.”
design trends.
By training and experience, professional designers have mastered
both fundamental and advanced rules of design. They know how
to use creative license with the rules without forfeiting visual
communication. This book concentrates on fundamentals. But, as you
learn the fundamentals, you also may discover opportunities to employ
creative license. At least we hope so.
Chapter 1: What Is Design? 7
 Taking creative license with the rules of design can lead to innovation,
which leads us to changing design trends. Design, like visual culture
and English language, is not static. “It’s alive!” That’s what keeps things
interesting. Times change. Styles shift. So we adapt the rules.
Bottom line: Don’t break the rules of design out of ignorance. Learn
the rules. Then break the rules if you have a reason to. Hey, if it works, it
works. Just keep reminding yourself that you have a job to do. It’s called
visual communication.

▶ TRY THIS
1. Choose one of your favorite possessions from among the material ob-
jects you own.Try to imagine what the object’s designer had in mind.
Write a few sentences to describe its form or what it looks like. Be
specific and list the details of the object’s appearance. Quickly sketch
a small picture of the object’s appearance. Try to include all the details
you see.
Then write a sentence or two to describe the object’s function, or
Form and function.
what it does. Draw a diagram explaining how the object works. How
Despite its variety, all
does this diagram differ—or not—from the earlier picture you drew?
design is related through
the expression, “Form Last, write a couple more sentences to describe the relationship be-
follows function.” Good tween the object’s form and function. How do you think the object’s
design results from a function influences or limits its form? Does the object’s form assist in
partnership between its function?
“form” as art and
2. Locate an object that has gone out of style. How do you know it has
“function” as utility.
gone out of style? What clues does the object communicate that date
Consider one of your it? Explain why the object is outdated. Has the object become dated
favorite possessions. What because of its form? Its function? Or both?
did the designer have in
3. Find an example of graphic design that you believe communicates well.
mind? Which features
speak to form and which First, explain how the design captures your attention.What part of the
to function? design do you look at first? What draws your eye to look there first?
Second, explain how the design controls the eye’s flow through its
layout. In what order does your eye move from one thing to
the next across the space of the layout? Make a numbered list
of the order in which your eye travels around the layout.
Third, what kind of information does the design con-
vey? Make a list. Describe how the design conveys this
information.
What, if any, emotion(s) does the design evoke?
How? Why?