5 lesser-known tips on spacing for product designers

5 lesser-known spacing tips for product designers

Your BAE might not give you space but after reading this article you will definitely give your UI objects some well-deserved space :p

An abstract image of a bunch of green and blue shapes stacked concentrically

When we start out as designers, spacing is often the most neglected aspect of the design process. Various objects are spaced based on what we, at that point, believe looks good. Well, I went through the same drill and a couple of years later, I see that it isn’t that complex. So doesn’t matter if you are a novice or a pro, apply the tips below at your work and see the difference it makes for yourself.

1. Stick to multiples of 4

When spacing various objects in your UI, space them by multiples of 4. You ask why? Because it is easy to remember, reduce the number of choices you need to make, and there is a visually noticeable difference with each jump in size. Also, as a side effect, your designs look coherent without any additional effort.

Start off by using 4. Does 4 look too close? Bump it up to 8. Still too close? Bump it up to 12 and so on.

A GIF showing spacing that are multiples of 4, between various elements in the UI

2. Make parent padding the same or more than the padding between children

This should be obvious considering the gestalt principle ie: related objects should be closer to each other.

GIF of three children elements inside a parent container and space between them

3. Optical alignment is sometimes better than geometric alignment

All design software is really good at geometrically aligning objects. But in certain cases, geometrical alignment can cause optical imbalances, which the human eyes pick up instantly. In those cases, eyeball it and adjust the spacing between objects. It is more commonly seen among shapes whose visual weight isn’t equally spread out. For e.g. polygon, star and other irregular shapes.

GIF comparing two play buttons. One is mathematically aligned and looks off. The other one is optically aligned and looks perfect.

4. Use keylines to create your icons

Talking about optical alignment, have you ever felt that a circular icon looks smaller than a square icon although they are the same dimensions? Well, keylines will help you with that and also help maintain a consistent visual proportion for all the icons in a set. Here is a keyline template on Figma to get you started.

Keyline template along with icons

5. Define the target area for intractable components

The target area is the clickable or touchable area on an interface. It refers to the area of a UI element that is responsive to user input, such as an icon, button, or link. The material design guidelines recommend a minimum target area of 48×48 on mobile for a comfortable touch experience. On desktop, this can be made smaller e.g. 40×40.

GIF of an icon with its target area and object area highlighted

Later on, if you want to add in a hover or a tapped state, the target area can used to do that without the need for any rework.

GIF of how Figma uses target area to indicate hover state

🦄 BONUS: How to improve your sense of spacing?

Screenshot your favourite app. Paste it onto a Figma frame. Reduce opacity by 50%, lock the layer. Now trace on top and recreate the screen as it is. Do this for a couple of weeks, and you will see an immense improvement in your sense of spacing and overall UI aesthetics.

A GIF of how to go about the exercise to improve your UI aesthetics

Additional reading

🙋🏽‍♂️ Let’s be friends! Connect with me on Twitter and LinkedIn. Also check out my free resources on Figma.

5 lesser-known tips on spacing for product designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a comment

Your email address will not be published.