How to use White Space in Web Design?

It is a designers role to create compelling layouts users like to use. White space is a concept that will help you to make beautiful, easy to read websites. We live in the times of constant distraction.

All kinds of information surround us from printed and digital media, outdoor advertising, online ads. Websites, e-commerces, mobile apps – they are all full of content. We should create websites users like to visit. All layouts need to be easy to understand, with scannable and readable content.

‘Crowded’ websites are difficult to read. Complexity often makes users uncomfortable. If we’ve overwhelmed them with lots of different information, all fighting for their attention, they will leave or not take the action we’d wanted them to do.

It may be purchasing something on e-commerce website or reading the article on a blog. There is, however, a concept that helps graphic designers to create great web experiences, making the content appealing and easy to follow.

It’s white space - the way of giving your layouts extra room, simply by avoiding unnecessary clutter and using the space between elements for their advantage.

You may also like: Does design deserve more consideration from investors?

Web design & White Space – definition

The best description for white space should be a simple one, as the idea itself indicates simplicity: White space, or negative space, is the empty space on the website.

It is a space left unmarked, that not only makes the layout more readable but it also tones up the content. The user may focus on fewer, better presented elements.

COS online store is an example of a premium clothing brand using white space in web design to enhance the impression of high quality.

The evolution of the concept of space

We can trace the history of white space in design back to the ‘New Typography’ movement. It emerged in 1920s, led by Jan Tschichold. The movement proclaimed these principles:

• asymmetric balance of elements,
• content designed by hierarchy,
• intentional white space utilization,
• sans serif typography.

Beatrice Warde’s goblet

Another example of an early concept of white space in typography is an essay of Beatrice Warde, “The Crystal Goblet”, from 1930.

Warde described two goblets: first one “of solid gold, wrought in the most exquisite patterns”, and the second one “of crystal-clear glass, thin as a bubble, and as transparent”. Choosing one of them would show whether the person is truly a connoisseur of wine, or not.

The crystal goblet reveals the person’s admiration for wine, “because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain”.

Warde made this metaphor to make a call for increased clarity in printing and typography. She understood that a proper use of space helps to enrich the content.

Worth checking: 7 steps to user-centered design – a comprehensive guide to web design

What you can achieve with negative space

What Tschichold and Warde covered in their works, we can explain today with cognitive science.

White space, or negative space, is the space between the elements of your composition. It doesn’t have to be literally white or blank, though. It is a background with no cognitive weight for the users, so that they can focus on the main elements.

When it comes to graphic design, building a visual hierarchy between different UI elements is key. It helps to point the user towards the strategic points of interaction.

Moreover, white space helps to reduce the information clutter on the page, giving a content more breath. Having all that in mind, let’s recap what we can achieve using white space in web design:

1. The website is easier to scan

A balanced arrangement of the blank space enhances the ease of scanning the website. Users can easily go through the content, so it is easier for them to find what they’re searching for.

2. Improved readability of the content

Keeping the proper distance between characters makes the content easier to read. It helps users to read the web content faster, and easier.

3. Improved aesthetics

Implementing more blank space and reducing unnecessary elements can drastically improve your website's visual appeal.

Ask yourself a question: would you rather browse a page full of clutter, pop-ups, banners, and unnecessary visual effects, or a simple, easy to scan and read website, that gets straight to the point?

4. Impression of high quality

Abundance of visual elements can lower the impression of quality. Using blank space, on the other hand, does the opposite. White space makes the website seem lighter, more elegant. Lack of objects competing for users’ attention improves their experience.

Might be interesting: A case study of UX research for parliament’s website

Types of white space you can use

Now that you’ve seen the advantages of the white space, let’s  put that into practice. There are several kinds of negative space you can implement:

1. Macro space

This is the space between different elements. It helps to build a hierarchy and ensure the proper flow on the site.

2. Micro space

Micro-spaces are smaller blanks between the elements. We can use them to improve the clarity and transparency of a layout.

3. Active space

Surrounding objects with white space points users’ attention towards them, increasing their visibility as well as users’ awareness.

4. Passive space

It’s the minimal space between the elements, necessary for keeping proper navigation, spotting the active elements of the interface, and ensuring good readability of the content.

White space web design best practices

To get an even better idea of how to implement white space in your designs and to see how powerful it may be, let’s take a look at some examples of brands that used it well.

Oculus landing page is a good example of how to sell a product without too much information. All it takes is a compelling photo, clear copy, call to action, and enough space between elements.

The clothing e-commerce brand ETQ. proves that simplicity sells. Reducing clutter and unnecessary information push user’s focus towards products. And, at the same time, the quality of the brand is translated through the design.

Invision’s blog is a great example of using the right combination of copywriting, photography, and calls to action to encourage visitors to read a blog post. It might seem that there’s nothing revolutionary in these designs.

But, at the same time, you can sense the difference between them and other websites with too much content. It is tempting to cram in as much information as you can. Sometimes your client may want you to do it.

Also read: Long Term Cooperation Between a Software House and a Creative Agency

White Space in Web Design. Summary

Either way, it is a designer’s role to take only the most important elements, to create a website with clear message, and proper user flow. Use white space in web design to build a visual hierarchy of the UI elements, so that your website always delivers a great experience.