Designing Core Four Landing Pages

Before designing anything, identify which of the Core Four page types the campaign needs:

1. Lead Gen Page — collects contact info via a form (ebook, checklist, free trial signup)
2. Click-Through Page — warms up cold traffic before sending to a transactional step (e.g., checkout, demo booking)
3. Sales Page — long-form page that sells a product/offer directly on the page
4. Webinar/Event Page — drives registration for a live or on-demand event

Pick the type based on the single conversion goal of the campaign. Never mix goals on one page.

Progress:

• Step 1: Define the single conversion goal and page type
• Step 2: Write the message hierarchy (headline → subhead → proof → offer → CTA)
• Step 3: Build wireframe sections in Figma using the matching template
• Step 4: Apply visual design (hierarchy, contrast, whitespace, imagery)
• Step 5: Add trust/proof elements
• Step 6: Review against conversion checklist
• Step 7: Prep responsive/mobile variants

Step 1: Define the goal and page type

Ask: "What is the ONE action I want the visitor to take?" If there's more than one answer, split into separate pages.

Step 2: Message hierarchy

Draft copy blocks in this order before touching visuals:

• Headline: states the outcome, not the feature
• Subheadline: clarifies who it's for or how it works
• Supporting bullets: 3 benefit-driven points
• Social proof: logos, testimonials, numbers
• Offer recap: restate value right before the CTA
• CTA: action-oriented, matches the page type (e.g., "Get the Guide" not "Submit")

Step 3: Build wireframe by page type

Lead Gen Page structure:

• Hero: headline + short form (3-5 fields max) above the fold
• Benefit section (3 bullets with icons)
• Social proof (logos or testimonial)
• Secondary form or repeated CTA at bottom
• No navigation menu, no footer links that exit the page

Click-Through Page structure:

• Hero: headline + single CTA button (no form)
• Problem/solution section
• Feature highlights (3-4 with visuals)
• Testimonial or case study snippet
• Final CTA repeating the hero button copy

Sales Page structure:

• Hero: headline + CTA + hero image/video
• Pain point agitation section
• Solution/product walkthrough
• Feature-to-benefit table
• Pricing/offer stack
• Testimonials (multiple, with specifics)
• FAQ section addressing objections
• Final CTA with urgency/guarantee

Webinar/Event Page structure:

• Hero: date/time + topic headline + registration form
• "What you'll learn" bullet list
• Speaker bio with photo
• Agenda or timeline
• Social proof (past attendee count, testimonials)
• Final CTA with countdown or urgency element

Step 4: Visual design pass

• One primary CTA color, used consistently and nowhere else on the page
• F-pattern or Z-pattern layout for scanning
• Mobile-first spacing — design the mobile frame alongside desktop in Figma, not after
• Max 2 fonts, clear type scale (headline/subhead/body/caption)

Step 5: Trust elements

Place at least one proof element (testimonial, logo bar, stat, guarantee badge) within the first scroll and again near the final CTA.

Step 6: Conversion checklist

• Single, unambiguous CTA goal
• Headline passes the "5-second test" (clear value, no jargon)
• No nav bar (except Sales pages may keep minimal anchor links)
• CTA button text is specific, not generic ("Submit"/"Learn More" banned)
• Form length matches offer value (low-commitment offer = short form)
• Mobile frame checked for tap-target size and form usability

Step 7: Responsive prep

Duplicate the desktop frame, set to mobile breakpoint, and manually re-stack sections — don't rely on auto-resize alone for landing pages, since hierarchy often needs to change order on mobile (e.g., move form above benefits).