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.

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.


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
S3-E13 - Thursday Sep 7, 2023
Amplifying Diversity in Design: A Discussion with Jonelle Chandler

In this episode, we are joined by Jonelle Chandler - Partner and Chief Creative Officer at Qualified Digital. A dynamic design leader dedicated to empowering diverse design thinkers and bridging the gender and ethnic gap in tech. She actively mentors through programs like Built By Girls, ADPList, Women in Wireless, Blacks Who Design, and the Invision Design Leadership Forum, excelling in crafting innovative digital experiences by harmonizing business objectives, technology, data, and creativity.

S3-E12 - Thursday Aug 31, 2023
Crafting Immersive Experiences: The Role of Storytelling in CX & UX Design – Hans Forsman

In this episode, we are joined by Hans Forsman, an award-winning Creative Director known for his "can do" attitude and strategic brand expertise. With a remarkable track record, he's transformed goals into unforgettable results, crafting brand stories and cutting-edge campaigns. From Reebok to HBO Now, Hans has left his creative mark across diverse industries.