When it comes to effective web design, white space is the glue that binds everything together. It
- Helps simplify the layout of a website
- De-clutters and improves the overall flow
- Adds structure and draws attention to key areas
Although it’s sometimes referred to as negative space, white space is anything but a waste of space. It’s an essential element of web design. Used well, it can transform a website’s design from fright to delight.
Contents
- So what exactly is white space?
- Does white space have to be white?
- Do you have an example?
- Improves readability
- Creates balance
- Highlights what’s important
- Aesthetically pleasing
- Encourages interaction
- Improves focus
- Increased conversions
- Want white space on your web space?
So what exactly is white space?
Basically, it’s the blank areas between other elements on a webpage. This includes the finer detail such as the untouched spaces in the margins, borders, headers and footers, and the gaps between text and images.
The use of white space in design is by no means a new idea. In fact, 90 years ago Swiss typographer Jan Tschichold recognised its importance saying that white space should be “regarded as an active element, not a passive background.”1 Mr Tschichold was right. Rather than being the absence of something from a web design, white space adds an awful lot.
Does white space have to be white?
Good question. The short answer is no. Despite the name, white space simply refers to the blank areas of a website which could just as easily be filled with another colour or pattern or even a background image.
Do you have an example?
Sure, here are two. Google and Apple are fantastic examples of white space done well.
- Google’s homepage is white space heavy and clutter-free so the focus is on the one thing that matters most: the search bar
- Apple’s generous use of white space coupled with short and snappy text and multiple images is a master class in how to draw attention to your products
Now we know what white space is, let’s break down some of the reasons why it’s so important in web design.
1. Improves readability
According to Google, it takes visitors just 50 milliseconds to form an opinion about a website.2 White space is one of the best ways to make a good first impression as it improves the readability and scannability of a website.3 Used well it can increase readability by up to 20%.4 That’s because the blank areas around blocks of text help guide the visitor through the flow of the site and encourage them to keep reading.
2. Creates balance
Once you know what content (text and images) you want on your website, white space can be used to organise everything into a balanced design for an improved user experience.
White space helps give visitors visual clues as to how to process the information. For example, elements that are positioned closely together are considered to be related, whereas elements separated by a lot of white space are believed to be unrelated. Your use of white space may depend on your brand goals:
- Macro white space: This refers to the blank spaces between bigger elements (such as images and blocks of text). Sites with lots of macros white space are seen as minimalist and luxurious.
- Micro white space: This refers to the blank spaces between smaller elements (such as icons, buttons and lines of text). Sites with lots of micro white space are seen as informative.5
3. Highlights what’s important
White space lets your content breathe and helps clearly communicate your core messaging. A de-cluttered interface helps eliminate potential confusion by highlighting what’s important.
White space around important content elements helps increase their prominence6 and increase comprehension by almost 20%.7 This is particularly important for call to actions (CTAs) where surrounding the element with white space can make it stand out as effectively as making the CTA bigger.
4. Aesthetically pleasing
White space doesn’t just make a website more enjoyable to use, it also helps make it more enjoyable to look at. For example, high-end brands use a generous amount of white space online to create a feeling of sophistication and luxury. It’s a simple yet effective way of exuding class.
5. Encourages interaction
One of the issues with a cluttered web design is that it makes it tricky for visitors to know where to start. The abundance of content can be so overwhelming visitors are prompted to leave rather than try and de-code what to do next. And, as we know from point 1, you’ve not got long to impress visitors.
White space encourages visitor interaction by drawing their eye to what’s important, eliminating any distractions, and providing a clear user journey so they know what to do to achieve the goal that brought them to the website.
6. Improves focus
There’s no denying that design matters. One study into the reasons why visitors felt wary of websites found that 94% said it was due to the web design.8 White space is a design magnet. It attracts visitors and keeps them on a site by removing distractions and giving visual clues as to which content is most important. By organising the content so there’s a clear focus of how to use the website, you’ll improve the user experience and we all know what that leads to…
7. Increased conversions
The majority of visitors make judgements about a brand’s credibility based on their website design. Research has shown that first impressions are design-related and one of the best ways to build online trust is through the use of white space.9 In fact, elements that inspire trust can double conversions.10
All of the benefits of white space we’ve discussed above – such as removing distractions, making it easier to focus on what’s important, and highlighting the call to actions – have one common result: they improve the overall user experience. And improvements to the UX journey can boost conversion rates by up to 75%.11
If you’re ever in doubt about the effectiveness of white space, just think Google. Their excellent use of white space helped make it the most visited website in 2019 with over 63 billion visits with over 3.5 billion searches each day.12 White space isn’t empty space. It’s web design’s most powerful tool.
Want white space on your web pages?
If you want to let your content shine, we can help design a site that showcases what you do best through the clever use of white space. Let’s chat.
[activecampaign form=1]References
- https://usabilitygeek.com/
- https://research.google/
- https://www.nngroup.com/
- https://uxplanet.org/
- http://webdesign.about.com
- https://www.crazyegg.com/
- https://www.humanfactors.com
- https://blog.hubspot.com/marketing
- http://credibility.stanford.edu
- https://econsultancy.com/
- https://uxdesign.cc/
- https://www.oberlo.co.uk/
Leave a Reply