There’s a common misconception out there that in order to get your brand or product message across to potential customers online (or in any context), you need to present all important information immediately, or they’ll get distracted and leave. And even though it is ideal to feature your most important product or brand information at the top , it can be detrimental to the overall impact your site will have on a user if you present too much information, too soon.
Fear not, though - your good friend whitespace is here to help.
What is ‘whitespace’ and why should you care about it?
In relation to web design specifically, the term ‘whitespace’ (which is interchangeable with the term ‘negative space’) refers to any area on a web page that is not occupied by content. So essentially, it has nothing in particular to do with the colour white and everything to do with how much room the elements on your webpage are given. This covers everything from the spacing around graphics and images down to the ‘micro-whitespace’ that exists in letter-spacing and line-heights within text paragraphs. Whitespace is often perceived as ‘wasted space’ but as Jan Tschichold posed as far back as 1930;
“White space is to be regarded as an active element, not a passive background.”
Helpstay website, designed by Kooba.
It serves many purposes and works very hard for you and your brand - Whitespace is that friend that’s always sort of been there but you haven’t taken much notice of. Once you get reacquainted you might find that Whitespace shares a lot of the same goals that you have for your website:
- You both want potential customers to understand what you are about (Whitespace improves readability and comprehension)
- You both want to make sure people visiting your site don’t miss important information (Whitespace helps to prioritise information on a page)
- You both want to make sure that customers and clients feel confident and secure when reviewing your brand or products (Whitespace helps to establish trust and credibility on a website)
- Ultimately you want the people who visit your website to have a good experience - you want the process to be easy and pleasurable to make sure they engage with your brand and/or product in a meaningful way.You also want to make sure they will want to use your site more than a competitor’s site (Whitespace can help improve user satisfaction levels)
Helpstay website, designed by Kooba.
Readability & Comprehension
So how do you tackle the problem of needing your potential customers to understand your product or brand when it has been well established that people don’t read on the internet?
A good use of whitespace in a layout makes sure that your content can be quickly scanned and easily understood. Research carried out by Wichita State University has shown that the use of margins in paragraph text leads to slower reading times but hugely increased comprehension levels when compared to content that has no margins. So giving the elements and content on your page room to breathe ensures that users will be able to take in what it is you’re trying to get across.
Data from ‘Reading Online Text: A Comparison of Four White Space Layouts’.
Another factor that is integral to any design process is making sure the most important information gets the attention it deserves. When designing around a key element on a page, designers will oftentimes turn to the negative space around a feature to make sure it is not missed. An effective use of whitespace can help guide the user through the page - e.g using whitespace to draw the eye of the user gives you the opportunity to guide them through the page in a way that will best serve your end goals; be it brand recognition, improving conversions, sales or engagement, or by providing information.
Prosperity website, designed by Kooba.
Trust & Credibility
A big factor to the success or failure of a website is how secure users feel while using it. A study by Stanford University looking into web credibility found that whitespace was a key factor in building trust with users. First impressions count for a lot, so making sure you don’t give your customers any reasons to doubt your message is vital with any design. One thing whitespace is really good at is making your site look considered, organised and well thought-out. The whitespace employed in a design is key to influencing how your website is perceived, particularly upon first use. If your site looks well considered on the front it stands to reason that things are well considered and efficient behind the scenes too (regardless of whether that is the case or not!). This gives users confidence that if your company is paying this much attention to the details, then the big stuff must be really well taken care of.
Responsive details on Athletics Ireland website, designed by Kooba.
If you are concerned about how your brand is being perceived online, a design that makes good use of whitespace can help you avoid these factors which commonly contribute to mistrust online:
- Crowded or cluttered layout
- No margins or padding
- Poor alignment
- Too much text
- Small font sizes
Swrve website & responsive details, designed by Kooba.
Ultimately, the combination of good readability, quick scanability, easily understood content, ease of use, and a good, trustworthy first impression all go towards making your website more pleasant to use. In competitive markets where users can get what they are looking for from multiple sources, whitespace is one of your biggest assets in standing out from your competitors.
Responsive details on Prosperity website, designed by Kooba.
So, if you’ve ever had a moment of confusion on receiving a long, airy layout for your newly designed or redesigned website, don’t worry - we haven’t forgotten to add your content - this space is most definitely on purpose. It is likely the result of a well considered design approach that understands and values the important role whitespace will play in making sure your brand and/or product is presented in its best light.
Needless to say Kooba and Whitespace go way back so don’t worry if you need an introduction.