Designing Core Four Landing Pages

Before opening Figma, identify which of the Core Four page types matches the campaign objective:

1. Click-Through Page — Warms up traffic, then pushes to a checkout/offer page. Use for paid ads leading to a purchase elsewhere.
2. Lead Generation Page — Captures contact info via a form in exchange for a lead magnet (ebook, checklist, demo). Use for list-building and top-of-funnel offers.
3. Sales Page — Long-form, persuasion-heavy page designed to close a sale directly on the page. Use for a single product/offer with a clear price point.
4. Webinar/Event Page — Drives registrations for a specific date/time event. Use for webinars, workshops, live launches.

Pick one type per campaign. Do not blend goals (e.g., don't ask for an email AND a direct sale on the same page) — this reduces conversion.

Progress:

• Step 1: Define the single conversion goal and page type
• Step 2: Write the message hierarchy (headline → subhead → proof → CTA)
• Step 3: Build wireframe sections in order
• Step 4: Apply visual design (hierarchy, contrast, whitespace)
• Step 5: Add CTA repetition and friction-reducers
• Step 6: Review against conversion checklist

Step 1: Define the goal

Every page needs exactly one primary action. Name it explicitly (e.g., "Book a demo call," "Register for webinar"). All content serves this single action.

Step 2: Message hierarchy

Draft copy before design:

• Headline: the core value proposition in one sentence
• Subheadline: clarifies who it's for or how it works
• Proof: testimonials, logos, stats, or case results
• CTA copy: action-oriented, specific (not "Submit")

Step 3: Wireframe by section (Core Four section order)

Click-Through: Hero (promise) → Benefit bullets → Social proof → Objection handling → Final CTA

Lead Generation: Hero + form above the fold → What they get (lead magnet value) → Social proof → Form repeated → FAQ

Sales Page: Hero + CTA → Problem agitation → Solution/product → Features-to-benefits → Testimonials → Pricing/offer stack → Guarantee → FAQ → Final CTA

Webinar/Event: Hero with date/time + register CTA → What you'll learn (3-5 bullets) → Speaker credibility → Social proof → Register CTA repeated → FAQ

Step 4: Visual design

• One primary CTA color used consistently; never compete with it elsewhere on the page
• F-pattern or Z-pattern layout for scanning
• Mobile-first spacing — design the stacked mobile view first, then expand
• Limit fonts to 2 (one for headlines, one for body)

Step 5: Reduce friction

• Add micro-copy under forms ("No spam, unsubscribe anytime")
• Keep forms to the minimum necessary fields
• Repeat the CTA every 1-2 scroll depths on long pages
• Use directional cues (arrows, eye-gaze in images) pointing to the CTA

Step 6: Conversion checklist

• Single goal maintained throughout
• Headline passes the "5-second test" (a stranger understands the offer instantly)
• CTA visible without excessive scrolling on both desktop and mobile
• No navigation menu (remove nav bar to prevent exit points) on Lead Gen/Sales/Webinar pages
• Trust elements (logos, testimonials, security badges) placed near the CTA