Logo
Menu
spacing header

The Golden Rule of space

The amount of space between elements defines the relationship between them.

It can be hard to know how much space to give between two elements. But just try to follow this rule: space defines relationships. You should know the relationship between your elements and based on that you can give it a certain amount of space that presents this relationship.

Space can seperate or connect elements

Image 1: The icons have the same amount of space between them, they are a group of actions.
Image 2: The save icon is all alone here, which gives it more importance. It seems different from the other actions.

connect spacing

Space can add clarity instead of confusion

Image 1: Gives me claustrophobia, can't decide which belongs to who!
Image 2: Now it's clear 😌

clarity spacing

Space can make things more legible

Image 1: Very crowded.
Image 2: More legible.

legible spacing

Need some help with design? Please contact me, I'd be happy to help!