White space or negative space is the empty space between and around the component of design ( typography, drawn lines, images, etc.) or page layout (between paragraphs, pictures, buttons, icons and other items) on your web page. Many times it gets ignored by us.
UI designer knows very well the importance of negative space because it is the area that draws attention to, and make more attention to the actual subject. white space might cause problems between designer and clients. Design theory promotes the use of white space for grace and ensuring a quality user experience. It’s a sad thing that many clients and managers consider white space as a waste. They think it could be used to stuff more information or design elements.
On the other side, white space is a great way to balance design elements and arrange content in a better way to improve visual experience. Also, People get frustrated when attacked by lots of information. Try to understand we are humans not machines. negative space makes us calm and lets us breathe when we read.
Micro Vs. Macro White Space: –
Micro white space: –
The small space between design or visual elements is micro white space. You can find it between lines and paragraph. The space between grid images and that is used for separate menu links. So it directly effects on content readability. For example, margin and line space surrounding paragraphs affect the user’s reading speed.
Macro White Space: –
The large space between main layout components and the space surrounding the design layout. You find in most of the website the macro white space to the right and the left side of the page.
The best example of a website that applies macro white space in a very effective manner is Google.com.
If you notice Google.com looks so simple and that’s the power of the site. Because there’s no clutter, you have to less work for your eyes and mind. Your mindset is very clear why are you here to search something.
Google.com is one of the first websites to use of white space. In past internet connection were very slow. participants in user tests would wait for the page to download. By user test, Google gets to know that they were not used to seeing that much white space on the screen. so they decided to add a copy of the notice at the bottom of the page to understand user that the page is being loaded.
Why White space you should use?
Content – If the content is more in the layout, then the chance of macro negative space will be less and the volume of micro white space will increase.
Design – The ratio between micro and macro negative space in the layout is influenced by UI design. This can be unfair to one type of white space over another kind of layout.
User – Using demographic information (age, education, gender, etc) we can know the right balance of macro and micro white space for the specific audience.
Branding – You just take an idea of company’s budget and the quality of the product by seeing the negative space of a website. Here is some best example of websites that support this theory such as BBC, Apple & Mercedes Benz.
Here is an image below of BBC website showing both macro and micro white space.
Active Vs. Passive White space
Active white space – It is the space used to improve page structure by guiding the user about the content.
Passive white space – It is the space applied to give pleasure through the beauty of layout without guiding the user about the content and flow.
The image above shows the difference between active and passive negative space.
- On the left side, we see a text in a very compressed and squeezed manner. There is no negative space between the paragraph and characters etc. and the user experience is very tough to read.
- In the middle one, we have some passive negative space. so the user experience is much better than the first one.
- On the right-hand side, we have some active negative space also to guide our user with the content. Active negative space may improve the page structure by improving readability.
Best Practices to use Negative space in your website
If I say honestly. it is the concept we use according to our purpose. For example, if your purpose is call-to-action (learn more or buy now or download type of button) Or the primary messaging. The apple.com is the best example for white space.
Contrary, an e-commerce website doesn’t have a much bigger option for negative space and there they have lot’s of content to be squeezed. Still, there is some need for negative space, not luxurious like previous one.
1. Assign 15 points to grab user attention.
Source: Here we take an example of MailChimp website.
Every item you add to a page costs 1 point. If you have several things to say to your user, so you cannot say everything on a homepage. You use different-different pages to Conway your point and don’t need to push out your Negative space.
2. Prioritise clarity and Readability
The two important aspect to keep in your mind when optimizing the text content is Paragraph margins and line spacing. Line spacing improves the clarity of body text. Larger the spacing, better the user experience while reading. But if you do too much spacing, it can break the unity and looks disconnected.
3. Break out the empty space
Using contrast colour, dissimilar font size, and asymmetrical white space to add style in the layout.
4. Negative space serves the purpose
Please through beauty is only one side of negative space, the other bigger side is to make a messaging or call to action more important. You can just validate by user test whether or not one is able to achieve.
Heatmap tool with a high interaction on call to action is obviously the first choice for UX designer.
Source: hotjar heatmap
Consequently, Whitespace isn’t an empty canvas, it’s a powerful design tool. How much white space should be used to create a good layout requires more practice.