# Landing page design: structure for pages that convert

[Canonical HTML page](https://gradiently.design/guide/landing-page-design)

A landing page is a single argument with a single ending. Here is the order to make that argument in, a worked example you can copy, and the design decisions that keep people moving down the page.

## The short version

- A landing page is a standalone page built for one goal, such as a sign up, a booking or a purchase.
- A dependable structure is hero, problem, how it works, proof, offer details, objections and a final call to action.
- The page should match the ad, post or email that sent the visitor, in its words and in its look.
- Removing site navigation and extra links keeps attention on the single action the page exists for.
- Test changes one at a time against your own numbers rather than relying on general benchmarks.

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.

### Homepage

- Serves every kind of visitor
- Full navigation and many links
- Several products or services
- Explains the whole business

### Landing page

- Serves one audience from one source
- No navigation, or only a logo
- One offer
- Makes one argument and asks once, then again

## Landing page structure, section by section

1. **Hero** Headline with the promise, one supporting line, one button, one visual. [Hero section design](https://gradiently.design/guide/hero-section-design) covers this screen in detail.
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. **How it works** Three steps, each with a short title and a sentence. People commit more easily when they can picture the process.
4. **Proof** Real testimonials with names, photos of real work, logos of real clients, or a short demo. Never invented.
5. **The offer in detail** What exactly they get, when, and what it costs or doesn't. Clear terms remove hesitation.
6. **Objections** A short FAQ that answers the reasons people don't act: time, price, fit, cancelling, what happens next.
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

| Section | What the page says |
| --- | --- |
| Hero | "Your first class is on us." Supporting line: "Small, beginner friendly classes in Bristol, six days a week." Button: "Book your free class" |
| Problem | "Big gym classes move fast and nobody checks your form. It is hard to start when you don't know what you're doing." |
| How it works | Pick a beginner class. Arrive ten minutes early, mats provided. Stay for a five minute chat about what suits you. |
| Proof | Three short reviews from real members with first names and photos, plus pictures of the actual studio. |
| Offer | One free class for new students, any beginner session, no card required. |
| Objections | "I'm not flexible." "What do I wear?" "Is there parking?" "What happens after the free class?" |
| Final call to action | "Come and try a class." Same button: "Book your free class" |

Every line answers a question a nervous beginner actually has. The same structure works for a dentist's check up offer or a software trial.

## Match the page to the ad that sent them

Most landing page visitors arrive from something: an [Instagram ad](https://gradiently.design/guide/instagram-ad-design), 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.

A portrait Instagram ad for a yoga studio offering a free first class

The Instagram ad at 1080×1350.

A wide landing page hero repeating the same free first class offer and background as the ad

The landing page hero at 1920×1080: same words, same look, so nobody wonders if they clicked the right link.

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](https://gradiently.design/guide/one-look-every-size) shows the workflow, and [brand consistency](https://gradiently.design/guide/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](https://gradiently.design/guide/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.

- Page ground: #fbf7f2
- Section band: #efe6da
- Text: #2b2a33
- Secondary text: #6b6670
- Button only: #c2410c

A calm landing page palette: two warm grounds that alternate between sections, two text colours and one accent reserved for the call to action.

## 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.

### Avoid

- Changing five things at once and guessing what worked
- Copying a conversion rate from a blog post as your target
- Popups that appear before the visitor has read anything
- A form that asks for ten fields to download a guide

### Do

- Change one thing, such as the headline, and compare
- Measure against your own previous version
- Let people read the offer before asking for anything
- Ask for the minimum, then learn more later

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](https://gradiently.design/guide/website-color-scheme).

## FAQ

### What is the best structure for a landing page?

Hero, problem, how it works, proof, offer details, objections and a final call to action. Short offers can skip sections; bigger commitments need them all.

### Should a landing page have navigation?

Usually not. Removing the menu keeps attention on the one action the page exists for; a logo is enough.

### How long should a landing page be?

As long as it takes to answer the visitor's questions. A free waitlist can be one screen, while a paid course often needs a long page with detailed proof and FAQs.

### What is the difference between a landing page and a homepage?

A homepage serves every visitor and links everywhere. A landing page serves one audience from one source and asks for one action.

### Should my landing page look like my ad?

Yes. Repeat the ad's offer in the headline and keep its colours and background, so visitors know immediately they are in the right place.