Whitespace: The Underutilized Design Element

By / Jan 12, 2010 / Tips
shares

There are a number of elements that make up a great web design, but probably one of the most overlooked and underutilized is whitespace. Every design has whitespace, but the problem is that not every design has enough. This could be due to the fact that inexperienced designers and their clients see whitespace as empty space and therefore a waste of valuable screen real estate. The truth is, whitespace might be one of the most valuable parts of your design.

What is Whitespace?

Even though its name seems to suggest otherwise, whitespace doesn’t actually have to be white. It gets its name from the early days of graphic design where most printing was done on white paper. Whitespace is simply the empty space between and around the elements of a design or page layout. This can include: space around graphics and images, margins and gutters, space between columns, and even the space between lines of type. Whitespace is also referred to as “negative space”.

Whitespace is made of nothing, but shouldn’t be treated that way. There are several benefits that a generous dose of whitespace can bring to a design. Simply by increasing the space between elements in a layout, a design can take on a more elegant appearance, and by injecting more whitespace into a web design’s typography, content becomes more legible.

Elegance and Sophistication

In print design, paper is a valuable resource and clients will usually want you to use every square inch of it. After all, it costs them money and they want to get their money’s worth. Similar value is placed on screen real estate in web design. They both have set dimensions and represent limited space in which a message can be presented by displaying text and graphics. This is why being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on, and you can afford to sacrifice that space in order to better present your message.

Luxury brands use this concept to convey an image of sophistication and elegance. Let’s take these two furniture companies for example. Pottery Barn, being the more upscale of the two, uses lots of white space between the various elements. Notice even the logo uses large amounts of whitespace between each character.

whitespace

whitespace

Rooms To Go, on the other hand, is a lower end furniture store and it shows in their web design. There are several factors that contribute to this, and a lack of whitespace plays a major role. With so little space between elements, I won’t even attempt to insert the little red arrows.

whitespace

Notice how the list of category links is crammed up against the left border. Things like this can make a design look sloppy and unprofessional.

whitespace

Lets’s take a look at two other brands that you will probably recognize. Below is a comparison of the Apple home page and the Microsoft home page. You will notice that Apple, being the epitome of elegance and sophistication, uses plenty of whitespace. While the layout of the Microsoft home page is a bit more crowded, resulting in a not-so-elegant feel. This is right in line with each company’s general brand perceptions.

whitespace

whitespace

Better Legibility and Usability

On a micro level, whitespace plays a major role in typography and even usability. Text that is cramped with minimal line spacing can be very difficult to read. By adding more whitespace between lines of text, content becomes easier to scan and digest.

Information Highwayman is the portfolio of D Bnonn Tennant, and it’s an excellent example of great use of whitespace within text. The large amount of spacing between lines makes the content a joy to read.

whitespace

whitespace

Micro whitespace not only makes text easier to read, but also helps separate blocks of content from one another. This can help a user differentiate where content starts and stops.

Analog is a single page website. So it’s important to create enough separation between the various blocks of content so that they stand out from one another. Here, the Analog team uses varying amounts to create separation and flow within the content. A larger amount of whitespace is used to separate the content blocks, then a smaller amount is used between the paragraphs within each block.

whitespace

whitespace

Develop an Eye for Whitespace

Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace. All designs are different so the amount you use will vary from project to project. The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

40 Comments

  1. Arik Beremzon
    January 12, 2010

    Well first thing, there’s a difference between micro and macro whitespace. Perhaps it would help the article to mention both.

    Secondly, the Rooms to go website has a lot more wrong than just whitespace.

    Thirdly, there are certain rules that you can hold on to for better composition. Design is not necessarily a “feel good” subject. There are rules. If you’re using a grid then you are automatically set to rules. Another example is that when there are different types of data on a page or the data needs to be separated into sections, you will use whitespace to achieve that. There are also certain techniques that limit visual stress, such as making sure that a link’s lower padding is larger than its upper padding, this will convey the illusion of the text actually being centered.

    You touch on a good subject, but I feel that you went through it a little fast.

    Overall not a bad article.

    -Arik

    Reply
  2. Artem Russakovskii
    January 12, 2010

    Most of these seem like common sense, even to non-designers, no?

    Good illustrations though.

    Reply
  3. Franz
    January 12, 2010

    I love Whitespace :-)

    Reply
  4. Siddhartha Oza
    January 12, 2010

    Fantastic…Thank You!

    Reply
  5. Nick
    January 12, 2010

    W H I T E S P A C E

    Reply
  6. Federica Sibella
    January 12, 2010

    As you can see from my own website, I completely agree with you!

    Reply
  7. Jonathan F.
    January 12, 2010

    I love Whitespace 2

    Reply
  8. Prashant Bhate
    January 12, 2010

    Sorry to say, but I think, this needs to be applicable to this website too. Though the content is Superb, Its too much cluttered with adds.
    But appriciate that rss feeds still are de-clutterd.

    Keep up the good work !!!

    And if possible please change the layout of the web.. esp bottom banner add

    Reply
  9. leerraum
    January 12, 2010

    nice article, but you’re not telling what whitespace is, just how it works.

    Reply
  10. Eric Di Bari
    January 12, 2010

    I like apple’s website the best. The gray/off-white whitespace seems to add to the design while remaining neutral.

    Reply
  11. Drake Tomilson
    January 12, 2010

    Great article, white space is so hard to convince the client to let you use too.

    One site that I think really uses whitespace well is astheria.e

    Reply
  12. Nick Pettit
    January 12, 2010

    Great post! Whitespace needs to be discussed more, I think.

    In my experience, good use of white space is the number one thing that amateurs and non-designers (read: engineers) miss out on. The telltale sign is when the text is right up against the edge of the page or containing box.

    We actually just did an episode about whitespace:
    http://doctype.tv/space

    Reply
  13. Jordan Walker
    January 12, 2010

    Makes it easy to view websites – the alternative http://www.milliondollarhomepage.com/

    Reply
  14. Jason R.
    January 12, 2010

    I find it interesting when articles like this appear on websites that cram every available pixel of whitespace with graphics and ads.

    Reply
  15. Zak Groner
    January 12, 2010

    White space is probably one of the most important elements of web design. This article seemed to highlight some good examples, except for the Microsoft page. How is it not a good example of white space? Seemed like an unneeded MS bash.

    Reply
    • Henry
      January 13, 2010

      I’m sorry if it seemed like I was bashing Microsoft. I didn’t say that it was a bad design. I simply stated that Microsoft’s home page was more crowded than Apple’s, resulting in a less elegant look.

      Reply
  16. Vladimir Remenar
    January 12, 2010

    As Derek Birdsall said: “White space is the lungs of the layout. It’s not there for aesthetic reason. It’s there for physical reasons.”

    Reply
  17. Richard Scott
    January 12, 2010

    Maybe the idea WAS for ‘Rooms to go’ to look downmarket, so to attract the lower end buyer.

    Reply
    • Henry
      January 13, 2010

      That’s quite possible Richard. I know that is done in print design all the time, but in web design you have to think about how lack of white space and poor design will effect things like usability.

      Reply
  18. Melody
    January 12, 2010

    Whitespace is definitely underutilized and underrated, not only is it an important factor in design, but in general art as well..It’s usually the most used color in my paintings..

    Reply
  19. Dave
    January 12, 2010

    It’s a little unfair to Apple in this category when comparing eCommerce sites. Their actual “store” homepage is much more cluttered than their main homepage:

    http://store.apple.com/us

    Reply
  20. Pusparaj
    January 12, 2010

    I love whitespace.

    Reply
  21. Eric Grint
    January 12, 2010

    Very helpful article :)

    Reply
  22. Kirge NiCuff
    January 12, 2010

    Apple is the epitome of elegance and sophistication?!? I hope that is sarcasm.

    Reply
  23. Noel Wiggins
    January 13, 2010

    whitespace indeed is a talent that separates design professionals from the hobbyist. Like which typeface works the best and being able to develop the color palette that fits.

    I think the industry is filled with newcomers thinking that graphic design is learning photoshop and being able to do some new “cool” technique.

    But graphic design goes much further than knowing the programs. Its what you do with the programs that count…

    Thanks and Regards

    Noel for Nopun.com
    a professional graphic design studio

    Reply
  24. Brett
    January 13, 2010

    My weakest link is design – I couldn’t make a flower garden look nice :-) but I’m focusing on improving that in a big way – it’ll take time.

    I totally agree that whitespace adds elegance and sophistication and I would add that to me it also adds an element of grandeur. It makes the site appear to be for something large and important and gives the viewer a relaxed, comfortable feeling.

    Having tall ceilings in a room has a similar effect. I have a cathedral ceiling in my house – which is a rather small house (1800 sq ft) but feels really big. That’s a really big deal and I would never consider buying a house with 8 foot ceilings throughout.

    Reply
  25. Francisco Inchauste
    January 13, 2010

    I appreciate the topic being brought up, but I don’t think this article covers why white space (negative space) in design is so important. It also misses all of the related design principles. I have more thoughts in a response to this article: http://www.getfinch.com/finch/entry/a_negative_view_of_white_space/

    Reply
  26. Damian Herrington
    January 13, 2010

    Great article! I think out of all the design trends and styles, whitespace is one of the most difficult to pull off. Not only do you have to make sure the content appears clean and spacial but not making the design look sparse as well.

    Reply
  27. Laura Rhoades
    January 13, 2010

    Thanks for the helpful examples.

    I’m trying to find the right amount of white space on my new site while still showcasing enough of my work on my doorstep.

    I would welcome feedback on how any of you think I’m doing. Thanks again!

    Reply
  28. Ryan Le Roux
    January 14, 2010

    To often designers & other professionals overlook the importance that white space plays. They just want to cram anything and everything they can into any left over space.

    Reply
  29. Luiz Paulo Monteiro
    January 14, 2010

    Cool, nice work. Nice exemples, sometimes is so hard to explain bout that. Clients alwais want to fill the whitespaces to “use their money”. Wrong.
    Thanks guys.

    If you dont mind I post it in my blog.
    Thanks.

    LPM/designer

    Reply
    • addo
      January 16, 2010

      very good.

      Reply
  30. TouchRed
    January 15, 2010

    IKEA design is based around ‘white space’….its a part of me now!

    try explaining white space to a non-creative! ….blood out of a stone!

    Reply
  31. Billco
    January 15, 2010

    Common sense is an oxymoron. Every single client I’ve ever dealt with has been obsessed with filling every last nook on the page with some clashy object or mindless corporate drivel. There is great elegance in simplicity and conciseness, but the sad reality is that most people are far too self-absorbed to acknowledge such a zen-like tidbit of wisdom.

    Reply
  32. Husien Adel
    January 24, 2010

    really white space make the design more pro & easy to scanning :D nice article
    thanks a lot for that recommendations as web designer

    Reply
  33. Adam Hermsdorfer
    January 25, 2010

    I loved how you summed up the elegance and sophistication of using white space. Not to get too artsy, but white space brings confidence to a website.

    Reply
  34. g3niuz
    March 7, 2010

    great article – thanks for this ;d

    Reply
  35. Torey
    July 28, 2010

    GREAT ARTICLE! I wish these articles came in a printer friendly form. I’d love to be able to print and share here at work or refer back to. Is this possible?

    Reply
  36. Mike Johnson
    June 17, 2011

    Love your article! I am going to link to it from one of my blog posts. Thanks for trying to educate our audience!

    Mike J.

    Reply
  37. webmeester.com
    May 4, 2012

    I thought this article was right on target. Nothing confusing about it. Straight to the point and the message clear. There are tons of sites that abuse or ignore these simple principles.

    Reply

Leave a Reply