Tuesday, August 5, 2008

The Importance of Whitespace in Web Designs:

The Importance of Whitespace in Web Designs:
When we're building Web pages we often focus on the stuff that shows in the design, you know, the fonts, colors, images, etc. But often the part of a design that has the most impact is the part that doesn't really show - the whitespace or negative space between the elements. Unfortunately, most Web designers (and many Web clients as well) think of whitespace as "empty space". In other words, it's space that could (and should) be filled with content to get people to read, click, and buy. But whitespace serves a very important purpose. Whitespace sets the tone of your design and affects the usability dramatically.

What is Whitespace?
At its most basic, whitespace is the characters that don't print anything when you type them, for instance: tab, space, and carriage return. These are whitespace characters. But there is more to whitespace than just these characters.

Whitespace in a design is the spaces around elements in the design to help them stand out or separate from the other elements. This includes the space on the edges of a fixed width layout and the space in the margins and padding around pictures and blocks of text (margins and padding). Whitespace also includes the space between lines of text (leading) and letters in words (tracking and sometimes kerning).

Remember, too, that whitespace doesn't have to be white. If the background color of a design is black, then the whitespace will be black. Whitespace is the areas of a design where there is no element placed by a designer.

How Does Whitespace Affect Design?
Whitespace is used in two ways in design:

1. Legibility
Whitespace at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. If you have a lot of content you need to get across in a small amount of space, you can increase the leading or tracking to make the text easier to read. If you look at the print version of the Wall Street Journal, the paper always has many columns of text with very little margin or padding around it. But the space between the lines and letters makes the columns readable.
2. Tone
Whitespace at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. The more whitespace there is the more expensive and high-quality a design may seem. If you look at the advertisements in an expensive women's magazine, you will notice that most ads have very little non-negative space. The text is small, leaving more room for background images, and there are very few elements on the page. Contrast that with a direct mail advertisement and you'll see large blocks of text covering multiple images and very little negative space.

Start Playing with Whitespace in Your Designs:
On the next page you design instead of thinking about where to put that image or how much space you should allocate to the text, ask yourself if there's enough space in the margins and padding to convey the tone and legibility you want. Learn to manage the margins and paddings around your elements. Work with the leading and tracking on your text.
If you're feeling really ambitious, create your design in two ways: once with lots of whitespace to convey an elegant tone and once with very little to convey a more down-market tone. Use the exact same elements in both designs, just change the spacing between them

No comments: