Spacing Guidelines
Spacing is tricky, even for experienced UI designers. Follow our guidelines to make sure you're on the right track.
Last updated
Spacing is tricky, even for experienced UI designers. Follow our guidelines to make sure you're on the right track.
Last updated
When designing or implementing a UI, white space is usually added at the end of the process. If something looks little too cramped, you add a little padding until things look better. The problem with adding whitespace when it seems appropriate is that elements are only given the minimum amount of breathing room necessary to not look bad. Instead, we believe white space should be removed, not added. So, a better approach is to start by giving your UI elements too much white space, then remove it until you’re happy with the result.
Yes, we know what you're thinking. Some people prefer to have everything cramped together in order to maximize the amount of information visible at once. While interfaces with a lot of breathing room almost always look better, there are certainly situations where it makes sense for a UI to be more compact. The important thing is to make this a deliberate decision instead of just being the default. It’s a lot more obvious when you need to remove white space than it is when you need to add it.
When deciding on size and space for your UI components, you shouldn’t have to nitpick over tiny differences. Going back and forth between arbitrary values, like choosing between 80 and 85 px, will only slow you down. Instead, limit your options to a set of values. A simple approach is to start with a practical base value, then build a scale using factors and multiples of that value. 16px is a great number to start with because it divides nicely. You also need to take into account that smaller changes have bigger impact on small components (jumping from 12px to 16px is an increase of 33% while going from 500px to 520 px is only a difference of 4%). Thus, the values at the small end of the scale should be fairly packed together, and get progressively more spaced apart as you get further up the scale. We've found that a good rule of thumb is that no two values in your scale are not closer than about 25%. Here’s an example of a fairly practical scale built using this approach:
Once you’ve defined your spacing and sizing system, you’ll find that you’re able to create UIs a lot faster. No more need to nitpick between 14px or 16px, or 120px and 130px. If you need to add some space somewhere, grab a value from your scale and try it out. If it's not perfect, the next value on the scale is probably perfect. But the workflow improvements are probably not the biggest benefit of using this approach, you’ll also notice a subtle consistency in your designs, and things will look just a little bit cleaner.
