White space.

Do the words strike fear into your heart? For most people, it won’t. But I think any designer that has dealt with clients have come across someone somewhere that wanted to cram every inch of the canvas full of content.

Before you carry on with this post, I think it’s imperative that you understand what white space is in the context of web design.

What is white space?

According to Segue Technologies, white space is “the portion of the page left unmarked; the space between graphics, margins and gutters. It is the space between columns, between lines of type or figures that provides visual breathing room for the eye.”

Now, let me introduce you to Horror Vacui. The dictionary definition of Horror Vacui is “a fear or dislike of leaving empty spaces”, especially in an artistic composition. Do a quick Google search with “Horror Vacui” as the search term to see what art results from having a fear of leaving empty spaces.

Wait! Let me save you some time! Here’s an example below:

A painting by Outsider Artist Adolf Wölfli containing space filled with writing or musical notation.

As you can see, there’s a lot going on in the above image, but it’s done on purpose to create a visually busy and dynamic effect. Surprisingly, according to Wikipedia, some examples of horror vacui in art come from or are influenced by the mentally unstable and inmates of psychiatric hospitals. Now that I think of it, looking at the above example,  it’s not all that surprising.

For the last few years, web and print designs, for the most part, have shifted further and further away from this cluttered look, and for good reason. Various studies into the psychological effect of white space have shown some interesting results. In general, people perceive products in advertisements with more white space to be more expensive, for instance.

In terms of web design, elements are getting fewer and farther between, but they’re also getting bigger and bolder. I find it interesting to compare old websites of large brands that we know and love to their newest version.

Here’s an example of how Apple’s website has evolved from 20 years ago:

Apple's website, 20 years ago.
Apple’s website, 20 years ago.

 

Apple's website, today.
Apple’s website, today.

As you can see from the example above, Apple has drastically decreased the amount of content shown on the screen and created ample breathing room between elements on the website. This is important because it creates a comfortable reading experience for the end-user.

What white space isn’t.

I think many people assume using a lot of white space in your designs forces you to take on a flat, white design that can seem boring to some. I’ve also seen complaints that large sections of the site that are just empty white space can contribute to eye strain. I think these are criticisms for the bad use of white space rather than the whole idea of white space itself. Firstly, white space just refers to leaving enough room between pieces of content to make them more legible. The actual colour of that space can be anything, so you can make it interesting and use darker colours if eye strain is an issue.

In conclusion

When it comes to my own designs there are a lot of aspects I take into consideration. I am a staunch supporter of the use of adequate white space to make the web a neater, more legible place. However, I also take the needs of my customer and their users into account. Some sites can afford more white space, others less. Use your discretion, but remember that using white space can help create a harmonious, well-balanced layout for your website.

...