Quick Design Tips For Developers, Part 1: Spacing
The goal of this series is to teach developers how to make their UIs feel more “designed.”
Introduction
Spacing can be the secret sauce that transforms a UI from a hot mess to looking polished.
The most common mistakes I see developers make are using inconsistent spacing and not using enough space. These make their UIs feel cluttered, inconsistent, and unprofessional.
Here are my best tips for spacing:
Tip 1. Use multiples of 8px for paddings and margins
Designers commonly use the “8pt grid system” to maintain consistent spacing. Consistent spacing gives structure to a UI and makes it feel cohesive.
How to use it:
Simply define all paddings and margins as multiples of 8px!
An added benefit to this is that it takes most of the guesswork out of spacing, since you’re limited to multiples of 8px.
Tip 2. Give elements more space!
When reviewing developer UIs, I can usually make them look much better just by increasing paddings and margins to create more space.
Here is an example of what that might look like:
Experiment with giving elements more space to breathe. It can make a huge difference in how your UIs look.
Rules of thumb
Spacing can take a lot of trial-and-error, but here are some of my rules of thumb to help you get started:
- Card components and other containers tend to have padding between 16px and 32px.
- A 16px margin is a good default for spacing items.
- An 8px margin can be used to establish a relationship between two elements, like an input and its label.
- Sections on a landing page or marketing page tend to have larger paddings, typically between 32px and 64px, at the least.
Conclusion
Consistent spacing and use of space are two of the most important techniques I use to make my UIs feel polished.
For study, you could check out some websites to see how they handle spacing.
Let me know if these tips were helpful, and I’d love to see before and afters from anyone that tries them!
