How to use white space in web design?

White space isn’t just empty space, it’s a vital building block in the design of an effective website and online content generally. Pages that are pleasant to experience, and clear to read and understand, usually employ plenty, and thought use, of white space. Find out what white space is, why it’s important and how to use it effectively to engage your visitors.

So, what is white space?

White space, which doesn’t have to literally be the colour white, is the space in between and around characters of text, lines of text, and in between and around images. It is space without any information, text or images, in it. White space is everything from the margins to the gutters and is the setting in which your other design elements sit.

Why is white space important?

In a world where we are constantly bombarded with information online, there can be a desire by website owners to get everything on their website. But, in trying to be helpful, pages of a website can soon end up cluttered and confusing.

Designers should be mindful of curbing this desire, and instead only give browsers the absolutely vital information they are looking for, using carefully considered ‘white space’ to organise that information. A simple design that’s easy to navigate is key to keeping readers’ attention and white space is one of your most effective tools in achieving this, for all online pages, whether it’s a page of articles or an e-commerce site you want customers to stick with and buy from.

White space helps to frame and focus the content you want visitors to understand, giving the content room to breath and be seen clearly. You only have to think of Google’s homepage, as a great example of use of white space, to understand the sense of this and how we understand in a second what that page is for and what it can do for us.

White space in and around the information you want visitors to understand makes a design elegant and confident. But more than that, because you are making the online experience better for your visitors, they’ll be more receptive to your site generally. It’s subtle, but considered design makes visitors feel cared for, and less uneasy.

Just think how it feels to digest a web page that looks like a busy infomercial, compared to one that sings a simple, clear message from a calm background.

Because white space improves readability and enjoyment of online experience, it increases your SEO. More click through and less bounce will up your rankings.

How to use white space

• Make text easier to read 
  Consider the space in between letters and also lines of text to make it as easy as possible to read. Don’t space out text too far so that it looks disjointed. Perhaps consider two or three minimal columns or short paragraphs instead of one larger paragraph. How can white space be used to make the text quicker and easier to digest?  
• Create focus 
  Use white space around the elements of the page you want your visitors to focus on. You want to use the space to create the right flow of their attention. Remember the natural ‘z’ shape that people follow when scanning a page when they are reading it: starting in the top-left corner, following a horizontal line to the right, then dropping down to the bottom-left before following another horizontal line across. 
• Structure content 
  Items that are grouped together, or have less white space between them, are inferred to be related. You can use white space to communicate how certain elements are to be grouped together or not, or not. If you group unrelated items together with minimal white space used, you will only serve to confuse your visitors. 
• Use it to help navigate 
  Use white space to help the flow of navigation. If you have long scrollable pages, white space can be used to direct the flow so that the reader knows where to go and where to look during that scrolling process. 
• Create a feeling of decadence 
  If you’ve ever flicked through a high-fashion magazine, you may have noticed the expanses of white space. A single item in a desert of apparently minimally designed background creates a feeling of luxury and expense, and is known to be seductive to the reader. Keep this concept in mind for your own designs and use the principle to your advantage. 
• You don’t have to use white 
  White space can be any colour, or complimentary block of colours that is negative of images and text. You don’t have to stick to white if it isn’t having the design effect you want to achieve with your palette. Any colour you use, is still white space and will have the white space effect.

If you haven’t before, start thinking about how you can use white space in and around all the elements of your website design, and you will undoubtedly see an improvement in engagement, and SEO. Keep space in mind for clarity, ease of navigation and elegance, and you won’t be able to help but improve your users’ experience. 

< Read more articles on our Web Academy