July 30, 2020

Whitespace: The Underutilized Design Element

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.

Share

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 Reply

    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

  2. Prashant Bhate Reply

    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

  3. Nick Pettit Reply

    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

  4. Jason R. Reply

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

  5. Zak Groner Reply

    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.

    1. Henry Reply

      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.

    1. Henry Reply

      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.

  6. Melody Reply

    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..

  7. Noel Wiggins Reply

    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

  8. Brett Reply

    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.

  9. Damian Herrington Reply

    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.

  10. Laura Rhoades Reply

    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!

  11. Ryan Le Roux Reply

    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.

  12. Luiz Paulo Monteiro Reply

    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

  13. TouchRed Reply

    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!

  14. Billco Reply

    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.

  15. Torey Reply

    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?

  16. webmeester.com Reply

    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.

Leave a Reply

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