# Patterns — Creating Landing Pages

# Contents

• Page skeleton (problem → proof → product → action)
• Hero patterns by product type
• Copy formulas
• CTA hierarchy markup
• Social proof blocks
• Visual direction worksheet
• Gotchas

# Page skeleton (problem → proof → product → action)

<main>
  <section class="hero">        <!-- thesis + primary CTA -->
  <section class="logos">       <!-- proof: who already trusts it -->
  <section class="problem">     <!-- name the pain in the visitor's words -->
  <section class="product">     <!-- show it solving the pain (demo/screens) -->
  <section class="proof">       <!-- testimonial + numbers, CTA repeat -->
  <section class="objections">  <!-- pricing/security/FAQ — only real questions -->
  <section class="closer">      <!-- restate thesis, final CTA -->
</main>

Each section: one job, one message, max one CTA.

# Hero patterns by product type

Headline sits with the element, max ~10 words, states the benefit.

# Copy formulas

Headline (pick one, fill with concrete nouns):

• Outcome + time: "Ship your changelog in 5 minutes"
• Kill the pain: "Never write release notes by hand again"
• Capability + audience: "Session replay built for mobile teams"

Subheadline: one sentence — how it works + for whom. Button labels: verb + object, first person works well — "Create my changelog", "Start recording — free". Never "Submit", "Learn more" (as primary), "Get started" (default-smell).

Testimonial pull: quote the result, not the compliment — ✅ "Cut our onboarding time from 3 weeks to 4 days." — Dana K., Head of Ops ❌ "Great tool, love the team!"

# CTA hierarchy markup

<div class="cta-group">
  <a class="cta-primary" href="/signup">Start recording — free</a>
  <a class="cta-secondary" href="/demo">Watch the 2-min demo</a>
</div>

.cta-primary   { /* filled, brand color, largest tap target on screen */ }
.cta-secondary { /* text link or ghost — visibly subordinate */ }

Same .cta-primary label + destination everywhere it repeats.

# Social proof blocks

<!-- Logos: 4–6, grayscale, one row, directly under hero -->
<section class="logos" aria-label="Trusted by">
  <img src="logo-a.svg" alt="Acme" height="28">
  …
</section>

<!-- One strong testimonial beats six weak ones -->
<figure class="testimonial">
  <blockquote>Cut our onboarding time from 3 weeks to 4 days.</blockquote>
  <figcaption><img src="dana.jpg" alt="" width="40" height="40">
    Dana K. — Head of Ops, Acme</figcaption>
</figure>

Numbers block: only true, only impressive, max three. "12,400 teams" beats "many customers"; if the true number is small, use a different proof type.

# Visual direction worksheet

Before building, write down (one line each):

1. Palette: 4–6 named hex colors derived from the subject (not cream/terracotta, not black/acid-green).
2. Type: display face + body face, chosen for this brief; type scale (e.g. 1.25 ratio).
3. Layout concept in one sentence + rough ASCII wireframe of the hero.
4. THE signature element — the one bold move. Everything else stays quiet.

Then critique: "Would this exact plan fit any other product?" If yes, revise until it wouldn't.

# Gotchas

• The feature-grid reflex: a 3×2 grid of icon+blurb usually restates the product section with less proof — cut or merge it.
• Carousel/slider testimonials hide proof behind interaction — static, one per section.
• Fake urgency (countdowns, "3 spots left") destroys trust with technical audiences instantly.
• Above-the-fold obsession: long pages convert when each section earns the scroll; don't cram everything into the first screen.
• Lorem ipsum in review: never review layout with placeholder copy — copy IS the design decision on a landing page.
• Hero video autoplay with sound — muted, looped, short, with poster; or don't autoplay.
• Dark pattern CTAs ("No thanks, I hate saving money") — never.