Using a spacing system
Just like with colours, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork, because you're designing with a limited set of options.
It also provides the foundation for harmoniously and consistently positioning elements onscreen, creating a familiar rhythm and order to your designs.
Avoid chaotic designs
Working within a specific spacing system may sound like a creative constraint, but it can in fact help remove decision fatigue and allows you to work more efficiently and design better. Without a defined system, it is very easy to end up with messy and inconsistent designs.
A significant side effect of designing this with inconsistent spacing values is, that the front-end developers will have to do much more custom work or simply that the devs choose the values they have available and the end-result will look different from the design file.
Best practices
- Aim to use multiples of 8px when defining measurements, spacing, and positioning elements.
- When necessary use 4px to make more fine-tuned adjustments.
- Whenever possible, make sure that objects line up, both vertically and horizontally.