Website blueprints

Portfolio, for a person or a firm

For people and firms whose finished work is what wins the next client.

For example: designer, architecture studio, agency, consultancy with case studies, builder with finished projects

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 (one-person version). The one-person version is built in code and was tested on one made-up portfolio. The firm version drawn here (archive filters, studio page) is reasoned, not built.

Pages your website might need

Start here

Optional pages

On a phone · One column, caption under each image, not over it.

On a phone · Also in the header: a long scroll of work shouldn’t bury it.

Home

“Is their work like what I need?”

Sections, top to bottom

Select a section to see what to write and why.

  1. What this is
    What to write
    The work you do + for whom, then what you’re known for + how a project starts
    Why it works
    A prospective client is asking “have they done work like mine?”. Naming the kind of work and the clients you do it for lets the right people stay and the wrong ones leave early.
    Example
    “Residential towers, hotels and restaurant interiors.” Then: “Work we have delivered, and what we did on each.”
    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. The items
    What to write
    Project + client type + year, on every tile
    Why it works
    Clients scan for projects like theirs. Type, client and year on each tile let them find the relevant work in seconds.
    Example
    “Residential tower, Tirana · 2024 · completed”, “City hotel, Durrës · 2023 · interiors”.
    Tips and a common mistake
    Tips
    • Show the one or two facts people decide by on each tile: price, size, dates.
    • Use a real photo of each item.
    • Say how many there are in total.
    Common mistake
    Tiles with only a photo and a name, so every item has to be opened to rule it out.
  3. Narrow it down
    What to write
    What people decide by, as filters
    Why it works
    Helps people with a long list get to the handful that fit.
    Example
    “Type · Year · Our role”
    Tips and a common mistake
    Tips
    • Filter on what people compare (price, size, dates), not on your internal categories.
    • Offer a list beside any map.
    • Leave filters out if you only have a dozen items.
    Common mistake
    Filters on a dozen items. They add work and hide things.
  4. Services
    What to write
    Customer need + the service that meets it, one line each
    Why it works
    Lets people find their own job in your list fast, so they know you do it before reading anything else.
    Example
    “Residential: towers and apartment blocks”, “Hotels and restaurants: interiors and fit-out”.
    Tips and a common mistake
    Tips
    • Name services the way customers search for them: “blocked drain”, not “drainage solutions”.
    • With a long list, group by situation (emergencies, planned work, servicing).
    • Add a “from” price beside each one if you can publish prices.
    Common mistake
    Grouping services by your internal departments instead of by the customer’s situation.
  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
    “Named clients, with permission: —, —. Registered architects, licence no. —.”
    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. Main action
    What to write
    Start a project + the first step, with what it costs + when you reply
    Why it works
    Hiring a studio feels like a big commitment. Making the first step small and specific (a short brief, a call) turns interest into a conversation.
    Example
    “Start a project”, with “A short brief and a call, no fee” 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 →

Project pages one for each project

“What it was, what we did, what changed.”

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
    “Residential tower, Tirana: — apartments on a tight corner site, completed 2024.”
    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
    “Lobby, photographed at handover, 2024. Photo: —.”
    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
    “Our role: architecture and interiors. Structure by —. Landscape by —.”
    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 You send a short brief. 2 We call to talk it through. 3 We visit the site. 4 You get a proposal and a fee.”
    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
    “All — apartments sold — months before completion, from the developer’s sales figures.” 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 studio: “They kept the budget when the site changed under us.” —, developer, 2024. 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
    “Planning something similar? Start a project.”
    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

Studio and people

“Who you’d work with (firms).”

Add it if Do clients care which person they get? Yes, they pick or meet a named person or The team matters, not who

Sections, top to bottom

Select a section to see what to write and why.

  1. Who you’ll deal with
    What to write
    Name + role + what this person does for the customer
    Why it works
    Puts names and faces on the business. That matters most when you come into someone’s home or handle their money or health.
    Example
    “Elira Hoxha, partner. Leads residential projects. Licensed architect no. —.”
    Tips and a common mistake
    Tips
    • Use real, consented photos. NN/g found people distrust stock photos and like seeing real staff.
    • Say what each person does for the customer, not only their title.
    • Add personal registrations where your field has them, with the number.
    Common mistake
    Stock photos standing in for staff, or a team grid nobody can contact.
  2. 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
    “Named clients, with permission: —, —. Registered architects, licence no. —.”
    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 →

  3. Main action
    What to write
    Start a project + the first step, with what it costs + when you reply
    Why it works
    Hiring a studio feels like a big commitment. Making the first step small and specific (a short brief, a call) turns interest into a conversation.
    Example
    “Start a project”, with “A short brief and a call, no fee” 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 →

Team and person pages, in detail

Start a project

“A brief, a site visit, an RFP, a commission.”

Add it if What should a ready visitor do? Send an enquiry or Ask for a quote

Sections, top to bottom

Select a section to see what to write and why.

  1. The form
    What to write
    What they’re asking for + only the fields you need + what happens to their details + send + what happens next
    Why it works
    Makes asking easy: only the fields you need, and a clear promise of what happens next.
    Example
    “Tell us about your project” with name, email, location and a short brief. Button: “Send, we reply within two working days”.
    Tips and a common mistake
    Tips
    • Ask only what you need to reply. NN/g suggests 3 to 5 fields for a contact form.
    • Let people add photos when a photo saves a visit.
    • Say when they’ll hear back, beside the button.
    Common mistake
    Asking for things you don’t need yet, like a full address for a first question.
  2. 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 You send a short brief. 2 We call to talk it through. 3 We visit the site. 4 You get a proposal and a fee.”
    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.
  3. Main action
    What to write
    Start a project + the first step, with what it costs + when you reply
    Why it works
    Hiring a studio feels like a big commitment. Making the first step small and specific (a short brief, a call) turns interest into a conversation.
    Example
    “Start a project”, with “A short brief and a call, no fee” 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 →

  4. It’s sent
    What to write
    It’s sent + what happens next, and when + how to reach you meanwhile
    Why it works
    Confirms it worked and says what to expect, so nobody sends it twice or rings to check.
    Example
    “Sent. We’ll reply within two working days to arrange a call.”
    Tips and a common mistake
    Tips
    • Say when they’ll hear back.
    • Give a reference if you’ll use one.
    • Offer a faster route if it’s urgent.
    Common mistake
    A bare “Thanks!” with no next step.

Enquiry, quote or booking 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

  • A person One owner, a handful of projects (the version built in code).
  • A firm with an archive Firm as owner, an archive with filters, a studio page, two languages.
  • Builder: site visit and memberships Finished projects as proof, a quote from a site visit, membership checkable.

Not the right fit if

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.