White space

Lately, I’ve been obsessed with white space and using it in my Breeze page designs. Obsessed enough to dedicate an entry to it.  

Here’s a quick introduction to white space:

White space, also known as negative space, is the term describing open space between design elements. It can be between letters, words, or paragraphs of text; space in and outside of graphics, and between all of the elements of the page. It is essential for providing spatial relationships between visual items, and actually guides your reader’s eye from one point to another.

White space takes on an added importance on the web because more of a strain is placed on the eyes than with print material. You’ll find that going through the same amount of web pages as print pages can be more visually demanding, one of the reasons being that you usually find yourself staring up at monitor flickering pixels coarser than printed ink. White space provides our brains with much-needed breathing room to absorb the material displayed before us.

It’s imptortant to remember there are two kinds of white space:

•  Active white space is space that’s deliberately left blank to better structure the page and emphasize different areas of content.
• Passive white space is empty space around the outside of the page or blank areas inside the content that result from a poor design.

White space is rarely, if ever, considered an integral design component among new web/page designers. However, it should be as it serves many critical purposes:

1. It provides importance to other design elements. The more white space surrounding text or images, the more important those elements become. When you go to a page which has a lot of white space surrounding an element (such as a headline or an image) doesn’t that element stand out to you and say “Hey, look at me. I’m important?”
2. It provides a resting space for our eyes. Web pages tend to be very packed with too much going on. White space is the oasis that our eyes need in a busy information space. If a web page were a city, white space could serve as Central Park.
3. It provides guidance. Good use of white space will assist your users with moving from one part of your page to another.

This is the Breeze campus page (page 3) that I designed for Monday, Oct. 15. As you can see I put a white space “border” around the Ghana story, giving it dominance without the need of complicated elements, such as graphics, photos, or dominating color.

Like this text, for example.

You might find your eyes being drawn to the text above. That’s the power of white space. Often times, in newspapers like the Wall Street Journal or New York Times, you will find full page ads with almost nothing else on the page except one lone sentence of text. You might think it rather silly, that a company would pay thousands of dollars to pay for this full page ad, and then not take advantage of it by filling it with text, messages and what not. And yet, you might find it impossible to skip that ad, as you browse through the paper, try as you might.

So the next time you’re designing, remember the power of white space, baby! Don’t think of it was taking away, but rather adding more.