RSS 
Email 
Twitter
iTunesThe Paradox of White Space: Some Research and Examples of White Space in Web Design
July 9th, 2007 | Posted in Web Design 20 Comments »
White Space is a principle of layout and design well known among graphic artists, but less known and practiced among some technical writers. I have a deep interest in Web design, and white space seems to be one of the first, fundamental principles of design for both on and offline content.
Paradox of White Space
White space also has an interesting paradox surrounding it: The absence of graphics and text plays a significant role in increasing comprehension of the text and of focusing attention on graphics. The absence of content is what draws the eye towards content. The negative, blank space (which possesses nothing) creates a sense of sophistication and elegance. The sense of simplicity and absence of graphics and text is what contributes toward a richer, deeper and more complex artistic expression.
Authors on White Space
Below are a few excerpts from authors writing about white space.
This author notes that white space contributes to a sense of refinement:
In western culture we associate uncluttered spaces with good taste, refinement and affluence. It is also more restful to the eye to read or view items that have a generous amount of white space surrounding them. That is why museums always use broad white walls as a backdrop for paintings on display.
On the Web, white space is essential when the viewer is required to read large amounts of content. Generous margins and clear simple layouts make it easier for the eye to work. Cluttered layouts tire the eye quickly and hinder clarity. Also, just as in advertising, uncluttered layouts convey a sense of good taste and refinement. (Source: Newark1)
Newark1’s site itself is a good example of white space. It seems to have a nice sense of balance as well.
This author also explains that generous white space creates a sense of luxury and elegance:
Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Coupled with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive. (Source: A List Apart)
Here’s a screenshot of the Tiffany & Co. jewelry site.
This author compares white space to breathing space, and uses the metaphor of blowing up a balloon to describe a healthy need for white space:
Today’s web designs are so fresh, they feel like they’ve taken a deep breath. Sometimes I imagine taking a page design that’s too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps. Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things. In general, the more white space the better. It’s very rare that I look at a page and think: “Gosh, they really need to cram that page up a bit!” Of course, “white” space doesn’t have to be white. But it does have to be space! It’s great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading. Look at all this lovely refreshing white space! (Source: Web Design from Scratch)
This Nielsen eye-tracking study found that more white space increases comprehension and reduces the time required to move through a page. Another study finds a similar conclusion about the cognitive benefits of white space:
In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference. (Source: Witchita Psychology)
This author says there is an increasing trend toward simplicity and minimalistic design — both of which are highly based on the concept and use of white space:
Last year we’ve seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever. Indeed, the importance of both white space and simplicity shouldn’t be underrated. Used correctly, they can enhance the performance of a web-site, improve readability and make a great first impression. (Source: Smashing Magazine. By the way, this link has some excellent resources on white space and the simplicity of design.)
Smashing Magazine itself is a good example of white space:
This author comments on the macro effect of adding white space in micro areas, particularly in a redesign of the Economist:
Whilst retaining the quirkiness of the original Economist typeface, Spiekermann redesigned it slightly, adding more whitespace to the individual characters. He then set the type slightly smaller and with more leading. All these changes added micro whitespace to the design. The overall result was subtle: the content was more legible and the overall feeling of the newspaper was lighter, yet the amount of content remained the same.
Though Spiekermann also added macro whitespace and color to The Economist his successful type redesign demonstrates that the space between the itty-bitty stuff can have a big impact on the effectiveness of a design—and this applies to design for the web as well. (Source: A List Apart)
Here’s the author’s graphic showing the difference between micro white space and macro white space:
Here is the white space used on the A List Apart site:
In reading about white space, I came across a blog with an abundance of white space. I’m not so sure the Notes column (with no notes) does much for the design, but if it did have some scribbles and highlights, it would be an appealing design.
Paul Boag talked about the importance of white space in this podcast (titled “Bulletproof”). He also wrote an essay giving advice on design for developers. Paul says:
Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.
In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.
Applying the Principle of White Space
White space is not just about increasing margins, paragraph spacing, and the space between sections. Expert use of white space maintains balance, provides a sense of elegance through simplicity, and focuses the reader’s eye on a desired part of the page or screen. Most of all, white space provides a sense of breathing space for the viewer.
Do the sites you visit have much white space?
Related Posts
- Nicely Designed WordPress Blog — Simple, Lots of White Space
- Does Design Matter in Comparison to Content?
- 14 Essential Wordpress Development and Design Cheat Sheets : Speckyboy Design Magazine
- Designing for “Web 2.0″ audiences
- Web 2.0 dieting and nutrition site: Sparkpeople.com
ve changed themes on this site more times than I care to talk about. This theme, in fact, has been used more than once and I’ve finally settled on this one for the forseeable future. Over at i’d rather be writing, Tom Johnson takes a look atThe Paradox of White Space: Some Research and Examples of White Space in Web Design. In the article, he presents research, commentary, and examples of white space in the web environment — our environment. As always, Tom looks at things from well thought out angles. The amount of white space a theme has makes a difference in
left over page with images and ads and glaring backgrounds. Look, the internet is visually tense. Reading for extended periods from our monitors is hard on our eyes (even when web pages are stylish and uncluttered). When you add the pressure of zerowhitespaceyou’re causing serious problems for readers. Especially for those, like me, who have dyslexia. I NEED WHITESPACE! It’s vital! 7. Write Meaningless Titles Ok, well this isn’t an automatic click away for me. If the actual posts are informative and
I think the paradox is really only applicable on the first visit or so… there are many websites I visit daily which don’t have that much whitespace but the content is good enough that I tolerate it.
However I’m much more inclined to stick with a recently discovered website if the design is attractive to me and that, invariably, means good use of white space. It’s something I try and consider when creating websites myself but of course sometimes the client prefers a little more clutter than I’m comfortable with myself.
Outstanding article! There’s a trend these days away from this, with everyone cramming as much as possible into very busy sites (due to client requests, I’m guilty as well), but there’s a lot be learned from the excellent examples in this post.
As a writer, I learned about white space from designers. Writers tend to see empty space as needing to be filled with words. Designers taught me that less can be more. Now I try to give them the room to create the balance they want. But balance is key. Too much white space can look like an incomplete design.
Great post!
I think that this is not entirely true. First because some eastern cultures have a very minimalistic artistic tradition, and for the other part, western culture sometimes really likes some chaos.
While the modernist movement was cemented over Mies van der Rohe’s well know phrase “less is more”, all the punk movement was created over visual chaos.
What is true, is that white space helps us to relax and read (which is not what the punk movement was intending, of course).
White space is a relaxation area to avoid the rest of the content to fly over you like a bird of prey.
[...] Fred Sampson’s Radio Weblog – – Tuesday, Jul 10, 2007 – Feed – Focus Monday, Jul 09, 2007 The Paradox of White Space: Some Research and Examples of White Space in Web Design by tom in Web Design White Space is a principle of layout and design well known among graphic [...]
[...] was reading a great post of Tom about The White Space Paradox and he cites: In western culture we associate uncluttered spaces with good [...]
[...] Survey …Google Blogoscoped: Web 2.0? That’s so five minutes ago … I’d Rather Be Writing: Tom talks about “The Paradox of White Space” … Instigator Blog: The skinny on a [...]
For more research/articles about the use of white space, line length, fonts etc. on web pages, take a look at some of the resources I found when preparing for a presentation I did at two 2006 conferences: http://www.cybertext.com.au/services_edit.htm – the Resource list (PDF) associated with the “Reviewing screen-based content” presentation is the one you need. (Note: I haven’t checked recently that all links still work, so apologies if some are now out of date.)
Thanks for the link to the presentation. I thought the starfish and fish motif in your graphics was pretty clever.
I used both as the conference was in Cairns, gateway to the Great Barrier Reef in Queensland, Australia. Starfish and pretty fish abound!
This is a very interesting topic that I will incorporate in my Business Presentations homework assignment. I too have noticed that I am more keen to like a website that has more white space in it as well.
[...] Web Analysis Activity 4. Audience 5. White Space and White Space 2 6. Proximity 7. Alignment Design Technique [...]
[...] on our eyes (even when web pages are stylish and uncluttered). When you add the pressure of zero whitespace you’re causing serious problems for readers. Especially for those, like me, who have [...]
[...] The Paradox of White Space: Some Research and Examples of White Space in Web Design Chapter 15 Weblink: How white space conveys attitude A basic principle of effective design is the use of white space. Tom Johnson addresses the intangible emotional impact of white space on the readers, such as a sense of sophistication, refinement, anda feeling of openness. Examples via screen captures and expert commentary appear throughout the article. [...]
A few signs of dyslexia are problems with reading,writing and math. Telling a story and following instructions may also indicate a problem.
Blogs like this are why I use the internet.
I encountered a book before in our library–I think it was a collection of designs that made use of white space. It was done in good taste, and also provided a lot of information. I’m glad this site focused on web designs.
For all its simplicity, I think making use of white space as a primary design element is one of the hardest process in web designing. It is so easy to get it wrong and give your site the impression of being empty, or even disjointed. Practice is the key here, and of course looking at references.
I agree, minimalism is the path to take during this stage of web designing.
These designs are clean. I love them. This is good for business or even for personal use. Thanks for sharing
If you are interested on making striking web designs with just a simple clicks, visit us at sitegrinder and be able to get the stunning web design that you always wanted.