Lesson 3

Spacing and Grouping

Organize campaign details so audiences can scan offer, logistics, and action without rereading.

18 min Brand/SocialVisual judgment

Lesson steps

IdeaExampleMistakesQuizExercise

Core idea

Spacing is information architecture made visible. It tells the viewer which details belong to the same decision and which parts start a new thought.

  • Group related metadata such as date, venue, format, and price so they read as one practical unit.
  • Use larger gaps between headline, detail group, proof, and CTA so the viewer can change mental mode.
  • Reuse spacing values for repeated relationships instead of eyeballing every gap.
  • Use spacing before dividers. If you need a line, the spacing system may not be doing enough.

Visual example

A social event card should group logistics before decoration.

Before and after

Make the logistics scan as a unit.

Before: every line is isolated

Title, date, venue, price, description, and CTA use similar gaps, so the viewer cannot tell which details belong together.

After: useful information chunks

Promise, logistics, supporting note, and action each have their own spacing relationship, making the card faster to scan.

Worked example

Why the improved version works

The improved card treats logistics as one chunk instead of four loose labels. The viewer can collect the practical details in one pass.

The larger gap before the CTA creates a decision point. It tells the viewer, "you have the details, now act," without adding another decorative container.

Common mistakes

Watch for these patterns

Date and venue float apart even though they answer the same question.
The CTA is too close to body copy, so it reads like another line of text.
Decorative labels get more breathing room than useful logistics.
Dividers are added because the spacing system has no clear rhythm.

Visual comparison

Which promo groups the useful details?

One promo spaces every line evenly. The other tightens related logistics and opens larger gaps between decisions.

Select an option to see the design reasoning.

Small exercise

Diagnose grouping

Pick the card where spacing makes the event details scan as chunks, then find the boundary where the grouping breaks down.

Start quick practice Skip to next lesson