← Resources

Templates

Creative brief for website

The creative brief structured for website projects - page maps, primary CTAs per page, content inventory, and four worked examples across redesigns, refreshes, landing pages, and microsites.

Updated

The template

The structure to copy and adapt

  • Site scope + typeRequired
    Full redesign / partial refresh / single landing page / microsite. The scope decision sets expectations for effort and design freedom. A full redesign is a different brief than a landing page.
  • Business objective + named KPIRequired
    One outcome with a named metric. 'Increase demo-booking conversion from 1.2% to 2.5% over 90 days post-launch.' Websites without a named KPI become design-by-committee.
  • Primary audience + jobs-to-be-doneRequired
    Who shows up and what they're trying to accomplish. 'VPs of RevOps evaluating platforms - need to understand if we replace 3 tools they currently use.' Jobs-to-be-done shape page structure.
  • Page map (hierarchical)Required
    Every page in scope, hierarchically. Home > Product > Pricing > Customers > Resources > About. Mark net-new vs migrating vs deprecating.
  • Primary CTA per page typeRequired
    The single action each page type drives. Home → Book a demo. Product → Watch the explainer. Pricing → Start free trial. One primary per page; secondary actions exist but don't compete.
  • Content inventory + ownershipRequired
    What content exists vs needs writing vs needs migrating. Copy, images, videos, testimonials, case studies. Each item gets an owner. Content gaps drive timeline more than design does.
  • Brand + accessibility + performance constraintsRequired
    Brand guidelines reference, WCAG level, LCP/CLS targets, responsive breakpoints. Constraints up front; aspirations don't survive the build.
  • Web do-notsRequired
    5-7 web-specific exclusions. 'No carousels on home. No modal popups on first visit. No accordion FAQs without anchor links. No autoplay video with sound.'
  • Stack + integration constraints
    CMS, framework, hosting, third-party integrations (analytics, CRM, marketing automation, chat). Designers and devs need to know up front.

Filled-in examples

See the template in use

B2B SaaS full redesign · B2B SaaS

  • Site scope + typeFull marketing site redesign. 14 pages in scope. Existing site replaced; product app + customer dashboard out of scope (separate project).
  • Business objective + named KPIIncrease demo-booking conversion rate from 1.2% to 2.5% over 90 days post-launch. Reposition from 'forecasting tool' to 'RevOps platform' - measured via brand survey delta at 6 months.
  • Primary audience + jobs-to-be-doneVPs of RevOps at $5M-50M ARR SaaS evaluating consolidation. Job-to-be-done: 'Help me understand if you can actually replace the 3 tools I'm using now without a 6-month implementation.' Secondary: existing customers researching support content.
  • Page mapHome (net new). Product > Platform overview (net new), Forecasting (migrating), Integrations (net new), Workflows (net new). Pricing (refreshed). Customers > Case studies (migrating), Logo wall (net new). Resources > Blog (migrating), Guides (net new). Company > About, Careers, Contact (refreshed). Total: 14 pages.
  • Primary CTA per page typeHome → 'Book a demo.' Product pages → 'See it in your stack' (interactive demo). Pricing → 'Start free trial' + 'Talk to sales' (enterprise). Customers → 'Read the case study' → 'Book a demo.' Resources → email gate for guides only; blog ungated.
  • Content inventory + ownershipNet new copy: home (owner: copywriter), all product pages (PMM), integrations matrix (PMM), 6 new case studies (CS). Migrating: 30 blog posts (content), 8 existing case studies. Photography: net new product screenshots (UI mid-redesign, blocked until app v3 lands).
  • Brand + accessibility + performancePer Orbital brand v2 (refreshed for this launch). Palette: 1 accent against neutral. Type: monospace-influenced headings, geometric sans body. Accessibility: WCAG 2.2 AA. Performance: LCP under 2.0s on 4G, CLS under 0.1. Responsive: 360px to 1920px.
  • Web do-notsNo carousels on home. No modal popups on first visit. No stock illustration. No 'reimagine the way you...' opener. No 'industry-leading' boilerplate. No accordion FAQs without anchor links. No autoplay video with sound.

Shuttergen

Shuttergen is for ad briefs - your web brief stays human.

Web design briefs require page-map decisions, CTA tradeoffs, and content inventory work that's better done by humans who know the product. Shuttergen doesn't generate web briefs - but for the paid social and search briefs that drive traffic to your new site, it is the right tool.

Generate paid traffic briefs freeTry the live builder →

Why a website brief needs fields ad briefs skip

Page map, primary CTA per page, content inventory. A general creative brief defines the creative; a website brief has to also define the structural product - what pages exist, what each page is for, what content fills each page. Skip these and the team spends week 1 in 'we don't know what we're designing' meetings.

Primary CTA per page is the most overlooked field. Teams know what the home page is for; they often don't know what individual product pages are for. The primary CTA forces a decision: this page exists to drive demos, or trials, or content downloads - not all three. Pages with three competing CTAs convert worse than pages with one.

Content inventory drives timeline more than design does. Most website projects don't slip because design takes too long; they slip because copy isn't ready or net-new photography hasn't been shot. Brief the content inventory up front so writing and shooting tracks run in parallel with design.

Shuttergen is for ad briefs - your web brief stays human. Web design briefs require page-map decisions, CTA tradeoffs, and content inventory work that's better done by humans who know the product. Shuttergen doesn't generate web briefs - but for the paid social and search briefs that drive traffic to your new site, it is the right tool.

Generate paid traffic briefs free

How to structure the page map

List every page hierarchically. Don't just list top-level nav; list every page that will exist post-launch. Mark net-new vs migrating vs deprecating. The page map drives scope conversations with stakeholders before design starts, not after.

Mark custom-designed pages vs template-based pages. A 14-page site might have 3 custom designs (home, product overview, pricing) and 11 template-based pages (case studies, blog posts, team bios). Brief the template count up front so the design team scopes accordingly.

Deprecating pages get a redirect plan. Pages that go away need 301 redirects to preserve SEO equity. Brief this up front; surprises here lose 6-figure ranking value.

The brand + accessibility + performance constraints block

Reference brand guidelines; don't paraphrase them. Brand guidelines change; web briefs that paraphrase brand rules go stale fast. Reference the brand guidelines version ('per Orbital brand v2') and let the team pull from source.

Accessibility and performance are constraints, not aspirations. WCAG level (2.1 AA baseline; 2.2 AA preferred for new builds), LCP / CLS targets, supported browser/device matrix - all live in this field. Teams that don't brief accessibility up front retrofit it badly and ship inaccessible sites.

Responsive breakpoints up front. 360px lower bound (small phones) up to 1920px or 2560px upper bound. Specifying breakpoints shapes how the team thinks about layouts from the first wireframe.

Internal: creative brief for website, web design creative brief, website creative brief.

FAQ

Frequently asked

What is a creative brief for a website?
A 2-3 page document that defines a web design or redesign project - scope, business objective + named KPI, page map, primary CTAs per page, content inventory, brand and accessibility constraints. Different from an ad brief because it defines a structural product, not a single creative asset.
How is a website creative brief different from an ad creative brief?
Four added required fields: page map, primary CTA per page, content inventory, and brand + visual + accessibility + performance constraints. An ad brief defines what the asset says; a website brief also defines what pages exist and how they're built.
Who writes the website creative brief?
Marketing lead or product lead in partnership with the web designer or design agency. For larger projects, content strategist and SEO lead are also involved. The brief is a joint doc; don't write it in isolation.
How long should a website creative brief be?
2-3 pages for a partial refresh or landing page. 3-5 pages for a full redesign because of the page map and content inventory. Anything longer signals you're writing the project plan, not the brief.
Should the website brief specify the CMS or framework?
Yes - the stack & integration constraints field covers CMS, framework, hosting, and third-party integrations. Designers and developers need to know up front whether they're working in Webflow, Sanity + Next.js, WordPress, Shopify, or a custom stack.
Do I need a content inventory if I'm migrating an existing site?
Especially if migrating. Document what migrates, what gets rewritten, what gets deprecated. Migration projects without content inventory inherit every piece of old content unintentionally - that's how outdated case studies end up in new launches.
What's the most important field in a website brief?
Primary CTA per page. Pages with one primary CTA convert significantly better than pages with three competing CTAs. The CTA field forces the team to make the hardest decision (what is this page actually for) before design starts.

Related

Keep reading

Resource

Website creative brief

Sister page: website creative brief.

Resource

Web design creative brief

Tech-stack-focused web brief lens.

Resource

Website creative brief template

Downloadable web brief template.

Resource

Creative brief template

The general creative brief template.

Research

Creative Brief Builder

The Shuttergen brief workflow.

Shuttergen is for ad briefs - your web brief stays human.

Web design briefs require page-map decisions, CTA tradeoffs, and content inventory work that's better done by humans who know the product. Shuttergen doesn't generate web briefs - but for the paid social and search briefs that drive traffic to your new site, it is the right tool.

Generate paid traffic briefs freeTry the live builder →