Whitespace is a key tool in a designer’s toolbox - it can look, to the untrained eye, like ‘empty, wasted space’, but in actual fact it’s critical to a site’s clean look, elegant layout and a web visitor’s ease of use.
Designers love whitespace, but website owners see it as wasted space. Granted, it can seem that whitespace is an opportunity to fill with supporting images, graphics or explanatory copy.
However, whitespace is invaluable, to the customers reading your site and the overall design and usability of your website.
Human Factors International conducted research that reveals whitespace increases comprehension by almost 20%. (Source)
Whitespace is referred to in the design world as ‘negative space’, it is “the space between elements in a composition” (source). It is purposely ‘bare’ as it allows your eyes to relax and not manically move from element to element, giving your eyes a ‘visual breather’ before taking in the next element of your site.
The Pros of Whitespace
Having a visual breather between different parts of your webpage allows the user to mentally prepare to move on to a different message or topic, whilst it allows you the website owner to portray a clearer picture of your business and marketing messages.
Whitespace allows you to put a variety of elements on one scrolling page and make it easy to decipher and digest - as far as we’re concerned, that’s pretty crucial.
Makes content legible
Whitespace between blocks and chunks of text, graphs or tables all helps to separate individual messages, making it easier for the website visitor - whatever device they may be on - to read and digest the content they’re viewing.
It’s crucial that paragraphs are spaced ‘nicely’ - read “have plenty of whitespace around them” - to allow users to read your messaging without straining their eyes or getting muddled up between lines. It’s very much the same attitude that you should have towards whole page designs.
Slows your visitor down
Create the opportunity for an overall improved experience for the end-user with whitespace that slows down their scrolling and prevents them from skim reading. By creating a beautiful immersive UX experience with your use of whitespace, you can pace the visitor’s use of your site, even slowing them down and ensuring that key messages make them pause and take a moment.
Types of Whitespace
There are actually four types of whitespace, which isn’t as important as a website owner, but it can help you to understand the importance and how whitespace works for various elements of your site.
The space between elements of copy, graphics, images, etc., usually the most common variation of whitespace.
The space between smaller elements, such as kerning (letter-spacing) and leading (line-height). It’s not as apparent and mostly seen as acceptable because most web visitors and website owners appreciate the importance of line and letter spacing.
Intentional use of whitespace to create structure and flow of a page. This is clear when a website flows well and guides the user down a page to a conversion point (form, CTA, etc.).
A natural occurrence in elements such as text or graphics.
If you’re undergoing a web project or considering a website redesign you should ask your designer about their take on whitespace and ask them to show you examples of it in action. Whitespace is crucial for your visitors as it creates an easy-to-use web experience, so they’d love to get you on board with all that’s fantastic about whitespace.