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

• Headline clear in 5 seconds

• Value proposition specific, not generic

• Benefits over features

• CTAs are action-oriented

• Social proof present

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

• Unique title tags

• Meta descriptions written

• H1 on every page

• Images have alt text

• Site loads fast

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