Embracing Whitespace

Design

Author

Véronique Pelletier

Date

mars 10, 2020

“Can you reduce the white space so that everything is above the fold?” If you are a designer, this kind of request probably sounds like nails on a chalkboard. Whitespace or “negative space” in web design has two camps – designers who swear by it, and the rest of the world who want to fill the space with as much information as possible. Whitespace is often seen as wasted real estate space, but on the contrary, whitespace is one of the most valuable assets on your website.

What is Whitespace?

First let’s define “whitespace”. When talking about whitespace, designers are referring to the negative space between the elements on the screen. Whitespace isn’t necessarily white, it can be a colour or a texture.

“Whitespace is like the supporting cast, whose duty it is to make the stars of the show stand out, by not standing out so much themselves.”
Canvas Flip

There are two types of whitespace, macro whitespace which is the space between larger layout elements, and micro whitespace which is the space between smaller elements like words and letters or images and captions.

Micro space is the space between smaller elements, where as macro space is the space between bigger elements.

Readability and Priorities

Your content is the reason users are visiting your site. That’s why it’s so important to think about the site’s readability. It’s something whitespace can greatly improve. Something as simple as line spacing (the space between each line of a paragraph) can have a huge impact.

The example on the left is uncomfortable to read as the copy is squished together. The example on the right gives it more line spacing, which allows for a better reading experience.

Enhance Usability and Content

In simple terms, having whitespace means your content is better highlighted. A cluttered page is not a pleasant experience for users, it’s overwhelming and uninviting. Studies have shown that the attention span of an Internet user is 6 seconds (that’s less than a goldfish, let that sink in…). Using whitespace helps users scan content, and quickly find the information they are looking for. Cluttering up a website with as much information as possible could ultimately discourage users from visiting a site again.

The example on the left is a good example of wasted space. The space between the elements looks unbalanced, things should be tighter. The example on the left allows the element to breathe, without losing precious space.

Elegant Design and Branding Positioning (a bonus)

Whitespace can also help elevate an elegant and sophisticated design. Consider the Apple website, they use an enormous amount of whitespace, and their products always shine. It makes you want to buy that brand new iPhone.

Think about your morning commute, you don’t like to be sandwiched between people on the metro, so why would you let that happen to the elements on your website?

Whitespace isn’t a waste of space, on the contrary, it is a valuable design tool that used effectively can have an enormous impact on how your content is seen and consumed. Whitespace is your friend, embrace it.