SaaS landing page design: sections and mistakes

A SaaS landing page has one job: get the right visitor to sign up or book a demo. Good ones look different from each other but follow the same structure, because visitors ask the same questions in the same order. Here's that structure, what to put in each section and the mistakes to avoid.

The questions a visitor asks

Someone landing on your page decides in seconds whether to stay. In order, they want to know:

1. What is this, and is it for me?
2. What does it actually do?
3. Why should I believe it works?
4. What does it cost, and what's the catch?
5. How do I start?

Each section of the page answers one of these. Skip one and visitors leave with the question unanswered.

The sections, in order

1. Hero

A headline that says what the product does for whom, in plain words: "Invoicing for freelance designers", not "The future of finance". One line under it with the main benefit, one primary button ("Start free") and, if you can, a real screenshot of the product. Avoid abstract 3D shapes in place of the product: people want to see what they'll use.

2. Social proof strip

Customer logos, a user count or a rating, right under the hero. Only use what's true and specific; a vague "loved by thousands" reads as filler.

3. The problem

Two or three sentences describing the pain in the customer's words. If they nod, they keep reading.

4. How it works or key features

Three to five features, each tied to an outcome: "Late invoices get chased automatically, so you get paid sooner" beats "Automated reminders". Show each with a real product screenshot or a short loop, not an icon in a circle.

5. Proof

Testimonials with a real name, role and photo, or a short case study with a number in it. Put them next to the feature they support when you can.

6. Pricing or a pricing teaser

Show prices on the page or link clearly to them. Hiding pricing makes self-serve buyers suspicious. Say what's free and whether a card is needed.

7. FAQ

Answer the objections that stop signups: security, cancelling, data export, integrations, how long setup takes.

8. Final call to action

Repeat the main button with a one-line reason to start now.

Design rules that matter

• One primary action. One button style for the main action, used everywhere on the page.
• Show the product. Real screens convince more than illustrations. If the product isn't built yet, design the screens first so you have something real to show.
• Readable on phones. Many visitors arrive on mobile. Check the hero fits, the text is at least 16 pixels and buttons are easy to tap.
• Fast. Compress images, avoid heavy video in the hero and test the page on a slow connection.
• Restraint. One accent color, two font weights, generous spacing. Avoid purple gradients, glowing shadows and "centered headline plus three cards" layouts that make SaaS pages look the same.

Mistakes that cost signups

• A clever headline that doesn't say what the product does.
• Features without outcomes.
• Stock photos of people pointing at laptops.
• Several competing buttons in the hero.
• No pricing information at all.
• A sign-up form asking for ten fields before anyone sees the product.

Designing your landing page faster

You can design a SaaS landing page in a design tool, a landing page builder or with AI. With Outclass, describe your product and ask for a desktop landing page: it designs the page at full width, as tall as its content, with real copy and one consistent style, and you can design the product screens for your hero in the same project. Edit anything visually, then copy it to Figma or download the HTML. If you're weighing builders against designing first, see landing page builders vs designing your page.