Smashing Magazine we smash you with the information that will make your life easier. really.

White Space and Simplicity: An Overview

By Smashing Editorial, January 12th, 2007 in How-To | 36 Comments | Forum

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. Recently Mark Boulton has written an insightful article about Whitespace and its importance in web design. Very well written, it describes in a very simple, but clear way, how to deal with white space in practice and how to use it in your web-projects. We’ve collected some more articles on this topic. So what do we have?

Links checked: June/16 2008.

Screenshot

Simplicity:

Keep it simple
Why does a page look complex? A brief article about the “exciting design vs. simple design”-question.
Keep it simple, stupid!
Describes the importance of simplicity regarding the way human brain works.
Simplicity: The Cobbles of the Designer’s Path
Stepheen Van Doren about wrong and correct use of simple solutions.
Simplicity Is Highly Overrated
Don Norman criticizes that the simplicity and minimalism lead to less functions and decrease the total performance of products.
The Beauty of Simplicity
Google is simple. But how did its developers achieve it?
The Complexity of Simplicity
Luke Wroblewski describes a complex path to simplicity, its features and reasons, why the simple solutions are more complex than complex solutions.
The Laws of Simplicity
John Maeda presents 10 excerpts from his book, in which he talks about rules and principles of ‘Simplicity’.
Wikipedia: Simplicity
Explains what simplicity is and related information about the topic.

White Space (Negative Space):

Design Matters: White space
About the potential power behind Negative Space.
ALA: Whitespace
An excellent introduction to the theory and use of whitespace, by Mark Boulton
Design Psychology
An insight in the psychology of web design. Among other information White Space is analyzed.
Developing the Invisible
Luke Wroblewski gives examples of situations, in which white space is essential and explains, why it is indeed so significant.
Give me my web space
Molly E. Horzschlag gives guidelines, which can help you to reduce the complexity of your web-sites and improve its readability.
Negative Space Tutorial
This tutorial explains, how you can use White Space efficiently.
On White Space in Graphic Design
Keith Robertson about fields and areas, in which Negative Space dominates - primarily graphic design.
Page Layout and Design for Digital Scrapbooking
Carla Rose about the importance of White Space.
Psychology Studies on Human Interaction
Studies in psychology confirm: White Space improves the perception of information by 20%.
The Importance of White space for Legibility
This study compares 4 White Space Layouts and presents results about the influence of White Space in design.
The value of white space
Offers a detailed introduction in the theory of white space, with examples.
Typography and White space
White Space in practice: how can you guarantee an optimal legibility with CSS?
Under The Loupe #1: White Space
Jason Santa Maria: “Empty space serves a purpose and supports the visual integrity of a layout.”

Simplicity and White Space in Practice:

Global White Space Reset
Global Padding/Margin Reset in CSS-files can be used as a template for your web-projects.
The Best Minimalist WordPress Themes
A collection of hand-picked Wordpress-Themes, which impress with their simplicity, clarity and readability.

Published in How-To, January 12th, 2007
Tags: simplicity, Tutorials, web 2.0, whitespace

1.

Miles (January 13th, 2007, 1:23 am)

I really enjoy every Smashing Mag post, this one is very dear to me, I am working on designing my new homepage and modifying a WP template to make it more user friendly (and eye friendly).

Great post again!
2.

Uzbek (January 15th, 2007, 7:16 pm)

I got a feeling that you guys reading my mind. Everything I want to learn or need to develop/enhance my project pops on here next day.

Great list and great work.
3.

Pablo Rosales (May 6th, 2007, 10:28 am)

I’m new to smashing magazine, but i could keep clicking the previous posts and never stop saying SMASHING!
4.

Jeff (August 31st, 2007, 3:49 am)

awesome, thanks for these they are very useful!
5.

Budhi Nandika (September 20th, 2007, 2:24 pm)

Very useful informations, most people like simplicity in design, layout and more user friendly.

I’ll use all the articles for my projects and to redesign my own site.

Thank you and keep these great work.
6.

vreme (September 23rd, 2007, 8:47 pm)

Yes it shure has to be simple but the problem is when designing a website for companies they all think that it MUST be complicated with a lot of flash animations etc. How to tell someone that the simpler the better if they all think they know everything?
7.

jd (February 8th, 2008, 7:11 pm)

i can’t imagine live whitout smashing!
8.

sandie sørensen (March 10th, 2008, 7:23 am)

nice articles- but I would much rather have seen a lot of examples on the minimalistic design with lots of whitespace…
I’m very visuel in that way…
9.

Google’s success with ‘Simplicity’ (August 18th, 2008, 4:13 am)

I don’t understand Google’s success with its - presumably - hundreds of other offerings. My manager here says: “have you seen Google Docs? - it’s brilliant.” Or, “You can add a Google image search field to your browser”, or, “have you seen Google calendar?”. No, I haven’t seen ANY of them. The homepage doesn’t mention any of this stuff so obviously I’ve never noticed it. I think there are little blue underlined features links at the top of the page - I seem to recall that - but I’d NEVER read them, or clicked them in two years. They just look like small print that you’d ignore. Is there a ‘more’ link? And when you go in there it’s not that easy to find what you want…?

Google’s success with it’s other services/products is a mystery to me. It must be down to some other forms of marketing - or word of mouth between developers.

John White
10.

myows (January 28th, 2009, 7:12 am)

minimalism is

great!
11.

web design (March 30th, 2009, 11:55 pm)

I am a designer,I like the articles in this site,many peoples shared their experiences or knowledge,thanks all.
12.

Brian (June 1st, 2009, 11:53 pm)

White space always makes sites look very clean and sharp in my opinion. Another thing I love about it is that in graphic design (for logos and such) you can make a really cool glass floor reflection effect in photoshop or illustrator. Check out our logo to see an example!
Link