# Patterns: Landing Page Design

Proven structures and techniques that drive conversions.

---

## Pattern 1: The Hero Section Formula

**Context:** The above-the-fold section that determines whether visitors stay or leave.

**The Pattern:**
```
HERO COMPONENTS:

┌─────────────────────────────────────────────┐
│  [Logo]                                     │
│                                             │
│  HEADLINE                                   │
│  Clear value proposition                    │
│                                             │
│  Subheadline                                │
│  Supporting benefit or clarification        │
│                                             │
│  [CTA Button]    [Secondary Link]           │
│                                             │
│  Social proof element                       │
│  ★★★★★ 500+ reviews | Trusted by 10K teams  │
│                                             │
│          [Product visual]                   │
│                                             │
└─────────────────────────────────────────────┘

HEADLINE FORMULA:
[What you get] + [Without the downside]
"Beautiful websites without the code"

SUBHEADLINE FORMULA:
[How it works] + [Specific benefit]
"Drag and drop builder. Launch in minutes."

HERO TYPES:

1. PRODUCT-FOCUSED
   Screenshot or product image
   Works for visual products
   "Show, don't tell"

2. BENEFIT-FOCUSED
   Lifestyle or outcome image
   Works for service/abstract
   Emotional connection

3. VIDEO-FOCUSED
   Demo or explainer
   Works for complex products
   Higher engagement

4. FORM-FOCUSED
   Lead capture in hero
   Works for high-intent pages
   Immediate action

HERO CHECKLIST:
□ Value prop clear in 5 seconds
□ CTA visible without scrolling
□ Some proof element present
□ Mobile-optimized
□ Fast loading
```

---

## Pattern 2: The Section Stack

**Context:** Optimal page structure for conversion-focused landing pages.

**The Pattern:**
```
PAGE FLOW:

1. HERO (Above the fold)
   └── Value prop + CTA + Basic proof

2. LOGO BAR (Trust)
   └── "Trusted by" + 5-7 logos

3. PROBLEM STATEMENT (Empathy)
   └── Acknowledge their pain
   └── Show you understand

4. SOLUTION (Your product)
   └── How you solve it
   └── Key benefits (3 max)

5. HOW IT WORKS (Clarity)
   └── 3 simple steps
   └── Reduce perceived complexity

6. FEATURES/BENEFITS (Value)
   └── Feature → Benefit pairs
   └── Visual for each

7. SOCIAL PROOF (Trust)
   └── Testimonials
   └── Case study highlights

8. FAQ/OBJECTIONS (Overcome)
   └── Address concerns
   └── Remove friction

9. FINAL CTA (Action)
   └── Repeat offer
   └── Risk reversal
   └── Strong CTA

SECTION PRINCIPLES:
- Each section has ONE purpose
- Logical flow (problem → solution → proof)
- CTA repeated strategically
- Visual variety between sections

SECTION PATTERNS:

BENEFIT SECTION:
[Icon] [Headline]
[Short paragraph]

HOW IT WORKS:
1 → 2 → 3 (Simple steps)

TESTIMONIAL SECTION:
"Quote" — Name, Title, Company
[Grid of 2-4 testimonials]

FINAL CTA:
[Headline restating value]
[CTA Button]
[Guarantee/Risk reversal]
```

---

## Pattern 3: The Social Proof Hierarchy

**Context:** Strategically placing proof elements for maximum trust-building.

**The Pattern:**
```
PROOF PLACEMENT BY TYPE:

LOGO BAR (Near hero)
Position: After hero, before content
Purpose: Immediate credibility
Format: 5-7 recognizable logos
        "Trusted by" or "As used by"

SMALL PROOF (Throughout)
Position: Near CTAs
Purpose: Reinforcement
Format: "10,000+ teams"
        "★★★★★ 4.9/5"

TESTIMONIALS (Mid-page)
Position: After benefits/features
Purpose: Validation
Format: Quote + Name + Title + Photo
        Specific results preferred

CASE STUDY (Deep proof)
Position: Later in page
Purpose: Detailed evidence
Format: Before/After story
        Specific metrics

FINAL PROOF (Near CTA)
Position: Just before final CTA
Purpose: Push over edge
Format: Strong testimonial
        Guarantee statement

PROOF STRENGTH HIERARCHY:
1. Video testimonial (strongest)
2. Photo + name + company + result
3. Name + company + result
4. Name + result
5. Anonymous quote (weakest)

PROOF BY AUDIENCE:
B2B: Case studies, logos, ROI
B2C: Reviews, ratings, user count
Enterprise: Named customers, certifications
Startup: Growth metrics, investor names

PROOF PRINCIPLES:
- Specific > Vague
- Named > Anonymous
- Results > Praise
- Recent > Old
```

---

## Pattern 4: The Benefit Block System

**Context:** Presenting features as benefits with consistent structure.

**The Pattern:**
```
BENEFIT BLOCK STRUCTURE:

┌─────────────────────────────────────┐
│  [Icon/Visual]                      │
│                                     │
│  Benefit Headline                   │
│  (What they get)                    │
│                                     │
│  Supporting copy (2-3 lines)        │
│  How this helps them.               │
│  What problem it solves.            │
│                                     │
└─────────────────────────────────────┘

GRID LAYOUT OPTIONS:

3-COLUMN (Desktop)
[Block] [Block] [Block]

2-COLUMN (Tablet/Alternative)
[Block] [Block]
[Block] [Block]

1-COLUMN (Mobile/Simple)
[Block]
[Block]
[Block]

BENEFIT WRITING:
Lead with outcome, not feature.

NOT: "Real-time sync"
BUT: "Always up to date"
     Real-time sync means everyone sees
     changes the moment they happen.

BENEFIT SELECTION:
Choose 3-6 benefits max.
If more, prioritize by importance.
Quality > Quantity.

VISUAL ELEMENTS:
- Custom icons (consistent style)
- Product screenshots
- Simple illustrations
- Avoid stock photos

BENEFIT BLOCK PATTERNS:

ICON + TEXT:
[Icon]
[Headline]
[Description]

IMAGE + TEXT:
[Image/Screenshot]
[Headline]
[Description]

ALTERNATING:
[Text]        [Image]
[Image]       [Text]
[Text]        [Image]

CARD STYLE:
[Card with shadow/border]
  [Icon]
  [Headline]
  [Description]
```

---

## Pattern 5: The How It Works Section

**Context:** Reducing perceived complexity by showing a simple process.

**The Pattern:**
```
GOAL:
Make it feel easy.
Remove fear of complexity.
Show the path to success.

STRUCTURE:
Three steps (almost always three).
Simple language.
Clear visuals.

TEMPLATE:
How It Works

Step 1: [Action]
[Icon/Visual]
Short description of first action.

Step 2: [Action]
[Icon/Visual]
Short description of second action.

Step 3: [Result]
[Icon/Visual]
What they get at the end.

VISUAL PATTERNS:

HORIZONTAL FLOW:
[1] ━━━━▶ [2] ━━━━▶ [3]

NUMBERED CARDS:
┌───┐   ┌───┐   ┌───┐
│ 1 │   │ 2 │   │ 3 │
└───┘   └───┘   └───┘

TIMELINE:
○━━━━━○━━━━━○

EXAMPLES:

SIGNUP FOCUSED:
1. Create your account (2 minutes)
2. Connect your tools
3. Start seeing results

TRIAL FOCUSED:
1. Start free trial (no credit card)
2. Explore all features
3. Upgrade if you love it

PRODUCT FOCUSED:
1. Import your data
2. Customize your workflow
3. Ship faster than ever

STEP COPY RULES:
- Start with verb (Create, Connect, Start)
- Keep under 10 words
- Show time investment if quick
- End with the outcome
```

---

## Pattern 6: The Pricing Page Pattern

**Context:** Pricing page layout that drives plan selection.

**The Pattern:**
```
PRICING PAGE STRUCTURE:

1. HEADLINE
   "Simple, transparent pricing"
   Or: Value-focused alternative

2. TOGGLE (if applicable)
   [Monthly] / [Annual]
   Show savings for annual

3. PRICING CARDS
   [Basic]   [Pro*]   [Enterprise]
            *Highlighted

4. PLAN COMPARISON
   Feature comparison table
   Check marks and X marks

5. FAQ
   Common pricing questions
   Objection handling

6. FINAL CTA
   "Still have questions? Contact us"

PRICING CARD ANATOMY:

┌─────────────────────────┐
│  [Plan Name]            │
│  [Most popular badge]*  │
│                         │
│  $XX/month             │
│  per user              │
│                         │
│  [CTA Button]           │
│                         │
│  ✓ Feature 1            │
│  ✓ Feature 2            │
│  ✓ Feature 3            │
│  ✓ Feature 4            │
│                         │
└─────────────────────────┘

HIGHLIGHTING PREFERRED PLAN:
- Visual emphasis (color, size)
- "Most popular" badge
- Slightly larger card
- Different CTA color

PRICING PRINCIPLES:
- Three plans typically
- Clear differentiation
- Value ordering left to right
- Anchor with enterprise/high price

FEATURE DIFFERENTIATION:
Show what's different.
Lead with value, not features.
Use ✓ and — for comparison.
```

---

## Pattern 7: The Lead Capture Pattern

**Context:** Designing forms that maximize completions.

**The Pattern:**
```
LEAD CAPTURE PRINCIPLES:
Minimum fields.
Clear value exchange.
Reduce perceived effort.

FORM LAYOUT:

INLINE FORM (Above fold)
┌────────────────────────────────┐
│ [Email address       ] [CTA]  │
└────────────────────────────────┘

STACKED FORM (Lead gen)
┌────────────────────────────────┐
│ [First name                  ] │
│ [Email address               ] │
│ [CTA Button - Full width     ] │
│ We respect your privacy.       │
└────────────────────────────────┘

TWO-STEP (Higher conversion)
Step 1: [Get Started] button
Step 2: Form appears in modal

FIELD OPTIMIZATION:
- Label above field
- Placeholder as example
- Error states clear
- Auto-complete enabled

FIELD REDUCTION:
-1 field = ~10% more conversions
Phone field = -15% conversions
Optional fields = confusing

VALUE EXCHANGE:
Above form: What they get
[Icon] "Free guide"
[Icon] "Instant access"

Below form: Reduce anxiety
"We never share your email"
"Unsubscribe anytime"

CTA BUTTON COPY:
Not: "Submit"
But: "Get my free guide"
     "Start free trial"
     "Send me the checklist"

FORM PLACEMENT:
Above fold: Highest intent pages
After value: After explaining benefit
Exit intent: Popup on leave intent
```

---

## Pattern 8: The Testimonial Block System

**Context:** Displaying social proof for maximum impact.

**The Pattern:**
```
TESTIMONIAL STRUCTURES:

SINGLE FEATURE TESTIMONIAL:
┌─────────────────────────────────────┐
│  "Quote that addresses this        │
│   specific feature/benefit."       │
│                                    │
│  [Photo] Name, Title               │
│          Company                   │
└─────────────────────────────────────┘

TESTIMONIAL GRID:
┌──────────────┐ ┌──────────────┐
│  "Quote..."  │ │  "Quote..."  │
│  Name, Co.   │ │  Name, Co.   │
└──────────────┘ └──────────────┘
┌──────────────┐ ┌──────────────┐
│  "Quote..."  │ │  "Quote..."  │
│  Name, Co.   │ │  Name, Co.   │
└──────────────┘ └──────────────┘

FEATURED TESTIMONIAL:
┌─────────────────────────────────────┐
│                                     │
│  [Large photo]                      │
│                                     │
│  "Longer, featured quote that      │
│   tells a story and includes       │
│   specific results."               │
│                                     │
│  Name, Title                        │
│  Company                            │
│  [Company logo]                     │
│                                     │
└─────────────────────────────────────┘

TESTIMONIAL ELEMENTS:
Essential: Quote + Name + Company
Better: + Photo
Best: + Specific result + Title

QUOTE CHARACTERISTICS:
- Specific over generic
- Results over feelings
- Challenge + Solution structure
- Quotable length (1-3 sentences)

PLACEMENT STRATEGY:
After benefits: Support the claims
Near CTAs: Push over edge
Feature-specific: Validate each feature
```

---

## Pattern 9: The FAQ Objection Handler

**Context:** Using FAQ sections to overcome conversion barriers.

**The Pattern:**
```
FAQ STRUCTURE:

ACCORDION STYLE:
[+] Question 1
[-] Question 2 (expanded)
    Answer to question 2 that
    addresses the concern and
    provides reassurance.
[+] Question 3

FAQ PLACEMENT:
- After features/benefits
- Before final CTA
- Addresses remaining concerns

FAQ STRATEGY:
Not random questions.
Specifically address objections.

COMMON OBJECTIONS → FAQ:

Price concern:
"Is there a free trial?"
"Can I cancel anytime?"
"What happens after trial ends?"

Complexity:
"How long does setup take?"
"Do I need technical skills?"
"Will you help me get started?"

Trust:
"Is my data secure?"
"How long have you been around?"
"What if I need help?"

Fit:
"Is this right for my company size?"
"Does it integrate with [tool]?"
"What industries do you serve?"

FAQ ANSWER STRUCTURE:
1. Direct answer to question
2. Elaboration if needed
3. Reassurance or benefit
4. Link to more info (optional)

EXAMPLE:
Q: "What happens when my trial ends?"
A: "No surprise charges. Your trial is truly free.
    At the end of 14 days, you can choose a paid
    plan or export all your data—no pressure.
    Most teams see value in the first week."

FAQ FORMATTING:
6-10 questions typically
Ordered by importance
Expandable/collapsible
Search if many questions
```

---

## Pattern 10: The Final CTA Section

**Context:** The bottom-of-page conversion opportunity.

**The Pattern:**
```
FINAL CTA COMPONENTS:

┌─────────────────────────────────────────────┐
│                                             │
│     Ready to [outcome]?                     │
│                                             │
│     Supporting line that reinforces         │
│     value and reduces friction.             │
│                                             │
│     [Primary CTA Button]                    │
│                                             │
│     ✓ Risk reversal statement               │
│     "30-day money-back guarantee"           │
│                                             │
└─────────────────────────────────────────────┘

HEADLINE OPTIONS:
Outcome-focused: "Ready to grow faster?"
Action-focused: "Start your free trial"
Question: "Still deciding?"

SUPPORTING COPY:
Reinforce key benefit
Add urgency if appropriate
Remove remaining friction

RISK REVERSAL:
Free trial: "No credit card required"
Purchase: "30-day money-back guarantee"
Demo: "No obligation. Cancel anytime."

CTA BUTTON:
Same as hero CTA
Clear, action-oriented
Sufficient size and contrast

SECONDARY ELEMENTS:
Alternative action (for not-ready)
"Or schedule a demo"
"Questions? Chat with us"

FINAL SECTION VARIATIONS:

SIMPLE:
[Headline]
[CTA]
[Guarantee]

WITH IMAGE:
[Product image] [Headline + CTA]

WITH TESTIMONIAL:
[Strong testimonial]
[CTA]
[Guarantee]

WITH COMPARISON:
Free vs Paid comparison
[Start Free] [Go Pro]
```
