Web Design

SaaS Marketing Website Design: The Five-Page Structure, Page by Page, From Our Flowtera Concept

Most SaaS sites fail on the first screen, because automation, analytics and workflow tools all describe themselves in the same words. This guide gives each of five pages one job, shows how we built them for a concept product, and says what can wait. Checked October 2026.

SaaS Marketing Website Design: The Five-Page Structure, Page by Page, From Our Flowtera Concept

Key takeaways

  • Five pages are enough to launch. A home page, a product page, a pricing page, a company page and a resources page, each with one job and one type of visitor.
  • Show the product instead of describing it. On our concept build, no claim sits without a piece of interface beside it, so a visitor understands what the product does before reading a feature.
  • Answer the security question on the product page. That is where an enterprise buyer stops, so say what you actually do.
  • One page, one job, one visitor. The home page sets the category, the product page explains the mechanism, pricing handles objections, the company page builds trust, and resources grow search traffic.
  • One system across all pages. A single palette, one type family and one card style let five pages with different jobs read as one product.
  • Keep the claims honest. Flowtera is our own concept, so the logos, reviews and numbers in its design are placeholders. A real site should only state what it can prove.

A note before you read: Flowtera is a concept

Flowtera is not a real company. It is our own concept: an imaginary workflow automation product, taken from a problem statement to a brand, five page designs and a Webflow build. There is no client, and the logos, customer reviews, figures and security standards shown in its designs are placeholder content, not results. We use it here because a concept can be shown in full, from the first positioning idea to the finished pages. You can read the Flowtera case study for the finished designs.

The problem every SaaS site has

Automation software is a crowded, abstract category. Big names already own the idea of connecting apps, and most competitors describe themselves with the same words: powerful, seamless, AI-driven. A visitor landing on one more site has no reason to keep reading.

On Flowtera, three things had to happen on the first screen and keep happening afterwards:

  1. Make the product concrete. Workflows and integrations are invisible, so the site has to show them.
  2. Speak to more than one buyer. Operations leads, marketers, product teams and founders each look for something different.
  3. Look like a product you could trust with company data. A young brand is judged on whether it looks finished, and anything that feels like a template loses the enterprise buyer.

The five pages and their jobs

PageJobWho it is forWhat it must answer
HomeSets the categoryEveryone arriving coldWhat is it, who is it for, why should I keep reading?
ProductExplains the mechanismSomeone evaluatingHow does it work, and can I trust it with our data?
PricingHandles objectionsSomeone ready to compareWhat does it cost, and what happens next?
CompanyBuilds trust in the peopleCautious buyersWho is behind it, and why does it exist?
ResourcesGrows search traffic over timeVisitors still researchingWhere can I learn more?

Page by page

Home: set the category

The home page on Flowtera makes a single claim in its headline and then shows it. It covers the four core features, the tools the product connects to, and a short section for each type of team: marketing, operations and product. Each section ends with one clear action.

What to put on yours:

  • A headline that says what the product does for whom, in plain words.
  • The product on the first screen, as real interface, not an abstract illustration.
  • Three or four core features, each a short heading and a line or two.
  • The tools you connect to, shown as the logos teams already know.
  • A block for each buyer type, so each visitor sees themselves.

Product: explain the mechanism and answer security

The product page explains how the product works, feature by feature. On Flowtera it also answers the security question directly, with encryption, access control and audit logs, because that is where an enterprise buyer stops reading.

If you have security features, name them. If you do not yet hold a certification, do not imply one. A real product should only claim what it can prove, and a trust section that says less but is true beats one that says more and cannot be checked.

Pricing: deal with the objections first

On Flowtera, the pricing page has three tiers and a set of questions that answer objections before a buyer has to raise them. For your own page:

  • Show plans and what each includes, and what happens after a free trial.
  • If you sell on custom quotes, say so and explain what the price depends on. Another studio's guide makes the point that visitors who find no pricing at all often go and compare with a competitor who shows some.
  • Answer the five questions sales hears most, in a short list beneath the plans.

Company: build trust in the people

Early buyers choose the team as much as the product. The company page on Flowtera covers why the product exists, four core values and the team behind it. Keep it factual: who the founders are, what problem they set out to solve and how to reach them.

Resources: set up to grow

The resources page on Flowtera has a featured article and a blog grid, so the site can grow in search over time. Build it so publishing is easy for your team, and publish only as often as you can keep up. One strong article a month beats a blog that stops after three posts.

Show the product, do not describe it

The rule behind every section on Flowtera is simple: no claim without a piece of interface beside it. The product page hero is the clearest example. The headline sits beside a photograph of people at work, and three small product cards float around it: an automation score, a list of the latest workflows that ran, and hours saved this month. A visitor understands the product before reading a feature.

ClaimProof element beside it
Real-time monitoringA phone screen with live figures
Lead routingA three-step flow from form entry to CRM update to a message in the sales channel
Works with your toolsThe logos of tools teams already use, with "Connect in minutes. No custom code required."
Saves timeA card showing hours saved this month

The figures inside Flowtera's cards are placeholders. On a real site, every number must be real and sourced from your own product data.

One system across five pages

Five pages with different jobs still need to read as one product. On Flowtera the design system was set up in Figma first: colours, text styles, spacing and layout guides. Then it was carried into Webflow as reusable classes and components, so all five pages are built from the same parts.

The choices behind it:

  • A colour that stands apart. Most automation tools are blue, so Flowtera uses a deep bottle green and a soft lime on white. The green carries large sections and white text, and the lime is saved for the main buttons, the closing call to action and one key panel, so it always means something.
  • One type family and a clear scale, from 80 pixel display headings down to 22 pixel small headings.
  • An 8 pixel spacing grid, so a small button and a full section share the same rhythm.
  • Cards that can be scanned in seconds. A short icon, a heading and one or two lines, repeated.
  • One clear action per section.

What other studios recommend

Skydea, another studio, says a SaaS marketing website needs five to seven pages at launch: a homepage, a product page, pricing, a sign-up or demo page, one page for your main use case, an about page and the legal pages. Its list of what can wait is useful: a blog until you have something to publish every month, a separate page for every feature, integration directories, comparison pages and a help centre, and case studies until customers agree to be named.

Where that differs from our five-page structure, and how to choose:

QuestionOur five-page structureSkydea's launch listHow to decide
Sign-up or demoA clear call to action to a formA separate pageUse a page if the demo needs explaining
Use caseBlocks for each team on the home pageA dedicated pageAdd a page when most early customers share one use case
BlogA resources page from day oneWait until you can publish monthlyInclude it only if you will publish
Legal pagesNeeded before you take paymentsPrivacy policy and terms at launchBoth agree: have them before you collect data or payments

What to add as you grow

Once you see what visitors search for and what sales calls keep asking, add:

  • Use case or industry pages in your customers' own words.
  • An integrations page for the tools people ask about.
  • Comparison pages where buyers really compare you.
  • Case studies, once customers agree to be named.
  • A help centre when support questions repeat.

A pre-launch check

CheckWhat good looks like
First screenSays what the product does and for whom, with real interface beside it
One actionA single main call to action, repeated, not a different one in every section
Every claimHas a piece of proof next to it, and every number is real
SecurityStated plainly, with only what you can prove
PricingPlans, inclusions, what happens after a trial, and answers to objections
TeamReal names and a real reason the product exists
SpeedPasses the Core Web Vitals targets in our guide to the signs a site needs a redesign
LegalPrivacy policy and terms in place before you collect data or payments

How we build SaaS marketing sites

At Amariq, the first call is about the one thing your product does better than the alternatives, and we design the site around showing it. We set up the design system in Figma, build it in Webflow as reusable classes and components, and build it so your team can keep publishing. A Webflow marketing site from an approved design usually takes three to six weeks, with milestones and a delivery date agreed before work starts. We also build on WordPress, Shopify and Framer, and our guide to Squarespace vs Webflow vs Framer covers the trade-offs. See our Webflow development and conversion-focused redesign pages, and our guide to landing page structure for the single-page version of the same ideas.

Frequently asked questions

How many pages should a SaaS website have at launch?

Five to seven, according to Skydea, and five in our structure: home, product, pricing, company and resources. Add a sign-up or demo page, a use case page and the legal pages as your situation needs. Everything else can wait until you see what visitors ask about.

What pages does a SaaS marketing website need?

At minimum a home page that sets the category, a product page that explains the mechanism and answers security, a pricing page that handles objections, and a company page that builds trust. Add a resources page if you will publish, and privacy and terms pages before you collect data or payments.

Should SaaS pricing be public?

Usually yes. Show your plans and what each includes. Where you price by custom quote, say that and explain what moves the number. Visitors who find no pricing at all often go and compare with a competitor who shows some.

What should go in a SaaS home page hero?

A headline that says what the product does and for whom, in plain words, with real interface beside it and one clear action. On our Flowtera concept, small product cards around the hero explain the product faster than a paragraph.

How do you make an abstract software product easy to understand?

Show it working. Every main claim sits next to a small piece of interface, like a workflow list, a live monitoring screen or a three-step routing flow. A visitor sees what the product does before reading about it, which matters when most competitors use the same words.

Why does the product page need a security section?

Because it is where an enterprise buyer stops. Say what you do, such as encryption, access control and audit logs, and claim only what you can prove. If you do not hold a certification, do not imply one.

Is Flowtera a real product?

No. It is a concept we created ourselves, with no client. The logos, reviews, figures and security standards in its designs are placeholder content, not results. What it shows is our process: from a product idea to a positioned brand and a five-page Webflow site.

Can you build a SaaS marketing site for a real product?

Yes. The process is the same: agree the one thing the product does better than the alternatives, design the site around showing it, and build it so your team can keep publishing.

Rahat Khondokar, founder of Amariq

Rahat Khondokar

Founder & CEO, Amariq

Rahat designs and builds websites for marketing teams and ecommerce brands, and writes here about the structure, copy and conversion work behind them. More about Amariq. Find him on YouTube, Dribbble and LinkedIn.

Keep reading

Related articles.

All articles