Whitespace: Less Is More In Web Design

“Less is more”
— Ludwig Mies van der Rohe

A good friend of mine is moving into a new apartment after being away from the area for a few years. Needing quite a bit of furniture and having limited funds we’ve been scouring used furniture stores. Sadly some of these stores had a design flaw, one that also exists on many websites.

Recently we were in one store that was so crammed full of furniture and nicknacks it was difficult to move around in. To get into some aisles you needed to turn your body sideways. You’d have to watch where you stepped in order not to trip over something sticking too far into the aisle. If you tried to take something off a shelf several other items might fall off the shelf with it.

At one point we saw a nightstand that looked very much like one she wanted. In order to get to it we would have had to move several large desks and a dresser out of the way. Even though my friend had a long list of items she wanted and that the store probably had, we didn’t stay too long and walked out without making a purchase.

The store needed to rethink it’s design and make better use of empty space.

Many websites suffer from a similar malady, that of trying to cram everything onto the page and lacking enough whitespace to help you find what you’re looking for.

“Architect Ludwig Mies van der Rohe adopted the motto “Less is more” to describe his aesthetic tactic of arranging the numerous necessary components of a building to create an impression of extreme simplicity, by enlisting every element and detail to serve multiple visual and functional purposes.”
Wikipedia entry on Minimalism

What is Whitespace?

Whitespace or negative space is the space between design elements. On a macro level it’s the space around your design and the large blocks of empty space between elements. On a micro level it’s the space between two lines of text or the space between an image and it’s caption.

Many new designers think the object is to fill the page, to leave no space unused. In general that’s not conducive to good design. What’s left out is often just as, if not more, important than what’s left in.

Why use Whitespace?

A good use of whitespace will lead to a cleaner and more professional design. Allowing the elements of your design to breathe makes it easier for visitors to absorb your content. Whitespace helps create design flow and helps achieve balance in design.

Day exists in contrast to night. Without cold there is no hot. It’s the yin/yang of interconnected opposites. Space is no different. Filled space sits in opposition to negative space, but neither exists without comparison to the other. Both are necessary to create a harmonious balance in a design.

When all your design elements crowd each other it’s hard to find your way through them to any one element. Whitespace gives organization to those elements and provides visual relief. It provides a way for elements to stand out and makes your copy easier to scan.

Whitespace can also add elegance and sophistication to a design. Empty space might be seen akin to wasted space. Who can afford to waste? Space then is a luxury and the less you use the more you must have. More whitespace is seen as upscale and can position your brand with a higher end market. Densely filled space is seen as a way to save on cost. Leaving space empty can actually add value to your brand.

Consider retail clothing outlets. Low end stores will have more items on the sales floor and less space between aisles. Shoppers will take items off the rack and leave them sitting on top. At the other end, high end stores will have much less merchandise on the sales floor and most of the space in the store will actually be empty.

Look at the images below from inside a Banana Republic store and an Old Navy store. Both are owned by the same parent company, but one is clearly positioned toward a higher-end shopper and one toward a lower-end shopper.

banana-republic-sales-floor.jpg

old-navy-sales-floor.jpg

The image on the left is the Banana Republic Sales Floor and the image on the right is the Old Navy Sales Floor

Each store’s sales floor gives a completely different impression and clearly appeal to a different market of shopper

How to use Whitespace Effectively

The first step in using whitespace effectively is to actually use it. Don’t try to fill every space on the page. Don’t try to jam everything onto a page. Leave space around your design elements.

Margins and paddings are your friends. Be conscious of how they are set for every element on the page. You can use either effectively, though using both will yield the best results.

Give all of your main containing divs (header, footer, content, sidebar, etc) some padding so the elements inside them don’t crowd the edge. Use margins between different elements to separate them from each other. Think padding when you want space inside an element and margin when you want space between two different elements.

Compare the two images below with the associated text around each. Which is easier to read? The one with space between image and text or the one where the text butts up against the image?

no-padding.png

padding.png

Line-height is another css property to become familiar with. Most people leave it set at the default, but by setting a good line-height you allow all the text on your page to breathe.

It’s not an absolute rule, but I prefer a line-heigt 1.5 times the font-size. If your font is set to 12px, try setting your line-height to 18px.

Experiment with different line-heights and see what works best for your design. The important thing is to be aware of it.

Use headings to structure your content and remember the principle of proximity when styling. Keep headings closer to the text below and further from the text above. The space will make your content easier to scan and read and help create a flow through your design.

Summary

Less is more is the idea that simplicity and clarity lead to good design. All design is an attempt to solve a problem. Graphic and web design aims to solve the problem of how to communicate clearly.

Crowding too much information on a page does not communicate that information clearly. Surrounding that information with space enables readers to find the information relevant to them and gives you a measure of control over what information gains their attention.

Whitespace or negative space is an essential part of any design. Without it you don’t have a design.

To paint a little thing like that you smeared
Carelessly passing with your robes afloat—
Yet do much less … —so much less!
Well, less is more, Lucrezia: I am judged.
— Robert Browning (in Andrea del Sarto, 1855)

The 7 Components of Design

Download a free sample from my book, Design Fundamentals.

34 comments

  1. Websites are made for specific groups of users to appeal a specific oriented market. Users must be proficient enough to analysis the website, find information, and immediately distinguish the subject of the web site. To improve the usability of the web site, a web site should have search engine friendliness qualities. Make the web site user friendly so that users can search the information rapidly and easily which enhance the usability of a website.

  2. The title is confusing – obviously you are advocating using more whitespace, but the title suggests “less [whitespace] is more”.

    The objective for the store couldn’t be to “manage empty space”, as it’s clear it didn’t have any. Rather, they needed to manage their content.

    There are basic logic problems with the writing in this article, which only serves to confuse the message, which appears to be: “Whitespace: Use More for Better Design”, not “Whitespace: Less is More in Web Design”.

    PS – This website isn’t very accessible, since I can’t appear to leave a comment without enabling JavaScript. Yuck.

    • I see your point about the title. It hadn’t crossed my mind at all when writing it, but I’ll see if I can come up with something better. I can see how it can be confusing.

      Hmm about the comments. I’m using default WordPress code and as far as I was aware you could comment without the need for JavaScript. I’ll have to look to see what the problem might be.

      I wouldn’t say the site isn’t accessible though. The comments are just one problem and not indicative of the site in general.

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

    “PS – This website isn’t very accessible, since I can’t appear to leave a comment without enabling JavaScript. Yuck.” – stk

    Man, those kind of comments are getting old. There is nothing wrong with Javascript! It is very useful and 99% of users leave their browsers at the default settings – which is Javascript enabled.

    It appears that there is only the overly paranoid 1% that disables JS. Javascript is not the enemy. It’s dodgy, questionable sites that are abusing JS.

    • Thanks JC. Yeah I didn’t think there was anything confusing about the article either, though I may be biased :) I do see the point about the post title, but the article itself seems fine.

      With the need for JavaScript I do see the point about it shouldn’t be necessary. I’m not sure why the comments need it though. I do agree that the initial complaint could have been said a little nicer, but oh well. It takes all kinds. Some people just like to complain.

  4. You make a really clear case for uncluttering… and white space is the tool. Any thoughts on how to keep clients from adding here, adding there? I work with wordpress and that edit button combined with their untrained eyes can really accumulate some clutter.

    One of my old copywriting customers uses a huge amount of whitespace to very nice effect: http://blueoakwebdesign.com

    • I wish I had a good answer for you about clients. I think all we can do is advice them on why whitespace is good and give them an initial design that isn’t cluttered. At some point we have to be able to let go. In the end it’s their site and they can do what they want.

      The blue oak site is nice. Great use of space.

  5. I was thinking the same thing about the title. I did understand what point you were trying to make, though, even before I started reading the page. However, that may only be due to the fact that I already knew that white space was a good thing.

    Nevertheless, this was a highly informative article. I’m a copywriter, not a designer. I really need to hire a designer for my blog and leave it to the experts. :-)

    • Thanks for the compliments on the post Katrina. I guess I didn’t do the best job with the title. It honestly never occurred to me it might be reads as less whitespace is better, but once it was pointed out I could see it.

      If you have a suggestion for a better title please let me know.

    • Good question. I think what happens is some clothes will start at a store like Banana Republic for a time and sell at the higher price. Then the same clothes will move to a store like The Gap and be sold at a lower price.

      In the end both stores are doing what they can to maximize the overall profit for the parent company.

      It’s an interesting question, though, as to which store does better with the same piece of clothing.

  6. Great article Steven and personally I thought your title made perfect sense. I’ve always liked Coco Chanel’s motto, “simplicity is elegance,” which is what I took away from your article.

    Less is more is really about using your available real estate for elements that add value to the user experience and for your target audience, and not for the sake of design or aesthetics. Hence, the use of white space accomplishes that very goal by separating elements into digestible chunks of information for the visitor.

    • Thanks Mario.

      Interesting thoughts about adding value to the user experience. I might add that it’s also about not adding too much value on any one page or rather not adding so many things of value that they all compete against each other.

  7. Good article! Many website designs really overdo the content. You mention thrift stores being overcrowded in relation to crowded webdesign but you can also have the opposite problem where there is just too little info on a page to make it interesting. In terms of a store metaphor, a new “Mega Walmart” was just built in my city and everyone thought that it was going to provide a better, more interesting selection of merchandise but that turned out not to be the case. It’s much larger but because they made the isles very wide for shopping carts they sacrificed on products and the giant new store hasn’t got anything new that the old store had -a real disappointment.

    • Thanks lexy. Good point about sometimes not having enough content. That’s definitely true too. It really comes down finding the right balance.

      I think your Walmart example is similar to mine about Old Navy in the post. Walmart’s brands is about low prices so it doesn’t make sense for them to have too much space. That extra space sends a different message than the one the brand is trying to send. Walmart would be better served by having more at a lower price.

      It shows how space is just one more thing that needs to be incorporated properly in any design.

  8. You’ve convinced me! Now the background of my site is much lighter, thus highlighting the essential content. The only exception is brighter colors on CTAs, for a higher CTR. Currently, the bounce rate is 40% or so … I hope that it drops with the cleaner look.

    • Glad I could convince you about the importance of whitespace. There are of course times when it’s ok to cram more information into a space, but at the very least we need to make sure there’s enough space around content so the content can be read comfortably.

  9. Found this post via a Mashable article sent to me on website design.

    What you’ve written here is very evergreen and I appreciate the time you took to present it with words and images.

    While reading it I was reminded of the revolution that took place with Desktop Publishing which eventually evolved to putting up a website and ultimately website design.

    It used to horrify me when I would see what was being produced when every person had access to PageMaker! I know you must have noticed it as well.

    Thank you again for a great article.

    Cheryl C. Cigan

    • Thanks Cheryl. I’m glad you liked the post.

      I agree with you about some of the things being produced with common tools. The tools are both a blessing and a curse. I think it’s great that we can make it easy for anyone to publish a web page or website. Unfortunately not everyone should be creating pages and sites. The tools only make things easier. They don’t give you design skills.

  10. Good article, I’ve given it a couple of bookmarks.

    Here’s something I’d like to add from our own blog regarding font spacing and line height:

    Most sites will leave the line height set to “default”. I never find this is quite enough and blocks of text can be quite difficult to read.

    Try and go for a line height one above the font size. So if it’s a 14 px font, go with an 18px line height. Or 12px font, 14px line height. Different fonts will produce different amounts of space, so experiment a bit with this and see what works best in your case.

  11. Dentists are notorious for their sites lacking white space, and instead being cluttered with information, competing colors, shapes and media.

    I could not agree more that white space is a prerequisite for contrasting, highlighting, and organizing. I am striving to add more.

    • It’s not just dentists. Lots of sites think they should cram in everything they can instead of allowing the important information to stand out.

      The key to adding more space is reducing the positive elements on the page. Ask yourself what information is truly necessary and remove the rest.

Leave a Reply

Your email address will not be published.

css.php