Layouts · Portfolio, for a person or a firm · The full pattern

Portfolio, for a person or a firm: the full pattern

Plan it first: the blueprint It lists the pages you need and what to write on each one.

My finished work is what wins the next job.

Sites like this: designer, architecture studio, agency, consultancy with case studies, builder with finished projects, maker who takes commissions.

What a visitor comes to find out

“Is their work like what I need?”

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.

Illustration · one way it could look
The pattern, on a phone
Left: an illustration of one way the homepage could look, with example wording. It isn’t a finished site, and the look is chosen in Design. Right: the same homepage as the pattern draws it, on a phone.

Planning a site? Read from the top. Designing or building one? Jump to the structure or the file.

Explore the website

Four kinds of page. Home: selected work and One page per project are on every site like this; the other two depend on the business. Pick a situation to see which pages stay.

Show the plan for

On every page, when the business needs itLanguage switch

On every siteDepends on the businessLeft out for this businessOne page for each item

Home: selected work

“Is their work like what I need?”

Status
Always
Address
/
Six sections, top to bottom
What this is · The items · Narrow it down · Services · Proof · Main action

How visitors move through it

  • Every page is one click from the homepage.
  • The main action (get in touch until the business says otherwise) sits on every page.

Why it works

A prospective client needs to see work like theirs, understand what you did on it, and know how to start a conversation.

So the homepage leads with The work, then what you did on it, then how to get in touch.

What each part of the homepage is for

  1. What this is always

    Who, what kind of work.

  2. The items always

    Selected work.

  3. Narrow it down depends

    An archive by type or sector, for firms with many projects.

  4. Services optional

    What the person or firm does.

  5. Proof depends

    Clients and recognition, with permission.

  6. Main action always

    Get in touch, as a declared action.

On every page

  • Language switch required when it applies

    Several languages: a way to switch is required on every page. Where and how it shows is Design’s.

Which button leads

The main action changes with how people buy. The first rule that matches the business wins.

  1. What should a ready visitor do? Ask for a quote

    Request a quote, then phone

    Builders and fit-out firms quote from a site visit. observed

  2. Otherwise

    Send an enquiry, then see the work

    See the work, then get in touch (unchanged at the core). our decision

Check before you build

  • The firm version (ownership, archive filters, credits, dates) is proposed, not built. unknown
  • Whether builders belong here or in Trades. unknown
  • No passing off a team’s result as the owner’s; an outcome needs measured evidence. our decisionAesthetary

Make it yours

A pattern is a starting point. Some of it holds for every business like this, some of it bends, and some of it only you can answer.

Holds for every site

  • Home: selected work
  • One page per project
  • On the homepage: What this is, The items, Main action

Depends on the business

  • Studio and people If: Do clients care which person they get? Yes, they pick or meet a named person or The team matters, not who
  • Start a project If: What should a ready visitor do? Send an enquiry or Ask for a quote

One pattern, two situations

The same homepage, drawn by the pattern from each situation’s answers. Sections the answers leave out are gone.

A person One owner, a handful of projects (the version built in code).
Main button
Get in touch
Pages
Home: selected work, One page per project, Start a project
Left out
Studio and people
A firm with an archive Firm as owner, an archive with filters, a studio page, two languages. Reasoned, not built.
Main button
Get in touch
Pages
Home: selected work, One page per project, Studio and people, Start a project

What you’ll need to supply

For the homepage alone. Nobody can write these for you; the file marks each one as still to supply.

What this is
What you do, in plain words
The items
Item: title, key fact, image, price or status

Questions only you can answer

  1. How many items, listings or projects will the site show?
  2. What should a ready visitor do?
  3. Do clients care which person they get?
  4. What proof do you actually have?
  5. How many languages?

What changes with the answers

How many items, listings or projects will the site show? More than 12An archive with filters (by type, sector, year).
Do clients care which person they get? The team matters, not whoA studio/people page: the owner is a firm.
What should a ready visitor do? Ask for a quoteQuote from a site visit; enquiry page takes plans and photos.
Answer for your own business

The plan, every drawing and the file on this page redraw as you answer.

Your brief

Answer what you know and the drawings redraw. Anything you skip stays open, and goes into your site plan as a question, never a guess.

Or start from a real brief

What proof do you actually have?

Inspect the structure

Every page as a wireframe: the sections in order, what each one is for, and what moves on a phone. Select a violet label for its job, the content it needs and every page it appears on.

Home: selected work answers “Is their work like what I need?”

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.

Example wording.

Use it in Design and Build

Everything above, as one file you can hand on. It describes the site’s structure. It doesn’t design or build anything.

In the file
4 pages, 20 sections in order, the main action, and what each section needs from you
Still to decide
7 open questions. Anything you haven’t answered travels as a question, never a guess.
In Design
The order of pages and sections is the hierarchy to design. The look, type and images are yours to choose.
With a coding agent
Give it the file with your design. It lists every page, its address and its sections in order, and marks the content you still have to write.

JSON is for coding agents and other tools. Markdown reads like a document, for people.

What it isn’t: a finished site, a template to publish, or proof the structure works for your business. Status: built in code (one-person version).

For designers and developers: what each stage reads

Design reads

  • pages[].name, job and order (the hierarchy)
  • pages[].modules[] in order, with jobs and role
  • status “depends” (unresolved) vs optional
  • page_frame with required/recommended strength
  • pages[].phone_first and phone_notes (the phone order)
  • primary_action label and intent

Read pages[] in order and modules[] in order: that is the hierarchy. jobs[] say what each module must achieve; status "depends" means unresolved, not optional. Look, type, imagery and Elements are Design’s; nothing here prescribes them.

Build reads

  • pages[].route and one_per (routes and repeating pages)
  • pages[].modules[] in order
  • modules[].slots with need, many and any profile obligation
  • primary_action.intent and second_routes (implemented per platform)
  • page_frame (required/recommended)
  • left_out (must stay out)
  • entities, when the project names them

Make one route per page (one per entity where one_per is set), modules in the given order, every slot with need "required" filled before ship. Implement each action so it achieves its intent on this project’s platform. Do not read why as an instruction.

QA checks: Check that each included module does its jobs, required slots are filled with real content, left_out items stayed out, and the primary action leads where its label says.

Your site plan, as a file

Project IA file · 0.2

Portfolio, for a person or a firm

No project named · 2026-10-06 · pattern maturity: built in code

From the Strategy brief

  • What proof do you actually have?Finished work we can show
  • How many languages?Two or more
  • How many items, listings or projects will the site show?unanswered
  • What should a ready visitor do?unanswered
  • Do clients care which person they get?unanswered

Primary action

Send an enquiry not decided

Ask a question and get a reply

Build decides (likely submit)

Second route: See the work

On every page

  • Language switch required

Pages, in order · modules in reading order

  1. Home: selected work

    /

    1. What this is orient · explain1 required slot
    2. The items explore · demonstrate1 required slot
    3. Narrow it down explore depends1 required slot
    4. Services explain · explore optional1 required slot
    5. Main action act1 required slot
  2. One page per project × each project

    /work/{project}

    1. Item summary orient · explain2 required slots
    2. Pictures of the real thing demonstrate · prove1 required slot
    3. Who did what explain · prove1 required slot
    4. What happens next explain · reassure optional1 required slot
    5. What changed prove1 required slot
    6. What clients say prove optional1 required slot
    7. Where next act · recover1 required slot
  3. Studio and people depends

    /studio

    1. Who you’ll deal with reassure · prove2 required slots
    2. Main action act depends1 required slot
  4. Start a project depends

    /start-a-project

    1. The form act · recover3 required slots
    2. What happens next explain · reassure1 required slot
    3. Main action act optional1 required slot
    4. It’s sent reassure · recover2 required slots

Left out, and why

  • Home: selected work: Proof left out because the answer to “What proof do you actually have?” is “Finished work we can show”
  • Studio and people: Proof left out because the answer to “What proof do you actually have?” is “Finished work we can show”

Open questions

  • How many items, listings or projects will the site show?
  • What should a ready visitor do?
  • Do clients care which person they get?
  • The firm version (ownership, archive filters, credits, dates) is proposed, not built.
  • Whether builders belong here or in Trades.

Design reads Read pages[] in order and modules[] in order: that is the hierarchy. jobs[] say what each module must achieve; status "depends" means unresolved, not optional. Look, type, imagery and Elements are Design’s; nothing here prescribes them.

Build reads Make one route per page (one per entity where one_per is set), modules in the given order, every slot with need "required" filled before ship. Implement each action so it achieves its intent on this project’s platform. Do not read why as an instruction.

QA checks Check that each included module does its jobs, required slots are filled with real content, left_out items stayed out, and the primary action leads where its label says.

Where it goes next
The raw file
{
  "format": "aesthetary.ia-structure",
  "version": "0.2",
  "made": {
    "by": "Aesthetary IA Library",
    "on": "2026-10-06",
    "pattern": "portfolio",
    "pattern_maturity": "built in code"
  },
  "project": {
    "name": null,
    "note": "Facts below are the brief. Anything unanswered is listed, never assumed."
  },
  "copy_guidance": {
    "source": "Aesthetary Website Blueprints: the same copywriting guidance the blueprint pages show",
    "how_to_use": {
      "formula": "An instruction, not text to publish. Write original copy for this project that does what the formula describes, using the project’s real facts. Never publish the formula, or anything in square brackets.",
      "why_it_works": "The reasoning behind the section, for whoever writes the copy. Use it to judge a draft; don’t put it on the page.",
      "illustrative_example": "Written for a made-up business to show the formula applied. Never reuse its wording, names, places, numbers or quotes.",
      "project_content": "The project’s own facts are the brief’s answers, any entities and project decisions, and the slots marked “to supply”. Fill slots only with real content from the business. If it isn’t available, leave the slot visibly empty and list it; never invent reviews, ratings, registrations, prices or results."
    }
  },
  "brief": {
    "answered": {
      "proof": {
        "question": "What proof do you actually have?",
        "answer": "Finished work we can show",
        "value": [
          "work"
        ]
      },
      "languages": {
        "question": "How many languages?",
        "answer": "Two or more",
        "value": "several"
      }
    },
    "unanswered": [
      {
        "fact": "items",
        "question": "How many items, listings or projects will the site show?"
      },
      {
        "fact": "main_action",
        "question": "What should a ready visitor do?"
      },
      {
        "fact": "people",
        "question": "Do clients care which person they get?"
      }
    ]
  },
  "site_pattern": {
    "id": "portfolio",
    "name": "Portfolio, for a person or a firm",
    "problem": "A prospective client needs to see work like theirs, understand what you did on it, and know how to start a conversation.",
    "leads_with": "The work, then what you did on it, then how to get in touch."
  },
  "primary_action": {
    "role": "enquire",
    "label": "Send an enquiry",
    "intent": "Ask a question and get a reply",
    "outcome": "inquiry",
    "implementation": "Build decides (likely submit)",
    "decided": false,
    "depends_on": [
      "main_action"
    ],
    "second_routes": [
      {
        "role": "see-work",
        "label": "See the work",
        "intent": "Judge past work"
      }
    ],
    "why": "See the work, then get in touch (unchanged at the core)."
  },
  "page_frame": [
    {
      "module": "language-switch",
      "name": "Language switch",
      "strength": "required",
      "status": "include",
      "why": "Several languages: a way to switch is required on every page. Where and how it shows is Design’s.",
      "presentation": "Design decides; Build implements.",
      "copy": {
        "formula": "[Each language, named in itself]",
        "why_it_works": "Lets people switch to their language, named in that language.",
        "illustrative_example": "“English · Shqip”"
      }
    }
  ],
  "pages": [
    {
      "page": "index",
      "name": "Home: selected work",
      "route": "/",
      "phone_notes": [
        {
          "module": "collection",
          "note": "One column, caption under each image, not over it."
        },
        {
          "module": "action",
          "note": "Also in the header: a long scroll of work shouldn’t bury it."
        }
      ],
      "status": "include",
      "job": "Is their work like what I need?",
      "modules": [
        {
          "module": "proposition",
          "name": "What this is",
          "jobs": [
            "orient",
            "explain"
          ],
          "status": "include",
          "role": "Positioning",
          "latitude": null,
          "slots": [
            {
              "slot": "what",
              "name": "What you do, in plain words",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "who",
              "name": "Who it is for",
              "need": "conditional",
              "content": "to supply"
            },
            {
              "slot": "where",
              "name": "Where (town or area)",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "Who, what kind of work.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Residential towers, hotels and restaurant interiors.” Then: “Work we have delivered, and what we did on each.”"
          }
        },
        {
          "module": "collection",
          "name": "The items",
          "jobs": [
            "explore",
            "demonstrate"
          ],
          "status": "include",
          "role": "Browse",
          "latitude": null,
          "slots": [
            {
              "slot": "items",
              "name": "Item: title, key fact, image, price or status",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "count",
              "name": "How many in total",
              "need": "optional",
              "content": "to supply"
            }
          ],
          "why": "Selected work.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Residential tower, Tirana · 2024 · completed”, “City hotel, Durrës · 2023 · interiors”."
          }
        },
        {
          "module": "filters",
          "name": "Narrow it down",
          "jobs": [
            "explore"
          ],
          "status": "depends",
          "depends_on": [
            "items"
          ],
          "role": "Browse",
          "latitude": null,
          "slots": [
            {
              "slot": "facets",
              "name": "Facets people actually decide by",
              "need": "required",
              "many": true,
              "content": "to supply"
            }
          ],
          "why": "An archive by type or sector, for firms with many projects.",
          "copy": {
            "formula": "[What people decide by], as filters",
            "why_it_works": "Helps people with a long list get to the handful that fit.",
            "illustrative_example": "“Type · Year · Our role”"
          }
        },
        {
          "module": "service-index",
          "name": "Services",
          "jobs": [
            "explain",
            "explore"
          ],
          "status": "optional",
          "role": "Service navigation",
          "latitude": null,
          "slots": [
            {
              "slot": "items",
              "name": "Services",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "grouping",
              "name": "Grouped by need, client type or life event",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "price-hint",
              "name": "Price or “from” price per service",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "What the person or firm does.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Residential: towers and apartment blocks”, “Hotels and restaurants: interiors and fit-out”."
          }
        },
        {
          "module": "action",
          "name": "Main action",
          "jobs": [
            "act"
          ],
          "status": "include",
          "role": "Primary action",
          "latitude": null,
          "slots": [
            {
              "slot": "primary",
              "name": "Primary action (a role, not a label)",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "secondary",
              "name": "Second route",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "reassurance",
              "name": "Terms at the action",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "Get in touch, as a declared action.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Start a project”, with “A short brief and a call, no fee” beside it."
          }
        }
      ]
    },
    {
      "page": "project",
      "name": "One page per project",
      "route": "/work/{project}",
      "page_pattern": "case-study",
      "one_per": "project",
      "status": "include",
      "job": "What it was, what we did, what changed.",
      "modules": [
        {
          "module": "item-header",
          "name": "Item summary",
          "jobs": [
            "orient",
            "explain"
          ],
          "status": "include",
          "role": "Positioning",
          "latitude": null,
          "slots": [
            {
              "slot": "title",
              "name": "Title",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "summary",
              "name": "One-line summary",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "status",
              "name": "Price, status or date",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "Project, client (if named), what it was.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Residential tower, Tirana: — apartments on a tight corner site, completed 2024.”"
          }
        },
        {
          "module": "media",
          "name": "Pictures of the real thing",
          "jobs": [
            "demonstrate",
            "prove"
          ],
          "status": "include",
          "role": "Supporting evidence",
          "latitude": null,
          "slots": [
            {
              "slot": "images",
              "name": "Image with alt text and caption",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "credit",
              "name": "Photographer or source",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "The real work. Before/after only of the same job, same angle.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Lobby, photographed at handover, 2024. Photo: —.”"
          }
        },
        {
          "module": "credits",
          "name": "Who did what",
          "jobs": [
            "explain",
            "prove"
          ],
          "status": "include",
          "role": "Supporting evidence",
          "latitude": null,
          "slots": [
            {
              "slot": "role",
              "name": "Role and scope",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "collaborators",
              "name": "Collaborators",
              "need": "optional",
              "many": true,
              "content": "to supply"
            }
          ],
          "why": "What this business did, and who else worked on it.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Our role: architecture and interiors. Structure by —. Landscape by —.”"
          }
        },
        {
          "module": "steps",
          "name": "What happens next",
          "jobs": [
            "explain",
            "reassure"
          ],
          "status": "optional",
          "role": "What happens next",
          "latitude": null,
          "slots": [
            {
              "slot": "step",
              "name": "Step",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "when",
              "name": "Time per step",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "cost",
              "name": "Cost per step",
              "need": "optional",
              "content": "to supply"
            }
          ],
          "why": "How it was done, when the process is part of the proof.",
          "copy": {
            "formula": "[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.",
            "illustrative_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.”"
          }
        },
        {
          "module": "outcome",
          "name": "What changed",
          "jobs": [
            "prove"
          ],
          "status": "include",
          "role": "Supporting evidence",
          "latitude": null,
          "slots": [
            {
              "slot": "measure",
              "name": "Measure, method, date",
              "need": "required",
              "content": "to supply"
            }
          ],
          "why": "Only a measured result, attributed correctly.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“All — apartments sold — months before completion, from the developer’s sales figures.” Only include it if it was measured."
          }
        },
        {
          "module": "reviews",
          "name": "What clients say",
          "jobs": [
            "prove"
          ],
          "status": "optional",
          "role": "Supporting evidence",
          "latitude": null,
          "slots": [
            {
              "slot": "quotes",
              "name": "Quote, name or initials, context, date, where it was left",
              "need": "required",
              "many": true,
              "content": "to supply"
            }
          ],
          "why": "The client’s words about this project, with permission.",
          "copy": {
            "formula": "[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.",
            "illustrative_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."
          }
        },
        {
          "module": "continuation",
          "name": "Where next",
          "jobs": [
            "act",
            "recover"
          ],
          "status": "include",
          "role": "Next step",
          "latitude": null,
          "slots": [
            {
              "slot": "line",
              "name": "Closing line",
              "need": "required",
              "content": "to supply"
            }
          ],
          "why": "The next project, or the action.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Planning something similar? Start a project.”"
          }
        }
      ]
    },
    {
      "page": "people",
      "name": "Studio and people",
      "route": "/studio",
      "page_pattern": "people",
      "status": "depends",
      "depends_on": [
        "people"
      ],
      "job": "Who you’d work with (firms).",
      "modules": [
        {
          "module": "people",
          "name": "Who you’ll deal with",
          "jobs": [
            "reassure",
            "prove"
          ],
          "status": "include",
          "role": "Trust & proof",
          "latitude": null,
          "slots": [
            {
              "slot": "name",
              "name": "Name and role",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "register",
              "name": "Personal registration and number",
              "need": "conditional",
              "content": "to supply"
            },
            {
              "slot": "photo",
              "name": "Photo (consented)",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "does",
              "name": "What they do for you",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "book-with",
              "name": "Book with this person",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "Name, role, what they do for you, registration.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Elira Hoxha, partner. Leads residential projects. Licensed architect no. —.”"
          }
        },
        {
          "module": "action",
          "name": "Main action",
          "jobs": [
            "act"
          ],
          "status": "depends",
          "depends_on": [
            "people"
          ],
          "role": "Primary action",
          "latitude": null,
          "slots": [
            {
              "slot": "primary",
              "name": "Primary action (a role, not a label)",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "secondary",
              "name": "Second route",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "reassurance",
              "name": "Terms at the action",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "“Book with this person”, when clients choose.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Start a project”, with “A short brief and a call, no fee” beside it."
          }
        }
      ]
    },
    {
      "page": "start",
      "name": "Start a project",
      "route": "/start-a-project",
      "page_pattern": "enquiry",
      "status": "depends",
      "depends_on": [
        "main_action"
      ],
      "job": "A brief, a site visit, an RFP, a commission.",
      "modules": [
        {
          "module": "form",
          "name": "The form",
          "jobs": [
            "act",
            "recover"
          ],
          "status": "include",
          "role": "Conversion point",
          "latitude": null,
          "slots": [
            {
              "slot": "fields",
              "name": "Fields",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "attach",
              "name": "Attachments (photos, documents)",
              "need": "conditional",
              "content": "to supply"
            },
            {
              "slot": "consent",
              "name": "What happens to their details",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "error",
              "name": "Error summary and messages",
              "need": "required",
              "content": "to supply"
            }
          ],
          "why": "Only what is needed to respond; attachments where photos help.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Tell us about your project” with name, email, location and a short brief. Button: “Send, we reply within two working days”."
          }
        },
        {
          "module": "steps",
          "name": "What happens next",
          "jobs": [
            "explain",
            "reassure"
          ],
          "status": "include",
          "role": "What happens next",
          "latitude": null,
          "slots": [
            {
              "slot": "step",
              "name": "Step",
              "need": "required",
              "many": true,
              "content": "to supply"
            },
            {
              "slot": "when",
              "name": "Time per step",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "cost",
              "name": "Cost per step",
              "need": "optional",
              "content": "to supply"
            }
          ],
          "why": "What happens after sending, and when.",
          "copy": {
            "formula": "[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.",
            "illustrative_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.”"
          }
        },
        {
          "module": "action",
          "name": "Main action",
          "jobs": [
            "act"
          ],
          "status": "optional",
          "role": "Primary action",
          "latitude": null,
          "slots": [
            {
              "slot": "primary",
              "name": "Primary action (a role, not a label)",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "secondary",
              "name": "Second route",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "reassurance",
              "name": "Terms at the action",
              "need": "conditional",
              "content": "to supply"
            }
          ],
          "why": "The second route (call, message) for people who won’t fill a form.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Start a project”, with “A short brief and a call, no fee” beside it."
          }
        },
        {
          "module": "confirmation",
          "name": "It’s sent",
          "jobs": [
            "reassure",
            "recover"
          ],
          "status": "include",
          "role": "Conversion point",
          "latitude": null,
          "slots": [
            {
              "slot": "reference",
              "name": "Reference",
              "need": "optional",
              "content": "to supply"
            },
            {
              "slot": "next",
              "name": "What happens next, and when",
              "need": "required",
              "content": "to supply"
            },
            {
              "slot": "contact",
              "name": "Contact meanwhile",
              "need": "required",
              "content": "to supply"
            }
          ],
          "why": "After sending: a reference, the next step and when, a contact.",
          "copy": {
            "formula": "[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.",
            "illustrative_example": "“Sent. We’ll reply within two working days to arrange a call.”"
          }
        }
      ]
    }
  ],
  "left_out": [
    {
      "what": "Home: selected work: Proof",
      "why": "left out because proof is “Finished work we can show”"
    },
    {
      "what": "Studio and people: Proof",
      "why": "left out because proof is “Finished work we can show”"
    }
  ],
  "constraint_profiles": [],
  "field_rules": "Not applied. Rules for this field (what it must show) will add requirements to existing sections once they are approved; they never change the structure.",
  "open_questions": [
    "How many items, listings or projects will the site show?",
    "What should a ready visitor do?",
    "Do clients care which person they get?",
    "The firm version (ownership, archive filters, credits, dates) is proposed, not built.",
    "Whether builders belong here or in Trades."
  ],
  "receives": {
    "design": [
      "pages[].name, job and order (the hierarchy)",
      "pages[].modules[] in order, with jobs and role",
      "status “depends” (unresolved) vs optional",
      "page_frame with required/recommended strength",
      "pages[].phone_first and phone_notes (the phone order)",
      "primary_action label and intent"
    ],
    "build": [
      "pages[].route and one_per (routes and repeating pages)",
      "pages[].modules[] in order",
      "modules[].slots with need, many and any profile obligation",
      "primary_action.intent and second_routes (implemented per platform)",
      "page_frame (required/recommended)",
      "left_out (must stay out)",
      "entities, when the project names them"
    ]
  },
  "handoff": {
    "design": "Read pages[] in order and modules[] in order: that is the hierarchy. jobs[] say what each module must achieve; status \"depends\" means unresolved, not optional. Look, type, imagery and Elements are Design’s; nothing here prescribes them.",
    "build": "Make one route per page (one per entity where one_per is set), modules in the given order, every slot with need \"required\" filled before ship. Implement each action so it achieves its intent on this project’s platform. Do not read why as an instruction.",
    "qa": "Check that each included module does its jobs, required slots are filled with real content, left_out items stayed out, and the primary action leads where its label says.",
    "copy": "Write each section’s copy from copy.formula and the project’s real facts; check it against copy.why_it_works. Never reproduce copy.illustrative_example or publish text in square brackets. The guidance is a set of recommendations to test with real visitors, not a promise of results."
  }
}
The research behind it7 statements · 1 sourced · 2 untested or unknown

Use it when

  • Work is the proof and each project can carry its own page. our decisionAesthetary
  • Builders, architects, consultancies and studios in the briefs we studied asked for exactly this, owned by a firm. observedour brief studyour brief studyour brief study

Not when

Boundary cases

Which sections go on which pages

● required · ◐ conditional on the brief · ○ common, not required. Select a section to find it in the drawings.

Job on the page · sectionHome: selected workOne page per projectStudio and peopleStart a project
PositioningRequired
Required
BrowseRequired
Conditional
Service navigationCommon
Trust & proofConditionalConditional
Required
Primary actionRequiredConditionalCommon
Supporting evidenceRequired
Required
Conditional
Common
What happens nextCommonRequired
Next stepRequired
Conversion pointRequired
Required

What the research says

  • The one-person version is built in code and was tested on one made-up portfolio. our decisionAesthetary
  • 11 of the briefs we studied needed a project archive or a commission enquiry. observedAesthetary
  • B2B buyers use case studies to compare vendors (NN/g cites a Challenge / Solution / Results structure), and gating them behind a form is a mistake. sourcedNN/g 2016NN/g 2015

Rules for your field

What a business in this field must show (a registration, prices with tax) depends on its own rules, not on this pattern. Those rules are still being worked out, so none are applied here as requirements.

Common structural mistakes

  • Client logos without permission; an outcome with no measure. our decision