White space, also known as negative space, is a crucial element of UI design. Despite its name, white space doesn't have to be white — it can be any color, texture, pattern, or even a background image, as long as it's empty.
We refer to micro and macro white space in UI design.
- Micro white space refers to the small spaces between individual elements, such as text and images.
- Macro white space refers to the larger spaces between sections or groups of elements, such as between paragraphs or sections of a page.
💡 The Law of Proximity will help us understand whether we should use micro or macro white space — connect relative elements by placing them close together, while unrelated elements should be further apart.
White space helps to
- improve the legibility
- design an organised layout
- create sense of hierarchy
- guide user’s attention
- emphasize important information
1. Improve product legibility and readability
Well-designed white space improves legibility (your ability to recognize letters and words) and readability (how well you can scan the content) by making text easier to read.
By adding space around text, it becomes easier for the eye to follow the text and distinguish between different lines. This is particularly important for long blocks of text, such as articles or blog posts.
To improve legibility and readability we should consider two main things — paragraph margins and line spacing. Generally, the larger the spacing, the better experience the user will have whilst reading.
But you should find the right balance. Too much white space can break it all. Here's an example with a fairly long text:
2. Design an organised layout
White space provides breathing room for the user interface, making it feel less cluttered and more inviting. A cluttered user interface can be overwhelming and confusing, leading to frustration and ultimately, a negative experience.
The proper use of white space, on the other hand, can improve the overall usability of the interface by making it easier for users to navigate and find the information they need.
3. Create a sense of hierarchy
The use of white space creates a clear visual hierarchy on a user interface. By adding space around important elements, such as headings and buttons, they become more prominent and easier to identify.
This helps users quickly and intuitively navigate the interface and find the information they need. Let's look at the humble login function as an example:
4. Guide user’s attention
Having less information and fewer elements on the page equals clarity and focus, and draws attention to the information and elements that are on the page. By adding space around the elements, the design does not look random or chaotic.
On the contrary, we direct the user's attention in the right direction. Which payment page layout is better?
5. Emphasize important information
White space can be used to emphasize content, such as images, videos, CTA buttons. Making an element bigger or brighter isn’t the only way to draw attention to it.
By adding space around the content, it becomes the focal point of the interface and draws the user's attention.
Notice the contrast with our first example — with a smaller text we can tighten the width, expand line spacing and enjoy more macro white space.
The case for white space
White space can sometimes cause problems between designers and founders. While designers understand the importance of white space in creating an elegant and effective design, founders and managers may view it as wasted space that could be used for more information or visual elements.
However, it's important for designers to educate startup founders on the importance of white space and how it can actually improve the user experience by explaining its benefits.
☝🏻 People get frustrated when information bombards them. We’re humans, not machines. White space calms us, letting us “breathe”.
Ultimately, it's important for designers to find a balance between using white space effectively and meeting the needs and expectations of the founder. While white space is a crucial element of design, it's important to communicate and understand their goals and objectives for the project.
.svg)
