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.
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.
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.
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.
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.
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.
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.
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
Most of these seem like common sense, even to non-designers, no?
Good illustrations though.
I love Whitespace 🙂
Fantastic…Thank You!
W H I T E S P A C E
As you can see from my own website, I completely agree with you!
I love Whitespace 2
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
nice article, but you’re not telling what whitespace is, just how it works.
I like apple’s website the best. The gray/off-white whitespace seems to add to the design while remaining neutral.
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
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:
https://doctype.tv/space
Makes it easy to view websites – the alternative https://www.milliondollarhomepage.com/
I find it interesting when articles like this appear on websites that cram every available pixel of whitespace with graphics and ads.
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.
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.
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.”
Maybe the idea WAS for ‘Rooms to go’ to look downmarket, so to attract the lower end buyer.
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.
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..
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:
https://store.apple.com/us
I love whitespace.
Very helpful article 🙂
Apple is the epitome of elegance and sophistication?!? I hope that is sarcasm.
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
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.
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: https://www.getfinch.com/finch/entry/a_negative_view_of_white_space/
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.
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!
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.
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
very good.
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!
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.
really white space make the design more pro & easy to scanning 😀 nice article
thanks a lot for that recommendations as web designer
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.
great article – thanks for this ;d
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?
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.
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.