Skip to content

Landing Page Conversion Design - System Reference

A working reference for generating high-converting landing pages. Every rule below is concrete enough to be applied without further interpretation. Sources are cited inline and listed at the bottom.

Core principles (the non-negotiables)

  1. One page, one goal. Conversion-Centred Design principle #1: create focus. Remove every link, nav item, or CTA that does not serve the single conversion goal. (Unbounce / Oli Gardner)
  2. Clarity beats persuasion. A visitor must be able to answer "what is this, who is it for, what do I get" within 5 seconds of landing. If they can't, the page has failed the 5-second test before any other optimisation matters. (CXL / Peep Laja)
  3. Match the source. Headline, hero image and offer must mirror the ad, email or link that brought the visitor. Message-match drops bounce rate and lifts conversion more reliably than any colour or copy tweak. (Unbounce CCD principle #3)
  4. Reduce friction at every step. Every field, click and decision is a tax. Default position: cut it unless it earns its place.
  5. Speed is a conversion lever, not a tech concern. LCP under 2.5s is the floor. Each 0.1s of load time improvement is worth roughly 8% in conversion in retail benchmarks. (web.dev, Google)
  6. Stable usability principles age slowly. NN/g's 25-year position: human visual scanning, reading patterns and trust signals barely move year to year. Treat shiny trends with suspicion. (NN/g)
  7. Test, don't decree. Every "best practice" below is a strong default, not a universal truth. Ship the default, then test the top three highest-traffic elements (headline, hero, CTA copy) first. (CXL "What to Test First")

Hero / above-the-fold

Must contain, in order of priority:

  1. Headline (the value proposition in plain language).
  2. Subhead (one sentence expanding the headline with specifics).
  3. Primary CTA (button or single-field form).
  4. Hero visual (product screenshot, demo, or relevant photo - not stock).
  5. One trust signal (logo bar, review count, or single high-credibility quote).

Rules: - Fold target: assume 1366x768 desktop and 390x844 mobile. The CTA must be visible without scrolling on both. - Hero copy must pass the 5-second test: a stranger reading for 5 seconds must be able to state what you sell, who it's for, and the next action. (CXL) - No carousel. Erik Runyon's Notre Dame data showed sliders get a ~1% click-through rate and 84-90% of those clicks land on the first slide - everything after slide 1 is invisible. Use a single hero. (Runyon, 2013) - LCP element is almost always the hero image or headline. Pre-load it, serve next-gen format (AVIF/WebP), inline critical CSS. Target LCP < 2.5s on mobile 4G. (web.dev)

Headlines that convert

Default formulas (pick one, fill in specifics):

  • Outcome + timeframe: "Ship your landing page in 20 minutes."
  • [Target] who [pain] get [outcome]: "Founders who hate writing copy get high-converting pages without hiring a copywriter."
  • Problem -> promise: "Slow WordPress site? Get to A-grade PageSpeed in one week."
  • Specific number + benefit: "Cut your checkout abandonment by 35%."

Rules: - Length: 6-12 words for the headline. Subhead 10-25 words. - Lead with the customer's outcome, not your product's feature. Features go in the body. (CXL value-proposition canon) - Avoid jargon, brand-speak, and self-referential phrasing ("We are a leading provider of..."). - The headline must not require the visual to make sense. If the image fails to load, the offer must still be clear. - Numbers in headlines outperform vague claims in CXL and WiderFunnel test logs. "39% lift" beats "huge lift".

CTAs

Copy - Use first-person, action-led: "Get my free audit" beats "Get your free audit" by ~90% in Michael Aagaard's Content Verve test. "Start my trial" beats "Start your trial". - Specify the reward, not the action: "Show me the pricing" beats "Submit". "Download the checklist" beats "Click here". - 2-5 words. If you need more, it's two CTAs.

Colour and contrast - There is no universally winning colour. The HubSpot "red beats green 21%" test only held because red had higher contrast against that specific page. (HubSpot, 2011; CXL replication) - Rule: the primary CTA must be the highest-contrast element on the page. Achieve this with a colour not used elsewhere in the hero. (EyeQuant) - Secondary CTAs (if any) must be visually subordinate: ghost button, text link, or muted fill.

Size and placement - Minimum tap target: 44x44 CSS points (Apple HIG) / 48x48 dp (Material) / 24x24 px (WCAG 2.5.8 AA, 44x44 AAA). - Above the fold: one primary CTA, always. - Long pages: repeat the CTA every 1.5-2 screens, and after every major proof block (testimonial, case study, pricing). - Sticky CTA on mobile pages over 2 screens.

Forms

Field count - Each removed field above 4 typically adds conversion. Imaginary Landscape's classic test: 11 fields -> 4 fields lifted conversion 120%. (Imaginary Landscape / Imagescape) - For top-of-funnel lead capture, default to 3-4 fields (name, email, company, one qualifier). - For e-commerce checkout, Baymard's benchmark is 12.8 fields average; optimal is 6-8. Completion drops 4-6% per field above 8. (Baymard) - Strip optional fields. Expedia recovered $12M/yr by removing one optional "Company" field that was confusing users into entering bank addresses. (Duncan Jones / UX Movement)

Layout - Single column. Multi-column forms slow completion and break scan rhythm. (Baymard, NN/g) - Labels above the field. Inside-the-field placeholder-only labels fail accessibility and disappear as soon as the user types. - Group logically and split long forms into steps with a progress indicator - Baymard's finding is that perceived field count beats actual; a 15-field form in 3 logical steps outperforms a 10-field single-page form. - Show inline validation as the user moves off a field, not on submit. Green check for valid, red message with specific fix for invalid. - Required-field indicator should be the exception (mark optional fields), since most are required.

Microcopy - Submit button reflects the reward, not the action (see CTA section). - Privacy reassurance under email field: "We will not share your email" or "No spam, unsubscribe in one click."

Social proof

Order by credibility (use whichever you have, in this order):

  1. Quantified results from named customers. "Stormline lifted conversion 39.6% in 6 weeks - Tom, CEO" with photo and logo. Specific number + named person + face beats every other format.
  2. Recognisable logo bar. 5-8 logos, monochrome, single row. Caption "Trusted by" or "Used by teams at". Logos should be readable; if your customers aren't recognisable, drop the bar.
  3. Aggregate review count. "4.8 stars from 1,247 reviews" with the platform name (G2, Trustpilot, Capterra). Numbers must be real.
  4. Testimonials with face + name + role + company. Avoid first-name-only or initials - reads as fake.
  5. Case-study cards linking to the full story with headline metric on the card.

Rules: - Place one trust signal in the hero, the main testimonial block 1-2 screens down, and a final proof block adjacent to the CTA. - Specificity > volume. One detailed quote with a number beats ten vague "Great service!" lines. - Never invent or paraphrase a quote. Use the customer's words verbatim.

Trust signals

Evidence-based (use these): - Money-back guarantee with terms stated plainly. - Real founder photo and name, ideally with a short signed message for high-trust offers (consulting, finance, health). - Visible security context for payment forms: padlock icon, "Powered by Stripe", card logos. Trust seals (Norton, McAfee) have weak modern evidence; payment-processor branding is stronger. (Baymard) - Specific company details in the footer: legal name, registered address, VAT/company number. - Press mentions only if from publications the target audience recognises.

Cargo-cult (skip or downgrade): - Generic "100% secure" badges with no link or verification. - Stock photography of "diverse team smiling at laptop" - reduces trust, signals template. Use real product screenshots, real customer photos, or commissioned illustration. - "As seen in" rows of logos with no link to the actual mention.

Visual hierarchy

What the research actually says:

  • F-pattern is a failure state, not a target. NN/g's own follow-up to the 2006 study: the F-pattern emerges when content lacks structure (weak headings, dense paragraphs). Strong H2/H3s, short paragraphs and bullets break the F and produce better comprehension. (NN/g "F-Shaped Pattern... Misunderstood")
  • Z-pattern is a layout heuristic for sparse pages - landing pages with little text and a single CTA. Works as a default for hero sections: logo top-left, secondary nav/CTA top-right, headline/sub mid-page, primary CTA bottom-right of the hero block.
  • Visual weight directs attention more than position. Size, colour contrast, whitespace, and human gaze (a photo of a person looking at the CTA pulls eyes to the CTA - EyeQuant heatmaps).
  • Limit competing focal points to one per screen. Two equally weighted CTAs split attention and depress both.

Copy hierarchy

Order on the page, top to bottom:

  1. Headline (6-12 words, outcome-led).
  2. Subhead (10-25 words, adds specifics).
  3. Hero CTA (2-5 words, first-person reward).
  4. Proof strip (logos or review count, 1 line).
  5. Problem section (3-5 sentences naming the pain in customer words).
  6. Solution / how-it-works (3 steps, each step: icon + 3-word title + 1 sentence).
  7. Benefits over features for short pages; feature detail blocks for considered B2B purchases.
  8. Testimonial / case-study block.
  9. Objection handling / FAQ (5-8 questions in the customer's voice).
  10. Final CTA block (restate headline + button, no new info).

Word count: short B2C/lead-gen pages 300-600 words; considered-purchase B2B SaaS 1,200-2,500 words. Longer pages do not hurt conversion if every section earns its place - MarketingSherpa and Unbounce benchmark data both show this.

Benefits vs features: lead with benefits in the hero and problem sections; feature detail is only needed for high-consideration purchases where buyers comparison-shop on capability (B2B SaaS, dev tools, hardware).

Mobile-specific

  • Mobile-first, not responsive-as-an-afterthought. Design the 390px width first, then expand.
  • Tap targets: 44x44pt minimum (Apple HIG); spacing 8px minimum between adjacent targets to prevent mis-taps.
  • Thumb zone: place primary CTA in the bottom 1/3 of the screen or as a sticky bottom bar. Avoid top-edge primary actions on mobile.
  • Single-column everything. No side-by-side columns under 768px.
  • Forms: numeric inputmode for phone/postcode/card; autocomplete attributes on every field; type="email" to trigger the email keyboard.
  • Hide non-essential nav behind a hamburger only if the page is truly nav-light; otherwise let it scroll off.
  • No hover-only interactions. Every action must work with a tap.
  • Mobile LCP target 2.5s on a simulated Moto G4 / Slow 4G - this is the threshold Google scores against.

Performance thresholds

Core Web Vitals (Google, web.dev) - these are the operational floors:

  • LCP (Largest Contentful Paint): < 2.5s good, 2.5-4s needs improvement, > 4s poor.
  • INP (Interaction to Next Paint): < 200ms good, 200-500ms needs improvement.
  • CLS (Cumulative Layout Shift): < 0.1 good, 0.1-0.25 needs improvement.

Conversion impact (real case data): - Pinterest: improving LCP from 2.5s -> 1.5s lifted sign-up conversion 15% and SEO traffic 15%. - Vodafone: same 1s LCP improvement, 8% sales lift. - Renault: 13% conversion lift on LCP improvement. - Mobile bounce: 53% of mobile users abandon at 3s+ load (Google). - General benchmark: each 0.1s of load improvement is worth ~8% in conversion.

Practical defaults: inline critical CSS, lazy-load below-fold images, preload the LCP image, defer non-critical JavaScript, serve images in AVIF/WebP with explicit width/height to prevent CLS.

Anti-patterns - never do these

  • Carousels in the hero. ~1% CTR, 84% of clicks on slide 1 - everything else is invisible. (Runyon, NN/g)
  • Modal pop-ups within 5 seconds of landing. Among the most-hated web elements per NN/g; tanks first-impression trust. Exit-intent or scroll-triggered after 50%+ scroll only.
  • Autoplaying video with sound. Universally penalised by users and browsers.
  • Stock photos of "diverse smiling team at laptop". Signals template, reduces trust.
  • Multiple primary CTAs competing in the hero. Picks one or none.
  • Jargon-heavy headlines. "Synergistic AI-powered solutions" tells the visitor nothing.
  • Nav bar full of links on a paid-traffic landing page. Strips focus. Logo + one CTA in the nav is the maximum.
  • Placeholder-only form labels. Fail accessibility and disappear on type.
  • Fake scarcity / fake countdown timers. Detected, mocked, trust-destroying.
  • "Click here" / "Submit" / "Learn more" as CTA copy. Replace with reward-led copy.
  • Optional form fields that aren't earning their place. The Expedia $12M field.
  • Animations that delay text rendering. NN/g found scroll-triggered text animations delay users; treat as friction.
  • Long unbroken paragraphs. Forces the F-pattern; reduces comprehension.

Industry adjustments

B2B SaaS - Long-form (1,500-2,500 words) acceptable for considered purchases. - Pricing transparency wins; "Contact sales" is a step backwards for self-serve tiers. - Feature-comparison tables, integration logos, security/compliance badges (SOC 2, GDPR) are first-class trust signals. - Hero should include a product screenshot or short looped demo (no sound, < 10s). - Two CTAs allowed: "Start free trial" (primary) and "Book a demo" (secondary, visually muted).

E-commerce / DTC - Shorter copy, stronger imagery. Product photography on plain background + lifestyle context. - Trust signals: review count + average star rating, return policy, shipping speed, payment-processor logos. - Above-fold price, add-to-cart, and 1 trust line. - Baymard's checkout rules are the canonical reference: guest checkout, 6-8 fields, address autocomplete, pre-fill where possible.

Lead generation (single-form pages) - Single goal: form submit. Strip nav entirely. - 3-4 form fields maximum. - One testimonial, one logo bar, one founder face above the fold or beside the form. - Hero CTA = the form itself.

Course creators / info products - Long-form sales pages (2,000-5,000 words) are the format. - Sections: hook, problem agitation, story, solution, what's included, who it's for, who it's not for, instructor credibility, testimonials with specific outcomes, pricing, guarantee, FAQ, final CTA. - Money-back guarantee is near-mandatory. - Video sales letter optional but tested high in this category.

Local services - Phone number top-right, click-to-call on mobile, sticky on scroll. - Service area named explicitly ("Plumbers in Valencia"). - Reviews from Google with the Google logo carry more weight than any other testimonial format here. - Photos of the actual team and vans/premises, not stock.

Sources

Supporting canon (books that hold up): - Steve Krug, Don't Make Me Think - scannability, self-evident design. - Robert Cialdini, Influence - the six principles (reciprocity, commitment, social proof, authority, liking, scarcity) underpin almost every trust-signal pattern above. - Susan Weinschenk, 100 Things Every Designer Needs to Know About People - the cognitive-load basis for short forms, single CTAs and chunked content.