Marketing Website

Marketing sites have one job: convert visitors into customers. Every element serves that goal.

Related skills:

ux-design — Structure, usability, accessibility foundations
aesthetic-ui-designer — Visual execution, typography, motion

This skill adds the conversion and persuasion layer.

Core Principles

1. Clarity Over Cleverness

Visitors decide in 5 seconds: Is this for me? Can it help?
Clear beats clever. Don't make them think.
Jargon-free unless audience expects it

2. One Goal Per Page

Each page has ONE primary CTA
Secondary actions are visually subordinate
Don't dilute focus with competing asks

3. Value Before Friction

Show value before asking for anything
Delay signup/pricing until interest established
Progressive commitment: small asks before big asks

4. Social Proof Everywhere

Testimonials, logos, numbers, case studies
Specificity beats vagueness: "47% faster" not "much faster"
Real names, photos, companies when possible

5. Answer the Core Questions

Every visitor asks:

What is this? (Clear headline)
Is it for me? (Target audience clarity)
Why should I care? (Benefits, not features)
Why trust you? (Social proof)
What do I do next? (Clear CTA)

Copywriting Essentials

Headline Formula

Structure: [End result] + [Time period] + [Address objection]

Examples:

"Launch your app in 2 weeks — no coding required"
"Cut meeting time in half without losing alignment"

Headline Types:

Type	Example	Best For
Benefit-led	"Save 10 hours every week"	Clear value prop
Problem-led	"Tired of endless spreadsheets?"	Pain-aware audience
How-to	"How to double your conversion rate"	Educational
Question	"What if onboarding took 5 minutes?"	Curiosity
Command	"Stop losing customers to slow support"	Direct/urgent

Subheadline Role

The subhead explains what the headline promises.

Headline: Hook, intrigue, emotion
Subhead: Clarity, specifics, logic

Headline: Ship faster, sleep better
Subhead: Automated deployments with instant rollback. 
         Your code goes live in seconds, not sprints.

CTA Copy

Verb + Value, not generic labels:

❌ "Submit" / "Click here" / "Learn more"
✅ "Start free trial" / "Get your report" / "See pricing"

First-person often outperforms:

"Start my free trial" vs "Start your free trial"

Reduce friction in language:

"Create free account" vs "Sign up" (implies commitment)
"See plans" vs "View pricing" (less scary)

Frameworks

PAS (Problem → Agitate → Solution):

State the problem they face
Agitate: make them feel the pain
Present your solution as relief

AIDA (Attention → Interest → Desire → Action):

Grab attention (headline)
Build interest (benefits, story)
Create desire (social proof, outcomes)
Prompt action (CTA)

BAB (Before → After → Bridge):

Before: Current painful state
After: Desired future state
Bridge: Your product makes the transformation

For detailed frameworks and examples: See references/copywriting.md

Page Structure

Landing Page Anatomy

┌─────────────────────────────────────┐
│ Nav: Logo | Links | CTA            │
├─────────────────────────────────────┤
│ HERO                                │
│ Headline + Subhead + CTA            │
│ [Visual: product/hero image]        │
├─────────────────────────────────────┤
│ SOCIAL PROOF BAR                    │
│ "Trusted by" + logos                │
├─────────────────────────────────────┤
│ PROBLEM / PAIN POINTS               │
│ Articulate their struggle           │
├─────────────────────────────────────┤
│ SOLUTION / FEATURES                 │
│ How you solve it (benefits focus)   │
├─────────────────────────────────────┤
│ HOW IT WORKS                        │
│ 3-step process or demo              │
├─────────────────────────────────────┤
│ TESTIMONIALS / CASE STUDIES         │
│ Proof it works                      │
├─────────────────────────────────────┤
│ PRICING (if applicable)             │
├─────────────────────────────────────┤
│ FAQ                                 │
│ Handle objections                   │
├─────────────────────────────────────┤
│ FINAL CTA                           │
│ Repeat primary action               │
├─────────────────────────────────────┤
│ FOOTER                              │
│ Links, legal, secondary nav         │
└─────────────────────────────────────┘

Multi-Page Site Structure

Page	Purpose	Key Elements
Home	Convert or route	Hero, value prop, social proof, CTAs
Product/Features	Detail offering	Feature sections, screenshots, benefits
Pricing	Enable decision	Plans, comparison, FAQ, guarantees
About	Build trust	Story, team, values, press
Case Studies	Prove results	Problem, solution, results, quotes
Blog	SEO, authority	Valuable content, CTAs
Contact	Capture leads	Simple form, alternatives

For detailed page patterns: See references/page-patterns.md

Conversion Patterns

Social Proof Types

Type	Impact	Example
Customer logos	Trust/authority	"Trusted by Stripe, Notion, Linear"
Testimonials	Relatability	Quote + name + photo + company
Numbers	Scale	"50,000+ teams" / "4.9★ from 2,000 reviews"
Case studies	Proof of results	"How X achieved Y"
Press mentions	Authority	"Featured in TechCrunch"
Certifications	Trust	Security badges, compliance

Pricing Psychology

Anchor high: Show expensive option first
Highlight recommended: "Most popular" badge
Use 9s: $49 vs $50 (still works)
Annual discount: Show monthly + annual savings
Remove currency friction: "$49/mo" cleaner than "$49.00 USD/month"

Objection Handling

Address objections before they ask:

Too expensive → ROI calculator, guarantee, comparison to cost of problem
Too complicated → "3 steps" simplicity, demo, free trial
Don't trust you → Social proof, security badges, guarantee
Need to think → Urgency (genuine), reminder of pain point
Need approval → Shareable assets, ROI documentation

For detailed conversion tactics: See references/conversion.md

SEO Essentials

Page-Level Basics

<!-- Unique, descriptive, 50-60 chars -->
<title>Project Management for Remote Teams | AppName</title>

<!-- Compelling, 150-160 chars, include CTA -->
<meta name="description" content="Ship projects faster with async collaboration. Free for teams up to 10. Start in 2 minutes.">

<!-- One H1 per page, includes primary keyword -->
<h1>Project Management Built for Remote Teams</h1>

<!-- Logical heading hierarchy -->
<h2>Features</h2>
  <h3>Async Updates</h3>
  <h3>Time Zone Smart</h3>

Technical Basics

Mobile-friendly (responsive)
Fast loading (<3s, ideally <1.5s)
HTTPS everywhere
Clean URL structure: /features/collaboration not /page?id=47
Image alt text (descriptive, not keyword-stuffed)

Content Strategy

One primary keyword per page
Answer questions your audience searches
Internal linking between related content
Regular fresh content (blog) for authority

For detailed SEO guidance: See references/seo-essentials.md

Mobile Considerations

Thumb-friendly CTAs: Primary buttons in easy reach
Shorter headlines: Less space, faster scanning
Tap-to-call: Phone numbers clickable
Simplified nav: Hamburger acceptable, but keep CTA visible
Fast loading: Mobile networks less reliable
Form optimization: Fewer fields, appropriate keyboards

Pre-Launch Checklist

Copy

Structure

One primary CTA per page
Logical flow (problem → solution → proof → action)
FAQ addresses top objections
Mobile-responsive

Trust

Real testimonials with specifics
Security/privacy addressed if relevant
Contact information visible
Professional, error-free copy

SEO

References:

references/copywriting.md — Detailed frameworks, headline formulas, CTA patterns
references/page-patterns.md — Section-by-section patterns for each page type
references/conversion.md — Social proof, pricing, objection handling, lead capture
references/seo-essentials.md — Technical SEO, content strategy, structured data

Industry-specific guidance:

references/industry-saas.md — SaaS, software, apps
references/industry-ecommerce.md — E-commerce, physical products
references/industry-services.md — Professional services, agencies
references/industry-apps.md — Mobile apps, app store presence

marketing-website