Most landing page design examples are screenshots with no argument attached. This is the opposite. Eight public pages, each read for one structural decision: where the CTA sits, where the proof lands, what the first screen promises, how many fields the form demands. Copy none of it. Copy the reasoning, then run the same four questions over your own page. Every page state described here was checked in October 2026 and is checkable against the live version.
Key takeaways
- Copy the structural decision, not the visual style.
- Every page that works makes four decisions: one action, first-screen promise, proof placement, friction budget.
- Proof does more work before the ask than after it.
- A form is a cost you charge the visitor. Charge less.
The anatomy every converting page shares
A landing page is one page, one audience, one action. The rest is arrangement. Arrangement is where the work happens, and landing page design is mostly the discipline of not adding to it.
Four decisions sit under every page that works.
One action. The primary action and the escape hatch should not look the same. Two equal buttons is not a choice for the visitor; it is a decision you declined to make.
The promise above the fold. Nielsen Norman Group's eye-tracking work found users spend roughly 57% of page-viewing time above the fold and 74% within the first two screens (Scrolling and Attention). That is not an argument for cramming. It is an argument for making the first screen legible without the second one.
Proof, placed. Evidence placed before the ask reads as confidence. The same evidence in a footer reads as a formality. Position is the message.
The friction budget. Fields, steps, choices, autoplaying video, cookie walls. Each one is a small charge. Most pages spend the budget on things the visitor did not ask for and then wonder why the form loses.
The skeleton is stable: hero, mechanism, proof, objections, close. Every example below is a different set of budgets over the same five sections.
Eight landing page design examples, read for structure
Lists of the best landing pages tend to reward art direction. This set was picked for decision quality: pages where one structural choice is visible and copyable. Some of the best landing page designs fail this test: expensive, beautiful, and impossible to learn from.
Basecamp: one button, one link, nothing else
What it does. The primary button, "Try Basecamp Free", sits above the headline, joined by the word "or" to a plain text link: a three-minute tour.
Why it works. Two paths, two weights. The trial is a button; the tour is a link, so it never competes. The subline carries the whole argument in one line ("Famously straightforward and easy-to-use"), and the hero shows a real message board rather than a rendered promise.
Copy this. Pick one primary action. Render every alternative as a link.
Mercury: one field, plus a way to look first
What it does. The hero asks for one thing: an email address. The button reads "Open account". A separate path, "Launch demo", opens a working product for anyone who will not hand over an email yet.
Why it works. One field is the cheapest opening a regulated product can offer, and the demo absorbs the unconvinced instead of arguing with them. The headline is abstract ("Radically different banking"); the subline carries the concrete promise and the time cost.
Copy this. Count the fields. Then add a look-first route for people who will not fill them.
Wise: the tool is the hero
What it does. The first screen is a currency calculator: amount, currencies, fee, arrival time, a savings figure. Two buttons sit above it: "Open an account in minutes" and "Send money now".
Why it works. The page demonstrates the product instead of describing it. Both buttons lead to the same signup but name different intents, so neither visitor has to translate. Trust marks and customer counts sit below the calculator, answering the question the calculator just raised: is this real?
Copy this. If your product can be used for five seconds on the page, build that. It outperforms any headline you can write.
GOV.UK: a start page with no form
What it does. The passport start page has a sentence of purpose, a "How long it takes" line, a "Before you start" list, one "Start now" button, then "Other ways to apply".
Why it works. Requirements sit above the button, so nobody enters a service they cannot finish. The non-digital route is documented rather than buried, the approach the GOV.UK Design System prescribes for every service start point.
Copy this. Put the qualification list above the CTA. The form begins after the decision, not before it.
Linear: the product is the first screen
What it does. The headline names the category. Below a one-line subline, screenshots of issues, cycles and roadmaps run edge to edge. Customer quotes with name, role and company sit above the closing CTA block.
Why it works. "Designed for speed" is proven by showing an interface that looks fast, not by repeating the word. The closing block separates paths: "Get started" for new visitors, "Open app" and "Download" for people who already bought.
Copy this. Show the product on the first screen. Keep returning-user links away from the new-user CTA.
Figma: claims with dates attached
What it does. One button, "Get started". Below the hero: a named customer quote, then a large claim, 95% of the Fortune 500, qualified with "based on data from March 2025", then a logo wall.
Why it works. The number carries its date and its source. That is rarer than it should be, and it turns a marketing sentence into something a careful buyer can check. The page also repeats one module structure all the way down: promise, then short support.
Copy this. Attach a date and a source to every number, or delete the number.
Superhuman: proof directly under the promise
What it does. An abstract headline, a clarifying subline, one button. Immediately beneath it: a trust line and a logo strip.
Why it works. Proof arrives within the first scroll, before any feature explanation, so the visitor's "who else uses this" question is answered before they ask it. The rest of the page repeats one module (product name, promise, four bullets), which keeps scanning cheap.
Copy this. If the headline is abstract, spend the next screen on evidence instead of adjectives.
Vercel: section headings written as customers
What it does. The hero is a category sentence and a deploy action. Below it, three sections whose headings are not features but customer situations, each pairing a named company with a load claim about what runs there.
Why it works. The layout segments by who you are, not by what the product does. You find your own situation in the heading before you read supporting copy. Proof does the organising, which is harder to fake than a feature grid.
Copy this. Write section headings as audience situations. Features belong inside them.
The eight examples and the pattern each proves
| Page | Structural decision | Pattern to copy |
|---|---|---|
| Basecamp | Button above the headline; tour demoted to a link | One primary action, alternatives as links |
| Mercury | Email-only start plus a demo route | One field, one look-first path |
| Wise | Calculator in the hero | Let the product sell itself on the page |
| GOV.UK | Zero-field start page | Qualification before the CTA |
| Linear | Product UI as the first screen | Show the interface; separate returning users |
| Figma | Dated, sourced claim | Every number carries a date |
| Superhuman | Proof strip under an abstract headline | Proof before explanation |
| Vercel | Customer-situation section headings | Segment by audience, not feature |
The five landing page layouts behind those pages
Landing page layouts are not decoration choices. Each one decides what the visitor can see without scrolling.
Centre stack. One narrow column, message then proof, 600 to 750px wide. Basecamp and Superhuman. Best when the promise is a sentence and the product is not photogenic.
Split hero. Copy on one side, a working tool on the other. Wise. Best when the product can be demonstrated in one interaction.
Product as hero. The interface occupies the first screen and the copy stays narrow. Linear and Figma. Best when the product is the proof.
Segmented stack. Stacked sections, each headed by a customer situation. Vercel. Best when one page must speak to several distinct buyers.
Start page. Text column, one button, requirements above it, alternatives below. GOV.UK. Best for services where completion matters more than persuasion.
Common patterns to avoid
Equal-weight CTAs. Two buttons of the same size and colour. The visitor reads it as a decision and leaves to make it.
The carousel hero. Slides split attention and hide the message behind timing. Choose one screen instead.
Anonymous logo walls. Marks without names, roles or context prove that companies exist, not that the product worked.
Forms that ask what you can infer. Baymard's checkout research puts the average form at 11.3 fields where most need about 8, and recommends combining name fields and hiding optional ones behind a link. The same discipline applies to a demo request.
A full site navigation on paid traffic. Every nav link is an exit. A landing page should offer one way forward and one way to learn more.
Claims without dates. Numbers that cannot be checked are decoration. They also age silently and stay wrong for years.
A demo video standing in for the product. Video is proof of effort, not proof of outcome. Show the thing.
How to apply this to a sample landing page
- Name the one action. Write it as a verb and a noun. If there are two, choose one and demote the other to a link.
- Write the first screen as a promise plus proof. Headline, one subline, one action, one piece of evidence. No carousel.
- Choose the layout from the mechanism. Demonstrable product, split hero. Product as proof, product as hero. Several buyers, segmented stack. Completion at stake, start page.
- Cut fields to the minimum that qualifies. Ask what you would do with each answer. If the answer is nothing yet, remove the field and ask later.
- Place proof before the ask. Evidence sits above the CTA, not in a footer strip.
Then take any sample landing page you admire and run four questions over it: what is the one action, what does the first screen promise, where is the proof, how much friction is it charging. If you cannot answer, the page is a mood, not a structure.
When the page has to carry a brand rather than a campaign, the structure and the identity have to be decided together. The design system examples teardown covers the component layer, and brand identity vs logo covers the layer above it. If you would rather someone build the page around one action, that is what landing page design covers here.
FAQ
What makes a landing page example worth studying?
A visible decision. If you can name what the page chose (one CTA, dated proof, a zero-field start) you can apply it. If you can only describe how it looks, you are looking at decoration.
How many CTAs should a landing page have?
One primary action. Any number of secondary paths, provided they read as links. The moment a second button matches the first, the page has two offers and no priority.
How long should a landing page form be?
As short as the qualification requires. One field is a test of interest; five is a commitment. Move explainable requirements above the button instead of into the form.
Do I need a landing page designer for a single page?
Not always. A designer earns the fee when the page carries a campaign, a launch or a paid traffic budget where structure decides the result. For a one-off page with a proven message, a template and copy discipline get most of the way.
Useful sources
- Wise: homepage and currency calculator
- GOV.UK: Apply online for a UK passport (start page)
- GOV.UK Design System: Start using a service
- Linear
- Figma
- Superhuman
- Vercel
- Basecamp
- Mercury
- Scrolling and Attention, Nielsen Norman Group
- Checkout Optimization: Minimize Form Fields, Baymard Institute