White space is any space on your web site or printed page that doesn’t have graphics or text. It’s the “non-content” your readers will thank you for including, because it makes it easier for them to consume information on your website.
When people first try to create their own marketing materials, their first impulse is to not “waste” space, and they fill their pages with information.
The best analogy I’ve read so far about why it’s important to incorporate white space in your materials, whether they’re in print or on the web, is from the book The Elements of Graphic Design, by Alex W. White.
“Imagine coffee being poured into a cup. If the cup is filled to the very top, it is difficult to avoid spilling it on yourself as you take the first sip. By having too much of a good thing, we have created a problem. This is exactly the same reaction readers have to being given too much information at once. It is perceived as a problem and their response is to avoid it.”
“Their response is to avoid it.”
Oh boy, that’s not what we want. How can you communicate your marketing message if your audience doesn’t consume the information you share?
Reverse mathematics makes it easier to consume information
The real reason to use white space is to make content scannable and easier to absorb.
You want your readers to be able to consume information on your web site or printed pieces in a glance, and understand its meaning quickly.
Surrounding your information with white space makes it look more accessible.
Imagine the cup of coffee above if it was 3/4 full. That you subtracted 1/4 of the content.
It would look easier to handle, easier pick up, and easier to drink.
Try to do the same with your information: surround it with white space so that your audience will want to interact with and consume your message.
24 thoughts on “Design 101 | Make it Easy to Consume Your Information with White Space”
Great topic Pamela! As one who is notorious for filling the coffee cup too full, I greatly appreciate the metaphor 🙂
No question that whitespace is vital for content. Without whitespace, you miss a lot of content (or “just” its intended message) because your mind skips right over it. Even pictures or graphics get lost if you don’t leave them some whitespace.
p.s. I can’t wait to learn about “invisible grids” 🙂
Hi Mike!
It’s so easy to overwhelm the people we want to reach with too much information at once. One of the ways to make your info more approachable is – ironically – to show less of it!
I love how you practice what you preach! This site is very soothing compared to some with all those flashing doodads! I find them very distracting and tend to just tune them out. Keep it simple, that’s a wonderful lesson.
Hi Pamela,
I found you over at third tribe, and I love your site:)
I am design challenged myself, and am always tempted to overdo in any type of design (home, website, etc.)
It’s good to have tips to remind me how to do it right.
Cheers!
Debbie Ferm
Great points! I’m a big fan of Seth Godin’s book _The Big Red Fez_, where he talks about every page needing one clear, simple, and compelling action that you want the reader to take. When every square inch of the page has something stuffed into it, it’s very hard for that reader to perceive the Big Red Fez, even if it’s, well, really big and red.
Hi Debbie and Sonia: thanks for stopping in!
One of the biggest challenges in art school was knowing when to stop working on a drawing or painting. It was tempting to keep adding lines or paint … but if you do that, at some point it becomes obvious you’ve ruined your piece because you’ve over done it.
Designing a page is the same way. It’s good to make it a habit to step back from the page you’re working on and confirm that what you’re showing is supporting the main point, not taking away from it.
One of my art history profs put an expression in my head I’ll never forget: horror vacui. She was describing the wildly cluttered interior design sensibility of the Victorian era.
The literal translation is fear of empty space, but the vivid image of a room filled near to bursting is what stays with me as the unforgettable cautionary tale.
White space implementation has always eluded me. I may have to look at to make my site a little more reader friendly. I suppose it’s like empty space in photgraphy (another thing I suck at, but I’m practicing) where what isn’t in the photo is almost as important as what is.
I guarantee this isn’t the only design problem I have on my site, but they’ll get fixed, eventually.
Great post. I just switched my blog over to Thesis and “uncluttered” it and gave it more white space. (Love your design by the way!) And the effect was amazing – it felt like I had breathing room. Before it had all these little tags and bookmarky things that were annoying. So white space and simplicity is great! Thanks!
Hi Andrea!
Thesis is great: I don’t know a lick of code, and it makes me look like I do. The guy behind Thesis, Chris Pearson, knows his typography, and it shows. I appreciate the attention to detail.
Your blog is looking great, too. (Hey everyone: want to laugh your way out of your social media confusion? Visit Andrea’s blog!)
Hey again, Pamela. Would you mind clarifying what you mean when you say that Chris Pearson knows his typography? I’ve heard this before, and I admire it as a concept, but what is specifically true about Thesis that displays his knowledge of typography? Is this something that can be identified by certain presences or absences in a theme (or any design)? I really want to understand this!
Love the series. Thank you so much for sharing your knowledge.
When I look at the typography that comes right out of the box in Thesis, there’s very little I’d change. There’s an inherent sense of balance to the spacing that looks “right” to me — and I am very, very picky when it comes to typography.
The reason, it turns out, is that the typography in Thesis is built on a mathematical model that uses recurrent patterns. This is an important skill that artists and designers use to create a sense of “rightness” in their work.
I started out as a print designer, where you have control over typography down to the most minute adjustments. Transitioning to the web, where you have a reduced number of typefaces that display differently in each browser can be frustrating.
I don’t want to sound like a Thesis cheerleader, but I do find it makes web type look good, and gives back some of the control that print designers leave behind when they move to the web.
Pamela,
Great topic and ideas. I love the keep it simple thought process but as others need to be reminded of this. As we try to improve our sites I think we get carried away with all of the extra do-dads. I just switched over to WP so I am slowing beginning to rebuild. Thanks for the tips!!
Comments are closed.