← Resources

Templates

Web design creative brief

The web design creative brief - structured around technical specs, tech stack, and deliverable formats (Figma dev mode, design tokens, Storybook). Four worked examples.

Updated

The template

The structure to copy and adapt

  • Project type + tech stackRequired
    Stack named up front. 'Next.js 15 + Sanity CMS, deployed on Vercel.' Or 'Webflow with Memberstack auth.' Or 'Shopify Plus with Hydrogen storefront.' Stack determines design constraints (component model, animation primitives, performance baseline).
  • Performance budgetRequired
    Concrete targets. 'LCP under 2.0s on 4G mobile. CLS under 0.1. INP under 200ms. Total JS budget 180KB gzipped.' Performance budget is a design constraint as much as a dev constraint.
  • Accessibility level + supported devicesRequired
    WCAG level (2.2 AA preferred for new builds). Supported browser matrix (Chrome / Safari / Firefox / Edge - current + 2 prior). Device range (smallest mobile to largest desktop). Motion-reduce behavior.
  • Component / design system referenceRequired
    Existing DS reference ('per Orbital DS v4.2, Figma library + Storybook URLs') or DS-creation scope ('this project produces the first 12 components of a net-new DS').
  • Page-level deliverables (per route)Required
    Each route + responsive states + interactive states. 'Home: desktop + tablet + mobile + 4 hover/focus states.' Skip and dev gets surprised by missing states post-handoff.
  • Audience + browsing contextRequired
    Who and where. Compressed paragraph. Mobile-first or desktop-first context dictates layout. Cold paid traffic vs returning users dictates load-time tradeoffs.
  • Design token + theme requirementsRequired
    Light/dark mode? Custom themes per customer (white-label)? Brand-extension themes? Token export format (CSS variables, Tailwind config, design tokens JSON)?
  • Dev handoff formatRequired
    Figma dev mode (default), Storybook, design tokens JSON, exported assets in shared drive. Brief the handoff format up front so the design team builds the file accordingly.
  • Web do-nots
    5-7 web-specific exclusions. 'No carousels. No modal popups in first 30s. No custom illustrations without DS approval. No off-system color. No animations > 200ms.'

Filled-in examples

See the template in use

B2B SaaS marketing site (Next.js + Sanity) · B2B SaaS

  • Project type + tech stackFull marketing site redesign. Next.js 15 + Sanity CMS, deployed on Vercel. Cache Components + PPR enabled. Content modeled in Sanity Studio; pages composed of typed schema blocks.
  • Performance budgetLCP under 2.0s on 4G mobile. CLS under 0.1. INP under 200ms. Total JS budget 180KB gzipped per route. First-byte under 300ms via Vercel edge.
  • Accessibility level + supported devicesWCAG 2.2 AA. Supported: Chrome / Safari / Firefox / Edge (current + 2 prior). Devices: 360px (iPhone SE) to 1920px (1080p). Motion-reduce respected throughout.
  • Component / DS referencePer Orbital DS v4.2 (Figma library + Storybook URLs). One new component variant needed: 'stat block 03.' Extension ticket filed with DS team.
  • Page-level deliverables14 routes. Per route: desktop + tablet + mobile. Interactive states: hover/focus/active/disabled per component. Empty states for any data-driven blocks. Error states for any forms.
  • Audience + browsing contextVPs of RevOps at $5M-50M ARR SaaS. Mostly desktop (LinkedIn-driven traffic). Often reading alongside competitor tabs - dense, scannable layouts win.
  • Design token + themeLight/dark mode required. Tokens exported as CSS variables + Tailwind config + design tokens JSON. No custom customer themes (single brand).
  • Dev handoff formatFigma dev mode for component specs. Storybook for interactive component reference (existing, additions made by DS team). Asset exports via shared Drive folder.

Shuttergen

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

Web design briefs need tech-stack judgment, performance-budget tradeoffs, and accessibility decisions that are better made 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 web design briefs need technical fields

Stack determines design constraints. Next.js + Cache Components, Webflow, Shopify Hydrogen, multi-tenant React - each has different component models, animation primitives, performance baselines, and CMS capabilities. Briefs that skip the stack produce designs that don't fit the build technology. The stack field is a design constraint, not just an engineering one.

Performance budget is a design constraint. LCP, CLS, INP, total JS budget - these shape every design decision. A 1.5s LCP target rules out hero video. A 100KB JS budget rules out heavy interactive components. Performance budgets briefed up front prevent the 'why is this so slow?' conversation post-launch.

Accessibility and supported devices set the design boundary. WCAG 2.2 AA at 360px-1920px is a different design problem than WCAG 2.2 AAA at 320px-2560px. Brief the boundary so the team designs to the constraint, not against it.

Shuttergen is for ad briefs - your web brief stays human. Web design briefs need tech-stack judgment, performance-budget tradeoffs, and accessibility decisions that are better made 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

The dev handoff format field

Brief handoff format up front so the design team builds the file accordingly. Figma dev mode requires component-organized files matched to the React component model. Storybook handoff requires variant-organized files. Design tokens JSON requires named token references throughout. Each handoff format implies a different Figma file structure; brief the handoff before the design team starts.

Stack-specific handoff conventions. Next.js teams expect Figma dev mode + Storybook + design tokens JSON. Webflow teams expect Figma + asset exports + a class-naming convention. Shopify Hydrogen teams expect Figma + Hydrogen-component-aligned naming. Match the convention to the stack.

Multi-team handoff requires more structure. If design hands off to multiple dev teams (in-house + agency, or web + mobile), the handoff format needs to be standardized. Brief the standard up front - Figma dev mode + design tokens JSON is the lowest-common-denominator handoff that works across teams.

Design tokens and theme requirements

Theme requirements are scope-defining. Light/dark mode doubles design effort. White-label themes 5x design effort. Brand-extension themes (sub-brand on shared system) 2x effort. Brief theme requirements up front - they're scope changes, not implementation details.

Token export format matters. CSS variables work for any web framework. Tailwind config works for Tailwind projects. Design tokens JSON works for theme abstraction + token pipelines. Multi-framework projects need design tokens JSON as the canonical export with derived CSS variables + Tailwind config.

Runtime theme switching has design implications. Tokens that need to switch at runtime (light/dark, white-label customer themes) must be referenced via CSS custom properties, not baked into static values. Brief the runtime switching requirement up front so the design team uses token references throughout, not static color values.

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

FAQ

Frequently asked

What is a web design creative brief?
A 2-3 page document that scopes a web design project around its technical context - stack, performance budget, accessibility level, design tokens, theme requirements, dev handoff format. Different from a general website brief because it leads with technical specs that shape the design.
How is a web design creative brief different from a website creative brief?
The web design brief leads with technical specs - stack, performance, tokens, handoff. The website brief leads with page maps, CTAs, content inventory. Both are needed for a full web project; pick the lens that matches what you're scoping first.
Why does the brief need the tech stack?
Because stack determines design constraints. Next.js, Webflow, Shopify Hydrogen, multi-tenant React - each has different component models, animation primitives, performance baselines, and CMS capabilities. Designs that ignore the stack don't fit the build.
How specific should the performance budget be?
Specific. 'LCP under 2.0s on 4G mobile, CLS under 0.1, INP under 200ms, JS budget 180KB gzipped.' Vague targets ('fast' or 'good Core Web Vitals') produce designs that fail measurement post-launch.
Should the brief specify the dev handoff format?
Yes - it shapes how the design team builds the Figma file. Figma dev mode handoff requires component-organized files. Storybook handoff requires variant-organized files. Design tokens JSON requires named token references throughout. Brief the format up front.
What if I'm working on multi-tenant or white-label?
Brief the theme requirements up front. White-label themes 5x design effort because every brand-coupled value must be tokenized. Token export format becomes critical - design tokens JSON + runtime CSS custom property switching is the standard pattern.
What's the most overlooked field in web design briefs?
Performance budget. Briefs without budgets produce designs that fail measurement post-launch. Briefs with budgets get designs that hit the targets because the budget shaped every design decision along the way.

Related

Keep reading

Resource

Website creative brief

Page-map + CTA + content inventory lens.

Resource

Creative brief for website

Sister page, web brief structure.

Resource

Website creative brief template

Downloadable web brief template.

Resource

Creative brief design

Design-system-constraints lens.

Research

Creative Brief Builder

The Shuttergen brief workflow.

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

Web design briefs need tech-stack judgment, performance-budget tradeoffs, and accessibility decisions that are better made 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 →