An Introduction to Whitespace

Tue, Aug 18, 2009

Web Design / Usability

I recently received the following comment on this post.

Mrs. Beasley Says:
Very helpful and professional article, I wish though you had something to say about whitespace versus clutter. My designer insists my website isn’t too cluttered while I think it could use way more whitespace, but I don’t know really what’s best. If anyone would like to look at the site at http://www.mrsbeasleys.com (think you can just click on my name) and give me their opinion I’d love to hear it.

So on a percentage scale of whitespace where we probably have at most 10% whitespace on the homepage now (not counting the right and left bleed margins), do you think that’s okay or not enough and if so what percent of whitespace should one aim for?

After reading the comment I thought I’d write an article about white space and address Mrs Beasley’s concerns in an indirect way. As you’ll come to understand through reading on, there’s no always-right answer to the question “what percent of whitespace should one aim for?”

So what exactly is white space?

Simply put, whitespace is nothing, emptiness. It is the absence of anything. It is often referred to as “negative space”, which is probably a more accurate term (“whitespace” originates in the graphic design world, where printing processes generally use white paper. )

What is it for?

White space provides visual breathing room for the surfer’s eye. It breaks up text, rich media, and graphics. It is an important element of webpage design as it enables the other elements on a page to exist at all. The balance between positive and negative space is one of the key factors that inform the aesthetic of your pages’ composition.
If your page feels cramped, confusing, or overwhelming adding whitespace can be a good way to start addressing the problem.

How should we use it?

The way to use whitespace really depends on what you’re trying to achieve, and, in the business world, on what kind of consumers you’re trying to target.

When space is at a premium white space is often deliberately limited in order to get as much information on the page as possible. A page crammed full of text or graphics in this way appears busy, cluttered, and is typically difficult to read. It also suggests that the site is “downmarket” (think direct mail advertising), though this may be exactly the impression you want to create.

If the clutter threatens legibility, this problem can be addressed through the careful and considered deployment of leading and typeface.

However, if you’re marketing an upscale brand, generous use of whitespace (coupled with sensitive typography and photography) creates a feeling of sophistication and elegance. For example:

While judicious use of white space can give a page a classic, elegant, or rich appearance, inexpert use of white space can make a page appear incomplete.

And now to come full circle and address Mrs Beasley’s question. Whether her website has the “right” amount of whitespace is a question of what kind of customer demographic she’s targeting.

From my own, intuitive assessment of her site, I’d suggest she could use a little more, as she is providing gourmet food and serving a wealthy corporate / Hollywood market, whereas the design currently suggests a lower decile target market than that—in fact it has features that speak more to a direct-mailing crowd.

What do you think?

, , , ,

13 Responses to “An Introduction to Whitespace”

  1. Vanessa Says:

    The example says it all. Elegance and purity.

    Reply

  2. R. W. Jackson Says:

    Personally, I love to use white space but since I grew up during the segregation times, I’m also a big fan of using the black space. Can’t we all just get along?

    I think your site works pretty nicely with the light feel you’ve given it. As to Mrs. B’s, I agree with you. All that purple really makes me feel sort of sick and not quite right.

    Reply

  3. Josh Zehtabchi Says:

    This is a great post! Do you mind if I repost it and link you in my own blog?
    .-= Josh Zehtabchi´s last blog ..About V2interactive: =-.

    Reply

  4. Josh Zehtabchi Says:

    Awesome, most def will! I’ll give you the URL for you to approve. I don’t want to step on anybody’s toes! :)
    .-= Josh Zehtabchi´s last blog ..About V2interactive: =-.

    Reply

  5. Lady Gogo Says:

    I really like to use white space. Some may find it boring though.

    Reply

  6. Bad Ass Says:

    True. It may be boring for some websites but useful for some. That depends on the market audience.

    Reply

  7. Raymond Says:

    Using whitespace in design has the “it” factor. Simplicity and classy. You could never go wrong.

    Reply

  8. Ash Says:

    I agree , it depends on the type of traffic you target on.
    .-= Ash´s last blog ..Formatting of an effective and productive e-mail to your subscribers =-.

    Reply

  9. Mahalla Says:

    That really depends on the type of website. Sometimes white background is boring. Moreoften than not, it’s safe and totally classy.

    Reply

  10. Love Says:

    White works best when you have colorful images so your website will stand out.

    Reply

Leave a Reply