By Mehdi HassanHow do you create a landing page that converts?
You create a landing page that converts by making decisions in the right order. The audience and action decide the message, the message decides the structure, the structure decides the design and the design decides the build. Most pages that underperform skipped a step or did them backwards, usually by starting in a page builder.
Below is the seven-step process we use for every page in our fixed-price landing page package, from brief to launch. It's the same whether the page is a waitlist, a free trial signup or a demo request. If you're still deciding which of those you need, start with the types of landing pages, and for the fundamentals, our guide to what a landing page is.
1. Brief
Agree who the page is for, where they'll come from and the one action you want.
2. Research
Gather the visitor's words, objections and proof from calls, tickets and existing data.
3. Copy
Write the full argument as a document, section by section.
4. Wireframe
Turn the approved copy into a low-fidelity layout with real text.
5. Design
Design the page visually in Figma around the copy, including mobile.
6. Build
Build it in code with tracking, performance and animation in place.
7. QA and launch
Test on real devices, check every event and go live, then watch the data.
Step 1: How do you write a landing page brief?
A landing page brief is one sentence you can test every later decision against: this page is for this person, arriving from this source, and we want them to do this one thing. Everything else in the brief supports that sentence.
Alongside it, note the offer (what they get), the traffic plan (which ads, emails or posts will link here and roughly how much), the constraints (brand rules, legal copy, deadlines) and how you'll judge success. On our projects this is what the intro call is for. A brief that names a traffic source is worth more than a long brief that doesn't, because the source tells you what the visitor already believes when they arrive.
Step 2: What research does a landing page need?
A landing page needs research into the visitor's own language, their main objections and the proof you can honestly show. It doesn't need a competitor template audit. Competitors' pages tell you what's common, not what works for your buyer.
- Sales and onboarding calls: the phrases buyers use to describe the problem, and the questions they ask before saying yes.
- Support tickets and reviews: what people expected the product to do, and where it surprised them.
- The traffic source itself: the exact ad copy, email or post that will send visitors. The headline has to continue it.
- Existing analytics, if the page replaces one: where people drop off and which CTAs get clicks. A CRO audit structures this if the current page has meaningful traffic.
- Proof inventory: every logo, quote, number and case you're allowed to use, with permission confirmed.
Step 3: How do you write the copy before the design?
Write the whole page as a plain document, in section order, before anyone opens a design tool. Each section starts with its job in one line, then the draft copy. Read the finished draft aloud; if it doesn't work as a spoken pitch, it won't work as a page.
We write the headline last, after the argument exists, and draft many options before choosing. The landing page structure guide gives the section order and the question each section answers, and how to write landing page copy goes deeper on the writing itself. Copy review is also the cheapest place for stakeholders to disagree: changing a sentence costs minutes, changing a built section costs hours.
Steps 4 and 5: How do you wireframe and design a landing page?
Wireframe with the real copy, then design around it. The wireframe settles hierarchy and section layout in grayscale; the visual design adds typography, color, imagery and motion. Doing both with final text means nothing breaks when the words go in.
Our landing page wireframe template shows the copy-first approach in detail. In visual design, three things matter more than style: a hero visual that shows the product at the moment of value, proof placed beside the claims it supports, and a mobile layout designed deliberately rather than squeezed down from desktop. We design in Figma and review mobile and desktop side by side.
What we look for in a design review
Can a first-time visitor say what the product does after five seconds on the first screen? Is the primary call to action the most visible element in the hero, and is it repeated after the sections where a reader might be ready?
Does every claim sit next to its proof? Does the mobile version keep the same argument order, or has something important dropped below a long stack of images? Is any animation explaining something, or only decorating? Decoration goes first when performance is tight.
Step 6: How do you build a fast landing page?
Build it with performance and tracking as requirements, not afterthoughts. A beautiful page that loads slowly loses visitors before they read the headline. The original SOASTA data showed roughly a 7% drop in conversion for a 100-millisecond delay and about 20% for a full second.
We build in Next.js, which lets us control what loads and when: images sized for each screen, fonts loaded efficiently, animation that doesn't block the first paint and scripts loaded only where they're needed. Tracking goes in during the build, with events for CTA clicks, form starts and submissions, so the first day of data is usable. Check Core Web Vitals with Google's own tools at web.dev before launch.
Build route | Best for | Trade-off |
|---|---|---|
Landing page builder | Fast simple pages, many variants | Less control over speed and design |
Framer or Webflow | Marketing teams who edit without developers | Platform limits on custom logic |
Custom code (Next.js) | Speed, animation, tracking and integrations | Needs a developer for structural changes |
Step 7: What should you check before launching a landing page?
Before launch, check the page on real phones and browsers, submit every form, confirm every tracking event fires and compare the headline against the live ad one last time. Most launch-day problems are small: a broken form integration, a missing event or a link pointing to staging.
- Submit each form and confirm the lead arrives where it should, with source data attached.
- Fire every tracked event and confirm it appears in analytics.
- Test on at least one iPhone, one Android phone and two desktop browsers.
- Check load performance on a mobile connection.
- Proofread the page aloud, including button labels and error messages.
- Confirm the page title, meta description and social preview image.
Our full landing page checklist covers 50 checks across copy, design, forms, tracking, speed and SEO. After launch, give the page enough traffic to judge before changing it, and change the biggest things first: offer, headline, structure.
