Landing page design: the layouts that actually convert

Most landing pages are not badly designed. They are over designed. Someone added a hero video, a three-item carousel, a second call to action in the header, and a testimonial section eleven scrolls down, and the page ended up looking like a website instead of a decision.

This guide is about design only: layout, structure, hierarchy, mobile, and the visual choices that decide whether someone acts. If you also need the campaign side of it, message match, offer selection, tracking, that lives in our PPC landing page build guide.

What "good landing page design" actually means

Decoration makes a page look considered. Design makes a page work. They are not the same job, and confusing them is why so many attractive pages convert badly.

A landing page exists to support one decision: book the call, start the trial, request the quote, download the thing. Everything on the page is either helping someone make that decision or competing with it. There is no neutral element. A logo carousel that nobody reads still costs a scroll and a moment of attention.

So the working rule is subtraction. Put an element on the page and ask what it does for the decision. If the answer is "it fills the space" or "the competitor has one," it goes. This is uncomfortable, because subtracting feels like doing less. It is doing more with less surface area, which is the actual craft here.

The second rule: design for the visitor's state of mind, not for a portfolio. Someone who just clicked an ad for emergency repair is anxious and in a hurry. Someone comparing project management tools is skeptical and reading carefully. The first person needs a phone number and a promise in the first screen. The second needs structure, comparison, and room to evaluate. Same craft, very different pages.

The anatomy of a converting landing page

Think in zones rather than sections. A zone is a job the page has to do. The order is fixed even when the length is not.

Zone 1: the above-the-fold block

Four elements: headline, subhead, hero visual, primary CTA. The headline states the outcome in plain words. The subhead adds the specifics the headline had to leave out, usually who it is for and what makes it credible. The visual shows the product, the result, or the actual humans doing the work.

Design rule: the CTA gets one visual treatment and that treatment appears nowhere else on the page. The moment a secondary link borrows the button style, the page stops telling people where to click.

Design rule: the hero visual sits beside the message, not on top of it. Full-bleed background photos with text laid over them look great in a mockup and lose contrast the second real content lands on them.

Zone 2: proof

Reviews, ratings, named testimonials, credentials, recognizable client logos, photos of real work. Proof answers the quiet question every visitor is asking: has this worked for someone like me.

Design rule: place proof adjacent to the ask, not in a dedicated testimonials district near the footer. A rating line directly under the button does more than a beautiful three-column quote grid at 70 percent scroll depth. Proof works when it is in the room during the decision.

Zone 3: explanation

What the thing is, how it works, what happens after they submit. Three steps is the sweet spot. Numbered, short, no jargon.

Design rule: use a consistent visual rhythm for the steps so the eye can skim them in a second. Same icon weight, same text length, same spacing. Irregular step blocks read as three unrelated ideas.

Zone 4: objections

Price, timing, contract terms, "will this work for my situation," and whatever your sales team hears every week. Objection handling is a design problem as much as a copy problem, because it needs to be findable without dominating the page.

Design rule: an accordion or a tight two-column FAQ works well here. It keeps the page short for the people who are ready and deep for the people who are not.

Zone 5: the form or final CTA

Repeat the ask at the bottom. People who scrolled the whole page are the most interested visitors you have, and making them scroll back up to act is a small insult.

Design rule: the closing block restates the offer in one line above the form. A bare form with a "Contact us" label at the end of a long page loses the thread of why anyone was filling it out.

Six landing page layout patterns, and when to use each

Long-form sales layout

One long scroll: hero, problem, solution, proof, deep detail, objections, guarantee, repeated CTAs every few screens. Built for persuasion over time.

Use this when: the offer is expensive, unfamiliar, or emotionally loaded, and the visitor needs to be convinced rather than just informed. Trade-off: it lives or dies on copy quality, and it is a slow page to test because there are so many variables in play at once.

Short-form lead capture layout

Hero with the form in view, a proof strip, three steps, brief objection handling, repeat form. One or two screens on desktop.

Use this when: the ask is small, like a quote, a consultation, or a download, and intent is already high. Trade-off: there is no room to warm up a cold audience, so it underperforms badly on traffic that does not already know what it wants.

Click-through / interstitial layout

No form at all. The page sells the offer and the button pushes to a checkout, booking tool, or app signup.

Use this when: the conversion happens in another system and you want to pre-sell before someone hits it. Common for ecommerce promotions and scheduling tools. Trade-off: you add a step, so the page has to earn that step with a genuinely clearer pitch than the destination gives.

Split-screen form layout

Message on one side, form on the other, both above the fold on desktop. Stacks to message-then-form on mobile.

Use this when: you want the form visible immediately without burying the value proposition. This is the default for service lead generation for a reason. Trade-off: a long form crushes the layout, and the message column has very little room, so the copy has to be tight.

Video-led layout

A short video carries the explanation, with a CTA directly beneath it and supporting text below for people who will not press play.

Use this when: the product is hard to explain in text, or a demonstration is more convincing than a description. Trade-off: plenty of people never hit play, so the page still needs to work fully with the sound off and the video ignored. Never autoplay with audio.

Comparison / decision layout

A table or side-by-side blocks comparing plans, packages, or you versus the alternative, with a CTA per option and one option visually recommended.

Use this when: the visitor's real question is "which one," not "should I." Good for tiered pricing and multi-service offers. Trade-off: more choices means more hesitation, so highlight one recommended path and keep the columns to three at most.

If you would rather start from a layout that already follows these rules than draw one from scratch, a builder with a conversion-focused template library is the fast path. Unbounce ships templates for most of these patterns, and you can strip one back rather than build up from an empty canvas.

Visual hierarchy: how to make people read in the right order

Hierarchy is the design system deciding what someone sees first, second, and third. Get it right and the page feels effortless. Get it wrong and visitors bounce without ever knowing why the page annoyed them.

Size and weight contrast. The headline should be unmistakably the largest text on screen, and the gap between levels should be obvious. If your H1, H2, and body are 32, 28, and 20 pixels, nothing reads as a hierarchy. Widen the intervals until the structure is visible from six feet away.

Whitespace as a grouping tool. Elements that belong together sit close, elements that do not sit far apart. Most amateur pages use even spacing everywhere, which tells the eye that everything is equally related. Tighten the space between a label and its field, widen the space between zones.

Directional cues. People follow gaze and lines. A person in the hero photo looking toward the form pulls attention there. So does an arrow, a hard edge, or a column that visually points down the page. Subtle beats literal here; you do not need a cartoon arrow.

Color used sparingly. This is the one most pages break. The CTA should be the only fully saturated element on screen. If your headings, icons, badges, and buttons all wear the brand color, the button loses its job. Everything else can live in neutrals and let the button be loud.

The F and Z scan patterns. Useful as a sanity check, not a law. People do tend to scan text-heavy pages in an F shape and simple visual pages in a Z, but a strong hierarchy overrides both. Design the priority order you want, then verify with the squint test: blur your eyes and see what still stands out. That is what a visitor actually registers in the first two seconds.

Designing the form

The form is where design decisions become revenue decisions, so it deserves more thought than it usually gets.

Field count. The real trade-off is not "fewer fields is better." Fewer fields means more submissions and lower average quality. More fields means fewer submissions and better qualified conversations. Match the field count to what your sales process genuinely needs. If nobody uses the answer to change how they follow up, delete the field.

Label placement. Labels above fields, not inside them. Placeholder-only labels vanish the moment someone starts typing, which breaks review at exactly the point people are checking their work. Left-aligned labels beside fields slow scanning on mobile.

Multi-step forms. Splitting a long form into two or three steps, easy question first, contact details last, tends to help on higher-commitment offers because the first click builds momentum. Show progress so nobody wonders how deep the rabbit hole goes. For a short form, skip the extra step; it just adds friction.

Button copy is a design element. The button is the most-read text on the page after the headline. "Submit" says nothing. "Get my free quote" or "Book my consultation" restates the value at the exact moment of hesitation. Write it in the visitor's voice, first person where it fits.

Error states. Validate inline, mark the specific field, and say what to fix in plain words. A red banner at the top of the page that says "There was a problem with your submission" is how you lose a lead who already decided to give you their number. Keep everything they typed.

Mobile landing page design

Most paid traffic is on a phone, so mobile is not the adaptation. It is the design, and desktop is the version with more room.

Order for mobile first. On a phone there is only one column, so the layout becomes a queue. Decide the order of the queue deliberately: headline, one-line value, CTA or form, proof, then everything else. Do not let the desktop grid pick the order for you.

Respect the thumb zone. The comfortable reach is the lower two-thirds of the screen. Primary actions belong there. Anything critical stranded in the top corner gets a hand shuffle, and hand shuffles cost conversions.

Tap targets. Buttons and links need real physical size, roughly 44 to 48 pixels tall, with space around them. Two links stacked tightly is a mis-tap waiting to happen, and a mis-tap on a landing page usually means a back button.

Sticky CTA. A slim persistent bar with the primary action works well on longer mobile pages. Keep it thin, keep it single-purpose, and do not stack it with a cookie banner and a chat bubble competing for the same corner.

Why desktop heroes break. Side-by-side hero layouts stack, so a tall image can push the headline and CTA entirely off the first screen. Split-screen forms become message-then-scroll-then-form. Check what actually appears in the first screen on a phone, because that is the version most people judge.

Input types. Set the right input type on every field so the phone opens the right keyboard: numeric for phone, email keyboard for email, and autocomplete attributes so saved details fill themselves in. It is a five minute change that removes real friction.

Design mistakes that quietly kill conversions

• Leaving the site navigation on the page. A nav bar is a menu of exits. Logo, maybe a phone number, done.
• Multiple competing CTAs. "Book a call," "download the guide," and "chat with us" all styled as buttons means the visitor has to choose a choice before making the choice. One primary action, everything else visually subordinate.
• Hero images that push the CTA below the fold. Beautiful and expensive, and it moves the only thing that matters off the first screen. Shrink the image before you shrink the message.
• Low-contrast text. Light gray on white looks refined on a designer's calibrated monitor and disappears on a phone in a parking lot. Aim for genuinely high contrast on body copy.
• Carousels. They hide content behind an interaction almost nobody performs, and whatever sits on slide three effectively does not exist. Stack the slides instead, or cut down to the one that matters.
• Stock photography that signals nothing. A generic smiling headset person adds zero credibility and often subtracts some. Real team photos, real work, real product screens.
• Design that does not match the ad. If the ad promised a specific offer and the page opens with a general brand statement, the visitor feels the seam and leaves. That mismatch is a campaign problem as much as a design one, and it is covered properly in our PPC landing page guide.

Building it: your three real options

Option 1: a dedicated landing page builder. Drag and drop, conversion-oriented templates, built-in A/B testing, and pages that publish independently of your website. Fast to launch and fast to change, which is the part that matters, because the first version of a page is rarely the best one. It costs a monthly subscription, and that only pays off if you are actually making changes. Unbounce is the one we point people to for this; worth it when you will be testing regularly, overkill if you need one page once and will never touch it again.

Option 2: your website platform's landing page feature. Squarespace, Wix, WordPress with a page builder, Shopify. No extra subscription, and everything lives in one place. The catch is that most site platforms fight you on removing the global navigation and rarely include real split testing, so you get a page that is a bit too much website. Fine for a first page, limiting once you want to optimize.

Option 3: a designer or developer. Full control, a page that looks exactly like your brand, and no template constraints. It is the slowest and most expensive route, and the hidden cost is iteration: every test becomes a ticket and a wait. Best when the page is a long-term asset with real traffic behind it, not when you are still figuring out the offer.

Whichever route you take, design the page in zones first, on paper if you like, before anyone opens a tool. Tools are very good at helping you build the wrong layout quickly.

FAQs

The questions people ask most often when they sit down to design a page themselves.

Where to go from here

Start from a proven layout: grab the free PPC Landing Page Playbook plus 10 vertical templates and adapt the zones above to your offer.

Build and test it yourself: a landing page builder like Unbounce gets you from wireframe to live page in an afternoon, with testing built in.

Get the campaign side right too: design is half the job. The PPC landing page build guide covers offer, message match, tracking, and testing.

If you would rather hand the whole thing off, you can request a CRO review.