White space is not your enemy!

This article was first published on Strata3 blog.

White space or negative space is the area between the elements of a design. This space doesn’t need to be white in colour and can help transform a website completely.

Gone are the days of the web where you need to squash all of your content into a small space. The mythical user that refuses to scroll or click on your website is a thing of the past and with it we need to embrace white space.

White space is an incredibly powerful tool for the designer to help create a usable, legible, focused and modern online experience.

How can mere space make something more usable I hear you ask? Have you ever parked your car and then come back to see you have no space to get out…

We all need space to manoeuvre in life and the web is no different. Making elements with enough space around them not only helps to draw your eye towards them, but also makes it easier for you to interact with them.

White space also helps to make your text more legible. When text is pushed on top of itself it can be incredibly hard to digest and readers will easily lose their place jumping between the lines. It makes reading take a concerted effort but with a little space to breathe, your content can sing.

Example of bad text spacing

Example of bad text spacing

Negative space can help you to direct your users through a certain path. Our eyes get distracted by clutter or visual noise, so deliberate use of space can help to draw the eye in.

Below you’ll find some examples I’ve found of white space at it’s best in web design.

Actual ‘white’ space

Marcello Manso

Minimalissimo

Adam Widmanski

Maison Bernard

White space with photography

Cienne

Leen Heyne

Boegli

Ayr

Avex

White space with colour

The Outpost

Pelican Books

Skeleton

Adam Hartwig

White space for products

Compliments

Nua Bikes

White space on blogs for legibility

WRG Mag

Katie Kovalcin

Good Magazine

White space has become so important that Firefox has developed a plugin called ‘Reader View’. With the flick of a button you can view any page online and transform it into something clean, clear and legible.

Conclusion

Clever use of negative space can help a website be more user friendly, easier to read, more enjoyable to interact with and memorable. No matter what the function of your website, don’t be afraid of white space because it is not your enemy.