July 25, 2026 / Web Design
Landing pages: how to design one that actually converts
Landing pages: how to design one that actually converts
A landing page is the page a visitor arrives on after clicking an ad, an email link, a search result, or a call-to-action from another part of your site. Unlike a homepage, it is built around a single goal: one offer, one audience, one action. When the page is clear about that goal, conversion rates rise. When it tries to do several things at once, visitors hesitate, scroll past, and leave.
This guide walks through how to design, write, and test landing pages that earn their place in a marketing campaign. It focuses on the decisions a small team or independent designer can control: structure, copy, hierarchy, forms, speed, and the small details that change whether a page feels trustworthy or pushy.
What a landing page is, and what it is not
It helps to define a landing page by what it excludes. A landing page is not a homepage, a blog post, a product detail page, or a contact page with a full site navigation attached. The defining trait is focus: every element on the page should support a single offer and a single next step.
There are two broad kinds:
- Click-through landing pages sit between an ad and a deeper action, such as a product detail page, a sign-up form, or a pricing page. They warm the visitor up with benefits, proof, and a clear link forward.
- Lead generation landing pages collect contact information directly on the page, usually through a form, a calendar booking, or a gated download.
Both share the same design rules. The difference is where the conversion happens and what the visitor gives up to convert.
The five jobs a landing page has to do
If a page fails to convert, it usually fails at one of five jobs. Use this list as a diagnostic whenever a campaign underperforms.
- Match the promise of the source: the headline and visual must reflect the ad, email, or link the visitor clicked.
- Explain the offer in plain language within the first screen.
- Show why the offer is credible through proof, specifics, or demonstration.
- Make the next step obvious and low-friction.
- Remove anything that competes with the next step.
When one of these breaks, the others start to wobble. A confusing headline forces a visitor to read every section. A weak call-to-action forces them to hunt for the next step. Anything you remove from a landing page that does not serve the five jobs above is usually safe to cut.
Structure: the anatomy of a focused page
Most high-performing landing pages follow a similar vertical rhythm. The exact sections depend on the offer, but the order rarely changes.
| Section | What it does | Watch out for |
|---|---|---|
| Hero with headline, subhead, and one primary call-to-action | Answers “what is this and what do I do next” above the fold | Generic headlines, two competing buttons, slow-loading hero images |
| Benefit blocks, typically three | Translates features into outcomes the visitor cares about | Repeating the headline, listing features without explaining value |
| Proof: testimonials, logos, case snippets, ratings | Reduces the perceived risk of acting | Stock quotes, vague praise, unreadable logos |
| Secondary detail or feature list | Covers the questions an interested visitor still has | Long paragraphs, marketing slogans, unrelated product features |
| Final call-to-action block | Repeats the next step for visitors who scrolled to the end | Different wording than the hero, hidden behind a long form |
| Footer with legal links only | Provides the basics without distracting | Full site navigation, blog links, social feeds |
You can argue about section names, but the underlying rhythm is constant: promise, explain, prove, answer, ask. If a section cannot justify its place in that rhythm, it probably belongs somewhere else, or not on the page at all.
Writing the headline and subhead
The hero block does most of the persuasion. The headline carries the offer, the subhead carries the context, and the call-to-action carries the next step. Each of those three lines has a different job and should be written separately.
A useful pattern is to write three versions of the headline for each page:
- Outcome-led: “Get a tax-ready bookkeeping workflow in two weeks.”
- Specific-led: “Bookkeeping for UK sole traders earning under £85,000.”
- Question-led: “Spending more time on bookkeeping than on the work that pays?”
Pick the one that best matches the source the visitor came from. A click from a search ad for “bookkeeping for sole traders” rewards a specific-led headline. A click from a comparison guide article rewards a question-led headline. The headline that wins the click is the one that reflects the visitor’s frame of mind when they arrived.
The subhead does the work the headline cannot fit. It can add a qualifier, a timeframe, a region, or a result. A weak subhead restates the headline. A useful subhead adds new information.
Calls-to-action that earn the click
Call-to-action buttons are the most tested element on a landing page, which makes them easy to overthink. Three rules cover most situations.
- Use one primary call-to-action per page. Secondary actions can exist as text links, but they should not be styled as equal buttons.
- Write the button label to describe what happens next, not what the visitor gets. “Book my consultation” outperforms “Learn more” because it tells the visitor what they are doing.
- Repeat the call-to-action in the hero and at the bottom of the page so visitors do not have to scroll back up.
Button color matters less than contrast and placement. A button that is invisible against the rest of the page is the same as no button at all, regardless of its hue.
Forms: fewer fields, better leads
Every additional form field reduces completion rates. The exact tradeoff depends on the offer, but a useful starting point is to ask only for the information you need to take the next step yourself.
| Goal of the form | Typical fields | Notes |
|---|---|---|
| Book a sales call | Name, work email, company, optional role | Avoid phone number at this stage; it raises friction and lowers form completion |
| Download a resource | Name, work email | Two fields is usually the ceiling for a top-of-funnel download |
| Start a free trial | Work email, password | Keep signup separate from billing; ask for payment only after the trial |
| Request a quote | Name, email, project type, budget range | Budget range pre-qualifies leads and reduces unqualified calls |
For form-heavy pages, multi-step layouts tend to perform better than a single long list, because each step feels smaller. If you use a multi-step form, show progress clearly and avoid asking for the same piece of information twice.
Proof that actually persuades
Proof is the section most pages get wrong, often by including too much generic praise. Three forms of proof are usually enough, and each should answer a different question.
- Specific testimonials answer “does this work for someone like me?” A quote that names a role, a company size, and a concrete result is more useful than a line about “great service.”
- Recognizable logos answer “is this used by people I trust?” Logos only work if the visitor can read them. Avoid low-contrast strips where every mark is the same height and the same shade.
- Numbers and case snippets answer “what could this do for me?” A short paragraph with a before-and-after result outperforms a stat with no context.
Skip stock photos of smiling people pointing at laptops. They tend to dilute rather than strengthen the page, and accessibility-conscious visitors may find them distracting or patronizing. For guidance on choosing imagery that respects all users, the MADE Visual Studio guide to inclusive design covers how to weigh imagery decisions during page design.
Navigation and links: what to remove
The single biggest mistake on a landing page is full site navigation. Every menu item is a chance for the visitor to leave. The standard approach is to remove the main menu and replace it with a minimal header that contains only a logo and, if needed, one secondary text link such as “Sign in.”
Two exceptions are worth noting. Returning visitors who already know your brand may want a way to verify you are who you say you are, so a quiet link to an “About” page can help. And trust signals such as “Privacy” and “Terms” are often legally useful, though they can sit in the footer rather than the header.
Speed, layout stability, and mobile reality
Performance is a conversion issue, not just a technical one. A page that takes five seconds to load on a mid-range phone will lose a large share of visitors before they see the headline, no matter how well it is written.
Three habits cover most performance improvements on a landing page:
- Use one hero image, sized for the largest layout it will appear in, and serve it in a modern format.
- Defer scripts that are not needed above the fold, including analytics that can load after the page is interactive.
- Avoid layout shift by setting explicit dimensions for images, embeds, and dynamic blocks.
Mobile deserves its own pass, not a quick check. Test the page in a real browser on a real phone. Pinch, scroll, rotate, and try the form. The call-to-action should always be reachable with the thumb without covering the text the visitor is reading. For a broader view of how page decisions add up, the practical web design process at MADE Visual Studio walks through where a page like this fits inside a typical design project.
Accessibility as a conversion tool
Accessibility is often framed as a legal or ethical requirement, which it is, but on a landing page it is also a conversion lever. The same features that help a screen reader user also help a tired visitor on a small screen: clear hierarchy, readable type, sufficient contrast, and a form that works with a keyboard.
A short list to apply to every page:
- Headlines describe the offer in plain language, not clever wordplay that requires decoding.
- Color contrast between text and background meets at least the standard 4.5:1 ratio for body copy.
- Form fields have visible labels, not placeholder-only labels that disappear on input.
- Buttons are focusable with the keyboard and have a visible focus state.
- Imagery that carries meaning has descriptive alt text; decorative imagery has empty alt text.
If you want a more thorough list, the website accessibility checklist on the MADE Visual Studio blog is a useful companion to the design work above. It is also a good habit to test every form on a real screen reader, even briefly, because that quick test catches more issues than any automated audit.
Search intent and SEO for landing pages
Search-driven landing pages deserve a different framing from ad-driven ones. When someone searches a query and lands on your page, the visitor has not seen an ad or an email. The headline, the page title, and the snippet in search results have to do all of the work the source link would have done on a click-through page.
Three things help a search landing page rank and convert:
- Use the searcher’s language in the headline and the first paragraph. Their phrasing is usually a stronger signal than your internal product name.
- Place the primary offer or definition above the fold, then support it with detail below.
- Match the page’s metadata to the page’s content, and avoid clickbait titles that promise more than the page delivers.
Landing pages also benefit from internal linking, even if it is subtle. A small footer line linking to one or two relevant supporting pages can help search engines understand the topic and can guide visitors who want to read more before they act. The broader idea of how pages support each other across a site is part of the thinking in any overview of landing page design, which covers the same principles in slightly different language.
Testing: what to measure and what to ignore
A landing page is a hypothesis. The offer, the headline, the proof, the form, and the call-to-action are all bets about what the visitor will respond to. Testing is how you find out which bet is right.
Useful measurements for a single page, listed in rough order of value:
- Conversion rate against the primary call-to-action, measured as conversions divided by unique visitors to the page.
- Form completion rate, measured as form views that result in a submitted form.
- Scroll depth, to learn whether visitors reach the proof and the final call-to-action.
- Bounce rate, but only as a soft signal, because it varies by source and by intent.
- Page load time on mobile, since it shapes every other metric above.
Avoid testing more than one variable at a time on a page with modest traffic. If you have fewer than a few hundred visitors per week, most A/B tests will not reach significance before the offer itself changes. In that case, qualitative tests are more useful: watch five people use the page, ask them to narrate their thinking, and look for the moments they hesitate.
Common mistakes and how to avoid them
Most landing page problems fall into a small set of patterns. The list below covers the ones I see most often when reviewing pages for small teams.
| Mistake | Why it hurts | What to try instead |
|---|---|---|
| Two equal call-to-action buttons | Visitors split attention and are less likely to pick either | One primary button, one quiet text link for the secondary action |
| Long hero text | Visitors have to read a paragraph before they know what the page is about | Headline of around 8 to 12 words, subhead of one sentence |
| Auto-playing video or motion | Slows the page, distracts from the offer, and is hostile to many users | A static hero image, with an optional video lower on the page |
| Generic testimonials | Visitors skim past praise they cannot verify | Testimonials that name a role, a context, and a specific result |
| Hidden form labels | Form fields become hard to use on small screens and with assistive technology | Visible labels above each field, placeholders only for format hints |
| Full site navigation in the header | Every menu item is a route away from the conversion | Minimal header with logo and at most one secondary link |
None of these are difficult to fix individually. The challenge is that they accumulate. A page with three of these problems feels merely okay. A page with all six feels unfocused, and the conversion rate suffers before anyone can point to a single cause.
A short pre-launch checklist
Before a landing page goes live, it is worth running through a short checklist. None of the items are novel on their own, but together they catch most of what a designer forgets at the end of a project.
- The headline reflects the source of the traffic, not just the offer.
- The call-to-action appears in the hero and again at the bottom of the page.
- The form asks only for the information needed to take the next step.
- Proof is specific, readable, and answers a different question for each item.
- Navigation is reduced to the essentials.
- The page loads in under three seconds on a mid-range mobile device over a normal connection.
- Tab order, focus states, and form labels work with the keyboard alone.
- Metadata, including the page title and meta description, matches the page content.
- Tracking fires only on the events that matter: page view, call-to-action click, form submit.
After launch, the work continues. Watch the data for a couple of weeks, talk to a few visitors if you can, and make one change at a time so you know what moved the result. A landing page is rarely finished on the day it goes live; it is finished when the team stops learning from it.
Frequently asked questions
What is the difference between a landing page and a homepage?
A homepage is a directory for the whole site, with links to many sections, products, or stories. A landing page is built around a single offer and a single call-to-action, with most of the rest of the site removed from view. If a visitor can reach your blog, your pricing, and three product categories from the same page, it is acting as a homepage, not a landing page.
How long should a landing page be?
Long enough to answer the questions an interested visitor has, and short enough that an uninterested visitor does not have to scroll past them. Simple offers can be effective on a short page with a single screen of content. More considered purchases, such as B2B software or services, usually benefit from a longer page that covers benefits, proof, and detail before asking for the conversion.
How many call-to-action buttons should a landing page have?
One primary call-to-action is the safest default. You can repeat the same button at the bottom of the page for visitors who have scrolled, and you can include one quiet secondary text link for visitors who want a different next step. Two equally weighted buttons usually split attention and lower the conversion rate on both.
Should a landing page include the full site navigation?
Usually not. The main reason to use a landing page is focus, and full navigation gives visitors a way to leave before they convert. A minimal header with a logo and, at most, a single secondary link tends to perform better. Trust links such as privacy and terms can stay in the footer.
What fields belong on a landing page form?
Only the fields you need to take the next step. For a sales call, that is usually a name and a work email. For a download, often just an email. Each additional field lowers completion, so it is worth asking whether the team would actually use the information before requesting it.
How do I make a landing page accessible?
Use clear hierarchy, plain language, and sufficient color contrast. Give every form field a visible label, make sure buttons and links are reachable with the keyboard, and write alt text for any imagery that carries meaning. Test the page with a screen reader before launch, and run an automated audit as a second pass.
How do I know whether my landing page is working?
Track the conversion rate against the primary call-to-action, not just traffic or bounce rate. If the rate is low, watch a few real users use the page, look at scroll depth to see how far they get, and then make one change at a time so you can attribute the result.
Can a landing page rank in search results?
Yes, if the page’s content matches the searcher’s intent and the site signals support the topic. Pages built around a clear offer, with metadata that matches the content, and with internal links to relevant supporting pages, can rank for both branded and non-branded queries. The focus keyword for this kind of page is usually the offer itself or the problem it solves.
How often should I update a landing page?
Review the page every few months, or whenever the offer, the audience, or the source of traffic changes. Small copy and image updates can usually be made live without testing. Larger changes, such as a new form or a different proof section, are better tested one at a time so you can see what moved the result.