Skip to content
ThemesIonic — home
Web Design

Landing Page Design

A landing page has one job and everything on it either serves that job or competes with it. Most underperforming pages are not badly designed — they are trying to do three things.

Updated 4 min read intermediate

One promise, one action, and nothing on the page that competes with either. A landing page is not a small website. It is a single argument, and the most common reason one underperforms is not visual — it is that the page is quietly making three arguments at once.

Message match decides the outcome before design does

Whatever brought the visitor here made a promise: an ad, an email subject line, a link in a talk. The first thing on the page has to repeat that promise in recognisably the same words.

When the ad says "same-day repairs" and the page headline says "Excellence in service since 1994", the visitor has to work out whether they are in the right place. Most will not bother. This single mismatch wastes more spend than any layout decision.

The structure that works, in order

  1. Headline. The promise, stated plainly. Not a slogan.
  2. Subhead. Who it is for and what changes for them.
  3. The action, visible without scrolling.
  4. Proof. Specific, attributable, and relevant to the promise.
  5. How it works. Three or four steps, so the visitor can picture the process.
  6. Objection handling. The two or three real reasons people hesitate.
  7. The action again, at the point where someone who read everything is ready.

Sections five and six are the ones people skip, and they are the ones that convert visitors who did not say yes immediately.

Proof has to be specific to count

"Great service!" from "A customer" is worse than nothing — it reads as filler and quietly signals that no real testimonial was available.

What works is specific and attributable: a named person, a role, and a concrete outcome. Numbers help when they are real and checkable. If you have no proof yet, say something honest and concrete instead — how long you have been doing this, what the guarantee is, what happens if it goes wrong.

The form is where the page succeeds or fails

Field Keep it when
Email Always, if you need to reply
Name You will use it in the reply
Phone The next step is genuinely a call
Company The offer differs by company size
"How did you hear about us?" Almost never — put it in analytics

Every field is a small decision the visitor has to make. Ask for what the next step needs and nothing else; the rest can be gathered in the conversation you just earned.

Label fields above the input rather than inside it. Placeholder-only labels disappear the moment someone starts typing, which is exactly when they are needed. Form mechanics and the failure modes that swallow submissions are covered in contact form not sending email — a beautiful form that never delivers is the most expensive kind.

Speed is part of the design

A landing page usually receives paid traffic, on mobile, on a connection you do not control. A hero image that takes four seconds to arrive has already lost a share of the visitors it was meant to impress.

Two things matter most: the largest image on the screen, and whether the layout moves while loading. Both are covered in optimising images and fixing cumulative layout shift. A button that shifts down as an image loads is the reason for a surprising number of accidental clicks and abandonments.

Design details that carry weight

  • One visually dominant button. If two buttons look equally important, you have asked the visitor to choose between choosing.
  • Contrast on the action. The primary button should be the highest-contrast element on the screen. Check it against a colour palette that is actually accessible.
  • Short lines. Around 60 to 75 characters. Full-width paragraphs on a wide screen are skimmed, not read.
  • Real imagery over stock. A photograph of the actual thing outperforms a polished image of strangers in an office.

Common mistakes

  • Keeping the site navigation. Every menu item is a way out of the decision.
  • Two calls to action of equal weight. "Buy now" and "Learn more" side by side splits attention and converts neither.
  • A carousel at the top. People act on the first slide or not at all; the rest is weight nobody sees.
  • Asking for a phone number when the next step is an email.
  • Writing about yourself. "We are passionate about" is not a promise the visitor can act on.
  • Launching without measurement. If you cannot tell which sections people reach, you cannot improve anything.

Verify before you send traffic

Load the page on a phone, on mobile data, logged out. Read the headline aloud and check it repeats the promise of the ad that will point here. Submit the form and confirm the notification actually arrives and the entry is stored. Then check the page in greyscale: the primary action should still be the first thing you notice.

For the WordPress-specific side — which page template to use, how to keep the theme's header off, and how to set up measurement — see building a WordPress landing page.

Frequently asked

Usually not. Every navigation item is an invitation to leave before deciding. Keep a logo, and if trust or legal requirements demand links, put them in a minimal footer rather than a header menu.
As long as the decision requires. A free newsletter needs a screen; a considered purchase needs enough to answer every objection. Length is not the variable that matters — whether each section removes a real doubt is.
Every field costs completions, so ask only for what you will genuinely use in the next step. If a field exists because someone might want the data later, it is costing you responses today.
Tagged CSS

Related guides