Design 101 | Make it Easy to Consume Your Information with White Space

brand marketing materials are hard to handle when filled to the brim with content

White space is any space on your web site or printed page that doesn’t have graphics or text. When people first try to create their own marketing materials, their first impulse is to not “waste” space, and they fill 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 avoids it?

Subtract to Add: Reverse Mathematics Makes it Accessible

The real reason to use white space is to make content scannable and easier to absorb. You want your readers to be able to take in your web site or printed piece 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. 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.

Design 101

This is the sixth in a series of ten lessons called “Design 101.”

The next lesson will be about grids and their role in design. An invisible grid is the lazy way to build a page. :-)

Get this series — plus my Marketing Toolkit and blog updates — delivered free to your email inbox. Enter your email below!

Comments

  1. Mike Korner says

    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” :)

    • says

      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!

  2. says

    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.

  3. says

    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

  4. says

    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.

  5. says

    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.

  6. says

    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.

  7. says

    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.

  8. says

    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!

    • says

      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!)

  9. says

    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.

    • says

      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.

  10. says

    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!!

Trackbacks

  1. Design 101 | Make it Easy to Consume Your Information with White Space…

    White space is any space on your web site or printed page that doesn’t have graphics or text. When people first try to create their own marketing materials, their first impulse is to not “waste” space, and they fill pages with information….

  2. [...] ReadabilityTo make your pages easy to read, remember all the basics of good design.Use lots of white space to give your reader a place to rest their eyesSet your text in a highly-readable typeface. Learn [...]