fbpx
 In Web Design

“Don’t panic. When used properly, whitespace is a good thing.”

I’ve had this conversation with many web design clients over the years. I consider it part of my job to educate them about design and this is something that comes up again and again. Clients have a lot they want to say on their websites, and some feel they need to use up every inch of space on the page.

Whitespace is essential in a composition, and provides a better user experience – which means the website will be better at accomplishing its goals. In the end, isn’t that the point?

If you have read my earlier article, Web Design Trends for 2014, then you already know that simplicity is one of the emerging trends this year. Although there are many elements to simplicity, in this article we are going to focus on whitespace.

What is Whitespace?

Let’s take a step back and define whitespace:

Whitespace (also referred to as negative space) is the area in a composition that is left blank – in other words the space between objects and text. It doesn’t even have to be white. When used properly, whitespace creates balance between positive and negative space. It allows the user to focus on the objects and text without being overwhelmed.

Why Have Whitespace?

Along with typography, colour, photography, and illustration, whitespace is also a key element of design. It helps lead the viewer through the design, telling them where to focus their attention and, often, in what order. It helps establish priorities and groups sets of related information.

Without whitespace, you wouldn’t be able to tell the difference between objects in a composition. Take the article you’re currently reading, for example: without the whitespace between each paragraph, how readable would it be?

We are constantly being bombarded with information from all directions, and no one has an infinite attention span. Using whitespace properly makes it easy for the user to process the information on your site, and get access to the content they’re looking for. Cramming more objects together actually makes things harder to find and text becomes difficult read.

Legibility

To fully understand whitespace, we’re going to break it down further, into micro whitespace and macro whitespace.

Micro whitespace is the space between smaller objects such as letters, words, bullets, etc. The correct use of micro whitespace can transform your text and make it more readable.

Here is an example showing how lack of whitespace can make your text almost impossible to read:

text sample without whitespaceBefore whitespace was added to the composition.

text sample with whitespaceAfter whitespace has been added to the composition.

Brand Positioning

Now, let’s tackle macro whitespace: the space between larger objects such as a logo, navigation bar, blocks of content, etc. Using more or less whitespace between these objects will position your brand as modern and elegant or affordable and common.

Balance is key in brand positioning. The more whitespace there is in comparison to positive space, the more luxurious the brand. This is because the larger amount of space conveys things like freshness, freedom, and even exclusivity.

If you want to position your brand as everyday and affordable, then a more equal balance between negative and positive space will help get the message across.

Here is an example of how macro whitespace can change the brand positioning:

whitespace for a luxury brandIn this example, you will notice there is more negative space in the website design than there is positive space – even within the photography.

whitespace for an affordable brandIn this example, the balance between the negative and positive space is equal.

How to Use Whitespace

The key to using whitespace is knowing when there is enough. Remember the end goal: to communicate effectively and provide a good user experience. This can require you to make some ruthless decisions about the priority of your content.

When it comes to the overall design, web designers often begin by analyzing the brand: is it elegant or affordable? They then add space between larger objects such as the logo and navigation bar until the design starts to look clean and modern, but objects that relate are still within close proximity. To address legibility, they add space between letters, words, paragraphs, and stop when there is too much and the objects no longer connect.

Knowing when to stop is the most challenging aspect of working with whitespace. To help you understand, let’s look at the following collection of 5 examples of websites that have the perfect balance of negative and positive space for their brand.

5 Examples of Whitespace in Web Design

tiffany whitespaceTiffany’s brand positioning is perfectly shown by the ample use of whitespace in this design. There is a lot of whitespace around the text and in between each line. The objects in the positive space are large, yet still have a lot of whitespace around them. This balance embodies Tiffany’s image of beauty, love and luxury.

envision whitespaceIn the Envision website design, whitespace is used to group objects together. The header is surrounded by lots of white space to convey simplicity and modernity, which is appropriate for a company that creates web user experiences. The content contains a more equal balance between negative and positive white space to focus the user’s attention on the information. Furthermore, each line has more white space between it than positive space, making the text legible and easy to process.

chanel whitespaceChanel is pure luxury and the use of whitespace on their website design projects this image flawlessly. Even though the whitespace between each navigation element is balanced more equally with the positive space – the theme of luxury is reinstated with the extra whitespace between each letter.

cb2 whitespaceThe CB2 website design is a great example of affordable elegance. The whitespace in this design is not equal to the positive space, however it’s not too far from it either. This website design uses whitespace as a way to group objects. There is lots of whitespace surrounding each group of elements, making the website look modern, just like their products. Yet the whitespace in each group is close to, but not equal to the positive space, suggesting high-end yet affordable, reflected by their prices.

mailchimp whitespaceThe focus of the Mailchimp website design is clearly on usability. The white space is used to group objects and make content legible. Each grouping has a lot of whitespace surrounding it – making the website look modern and clean. There is more white space between each line of text than positive space – making the content legible and easy to understand.

So, What’s Their Secret?

There is no secret formula to whitespace. You need to trust in your designer’s ability to balance the composition with both negative and positive space.

When evaluating a website design, you and your designer need to assess the brand positioning – does this balance create the right emotional reaction for your brand? Also consider usability: does the design make it easy for the user to find and process the information?

Remember, the easier your site is to use, the more successful it will be.

Start typing and press Enter to search

EnvisionUP Remains Open For Business For Your Online Services Needs.> Our COVID-19 Statement
+