Whitespace is one of the most fundamental elements in web design. Unfortunately, clients always want to fill it. They see whitespace as wasted space and often want a bigger logo, a larger header, more content on the side, and tighter paragraphs to squeeze in as much copy as possible.
To some clients, if every square inch of a webpage isn’t used to promote their services, it looks like something is missing. And they’re right. Something is missing – clutter. And nothing tanks a website quite like clutter.
Website clutter is like writing all of your monthly tasks and goals on individual sticky notes and sticking them all over your computer monitor and office walls. When you need to tackle the day, were do you start? What’s the priority? After you spend a few minutes looking around, you’re exhausted and you just want to go take a nap.
That’s exactly how most people feel when they visit websites that don’t make use of whitespace. So here are some tips to help you understand how you can avoid overwhelming your visitors with clutter by using whitespace:
1. Psychology 101: People like feeling space around them
If you look to the physical world, it’s clear that people like having space around them. That’s why so many people get nervous driving down a two-lane highway. While there’s more than enough space for both cars to travel safely down the road, there isn’t much of a buffer on either side.
And when people connect in groups, they don’t just dogpile on each other in the middle of the room. They stand apart from each other and provide a decent amount of space between bodies. Even at the grocery store or other businesses where people need to stand in line, you can observe that people will constantly adjust the distance they hold between themselves and other people.
Space makes people feel comfortable in the physical world, and it makes sense that the same comfort would translate to the online world as well. And fortunately, the online world provides an extensive level of control over whitespace.
2. Whitespace creates legibility, which leads to action
Whitespace in the web world simply refers to the space between screen elements. Like the padding around images, or the space between the header image and the first headline. And speaking of headlines, perhaps one of the biggest mistakes people make is not utilizing whitespace in their typography. Like positioning paragraphs too close together or not putting enough padding around images introduced in the middle of those paragraphs.
Regardless of how amazing your sales copy is – even if you had it written by John Carlton – it’s not going to make a difference if people can’t easily read it.
Whitespace in typography increases legibility, which automatically gives your visitors a better chance at being drawn into your sales copy and, of course, clicking on links and eventually buying your products.
3. Whitespace can direct attention
When you want to direct someone’s attention to a specific element on a page, a designer will know exactly how to use whitespace to do it. A client will usually just want to make that element bigger. But making elements bigger doesn’t mean they’re going to draw attention. Sometimes it can make people miss the element all together when there’s too much going on.
Google’s clean interface is the perfect example of how whitespace directs attention without having to enlarge the element you want people to look at. You don’t see a search bar 1024 pixels wide. It’s not needed – the whitespace makes it the center of attention.
Take a look at this styling product website for an example of how whitespace can be used to draw attention to your products. While there are only three products on the page, each one is framed with a thin outline with plenty of whitespace to separate them. Sometimes people want to cram in as many products as they can using tiny thumbnails in a grid, but this type of product layout is more visually appealing.
4. Whitespace can aid your marketing efforts naturally
Marketing methods are a dime a dozen these days. There are plenty of marketers selling their special services, systems, and ideas for under $100. And most of these systems sound legitimate. But if your website is a jumbled mess of elements, no marketing method is going to increase your sales.
If you’re investing in a new marketing strategy, the usability of your website needs to be consistent and smooth. You can accomplish this with a good template.
Choose a template with ample whitespace
If you’re not having your website built from scratch, you need to make sure you connect with your designer to select a pre-made template that has a proper distribution of whitespace. The whitespace in a template isn’t something that can be easily changed without restructuring the entire template, so choose the right one from the start.
You’ll find that as long as your template is created properly, your products will naturally look good when you plug them in. Just make sure you maintain your whitespace throughout the site, and if you want to change any of your elements, make sure your changes enhance your website’s usability so people won’t struggle to buy your products.