“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 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?
Simplicity is at the crux of good design, and it will always be in style. 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 actually have to be white; it just needs to provide breathing room for your design’s elements.
When used properly, whitespace establishes a proper hierarchy of information and 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 (this is called the hierarchy of information). 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 to read.
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:
Before whitespace was added to the composition.
After whitespace has been added to the composition.
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:
In this example, you will notice there is more negative space in the website design than there is positive space – even within the photography. The simplicity of the presentation gives this brand a sophisticated and classy feel.
Whereas in this example, there’s much less whitespace between individual elements, pictures, and within the composition of the images themselves. The layout of these elements gives a more frantic, chaotic feel compared to the previous website.
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’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.
In the EnvisionUP 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 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.
The 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.
The 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.
Get Started Today
Start getting the online leads your quality business deserves today. Get a free no-obligation initial 30 minute consultation from one of our Google Certified Experts.
An EnvisionUP expert will respond within one business day or less with the next steps.