Landing Page Design

Landing page structure, conversion optimization, hero design, and landing page testing.

dragoon0x Updated

File contents

Landing Page Design

Above the Fold

  1. Headline: Clear value proposition (what you get, not what it is)
  2. Subheadline: Supporting detail or social proof
  3. Visual: Screenshot, demo, or relevant image
  4. CTA: Single, clear action button
  5. Trust signal: Logo bar, stat, or testimonial

Section Flow

  1. Hero (value prop + CTA)
  2. Social proof (logos, numbers, testimonial)
  3. Problem statement (what's broken today)
  4. Solution (how you fix it, with visuals)
  5. Features/benefits (3-4 key ones)
  6. Testimonials/case studies
  7. Pricing (if applicable)
  8. FAQ
  9. Final CTA (repeat the hero CTA)

CTA Rules

  • One primary CTA per page (repeated at key points)
  • Specific: 'Start free trial' not 'Get started'
  • Contrasting color from the rest of the page
  • Above the fold AND at the bottom
  • No competing secondary CTAs near the primary

Testing Priorities

  1. Headline (biggest impact)
  2. CTA text and placement
  3. Hero image/video
  4. Social proof type and placement
  5. Page length

dragoon0x/everything-design-taste/tree/main/skills/landing-page-design commit e3710181ab

Frequently asked questions

npx skillmds@latest add dragoon0x/landing-page-design