I like it, but… there’s far too much whitespace

A comment I’ve heard three times this week already, and a comment that can ruin a project pretty quickly. I get the feeling that when I keep fighting this demand I’m thought of as a precious designer and the only thing I want to achieve is making the website ‘look pretty’. This is not the case, as a good use of space can help make a website more usable and effective. A beautiful website that achieves your clients goals… the holy grail.

So, what is ‘whitespace’?

‘Whitespace’ or ‘negative’ space is simply defined as the space between elements on a page. By elements I mean typography, shapes, images, buttons etc. and by space I mean visual relief around those elements.

So, whitespace doesn’t necessarily have to be white it can be a colour, gradient or pattern. This also applies to the smaller details within a layout, such as space between titles, list items, letters and baselines of successive lines of type.

And I keep banging on about it because…

It’s one of the first things we’re taught as designers, the use of space coupled with the right choice of typography and photography are the very basic fundamentals of good design.

So from a design point of view the use of space helps make a layout feel prestigious and professional. This is the norm in luxury markets such as the fashion industry but not so much within the b2b sector and large web security/tech client base we work with. I’m not entirely sure why this is, as no matter what service or product you’re selling, surely you want the brand positioning to make it feel high end quality and the website to look professional as well as being effective.

Along with the general look and feel, the use of whitespace helps create balance and structure across the page. This helps in many ways, for one it breaks the content up into blocks that are easier to digest. This makes the page much easier to navigate through and interact with so depending on what you are trying to achieve it will help make your message easier to convey or lead the user to what you want them to focus on, such as the CTA.

The perfect example of a good (left) and bad (right) use of space — This example is from two companies both operating in the not so glamorous network solutions industry. The left displays content in a way that’s easy to digest & makes you want to scroll, the right has killed all space to move the content up the page — by doing this it has made the page confusing & I’m not sure about you but I’d leave immediately.

As I previously mentioned, this also applies to typography treatment. By using increased space between titles and text blocks along with gutters and line spacing you will largely increase overall legibility. This again will add to making the content easier to understand and generally help create a better user experience (a great example of that is the platform you’re reading this on).

How some clients see it…

Is as wasted space that’s needlessly pushing the important content further down the page. The main reason for this is the myth that is ‘the fold’ which quite frankly in todays world of endless devices.. doesn’t exist.

There’s shed loads of research out there that proves we’ve all grasped the concept of scrolling in fact there’s results that prove many users like to scan the entire page. That said, I do think important content and CTAs should remain further up the page but this doesn’t mean cramming them at the top. Largely a user will scroll down and be lead to the key area of the page if the content is engaging and well laid out.

There will always be a key message to convey and action we’re wanting the user to take, so naturally a client will want this to stand out. Now, for a lot of people the first thought tends to be ‘make it bigger’. Why have all that space around the button when you could make it three times the size?! Whereas a designer will use space to lead to and create emphasis on the key content area.

To sum up…

Whitespace is one of — if not the — most important part of any design. By killing it from your layouts in an attempt to add emphasis and/or get content higher up the page you’ll be cheapening the overall look and feel, creating an uncomfortable user experience, making content harder to understand and key areas difficult to focus on. So with engaging content and good design we can hopefully reduce designer — client friction and produce beautiful online experiences that achieve our clients goals as well our own.