How Proper Spacing can Enhance your Design

By Mohammed Aseem

user design

Space is nothing but an empty area. But even this empty area is very useful to organize the data and define hierarchy and structure in a web or mobile UI design when used correctly. In design, it is the space between layouts, paragraphs, UI elements, and so on.

Importance of white space in design

White space in design not only boosts the user interface but also the user experience of the design. It plays a very important role in making the design neat, clean, and easy to understand.

Spacing helps to:

Standard principles for spacing

There’s a theory in cognitive psychology called “The Gestalt principles of design” in which there are some simple yet effective spacing principles that help in using the white spaces in a design to communicate with the users better.

Proximity: It states that the things that are close to each other appear to be more related than things that are spaced farther apart. Thus, it is known as Gestalt’s principle of proximity.

Dot's
Zomato Menu

In this example from Zomato, the nearness of each image and its corresponding

text communicate that they’re related to one another.

Common Region: It is highly related to proximity. This principle states that when objects are located within the same closed region, we perceive them as being grouped together.

Dot's Services
Ola Services

In this example from Ola, the common region principle is used to separate each card

including its photo, title, description, and other details from all the other cards around it.

Set base numbers for consistent spacing

Set up memorable base numbers which you are going to follow for consistent spacing in your design. A 4-based scale is a recommended scale for many reasons. Both iOS and Android use and recommend metrics that are divisible by or multiples of 4 (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, …).

Typography Sizes

Choosing a scale helps to provide consistent spacing all over the app, which makes it look proper and clean.

Consistent spacing is not only helpful in big layouts but also in small elements like buttons, tabs, etc.

Like Button

In the above example, consistent margin and padding are used in both buttons, which makes them more clean, usable, and adaptable on different screen sizes.

Let’s see how spacing can change the grouping of elements in individual cards.

individual cards

In the first card, improper and inconsistent spacing is used because of which we are unable to see the grouping of elements. For example, it’s hard to differentiate between two comments. It is also hard to tell which icon is used for “Saved” and which icon is for “Share”.

Where in the second card the same things are fixed just with the help of proper spacing.

Conclusion

White space isn’t literally an empty area, it’s a powerful design tool. Maintaining the white space in the design helps to balance the design. With the help of white space, you can group the information as well as separate two pieces of information.

The more you practice, the more you learn. 🙂

More blogs from Mohammed Aseem

SHOW MORE arrow-img

Explore Related Podcasts

SHOW MORE arrow-img
S5-E8 - Tuesday Mar 4, 2025
Behind the Scenes of Game UX with Ruwan Fernando

In this episode, we are joined by Ruwan Fernando, a seasoned UX leader with expertise in AAA games, SaaS, and gamification. With experience across five countries, he brings a unique perspective on design, storytelling, and user engagement. Tune in as we explore his journey, industry insights, and the evolving role of UX in gaming.

S5-E7 - Tuesday Feb 25, 2025
How AI is Transforming UX Research – Insights from Kim Feenstra Kuiper

In this episode, we are joined by Kim Feenstra Kuiper, a senior UX researcher at King. With a background in AI and human-computer interaction, she has led impactful research at companies like Spotify and GoodNotes. Passionate about storytelling and mentorship, she empowers teams to create user-centered, meaningful designs.