https://uxdesign.cc/junior-designers-please-design-with-numbers-f6a4899220f3

Arguably the most important element of design has nothing to do with what you create. It has to do with the space between the content. Whether it is the padding within a button or margins from the edge of that button to the edges of the screen — good spacing is crucial.

Anyone see designs that look like this and question things?

Spacing allows us to group content without ugly borders and dividers everywhere. Spacing allows us to guide the user’s eye to the most important content efficiently and gracefully. Spacing gives our designs a feeling of balance and poise. Good spacing isn’t noticed — but bad spacing is painfully obvious.

I’ve found that many junior designers tend to focus too much of their time on the color choices, font choices, border radii of their buttons, etc. But spacing is rarely given the weight it deserves.

#0091ff

I think part of the problem is the ambiguity around spacing. Deciding to use Helvetica (again) is a concrete decision. Deciding to use blue (#0091FF is my personal favorite) is a concrete decision. Deciding how many pixels should go between your header text and your body text can feel random and arbitrary. What’s really the difference between 7px and 9px? (Spoiler: The answer is 2px)

The reality is that spacing IS arbitrary but it should also be consistent. So if you decide to go with 7px between your header and body text, you better ALWAYS have 7px of space there. This consistency “relaxes” the user and allows them to focus on the most important part — the content. If users navigate through a flow and things are “jumping” around, they will be more focused on those changes than on what they’re trying to do.

Additionally, when designing for mobile, we must assume our users are often distracted and on-the-go. For this reason, it’s even more important that the elements of our screens are consistently spaced, sized, and located.

Early on at my job, I was tasked with implementing the 8pt system. I quickly went to work googling “what’s the 8pt system.”

The 8pt system is quite simple. Everything in your design should be a multiple of 8. Now at first, it’s easiest to use the hard 8pt system. In this, the actual size of your components should be multiples of 8. Making a button? Make it 64px tall and 256px wide. Making a header, make it 88px tall and full-width.

Button has a height and width that’s divisible by 8, but the padding is uneven.

But the hard 8pt system has its limits. You’ll quickly realize that the numbers that are important to devs are usually the padding and margins (box-model anyone?). This is where the soft 8pt system comes into play. Rather than making your button 64px tall — make your button so there’s 8px of vertical padding between the top and bottom of your button text and the container and 128px of horizontal padding.

The button has a height that isn’t divisible by 8 but the padding is even and divisible by 8.

Are you a Figma user? I hope so because otherwise, you’re making your life harder than it needs to be. But anyway, if you want an easy way to get good at this — start using auto-layout more often. And when you’re auto-layouting things, make sure the numbers in there are multiples of 8 as opposed to the components resulting height and width.

Now for the spacing between components.

Start off by just using multiples of 8. Does 8 look too close? Bump it up to 16. Still too close bump it up to 24. DO NOT BREAK THE SYSTEM.

Once you’ve been doing this for a while, you might come across times where 8 is too small and 16 is too big — okay fine, you’re now allowed to use multiples of 4.