Website creative brief: structure, page map, and CTAs (2026)

The template

The structure to copy and adapt

Project scope & typeRequired
Full redesign / partial refresh / single landing page / microsite. Specify scope to set expectations for both effort and design freedom. A full redesign is a different brief than a landing page.
Business objective + primary 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 / sitemapRequired
Every page in scope, hierarchically. Home > Product > Pricing > Customers > Resources > About. Mark which pages are net-new vs migrating vs deprecating.
Primary CTA (per page type)Required
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 can exist but don't compete.
Content inventoryRequired
What content exists vs needs writing vs needs migrating. Copy, images, videos, testimonials, case studies. Content gaps drive timeline more than design does.
Brand & visual constraintsRequired
Brand guidelines reference (palette, type, photography style), accessibility requirements (WCAG level), performance targets (LCP, CLS), responsive breakpoints.
Do-notsRequired
5-7 web-specific exclusions. 'No carousels on home. No modal popups on first visit. No stock illustration. No accordion FAQs without anchor links.'
Tech & integration constraints
CMS, framework, hosting, third-party integrations (analytics, CRM, marketing automation, chat). Constraints designers and devs need to know up front.

Filled-in examples

See the template in use

B2B SaaS full website redesign · B2B SaaS

Project scope & typeFull marketing site redesign. 14 pages in scope. Existing site replaced; product app and customer dashboard out of scope (separate project).
Business objectiveIncrease 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 CTAHome → 'Book a demo'. Product pages → 'See it in your stack' (interactive demo). Pricing → 'Start free trial' (self-serve) + 'Talk to sales' (enterprise). Customers → 'Read the case study' → 'Book a demo'. Resources → email gate for guides only; blog ungated.
Content inventoryNet new copy needed: home, all product pages, integrations matrix, 6 new customer case studies. Migrating: 30 blog posts, 8 existing case studies. Photography: net new product screenshots (UI is mid-redesign, can't ship until app v3 lands).
Brand & visual constraintsPer 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.
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's the right tool.

Generate paid traffic briefs free Try the live builder →

Why web briefs need fields ad briefs skip

Page map, primary CTA per page, and 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 fields and the design 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 the team to decide: this page exists to drive demos, or to drive trials, or to drive 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 the 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's the right tool.

Generate paid traffic briefs free

Page map structure and what to include

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 which pages get a custom design vs which use templates. 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 & visual constraints field

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

Accessibility and performance are constraints, not aspirations. WCAG level (2.1 AA is current baseline; 2.2 AA preferred for new builds), LCP / CLS targets, and 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 (large desktops). Specifying breakpoints shapes how the design team thinks about layouts from the first wireframe.

Internal: website creative brief template, graphic design creative brief, creative brief template.

FAQ

Frequently asked

What is a website creative brief?

A 2-3 page document that defines a web design or redesign project - scope, business objective, page map, primary CTAs, content inventory, brand and accessibility constraints. Different from an advertising brief because it defines a structural product, not a creative asset.

How is a website brief different from a creative brief?

Four added required fields: page map, primary CTA per page, content inventory, and brand + visual + accessibility + performance constraints. A general creative 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 tech & 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, and 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.

Keep reading

Resource

Website creative brief template

Downloadable web brief template.

Resource

Graphic design creative brief

Design-focused brief variant.

Resource

Creative brief template

The general template.

Resource

Branding creative brief

Brand-equity brief that feeds web work.

Research

Creative Brief Builder

The Shuttergen brief workflow.

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

Generate paid traffic briefs free Try the live builder →