UI Design

Please, junior designers, design with numbers.

January 17, 2023
Credit to Anna Yashina

If you’re a junior designer, don’t forget spacing

Benefits of spacing

The reality is that the most important element of design is not what you create. Rather, it is the spacing between your content. Whether that be in the form of padding or white space, spacing is absolutely crucial for the success of your design.

While good spacing often has benefits that are not noticed, bad spacing is excruciatingly obvious.

Junior designers tend to focus on features such as colour and font and rarely give spacing sufficient attention. Spacing is useful in that content can be grouped without hideous borders. Also, spacing allows for the user’s attention to be guided to the most important information.

Why spacing doesn’t get the attention it deserves:

Spacing seems arbitrary. For example, it is normal to decide between font Arial or Calibri. It is normal to deliberate between two specific colours. However, it seems quite random and uncommon to decide whether the distance between a header and body of the text should be 4 pixels or 8 pixels.

Whatever distance you choose, it should be consistent throughout the page. This is important because if you are not consistent, your user will tend to focus on the irregularities rather than the most important information.

More importantly, take extra care when designing for mobile devices. You, the designer, must assume that the user is distracted and has a lower attention span. This means that it is crucial that elements are spaced, sized and located consistently.

8pt system:

A good way to get started with spacing is by using the 8pt system. This system is very simple, and is the means by which everything in your design is a multiple of 8. There are two kinds of 8pt systems. The hard 8pt system, and the soft 8pt system.

Hard 8pt system:

The hard 8pt system is the means by which the size of every component is a multiple of 8. For example, designing a button which is 248 pixels by 56 pixels. As you use this design, you may find it hard to apply in some situations. This is where the soft 8pt system comes into play.

Why it matters

Consistent UI

When all of your measurements adhere to the same set of rules, the UI becomes more consistent.

Fewer decisions = less time

By removing 7 of every 8 spacing options, you reduce the amount of fiddling available to you and, as a result, the speed with which you can code.

Image credit:
Chris King