Feb 2, 2010

What is Whitespace?

Whitespace—or, negative space—is the open space between elements in a design. The space can be a color other than white, as long as the area is void of elements.

whitespace

It’s common for whitespace to be seen as “wasted space,” especially when you are working with a limited area. After all, why wouldn’t you want to take advantage of every inch of space in your advertisement / brochure / website?

You may be surprised to know that the space that is empty is just as influential as the space that is filled with text and photos.

Using Whitespace to Your Advantage

When there are too many elements in a design—whether those elements are photos, fonts, or headlines—it appears cluttered and crowded. Imagine a room filled with people that are talking at the same time. Would you know who to listen to first? How long would you stay?

Removing unnecessary elements in your materials not only de-clutters the design, but it also places more emphasis on the most important message.

One company that has learned this lesson is Apple. Their advertisements are famous for their simplicity and use of whitespace. Take a look at their homepage from October 2009:

apple-screenshot

Immediately, you are presented with three things: An interesting image that grabs your attention, a short explanation of their latest product, and their call to action, “Watch the iMac video.” They are using whitespace to direct their customers to the most important information within seconds, and to show them where to click next.

Now, Apple has the advantage of being a household name with millions of fans worldwide who are already familiar with their products. Most businesses will probably need to present a bit more information, in order to convince potential customers that their products or services are worth the price. However, the same concept still holds true — adding unnecessary information only distracts from the goal you have set; whether that goal is to click on a link, call your phone number, visit your website, or buy your latest product.

Why Simplicity is Important

Billboards are an example of one medium where a simple message is absolutely necessary. Drivers are — hopefully — concentrating on the road, and only glancing up at signs and billboards for just a few seconds. If you can’t condense your advertisement into 6 words or less, then the driver won’t have enough time to read your entire message.

Designing for websites is similar. The average user will decide whether to stay or leave your website within just a few seconds. That means you need to immediately grab their attention, reassure them that your website has the information that they are looking for, and convince them to stay on your website a little longer.

The only way you can accomplish all this is to decide on the most important information, make it the most prominent part of your marketing piece, and get rid of anything that is a distraction. By de-cluttering your designs, you are able to guide your potential customers to the information that you want them to read, and create truly effective promotional pieces.

Some Tips for Reducing Clutter

  • Use headlines and sub-headlines to break up large areas of text. This allows the reader to quickly scan the text to get a summary, and to skip to the section that interests them.
  • Use simple language. Make your text easy to read and understand, and avoid overly technical language that would be overwhelming and confusing. If your text looks like a lot of work to read, your readers will simply go elsewhere.
  • Create a focal point. If you have several images on a page, your viewers won’t know where to look first. Make one or two of your images more prominent, and place your call-to-action nearby.
  • Create Relationships. Group related items (like a photo, description, and link) together so they are seen as one element instead of three. You can do this by making the space between these elements smaller than the space that surrounds them.
  • Add Whitespace. Make sure there is enough space in your margins, between paragraphs, and around your elements so the overall design is clear and easy to understand.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>