Layout and Spacing

One of the easiest ways to clean up a design is to give every element more room to breathe.
Sounds simple enough, right? So why don’t we usually do it?

Start with too much white space

White space should be removed, not added

When designing for the web, white space is almost always added to a design. If something looks too cramped, add a bit of margin or padding until things look better.

The problem with this approach is that elements are only given the minimum amount of breathing room necessary to not look actively bad. To make something actually look great, you usually need more whitespace.
A better approach is to give something too much space, and then gradually reduce it until you’re happy with the result.

Establish a spacing and sizing system

A linear scale won’t work: Creating a spacing and sizing system isn’t quite as simple as something like “making sure everything is a multiple of 4px” — a naive approach like that doesn’t make it any easier to choose between 120px and 125px.

Defining the system, just like you don’t want to labour over arbitrary values when sizing an element or fine-tuning the space between elements, you also don’t want to construct your spacing and sizing scale from arbitrary values. A straightforward approach is, to begin with a sensible base value and then create a scale by utilizing factors and multiples of that value. Starting with 16px is an excellent choice because it divides evenly and also coincides with the default font size in every major web browser.

Here’s an example of a fairly practical scale built using this approach:

Using the system, once you’ve defined your spacing and sizing system, you’ll find that you’re able to design a hell of a lot faster, especially if you design in the browser (sticking to a system is easier when you’re typing in numbers than when you’re dragging with the mouse).

Need to add some space under an element? Grab a value from your scale and try it out. Not quite enough? The next value is probably perfect. While the workflow improvements are probably the biggest benefit, you’ll also start to notice a subtle consistency in your designs that wasn’t there before, and things will look just a little bit cleaner.

A spacing and sizing system will help you create better designs, with less effort, in less time. Design advice doesn’t get much more valuable than that.

Avoid ambiguous spacing

When groups of elements are explicitly separated — usually by a border or background colour — it’s obvious which elements belong to which group.

At best, the user has to work harder to interpret the UI, and at worst, it means accidentally putting the wrong data in the wrong field.

The fix is to increase the space between each form group so that it’s clear which label belongs to which input.