Marketing Site Design Skill

This skill provides proven patterns for structuring marketing pages that convert visitors into customers.

Homepage Section Architecture

The most effective homepage follows this flow (adapt based on SITE.md goals):

Standard Flow (Recommended Order)

1. Hero — Hook with outcome, primary CTA
2. Social Proof Bar — Logos, numbers, or testimonial snippet
3. Problem/Pain — Acknowledge their struggle
4. Solution/Features — How you solve it
5. How It Works — Simple 3-step process
6. Benefits — What they gain (not what you do)
7. Testimonials — Full social proof section
8. Pricing — (if applicable)
9. FAQ — Overcome objections
10. Final CTA — Last chance conversion

Section Purposes

Section	Goal	Visitor Mindset
Hero	Stop scroll, promise outcome	"What is this?"
Social Proof Bar	Build instant credibility	"Is this legit?"
Problem	Show you understand them	"Do they get me?"
Features	Explain capabilities	"What does it do?"
How It Works	Remove complexity fear	"Is it hard?"
Benefits	Paint the after-state	"What's in it for me?"
Testimonials	Prove others succeeded	"Has it worked for others?"
Pricing	Enable decision	"Can I afford it?"
FAQ	Remove final doubts	"But what about...?"
Final CTA	Convert the convinced	"I'm ready"

---

Hero Section Patterns

Pattern 1: Problem-Agitate-Solution (PAS)

Best for: Pain-point-driven products

[Headline: State the problem]
Tired of losing customers to slow support?

[Subheadline: Agitate + solve]
Every hour you take to respond, 60% of leads go cold.
Our AI responds in seconds—24/7.

[CTA]
Start responding faster →

Pattern 2: Outcome-Focused

Best for: Aspirational products/services

[Headline: Promise the end state]
Wake up to a full calendar

[Subheadline: How you deliver it]
Automated booking that fills your schedule while you sleep.

[CTA]
See how it works →

Pattern 3: Social Proof Lead

Best for: Established brands with strong numbers

[Headline: Lead with proof]
Join 12,847 marketers who doubled their open rates

[Subheadline: Explain the mechanism]
AI-powered subject lines that your audience actually clicks.

[CTA]
Write better emails →

Pattern 4: Direct Benefit

Best for: Clear, simple products

[Headline: Straight to the benefit]
Ship 10x faster

[Subheadline: Brief explanation]
The React component library built for speed.

[CTA]
Browse components →

Pattern 5: Question Hook

Best for: Audiences aware of problem but not solution

[Headline: Ask their burning question]
What if your website actually brought in leads?

[Subheadline: Promise the transformation]
Stop being a digital brochure. Start being a sales machine.

[CTA]
Transform my site →

---

Layout Principles

The F-Pattern

For text-heavy pages (blogs, docs):

• Eye scans horizontally across top
• Then moves down left side
• Then scans horizontally again

Implementation:

• Most important content in top-left
• Key info at start of each section
• Visual breaks to create new scan points

The Z-Pattern

For conversion-focused pages (landing pages):

• Eye moves: top-left → top-right → bottom-left → bottom-right
• CTA should be at final Z destination

Implementation:

• Logo top-left
• Navigation/secondary CTA top-right
• Supporting content bottom-left
• Primary CTA bottom-right

Visual Hierarchy Rules

1. Size = Importance: Largest = most important
2. Contrast = Attention: High contrast draws eye
3. Spacing = Grouping: Close things feel related
4. Alignment = Order: Aligned things feel intentional

Breaking the Grid (Tastefully)

Ways to add visual interest without chaos:

• One oversized element per section
• Asymmetric two-column layouts (60/40, 70/30)
• Overlapping elements (image over background)
• Offset headings (not always centered)
• Mixed alignment across sections

---

Section Design Patterns

Social Proof Bar

[Logo] [Logo] [Logo] [Logo] [Logo]
"Trusted by 10,000+ companies"

Or with metrics:

12M+          4.9★           99.9%
Users         Rating         Uptime

Features Section (NOT 3-column grid)

Option A: Alternating Image/Text

[Image]     [Text Block]
[Text Block]     [Image]
[Image]     [Text Block]

Option B: Bento Grid

[Large Feature Card]  [Small]
[Small] [Small]  [Medium]

Option C: Single Feature Focus

[Large Screenshot/Demo]
[3 bullet points below]

How It Works Section

Always 3 steps (cognitive sweet spot):

1. Sign Up        2. Connect        3. Grow
Create account    Link your tools   Watch results
in 30 seconds     with one click    roll in

Use numbered circles or icons, horizontal layout.

Testimonials Section

Option A: Featured Quote

"[Impactful quote]"
— Name, Title at Company
[Photo]

Option B: Grid of Cards

[Quote + Photo]  [Quote + Photo]
[Quote + Photo]  [Quote + Photo]

Option C: Carousel (use sparingly) Only if you have 5+ strong testimonials.

Pricing Section

Always include:

• Clear tier names
• Who each tier is for
• Most popular indicator
• Annual/monthly toggle (if applicable)
• What's included list
• CTA per tier

FAQ Section

Use accordion/expandable pattern:

• Start all closed or first open
• Group by theme if 8+ questions
• Include actual objection-handling questions

---

Conversion Optimization Rules

Above the Fold

Must include:

• Clear headline (what you do)
• Subheadline (how it benefits them)
• Primary CTA
• Trust signal (logo bar or brief social proof)

CTA Frequency

• Hero: Primary CTA
• After features: Secondary CTA
• After testimonials: Primary CTA
• Fixed in nav: Always visible CTA

Reducing Friction

• "No credit card required" under CTA
• "Cancel anytime" near pricing
• "Takes 2 minutes" to set expectations
• Show testimonial near conversion point

Mobile Considerations

• Hero headline must work in 2 lines max
• CTAs must be thumb-reachable
• Horizontal scrolling elements (logos, testimonials)
• Stack all columns to single column

---

Page-Specific Guidelines

About Page

• Lead with mission, not history
• Show real team photos
• Include company timeline (optional)
• End with CTA (hiring or contact)

Pricing Page

• Lead with value proposition, not prices
• Comparison table for 3+ tiers
• FAQ section below pricing
• Social proof near CTA

Contact Page

• Simple form (name, email, message)
• Alternative contact methods
• Expected response time
• Map/location (if relevant)

---

Checklist Before Building

• Section order follows strategic flow
• Hero uses a proven pattern
• No 3-column feature grids with generic icons
• Visual hierarchy is clear (one focal point per section)
• At least 3 CTAs on page
• Mobile layout considered
• Social proof appears early
• FAQ addresses real objections