Design beautiful websites to sell your product — Spacing

07:23 am. Bali is windy. The surf session will wait until tomorrow.

We’ve covered headline and paragraph UI design. Let’s combine them with spacing.

Lighter than text, but more powerful than words.

Spacing in UI design refers to the use of empty space between elements to enhance readability, visual hierarchy, and overall user experience.

Place a button too close to the headline and you confuse users. Luckily, you can be a wizard with these 3 rules:

Use the 4 points grid system

Every space (margin or padding) between elements (text, button, image, section) should be divisible by 4.

It helps users understand how components relate to each other. And it’s a shortcut to designing faster

Use limited constraints

Spacing is semantic. The distance between UI elements explains their relationships.

A headline and a paragraph should be close to each other because the latter explains the former. The illustration, however, should sit farther away from the text block.

To help users create relationships between elements, we need rules:

• Paragraph to headline: 16px

• Button to text block: 32px

• Image to  text block: 48px

• Section to section: 256px

Define your rules before coding. 5 to 6 maximum. Use them across all the landing page for clarity.

Let it breathe

When the UI is cramped, users get confused and leave.

If in doubt, add too much empty space.