Web design brief template
Design only, or design and build. Who edits it, and what a contact form obliges you to. The sections of a web design brief with an example line in each.
For teams who have a developer, or a platform, and need the design briefed on its own.
About 10 questions, mostly taps. Free, no account. About ninety seconds.
Start a website or digital product briefThis is what a finished website or digital product brief contains, with an example line in each section. Write it by hand from this, or answer the questions below by tapping and the page writes it for you.
The one thing that must not be got wrong
The constraint that overrides everything else.
“The booking flow must work on a phone with one thumb. Most of our bookings come from one.”
What we are making
The kind of site or product, and whether it is design only or design and build.
“A marketing site with booking. Design and build, on Webflow.”
Pages and templates
The page types and how many of each. Templates are counted for you.
“Home, six service pages, about, contact, a journal with around forty posts. Four templates.”
What it must do
Functionality, each item with what it implies.
“Booking with payment, a newsletter sign-up, two languages. Payments mean a privacy policy and card handling by Stripe.”
Who edits it afterwards
The person, their skill, and how often.
“Anna, once a week, comfortable with Webflow. No developer on staff.”
Audience and the one thing visitors should do
One person, one verb.
“For someone who has been recommended us and wants to check we are real. They should book a first call.”
Copy
Who writes it, and when it exists. This decides the timeline more than anything else.
“We write it. Drafts by 1 October, final by 15 October.”
Tone and references
Positions on scales; sites to sit beside and to avoid.
“Calm rather than energetic. Like the Aesop site for its restraint. Not like our competitors’ stock-photo hero.”
What exists
Logo, guidelines, photography, a domain, the current site’s analytics.
“Logo and guidelines, yes. Photography, no; budget for a half-day shoot.”
Budget, dates, sign-off
A band, the launch date, and who says yes.
“150–300k DKK. Launch by 1 December. Jonas signs off alone.”
Open questions
What is not decided, said plainly.
“Whether the journal migrates or starts fresh. Whether the second language launches on day one.”
You answer the questions. The brief writes these.
- Templates against pages
- What a CMS, accounts or payments imply
- Accessibility obligations
- Breakpoints, favicon and share image
- The production window copy decides
A web design brief has to answer a question most people do not know is being asked: is this design only, or design and build? Everything downstream depends on it. Design only means the deliverable is files and a specification, and the platform, hosting and functionality questions belong to someone else. Design and build means one team owns the live site and every one of those questions is in scope. Left open, both sides assume the other is doing the hard part.
The document above is a finished web brief. The decisions below are the ones that change what your designer is quoting for.
The decisions that move the quote
Design only, or design and build. If you have a developer or a platform team, say so, and say what they need from the designer: Figma files, a component library, a specification, or all three.
Templates, then pages. The single most common cause of a wrong web quote is a brief that counts pages when the designer counts templates. Put a count next to the page types that repeat, and "five templates, around ninety pages" tells the designer what they are designing and the developer what they are building.
Who edits it afterwards. This decides the content management system, and the content management system decides a large share of the build. A marketing team editing weekly needs a visual editor and training. A developer maintaining it does not.
Who writes the copy. Designers can lay out a page with placeholder text and cannot finish one. If the answer is "we need help", that is a copywriting line item and it belongs in the brief.
What it must do. A contact form collects personal data, with cookie consent, a privacy policy and a data-processing note. Payments and accounts imply a backend. Integrations imply a discovery phase before they can be priced. Multiple languages mean every template twice.
Accessibility. A decision, not a feature. It changes the contrast constraints, the testing and the deliverables. Public bodies have carried the obligation for years; EU shops and services now do too.
The one thing a visitor should do. One verb. The brief checks it against the pages and functionality you chose.
The device or performance rule. Works on a phone with one thumb. Loads on a bad connection. Never asks for a login before showing the price. On web projects, that is usually the one thing that must not be got wrong.
Mistakes we see most
“We need the design for our new site; our developer will build it.”
“Design only. Our developer, Lars, builds it in Next.js. He needs Figma files with a component library and a responsive specification at three breakpoints.”
Now the designer knows what to hand over and to whom.
“Marketing will update the site themselves.”
“Anna edits it about once a week and is comfortable with Webflow. No developer on staff after launch. She needs a visual editor and a one-hour handover.”
Who, how often, and how skilled. That is the CMS decision.
“Mobile friendly, obviously.”
“The one thing that must not be got wrong: the booking flow works on a phone with one thumb, because most of our bookings come from one.”
A rule the designer can test against, not an adjective.
Answer the questions below by tapping, and the brief counts the templates, lists the obligations that come with the functionality, and marks where the verb has nowhere to happen.
What it asks, and why.
- ScopeWhat are you making?
A landing page and a shop are different jobs with different questions. Naming which removes half the tree.
- ScopeWhich pages?only when it applies
The difference between a template and a page is invisible to most people briefing, and it is the main reason web quotes are wrong.
- ScopeWho builds it?
"Design only" removes platform, hosting, integration and performance questions. Left open, everyone assumes the other side is building it.
- CraftWhich platform, and who edits it?only when it applies
The platform decides whether a CMS comes for free, whether custom development is implied, and what the handover looks like. When your own team builds it, the designer has to know what in, or the design will not fit the tool.
- CraftWhat does it need to do, and how accessible must it be?
Forms and payments carry legal obligations and imply a backend. Accessibility is a requirement in the EU that almost nobody volunteers, so it is asked.
- LookWhat already exists?
Copy is the single biggest hidden cost in web projects. Every unticked asset is a line in the estimate.
- LookWhat should they do, and who are they?
One verb is the hardest question in the set and the one most often dodged in a text field, which is why it is cards. Who it is for makes the verb specific.
- PracticalitiesBudget range
A band is a signal about which kind of job is on the table, not a commitment. Without one the designer guesses.
- PracticalitiesWhen does it need to be live?
A date only means something next to the minimum production window. If they do not fit, better to know now.
- PracticalitiesThe one thing that must not be got wrong
Every project has one. It is rarely written down because it feels obvious to the person who knows it.