White Space

You Are Here: Home » The Importance of White Space in Web Design

The Importance of White Space in Web Design

by | Nov 29, 2013

One of the elements of Web Design layouts that cause the most disagreement between designers and clients is the issue of white space. Good designers utilise white space in abundance, whereas website owners often feel these areas need to be filled with an additional design element or content.

In this article we will discuss the importance of careful use of white space and how this can be integrated without compromising client concerns about maximising the use of on-screen real-estate.

In order to demonstrate this, we first need to define exactly what web designers mean by ‘white space‘.

 

Defining White Space

When we talk about white space, the first thing to mention is that it doesn’t necessarily need to be white! What we actually mean is negative space between positive design elements such as images, text blocks, videos etc.

White space could be a colour, a subtle background pattern or even solid black. In the examples below from the Apple website, we can see that the design team has made extensive use of white space. In the first example this is actually white, whereas in the second it consists of a solid colour;

 

Notice the extensive use of white space, marked in red

Notice the extensive use of white space, marked in red

 

White space doesn't actually need to be white

White space doesn’t actually need to be white

 

So now that we have identified exactly what we mean by white space, we now need to demonstrate exactly why it matters…

 

Balancing Positive & Negative

Just about everything you can think of has a polar opposite. We live in a universal duality of yin and yang, good and evil, matter and anti-matter, white and black etc… you get the idea. These exist to provide balance and harmony. For example, you could never truly appreciate the concept of ‘good’ without having experienced ‘bad’, or happiness without some sadness.

Therefore we can think of white space as the counter-weight to the positive design elements that provides balance and harmony to the layout. The reasons we need this balance are aesthetic but also very practical at the same time. Practical in terms of the usability and the overall effectiveness of your website in conveying a message and thereby converting visitors into customers.

 

So, how exactly does the use of negative space function to improve effectiveness?

 

Enhancing Readability

As discussed in a previous article, ‘How to Differentiate Your Business Online‘, compelling content is the most important element on your website.

However, there is little point in crafting web copy that users cannot, or do not want to read because it’s displayed in a cramped, confusing manner.

Notice the dramatically enhanced legibility of the following content, simply by adding some negative space to the mix;

 

Low readability article with no white space

Low readability article with no white space

 

The same article with white space... notice how much the legibility has increased

The same article with white space… notice how much the legibility has increased

 

Increased Understanding

Not only does white space lead to greater readability, it also creates a deeper comprehension of the actual meaning of the message.

The Nielsen & Pernice book ‘Eyetracking Web Usability‘ determined that white space can boost understanding by almost 20%.

 

White Space Focuses Attention on Important Elements

When tasking themselves to draft a layout design, untrained people will often try to draw attention to important elements by excessive use of colour, scale, over-elaborate fonts, fancy patterns or flashing, animated elements.

Trained designers however, realise that the same effect can be achieved in a simpler, more efficient way by contrasting the important element with negative or white space.

In the following example Screenshot, you can see how white space around the Phone Number makes it very easy for users to find it – a really simple but incredibly effective way of increasing the number of phone calls the business receives.

 

Phone number is much more locatable due to plenty of surrounding white space

Phone number is much more locatable due to plenty of surrounding white space

 

The single most striking example of how powerful the use of white space can be is Google. Many consider that its unrivaled success can be largely attributed to this simple design practice.

Before Google arrived with its ultra-minimalist design, Yahoo was the king of search.

 

Google astutely realised that Yahoo was extremely cluttered and visually confusing, detracting attention for the main purpose of its existence. So they stripped everything down using negative space to laser-focus on the main purpose of the page, eg. the search tool… and they have never looked back since.

 

The craziest thing of all is that, even despite being dethroned and suffering years of being the underdog, they still haven’t learned their lesson, as the following screenshots clearly demonstrate;

 

Yahoo - still massively cluttered... will they never learn!

Yahoo - still massively cluttered… will they never learn!

 

Its the plenty of'nothing' that's the real secret to their world domination!

Its the plenty of ‘nothing’ that’s the real secret to their world domination!

 

So now that we have discussed why white space is crucially important, lets now turn our attention to some of the reasons why many website owners tend to rail against it…

 

Trying to Be All Things to All Men

Many website owners tend to feel a need to offer as much information as possible to their users, or offer many different products or services in order to maximise revenue. They feel the need to make all these things present on the home page, in particular above ‘the fold‘.

Again, the above example of Google versus Yahoo is the perfect demonstration of this, and the relative fortunes of those two companies is the ultimate expression of how crucial white space and minimal visual clutter really is.

 

Attempts to Avoid Vertical Scrolling

It’s definitely becoming less prevalent today, but many business owners still express a fear that users will not notice any content that requires vertical scrolling to access. Therefore they often instruct that white space be eliminated to concentrate everything above the fold… or that the top part of the screen be visible without vertical scrolling.

However, even way back in the 90’s it was becoming clear that scrolling simply was not an issue for most web users. For example, see this Neilsen article from 1997, ‘Changes in Web Usability Since 1994‘.

In this article, under the heading ‘Scrolling Now Allowed‘, it states that ‘we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.

Given the many years that have passed since this study, in addition to the widespread use of mouse scroll wheels, it is safe to assume that scrolling is barely an issue to anyone these days.

On top of this, the fact that there is such a huge variety of devices and screen sizes that are used to access websites today, there really is no particular point which can be determined to constitute ‘the fold’. On any given website, there is a huge amount of difference between where the fold occurs on a large format desktop monitor compared to some of the smallest smart phone displays.

 

Too Many Cooks

In many cases, minimisation of white space can occur in organisations where there are two or more people contributing to the development of the website. They often have divergent ideas and try to compromise by including them all, giving equal prominence to them on the home page.

 

In other words, politics creates more problems than it solves… a familiar story unfortunately!

 

The best thing we can do is in a situation, is refer the relevant parties to articles such as this to help them realise how important white space is in the design and that it really is the last thing that should be sacrificed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Get a FREE Consultation