When discussing white space with people who don’t necessarily have a web design background, often it can be interpreted as wasted space – in fact, it’s the complete opposite. The truth is that it’s really utilising the available space in a more beneficial way. Firstly I’ll explain what it is…
What is white space?
White space isn’t necessarily space that’s white – it’s empty (or negative) space between elements on a page. It allows those elements to get the focus they need and can generally make or break a design.
Let’s use amazon as an example. There is an awful lot of stuff on here, it’s a very busy website and not the greatest example to promote white space. I’m going there, as I feel it demonstrates my point for making something stand out in a crowd.
This is the top part of the amazon homepage, of all the page as it stands. You’ll notice that the area with the Kindle is the only part that has a larger amount of white space around it. Why is this? Let’s take a look at an alternative version of this page.
Although the differences aren’t huge, we can see that, having reduced the amount of negative space, it takes the focus away from the primary product amazon is trying to sell.
By adding white space instead of cluttering up areas with content that may not bring any value you can use it to bring focus to the areas you want people to view most.
Apple is a great example of using white space effectively. They are all about showcasing their products, and they keep it simple in many ways.
Huge image, minimal copy and lots of white space. It is all about the product. Not their logo, not who they are, not their latest offers or blog posts. This allows you to focus on the product and not be bombarded with huge amounts of information immediately that you see on a lot of home pages.
The image above, for example, shows the exact same information in the original. Immediately the product Apple want you to focus on is competing with 4 other areas. It’s likely people will ignore the iPhone and focus on the other 4 areas as much as they would focus on the iPhone first. In the original everyone has to focus on the iPhone, which is the most important thing on this page at the time.
White space isn’t a waste of space! It’s a way to put emphasis on the most important things on a page, and is something which should be incorporated in to design to help guide users through the journey you’ve laid out in front of them.