Five seconds to explain it
SaaS website design
Nobody arrives knowing what your product does. A SaaS site has one job before anything else — make that clear fast enough that the visitor is still there to read the second sentence. Positioning first, then the pricing page, the proof and the signup flow.
Positioning
Pricing page
Product visuals
Signup flow
Design system
Blog and changelog CMS
What actually decides it
Six mechanisms decide whether a SaaS site converts, and none of them are the illustration style. Each tile below runs the real one.
The five second read
A visitor decides whether to keep reading before they have finished the headline. An abstract line sends the eye wandering across the page looking for a clue; a concrete one gets read once and followed by a click. This is the single highest-leverage sentence on a SaaS site.
Which plan wins as they grow
Per-seat, flat rate and hybrid pricing cross over at different team sizes. If the page does not name the unit before showing the tiers, every visitor has to work this out themselves — and some of them will get it wrong in your favour, then churn.
Shown beats described
A paragraph explaining a feature gets skimmed. One small piece of the real interface, actually working, gets understood. It does not need to be the whole product — a single control that responds is enough.
The signup form is part of the site
Every optional field costs completions, and the fields marketing wants are almost never the fields the product needs. Cut the form to what the first session actually requires and ask for the rest once the person is already inside.
The jargon comes out
If a sentence would sound strange said out loud to a customer, it does not belong on the page. Plain words are not less serious; they are just the ones people search for.
One system, two surfaces
When the marketing site and the product share colour, type, spacing and radius, the app stops feeling like a different company bought the brand. The tokens are built once and used on both sides — and if your product already has a system, the site is built to match it rather than the other way round.
What a SaaS site is actually made of
Seven sections, and their heights on the right are their real share of the page. Hover either side — the list and the page are the same thing.
- HeroWhat it is, who it is for, in one readable line.
- ProofThe customers, the numbers, or nothing at all — never filler logos.
- How it worksThree steps at most, each one showing the product rather than describing it.
- Use casesThe two or three jobs people actually hire it for, named the way they name them.
- PricingThe model explained before the tiers, so nobody has to reverse-engineer it.
- ObjectionsSecurity, export, migration, limits — answered on the page, not in a sales call.
- SignupThe shortest form the product can survive, and what happens next.
What is included at each size
Starting prices, fixed before anything begins. The row you should read first is the design system — that is the line that decides whether your team can ship pages after I leave.
How the weeks actually split
Each block below is its real share of the calendar, not a step number. The largest one is positioning, which surprises most people and should not.
What it is, who it is for, and the one sentence everything else hangs off. Usually the part that changes the site most.
Frequently asked questions
The product is abstract. A restaurant site can photograph the food; a SaaS site has to make someone understand a thing they cannot see, in about five seconds, before they leave. Everything else — the pricing page, the signup flow, the use cases — is downstream of whether that first sentence lands.
I write the site copy and I will push hard on the positioning, because a site cannot fix a sentence nobody can finish. What I do not do is invent your category or your pricing strategy — those come from you and from your customers, and I will ask for the transcripts of both.
By showing the smallest real piece of it that works. A single toggle that actually toggles, one table that actually filters, one before-and-after of the output. That beats a full dashboard screenshot at an angle, and it beats a two-minute video nobody plays.
Explain the model before the tiers. Most pricing pages jump straight to three columns and leave the visitor reverse-engineering whether they are billed per seat, per usage or per workspace. Name the unit first, then show the tiers, then show what happens when they outgrow one.
Yes, and it is usually the highest-value part. The same colour, type, spacing and radius tokens drive the marketing site and the product, so the app does not feel like a different company. If your app already has a system, the site is built to match it rather than the other way round.
About seven weeks end to end for a full site, and the largest single block is positioning rather than build. A single landing page for one launch or campaign is one to two weeks.
No, but you need someone who can answer questions about the product and make decisions. The work stalls on unanswered questions far more often than on design.
Describe the product in one sentence and I will tell you if it lands
Send the sentence you use today, plus your current site if you have one. You get an honest read on whether a stranger would understand it, what the pricing page is doing wrong, and a fixed number — before you commit to anything.