Whitespace

  • This may come as a shock to you, but your users do not read your website. I’m sorry, but they just don’t. In a 13 year study the Nielsen Norman Group found that nearly 80% of users scan a webpage instead of reading word by word.

    Time is a precious resource and the less time spent finding useful information, the better. Think about your behaviors when visiting a webpage. Unless you’re mindlessly scrolling through a social media feed, you have a goal in mind. “I am looking for X” or “I want to learn more about Y”. So what do you do? You SCAN through pages, reading headings and call-out text until you find what you’re looking for. THEN you read.

    This is why whitespace is vital to the success of your website. Without whitespace, there is no separation of ideas. Without whitespace, everything is uniform and therefore NOTHING stands out. Whitespace can take a page that is chalk full of information and make it look simple, uncluttered, and inviting to read.

     

    "Whitespace is to be regarded as an active element, not a passive background." — Jan Tschichold

     

    It can be tempting to see whitespace as “empty” space. Space where more content could fit. Fight that temptation and let your pages breathe a little. More content in an area is not necessarily a good thing. Users can become frustrated and annoyed when too much information is presented to them in too little space. The use of whitespace can even improve reading comprehension by up to 20%.

    To put it musically, whitespace is the pauses and quiet moments in a song. Those quiet musical elements allow the more dynamic sections of music to be way more impactful.

    Color banding (horizontal bands of background color that separate one section from another) works in a similar fashion. It is a great way to visually organize your page's content by enabling a scanning user to easily see where an idea begins and ends. It allows the user to quickly scan the heading at the top of the color band and then scroll until they see the end of that color if that heading wasn’t what they were looking for.

    Check out these Design Ready Templates that have lots of breathing room:

    Your designer will have thoughtfully included white space in your template, however, it’s up to you to include it in your content. Remember, less content in a given space can actually be more! More inviting. More useful. More powerful. To find out more...