Embrace the (white) space
Apple's designs feature lots of restful white space
I was collaborating with a designer on a particularly tricky product page recently. We had wrestled with text length and treatment in the hero image, trying to find a balance between saying what we needed to say (content strategy) and a compelling visual (design) and an easy, intuitive path for the reader (user experience). Needless to say, there was plenty of back and forth.
Finally, we wrangled that section into submission and the designer began working on the rest of the page — a simple, streamlined summary of product benefits. About an hour later, I got an email:
“Hey, there’s a lot of blank space left on items 3 and 4. Can you pad it out with some extra copy?”
Oy.
If there’s one drum I’m constantly pounding, it’s this: Write what you need — and no more. No padding. No filler. No extra words just to take up space. Trust me on this — your audience doesn’t need the extra verbiage. Just tell them what they need to know, and move on.
And if that leaves some white space on a page? So be it. Believe it or not, the reader’s eye might actually welcome the rest. Think I’m just a cranky writer with no flair for design? Well, think again, smartypants; Web designers have long known that white space can be a secret weapon.
For example, the Web Design Ledger opines: “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.” (Whitespace: The Underutilized Design Element)
Mark Boulton of A List Apart notes: “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.” (Whitespace)
And from I’d Rather Be Writing, this gem: “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 Paradox of White Space: Some Research and Examples of White Space in Web Design)
To all of these folks I say, amen. It’s time to embrace the space.
(And by the way, in the example above, the design director agreed with me — no padding necessary. And we ended up having a happy page with plenty of relaxing white space.)
C.C. Holland 
It’s just like the client who muses, “You know, there’s extra space at the bottom…can we just make the logo bigger?”
Ugh.
White space is like silence in conversation. There is a time and place for it. It can add emphasis, it can set off a particularly poignant remark, it is necessary.
Great post. Totally, completely love it… 😉
Thanks, Mikalee! It’s long been a pet peeve of mine that people feel like they need to fill every inch of available space with “stuff.” Love your analogy about silence in conversation — exactly!
I agree with you…white space is the way to go! When you add too many things it can start to look suffocating.
http://www.runtobefit.wordpress.com
AMEN!! When I go to a page and it’s too ‘busy’ – my little ADD mind cannot take it all in. Less is more. Whitespace allows me to focus on what matters.
Thanks for a great, insightful post.
Cheers!
http://yourlifesentence.wordpress.com/
Totally — it’s like your eye gets drawn to this, and then that, and then the other thing…and the end result is nothing is comprehensible. Whitespace provides breathing room. Thanks for the comment!
Agreed. It is constantly over looked on websites and drives me insane. I’m in school studying web design right now and they taught us about it. I was so happy we had a lesson on, since its one of my pet-peeves. Yet a lot of people still put too much on their websites.
So glad to hear that! Let’s keep evangelizing the less-is-more philosophy. 🙂
Yes,without the white space there’s no room for thought: language, language everywhere, but not a thought to think!
Yeah and remember that some of us out here are ADHD and don’t have the attention span to read a whole chapter of a book. Concise is just more effective. Not that everyone is ADHD.
But yeah, I think simple, elegant layouts with a lot of space makes the site look like it’s for something high-end and classy.
It’s funny how space conveys class, isn’t it? In the post by Mark Boulton of A List Apart (linked above), there’s a side-by-side example that illustrates exactly how using whitespace connotes luxury, while filling the space with words and invitations and promotions immediately cheapens the look.
There’s a reason why Apple has the brand cachet it does; the design — in products, packaging,and its site — is simple, elegant, and makes great use of whitespace.
Thanks for the comment!
This is exactly what I have been telling my faculty. It is so much easier to read if you use white space around the text. More is not always better. It is harder to be simple. Take out everything that is not needed and it makes the important things stand out.
Thanks for posting this.
I definitely agree with your stance. I feel like some designers should consider the sayings, “less is more” and “quality not quantity.” People today are in such a rush anyway that they pretty much scan whatever you write. Thanks for being a crusader for white space advocates lol 🙂
This is why I chose the template that I have for my blog. I had another that was fine, but I like the current one even more. Especially because I feature a lot of photos. I want the viewer to look at my photography and not all the “extra” stuff. I don’t even want all that sidebar junk. I’ve tried to make it so you can find everything you need by going to the main menu tabs at the top–which are also not so big and in your face. However, if I had a different type of blog, I might set it up with more things in a sidebar. Right now, I am happy with it the way it is.
it’s hard to change a client’s “wasted space = wasted money” mentality.
some people just DON’T get it!
Great post. I agree. As a graphic designer, I find what’s NOT on the page to be almost more important that what IS. I enjoy the look of negative space as it wraps around the design’s various elements. I see so many congested ads, my eyes can’t settle on a focal point. I like to give blocks of text plenty of breathing space. I see the copy as interacting with its background not simply sitting on top of it. The Apple ads are great for the same reasons. The result is a clean, streamlined and modern look.
i feel like white space is where my mind goes to process whats on the page…without it my mind has nowhere to go.
http://dearexgirlfriend.com/
This post makes me realize that I’m tech illiterate. And hope to stay that way. I still love the paper and pen, is it a dead way of life?
I even write my articles in a notebook, do you think notebooks (tangible ones with paper) will be a thing of the past?
Best to you and being fresh pressed.
Please feel free to take my quiz and find out what fear, if any, is holding you back in life:
http://bigbangbang.wordpress.com/2010/11/16/whats-stopping-you/
Much love,
Shanna
Hi Shanna! Come on, you’re not tech illiterate — after all, you’re reading this post, aren’t you? 😉 And I also still love paper and pen and don’t go anywhere without my Moleskine tucked into my bag. And although I adore my Kindle, nothing beats the smell of an old book. We’re lucky — conversant with the future, but willing to keep hold of the valuable things of the past. Thanks for the comment!
Whitespace sold me a MacBook and an iPhone. Literally. Apple’s design scheme make me spend more on computer products. Amazing how that works.
As an amateur photographer, my new thing however is “black space” to display my photos. Same concept, different color.
Agreed on the products. I’ve found that for portfolios “gray space” works well, because you can maintain a consistent background for dark and light images.
Congratulations on being featured on Freshly Pressed!
A long time ago I developed a teaching style of keeping instruction to the point. I encouraged students to fill in the blanks with their imagination, creativity, unique style, common sense, and, when needed, research. White space is another way of giving readers a chance to pause, reflect, and draw their own conclusions. Less can often be more.
Thank you for an interesting post.
Apart from offering a high-end aesthetic and relaxing look, we also need to embrace white space as a functional tool for delivering messages. People don’t approach a painting and say, “Why not just get rid of that frame and paint to the edge?” That’s because the frame makes that which is framed, the object, important, and it helps it stand apart from other great paintings that may surround it. A frame says, “look within.” This works for graphic design, too. I think of white space as a “frame” for the information, visual or written, I want people to focus on. It’s a way to control the eye. And by white space I mean negative space; it could be a color, or a photo background or texture, but it’s negative space in relation to a headline or another visual that is desired to get attention and be remembered (lightly treated body copy could also be considered negative space, depending on the relative strength of the primary object). Also, by “frame” I don’t suggest it has to be completely surrounding the object of intended focus. A lot of white space above pushes the eye downward, for instance. If you want someone’s eye to go left, put negative space on right. Then there’s the content overpopulation problem: the crowding of objects does turn people off, which I believe is the opposite of what clients want. For those clients who insist that only more can be more, do this: typeset a paragraph with open leading and another with even more words at 1:1 leading (or less). Have them read both. They’ll understand that the economy of the tight leading does not equate to message performance: desire to read it and ability to read it.
Mark, that’s an excellent argument in favor of white space. I especially like your point about it being a functional tool for delivering messages, akin to a picture frame. Negative space is so important in drawing the eye to a focal point, be it an image or text. Thanks for weighing in!
Good luck 2 all these devices – iPad, Kindle and so on.
oy marc jacobs ads give you white space filled with focused chaos and it’s wonderful!
yes to lux
I agree, too much junk on the page distracts from the true content, however…. as a person with visual disabilities…. white is a glaring color, especially on a computer screen, and too much white often makes me want to leave a page before it completely loads.
It hurts the eyes, and often the font will blend into itself and I cannot discern individual letters without a headache at the end.
I agree that too much junk is even worse, but what about some pastel blue? It hurts less & I’d probably read more.
Even clients who should know better tend to love infringement on a well thought out concept and the job they hired you for.
The wonderful word (objective) really has little to do with a paying client and their need to feel they have contributed to the successful completion of a project.
How many projects have you got in your portfolio that haven’t gone through battles of mind and creativity. One has to be constantly prepared for battle with the dark side of “fill that white space”.
I found cluttered interfaces to be a major problem in choosing font managers, and settled on Fontcase because it was the only one I could stand to look at.
I like and use the web-based TeuxDeux tasklist because of its spare elegance.
Perhaps it’s the free Vigilance theme I’m using (pretty good in terms of overall white space), but it’s difficult to get as much padding as I want between elements in posts. It makes me contemplate either buying the CSS upgrade or moving up to wordpress.org.
Isn’t it funny how you have to pay extra to have stuff removed? Beautiful minimalist objects are always $$$. Guess you’re paying for taste.
Pingback: Amateur defines Design « Internet Realist