Website blueprints

Software product

For software people sign up for, try or buy.

For example: SaaS tool, app with a waitlist, B2B platform sold through sales

Plan a site like this Answer a few questions about your business. The pages and sections redraw, and you can download the plan.

Built in code and tested (homepage). The homepage is built in code and was tested on Aesthetary’s own homepage and on two briefs written without seeing it. The Pricing and Customer stories pages drawn here are proposed, not built.

Pages your website might need

Start here

Optional pages

On a phone · Directly under the proposition; proof and pricing follow.

Homepage

“What it is, whether it fits, and the honest next step.”

Sections, top to bottom

Select a section to see what to write and why.

  1. What this is
    What to write
    What the product does + for whom, then the result they get + the doubt you remove
    Why it works
    Visitors decide quickly whether the product is for them. Saying what it does and who it’s for, in plain words, beats a clever tagline; the supporting line answers the first objection, like price or setup time.
    Example
    “Invoices that chase late payments for you.” Then: “For freelancers and small studios. Send an invoice in a minute; we send the reminders.”
    Tips and a common mistake
    Tips
    • Use the words your customers use for their problem, not your trade’s terms.
    • If you’re local, name the town or area. It’s part of the answer.
    • Put one honest specific in the supporting line, like a fixed call-out price or a reply time you actually keep.
    Common mistake
    An adjective line (“Quality. Trusted. Local.”) instead of what you do and where. People scanning want the noun.

    Before and after: Headlines and hero messaging →

  2. Main action
    What to write
    Start, join the waitlist or talk to sales, with free or paid + card needed or not + how to cancel
    Why it works
    Offer the step your product can actually take today. If people can use it now, let them start; if buyers need to check fit, a conversation is the honest action.
    Example
    “Start free”, with “No card needed · cancel any time” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

  3. Prices
    What to write
    Plan + who it’s for + price, with what each plan includes
    Why it works
    People compare plans to find the one that fits them. Saying who each plan is for helps them choose without reading every feature.
    Example
    “Solo · £— a month · up to — clients · reminders included.”
    Tips and a common mistake
    Tips
    • Say whether tax is included, every time.
    • Put extras (call-out fee, deposit, travel) beside the price they add to.
    • If every job is quoted, give typical prices for common jobs. NN/g recommends sample prices for exactly this case.
    Common mistake
    “Contact us for prices” and nothing else.
  4. What happens next
    What to write
    What they do first → what you do next + how fast → the work → how it ends + what it costs
    Why it works
    Takes the unknown out of getting in touch: what happens after the first click, who does it, how long it takes and what it costs.
    Example
    “1 Sign up with your email. 2 Add your first client. 3 Send an invoice. 4 Pick a plan when you’re ready.”
    Tips and a common mistake
    Tips
    • Write each step from the customer’s side: what they do, what they get.
    • Give each step a time you can stand behind.
    • Mention cost where it applies, so nothing surprises them later.
    Common mistake
    Steps written as slogans (“Discover, Design, Deliver”) with no time, cost or owner.
  5. Proof
    What to write
    Verifiable evidence that reduces hesitation, each with a way to check it
    Why it works
    Gives people something they can check, so they don’t have to take your word for it.
    Example
    “Used by —, — and — (named with permission).” Before launch, with nothing to show yet, leave this section out.
    Tips and a common mistake
    Tips
    • Link each registration to the register where people can look you up.
    • Show where reviews come from, how many there are and how recent, not stars on their own.
    • Only name clients who agreed to be named.
    Common mistake
    Logos of bodies you don’t belong to, or a star rating with no source.

    Before and after: Trust signals and evidence →

  6. Questions people ask
    What to write
    Real customer objection + direct answer
    Why it works
    Answers the doubts that stop people acting, in the words they use when they ask.
    Example
    “What happens to my data if I cancel? You can export everything as CSV, and we delete it after — days.”
    Tips and a common mistake
    Tips
    • Collect questions from real calls, emails and reviews.
    • Answer in the first words: yes, no or a number.
    • Put the deal-breakers (cost, canceling) near the action too.
    Common mistake
    Invented questions written for search engines.

    Before and after: FAQs and answer-first content →

  7. Where next
    What to write
    The next step, for anyone still reading + specific action
    Why it works
    Catches people who read to the end and gives them one clear next step.
    Example
    “Send your first invoice today. Start free.”
    Tips and a common mistake
    Tips
    • Offer the next useful thing, not a repeat of the top of the page.
    • Use the same action wording as the main button.
    • One button is enough.
    Common mistake
    A dark “Ready to get started?” banner that repeats the hero.

Pricing

“Plans and what each includes. Proposed, not built.”

Sections, top to bottom

Select a section to see what to write and why.

  1. Prices
    What to write
    Plan + who it’s for + price, with what each plan includes
    Why it works
    People compare plans to find the one that fits them. Saying who each plan is for helps them choose without reading every feature.
    Example
    “Solo · £— a month · up to — clients · reminders included.”
    Tips and a common mistake
    Tips
    • Say whether tax is included, every time.
    • Put extras (call-out fee, deposit, travel) beside the price they add to.
    • If every job is quoted, give typical prices for common jobs. NN/g recommends sample prices for exactly this case.
    Common mistake
    “Contact us for prices” and nothing else.
  2. On today
    What to write
    What’s different this week, dated + price
    Why it works
    Shows any price that only applies now, dated, so the main list stays true.
    Example
    “Prices from 1 November: —.” Only for a change that’s really coming.
    Tips and a common mistake
    Tips
    • Date it, so people can trust it’s current.
    • Keep it to what’s on, the price and how to get it.
    • Only include it if someone will update it.
    Common mistake
    An undated “today” block that’s weeks out of date.
  3. Questions people ask
    What to write
    Real customer objection + direct answer
    Why it works
    Answers the doubts that stop people acting, in the words they use when they ask.
    Example
    “What happens to my data if I cancel? You can export everything as CSV, and we delete it after — days.”
    Tips and a common mistake
    Tips
    • Collect questions from real calls, emails and reviews.
    • Answer in the first words: yes, no or a number.
    • Put the deal-breakers (cost, canceling) near the action too.
    Common mistake
    Invented questions written for search engines.

    Before and after: FAQs and answer-first content →

  4. Main action
    What to write
    Start, join the waitlist or talk to sales, with free or paid + card needed or not + how to cancel
    Why it works
    Offer the step your product can actually take today. If people can use it now, let them start; if buyers need to check fit, a conversation is the honest action.
    Example
    “Start free”, with “No card needed · cancel any time” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

Prices page, in detail

Customer stories one for each project

“Proof from named customers. Proposed, not built.”

Sections, top to bottom

Select a section to see what to write and why.

  1. Item summary
    What to write
    The project + who it was for + the problem it solved + the result
    Why it works
    Tells a future client in one look whether this project is like theirs.
    Example
    “How a two-person studio stopped chasing invoices by hand.”
    Tips and a common mistake
    Tips
    • Use the same words as the link or ad that brought them here, so they know they’ve landed in the right place.
    • Put the deciding fact (price, size, date) in the first line.
    • Keep the title to the thing itself. Do the persuading further down.
    Common mistake
    A clever title that doesn’t say what the page is about.
  2. Pictures of the real thing
    What to write
    A photo of the real thing + what it shows + where or when
    Why it works
    Shows the real thing, so people can judge it for themselves.
    Example
    “The reminder settings the studio uses, screenshot from March.”
    Tips and a common mistake
    Tips
    • Use photos of your actual work, place or item.
    • Caption each one with what it shows.
    • Label renders as renders.
    Common mistake
    Stock photos or renders passed off as the real thing.
  3. Who did what
    What to write
    Your role + scope + who you worked with
    Why it works
    Makes clear what you did, so the work proves your part and not someone else’s.
    Example
    “Set up by the studio; we helped import their old invoices.”
    Tips and a common mistake
    Tips
    • State your role and scope plainly, including what you didn’t do.
    • Credit collaborators and photographers.
    • Name the client only with their permission.
    Common mistake
    Claiming a whole team’s project as your own.
  4. What happens next
    What to write
    What they do first → what you do next + how fast → the work → how it ends + what it costs
    Why it works
    Takes the unknown out of getting in touch: what happens after the first click, who does it, how long it takes and what it costs.
    Example
    “1 Sign up with your email. 2 Add your first client. 3 Send an invoice. 4 Pick a plan when you’re ready.”
    Tips and a common mistake
    Tips
    • Write each step from the customer’s side: what they do, what they get.
    • Give each step a time you can stand behind.
    • Mention cost where it applies, so nothing surprises them later.
    Common mistake
    Steps written as slogans (“Discover, Design, Deliver”) with no time, cost or owner.
  5. What changed
    What to write
    Measured result + how and when it was measured
    Why it works
    Shows the result in a way people can believe: what changed, measured how, and when.
    Example
    “Average days to get paid fell from — to — over six months, from the studio’s own records.” Only include it if it was measured.
    Tips and a common mistake
    Tips
    • Give a number only if you measured it.
    • Say how and when it was measured.
    • Leave this out if nothing was measured.
    Common mistake
    “Significantly improved engagement” with no figure, method or date.
  6. What clients say
    What to write
    A real customer’s words + the specific result, with name or initials, place, date and where it was left
    Why it works
    Lets someone like the visitor say it for you. A quote about the job they need does more than general praise.
    Example
    An illustration of the shape, for a made-up product: “I haven’t written a reminder email since March.” —, illustrator. Use real, attributed quotes.
    Tips and a common mistake
    Tips
    • Choose quotes that mention the job and the result.
    • Put reviews beside the claim they support, like next to the service they’re about.
    • Use real reviews only, and keep the customer’s own words.
    Common mistake
    Three anonymous “Great service!” quotes. They prove nothing a visitor is worried about.

    Before and after: Testimonials and case studies →

  7. Where next
    What to write
    The next step, for anyone still reading + specific action
    Why it works
    Catches people who read to the end and gives them one clear next step.
    Example
    “Send your first invoice today. Start free.”
    Tips and a common mistake
    Tips
    • Offer the next useful thing, not a repeat of the top of the page.
    • Use the same action wording as the main button.
    • One button is enough.
    Common mistake
    A dark “Ready to get started?” banner that repeats the hero.

Case study or project page, in detail

See the full pattern A separate page: an example site drawn from this blueprint, with desktop and phone views, notes, and the plan as a file to download.

More about this blueprint

It bends to fit

  • Self-serve The product can be used today, so “Start” leads.
  • Sales-led Buyers must check fit first, so the action is a conversation, not a trial.
  • Pre-launch, no proof yet Nothing to prove yet: the proof sections go, and nothing is invented.

Not the right fit if

  • A multi-page product site: the built pattern covers the homepage only. Pricing and customer-story pages are proposed (the Prices and Case study page patterns would serve).

The full pattern: why it works, the brief that changes it, every page annotated, and the file for Design and Build. Terms, page patterns and what the library doesn’t cover yet are in the library reference.