Layout and Spacing

Layout determines whether the interface feels calm or chaotic before the user reads a single word.

Page Anatomy

A reliable web UI usually has these layers:

Users should be able to distinguish these layers at a glance.

Use a Layout System, Not Improvised Pixels

Recommended spacing scale

Do not choose spacing ad hoc. Reuse a defined scale.

Build on Grid Logic

Relationship Rules

Spacing should communicate relationship.

• items inside the same group should sit closer together
• distance between groups should be visibly larger than distance within groups
• labels belong visually to their inputs
• headings belong visually to the content they introduce

If everything has the same spacing, nothing feels organized.

Reading Patterns

Content Width Rules

Use White Space as a Feature

White space is not empty. It creates focus.

Good uses of white space:

• isolating the primary CTA
• separating product tiers on pricing pages
• giving forms room to breathe
• making dashboards readable without borders everywhere

Bad uses of white space:

• wasting vertical space so important actions fall below the fold
• making related information feel disconnected
• hiding product value behind oversized decorative sections

Practical Layout Example

Use a stable shell before decorating details.

<main class="page">
  <header class="page-header">
    <div>
      <h1>Invoices</h1>
      <p>Track unpaid invoices and follow up quickly.</p>
    </div>
    <button>Create invoice</button>
  </header>

  <section class="summary-grid">
    <article>Overdue: 12</article>
    <article>Due this week: 31</article>
    <article>Collected this month: $84,200</article>
  </section>

  <section class="data-region">
    <aside class="filters">…filters…</aside>
    <div class="table-wrap">…table…</div>
  </section>
</main>

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.page-header,
.data-region {
  display: grid;
  gap: 24px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-block: 32px;
}

Layout Patterns That Convert Well

Pricing page

1. Clear headline and target user framing
2. Simple plan comparison with one recommended option
3. FAQ and objection handling below
4. Final CTA after social proof or reassurance

Checkout

1. Progress indicator
2. Main form on the left, order summary on the right on desktop
3. Trust, refund, and security cues near the purchase action
4. No unnecessary exits or promotional clutter

App dashboard

1. Title and key status at top
2. Filters close to the data they change
3. Summary metrics first, detail beneath
4. Empty state with next best action

Common Mistakes

Review Checklist

• Is the primary action visible without hunting?
• Does spacing reveal hierarchy?
• Do headers, content, and actions feel like coherent groups?
• Is the layout calm on both large and small screens?
• Can a new user scan the screen in five seconds and describe its purpose?