Website brief template

Align the room before anyone opens Figma. A site fails in the brief more often than in the CSS.

Fill this in a shared doc. If two stakeholders write different jobs in “What the site must do,” stop. That fight is cheaper now than in week six.

Design against these words. Placeholder copy is how you get a layout that breaks when the real sentence arrives.

flowchart TD
    J["Job of the site"] --> P["Pages"]
    J --> O["One primary offer"]
    P --> R["Proof on those pages"]
    O --> C["Contact path"]
    R --> C

1. Job of the site

One sentence. Not a capability list.

  • The site exists so that ___ can ___ without ___

    The site exists so that a regional operations lead can hire a brand-and-site studio without a 40-minute decode of the homepage.

  • What the site is not for this quarter (blog as a second company, a store, a portal)

2. Audience and proof

  • Who signs (role, company size, market)
  • Buying trigger (rebuild, new market, brand and site out of sync)
  • Proof they will believe (named work, a metric you are allowed to publish, a live URL)
  • Claims we will not make (revenue we did not measure, logos we cannot show)

3. Pages and conversion

Information architecture (IA) is the page list plus what each page is for. Home, work, one service, contact is a complete studio site. Extra pages need a job.

PageJobPrimary next step
Home
Work / selected case
Service (brand or web)
Contact
Optional: _____
  • One primary call to action (CTA) for 90 days Contact, a brief, or a call. Not five competing buttons.
  • Form fields listed. If a field does not change the first reply, drop it

4. Constraints

  • Stack constraints (must be on current host, must keep emails, must be indexable HTML)
  • Languages and markets
  • Accessibility target (we use Web Content Accessibility Guidelines (WCAG) 2.2 AA as the floor)
  • Who writes real copy, and by when. Design does not wait on lorem
  • Success in 90 days (qualified conversations, not “looks premium”)

Related guides