The value of white space in design

TWS Avatar

Andrzej, UI Designer

‘Empty space has more energy than everything we know.’

This statement relates to quantum physics, more precisely to all matter in the observable universe. But, I would argue this hypothesis applies to other fields of human interest too, like Interface Design.

The role of white space

White space in design is often called negative space or empty space. It’s simply the unmarked area in the design. But to be super precise, this space is not completely empty, there might be colour, pattern, texture or even a background image. When used in the right way, it decreases necessary cognitive load to absorb and understand information, makes content easily scannable and improves legibility. It brings various visual clarity when used in different proportions. It declutters surfaces and overall improves the users’ experience. Thus, globally increasing the effectiveness of an app or a page, which in turn brings new engagement.

Designers love it, stakeholders want to fill it

It’s pretty understandable that many clients, managers as well as developers consider white space as a wasted or unnecessary space just waiting to be filled. As always there is a golden ratio, but it varies in different cases and contexts. That’s why I’d call it a general outline rather than a fixed set of rules:

1. Legibility First

When laying groundwork for an optimal design system, one has to take into account spaces between lines, paragraphs, menu items (so called micro spaces in general), to match with amount of content to be consumed by the user.

In other words, planning the right amount of space and positioning of the UI components, while making everything readable and friendly on the eye. What value comes from great content that cannot be read or makes users’ eyes tired? That’s why - readability first.

2. Validate the purpose of white space

While greater white space might bring sophistication to design, it has to serve a purpose. Not every dark space around lightened main characters makes a Caravaggio masterpiece.

Unnecessary big white space in between layout sections (so called macro spaces) can make navigation harder for user or may be harnessing app and page scrollability.  So, in other words, it’s more of an optimisation process and case by case approach, rather than setting a fixed aspect ratio.

3. Breathability may bring more conversion

Designers main job is to bring out the effectiveness and value of the white space to clients and managers. Users not overwhelmed by information, are more likely to positively digest content, yet more likely to click the almighty CTA.

Although, simultaneously with more white space, comes more responsibility for designers. With more breathing space, aiming for effective structure of content per fold, means finding more creative ways to develop the right UI components that will cover up all necessary content, while maintaining good global user experience.

Main takeaways

  1. Once mastered, white space in certain cases may become more powerful than the sleekest UI component.
  2. By giving the UI elements more space wisely, designers contribute to better user experience.
  3. Adding more breathing space in the UI and relaxing the overall interaction of the user’s experience is an additional value that finally leads to better business.

 

Share this article

Next Articles

Learning a new language
July 23, 2020

Learning a new language

Our Spanish Language Teacher, Ricardo, has written this fascinating article in which he draws upon his years of experience teaching. Give it a read to find out about psycholinguistics and the combination of “brain and will” that can propel your language-learning abilities.
How to load millions of rows into MySQL without agony
July 16, 2020

How to load millions of rows into MySQL without agony

It's a data dream! In this new blog article, our Database Engineer, Geo, shows us an efficient and reliable way to load tables without performance issues in MySQL.
The conundrum of security testing
July 07, 2020

The conundrum of security testing

Our Head of AppSec, Claudio, ponders what’s the real value of testing software without a true understanding of what we are testing for?