<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=790024377701584&amp;ev=PageView&amp;noscript=1">

A Blog About Nothing: Great Examples of the Effective Use Of Whitespace

by The Katapult team on 11-May-2016 14:30:00

million-dollar-homepage-no-whitespace.png

When people visit your website, the priority is to give them AS MUCH INFORMATION AS POSSIBLE IN THE SMALLEST SPACE, because you don't know how long they're going to stay on your site, right?

Wrong.

If you're conceiving/designing/building a new website, remember one of the biggest tools in web design is NOTHING.

What "is" Whitespace?

Whitespace (also known as negative space), to put it simply, is nothing.

Ironically, the space can be any colour but it has to be free of elements such as text or images. It's the parts of a page that you don't want your visitor to focus on. And why wouldn't you want someone to focus on a part of your page?

 

So they focus elsewhere.

 

Over population of a page can make it appear more like an advertisement than a user-centric, informative placement of content. Ever heard the phrase "less is more"? It's never more prevalent than in digital.

Aside from just avoiding the feel of a cold advert, whitespace can be used to guide your user's journey, helping to focus their attentions on the important elements on the page.

Other advantages of correct usage of whitespace are:

  • Easier readability and comprehension = improved SEO
  • Improves the look of the page, giving it a more 'upmarket feel'
  • Less elements on a page = faster loading time = improved SEO

Examples of effective use of whitespace

Google

As the most visited site in the world, the temptation to add more content to the available real estate on the Google homepage must be huge. However, it's the altruism and simplicity of Google's service and homepage that contributed to it's popularity from day one, and with Adwords monetising the SERPs, the plain homepage is still the way to go. No fuss, no distraction - just land and search.

google-whitespace-example.png

Dropbox

As one of the greatest growth hacking examples, Dropbox know what people want and how they want it. Through hacks such as offering an extra 500MB of storage every time they referred a new user, they grew their user base from 100,000 to 4 million registered users within 15 months.

While the Dropbox landing page contains a significant amount of information, with five separate value propositions and 2x user signup opportunities, they use generous whitespace and expanding areas to great effect, making an extremely easy to read and understand proposition.

dropbox-whitespace-example.png

Shutl

Ebay's on-demand delivery company Shutl manages to use tiled flooring as a form of whitespace at the top of the landing page. But it's further down that the effective whitespace use really happens.

In the "What is Shutl?" section, irregular spacing and layout are used. The whitespace is paired with red route-style lines to steer the user to read the sections in order... with no other immediate distractions, just a chat box in the corner.

shutl-whitespace-example.png

In Summary...

Less is often more

You don't need to fill every pixel of your page with content a la milliondollarhomepage.com - this was an amazing idea once. But once was enough.

With user-centric design becoming more and more relevant to search, the readability, load time and overall user experience are more important to SERP rankings than ever. And abstractly, clear and easy to read/understand sites improve user engagement, browsing time, linking, and so on - the knock-on effect is clear to see.

While this isn't the way all sites need to approach design (take photo-based sites like Pinterest for example), it's worth thinking about how whitespace can benefit your users. In the world of long-scrolling mobile sites, users are ok with deep pages nowadays.

Lesson of the day? Use everything at your disposal - INCLUDING NOTHING - to ensure the best experience for your users. The payoff of taking the time to do this is huge.

Creating a website that sells: 10 Step web design checklist

Sign Up for Blog Updates

Katapult blog
author avatar

This post was written by The Katapult team

We’re Katapult, a marketing agency where creative ideas and commercial thinking help our clients to build brands, hit targets, drive growth and deliver a better experience for customers.

Connect with The