Landing page design: structure for pages that convert

Good landing page design is one goal, argued in order. Unlike a homepage, which serves everyone, a landing page exists for one visitor arriving from one place to take one action: book the trial class, join the waitlist, claim the offer. The structure that works again and again is a clear hero, the problem in the reader's words, how it works, proof, the details of the offer, answers to objections, and the same call to action at the end. Design's job is to make that order effortless to follow.

One page, one goal

Write the goal down as a single sentence before designing anything: "Get first time visitors from our Instagram ad to book a free intro class." Every section then has a test. Does this help that person take that step? If not, cut it or move it to the main site.

Landing page structure, section by section

1. 1

   Hero

   Headline with the promise, one supporting line, one button, one visual. Hero section design covers this screen in detail.

2. 2

   The problem

   Two or three sentences describing the situation the visitor is in, in their words. It shows you understand before you sell.

3. 3

   How it works

   Three steps, each with a short title and a sentence. People commit more easily when they can picture the process.

4. 4

   Proof

   Real testimonials with names, photos of real work, logos of real clients, or a short demo. Never invented.

5. 5

   The offer in detail

   What exactly they get, when, and what it costs or doesn't. Clear terms remove hesitation.

6. 6

   Objections

   A short FAQ that answers the reasons people don't act: time, price, fit, cancelling, what happens next.

7. 7

   Final call to action

   Repeat the headline promise and the same button. Visitors who read to the end are ready; don't make them scroll back up.

Not every page needs every section. A waitlist for a launch may be just a hero, three lines of how it works and an email field. A high commitment offer, such as a course or a consultation, usually needs all seven and more proof.

A worked example: a yoga studio intro offer

Match the page to the ad that sent them

Most landing page visitors arrive from something: an Instagram ad, a LinkedIn ad, an email, a QR code on a flyer. The moment they land, they check that they are in the right place. Repeat the exact offer from the ad in the headline, and carry over its look: the same background, colours and type. A page that looks unrelated to the ad feels like a bait and switch, even when it isn't.

Designing both from one source makes this automatic. In Gradiently, one design can be resized to every size in a single step on Pro, so the post, the story, the email header and the page hero share one Mark and one headline. One look, every size shows the workflow, and brand consistency explains why it matters beyond one campaign.

Design choices that keep people scrolling

• One accent colour for every button, used nowhere else. The eye learns where to click. The 60 30 10 rule is a good way to set the balance.
• Generous space between sections so each reads as one idea. Crowded pages feel like hard work.
• Headings that make sense on their own. Many people only skim headings; they should tell the whole story.
• Real photos over stock. Your actual room, product, team or results.
• Short forms. Ask only for what you need now. An email address is easier to give than a phone number.
• No navigation menu, or just a logo, so there is nowhere to wander off to.

Mobile first, then test

Traffic from social posts arrives mostly on phones, so design the 390 pixel wide version first. Keep the headline and button on the first screen, make buttons at least 44 pixels tall, and use a sticky button only if it doesn't cover content.

There is no universal good conversion rate; it depends on the offer, the price and the traffic. What you can always do is make the next version clearer than the last. For the colours behind it all, see website colour schemes.