How to Write a Website Design Brief

A website design brief is a 2-4 page document that tells an agency your goal, audience, scope and budget range before any design work starts. It holds 10 blocks, and it moves your price: a clear brief buys you a real number, a vague one buys you a risk premium.

Most website projects go wrong long before the first design review. The agency asks what you want. You say "something modern, clean, better than our competitors." Three months later someone in the approval meeting says "this isn't what I pictured." Nobody lied, and nobody made a mistake. There was simply no document.

The brief is that document. It is not a creative essay — it is a pricing and scope instrument. This guide walks through what goes inside it block by block, shows you how to write goals an agency can actually design against, gives you a template you can copy, and lists the questions to ask once the brief goes out.

Table of Contents

• What a Website Design Brief Is and Is Not
• What a Vague Brief Actually Costs You
• The 10 Blocks Every Website Design Brief Needs
• How to Write Goals an Agency Can Price
• Four Questions That Lock Down Scope
• Technical and Legal Requirements to Name Upfront
• Redesigning an Existing Site: Four Extra Blocks
• Copy-Paste Website Design Brief Template
• What to Leave Out of the Brief
• Eight Questions to Ask the Agency
• How to Compare Proposals After the Brief Goes Out
• Frequently Asked Questions

What a Website Design Brief Is and Is Not

A brief is not a one-page summary of your company. It is the input file an agency uses to build a quote. When an agency prices a project, it estimates three things: how many unique screens it will design, how many integrations it will write, and how many revision rounds it will absorb. A good website design brief turns all three estimates into numbers.

Once estimates become numbers, the price changes with them. When two agencies quote $28,000 and $71,000 for what looks like the same project, the gap usually has nothing to do with quality. It comes from two teams reading two different scopes out of the same sentence. One reads "we'll have a product catalogue" as twelve static pages. The other reads it as faceted search with a live inventory feed.

A solid brief does four jobs at once:

• It fixes scope. Which pages, which features, which languages — all written down.
• It makes quotes comparable. Three agencies pricing the same document are measuring the same thing.
• It names the approver. Everyone knows who signs off on the design.
• It becomes the reference in a dispute. It goes into the contract as an annex.

Keep three documents separate in your head. The brief states the business goal, the audience and the constraints, and you write it. The proposal is the agency's answer in scope and price. The specification defines the technical solution, and the agency usually writes that one for you to approve. Small projects collapse these into two documents; enterprise projects keep all three.

How many people should write the brief? Three at most. One person owns the document, with one contributor each from marketing, sales and IT. A brief written by nine people produces contradictory requirements, and the agency ends up picking which line to obey. Collect the opinions, resolve the conflicts internally, then send one voice.

One more signal worth watching: good agencies ask for a brief. A team that requests the document in the first call is trying to understand the work. A team that quotes a number without asking anything has priced a guess.

What a Vague Brief Actually Costs You

Scope ambiguity in software has a measured price tag. Bent Flyvbjerg and Alexander Budzier studied 1,471 IT projects for Harvard Business Review and found an average cost overrun of 27%. The tail mattered more than the average: one in six projects turned into what they call a Black Swan, with a cost overrun averaging 200% and a schedule overrun of almost 70%.

Website projects are smaller than the enterprise systems in that dataset. The mechanism is identical. Anything you leave undefined at the start returns mid-project as extra work, and extra work always costs more than the original line item.

Call the agency-side version of this an "assumption premium." If a sentence reads two ways, the agency quotes the expensive reading. A wrong guess comes out of its own margin, so it prices the risk in. Tightening your website design brief is the fastest way to claw that premium back.

The bill for vagueness arrives in three places. First, at quote stage, as the risk premium. Second, during build: the "I pictured something else" moment in a design review turns into an extra revision round, and each round adds one to two weeks. Third, after launch, when a feature nobody wrote down gets quoted as out-of-contract work. Add the three together and half a day spent on the brief looks cheap.

The table below pairs the phrases that show up most often in weak briefs with the version an agency can actually price.

That right-hand column is the whole brief in miniature. Everywhere the agency would guess, you put a number.

How to Write Goals an Agency Can Price

The goals block gets skipped more than any other. "More customers" is a wish, not a goal. A designer cannot make a layout decision with it.

A usable goal has four parts: a metric, a starting value, a target value and a date. Write all four and the designer knows what to optimise.

Here is what the upgrade looks like in practice:

• Weak: "Raise brand awareness." → Strong: "Grow monthly organic sessions from 1,400 to 3,000 within 12 months."
• Weak: "Get more enquiries." → Strong: "Lift quote-form conversion on service pages from 0.8% to 2% in 6 months."
• Weak: "Take pressure off support." → Strong: "Cut order-status phone calls by 40% with a self-service tracking page."
• Weak: "Look more professional." → Strong: "Give sales 15 reference pages they can link from proposals; today they have none."

If you do not know the current number, write that down too. "We don't measure this yet; GA4 setup is in scope" beats an invented baseline, and it turns measurement into a line item rather than an assumption.

Add a trade-off line next to the goals. If all three cannot land at once, which one wins? That single sentence steers most design decisions and shortens the arguments that come up halfway through.

Cap the list at three goals. A brief with seven goals behaves exactly like a brief with none, because the designer cannot tell what to put first. For the commercial logic behind these targets, see what UX design is worth to a business.

Four Questions That Lock Down Scope

Scope is where quotes diverge most. Answer four questions in writing and the numbers you get back start to converge.

How many unique templates, not pages? Forty blog posts share one "blog post" template. Six service pages with identical layouts are one template, not six. List templates, not a sitemap count.

Which integrations are in play? ERP, accounting, CRM, shipping, payments, marketing automation. Each one needs three facts: the system name, whether API documentation exists, and the direction of the data flow. Connecting to an undocumented system costs roughly twice what a documented one does. Name the owner too — is the developer on your side, at the vendor, or inside an annual support contract? That answer exposes the biggest dependency in your timeline.

Who owns the content? Copy and imagery cause more launch delays than code does. A finished design sitting unpublished because page 14 has no text is a process failure, not an agency failure. Assign ownership page by page; our guide to preparing website content helps you build that list.

What happens after launch? Maintenance, updates, content entry, server management — who does each one? Skip this and every quote stops on launch day, which makes the month-13 invoice a surprise. Define the scope the way you would a software maintenance agreement, from the start.

The 10 Blocks Every Website Design Brief Needs

Length matters less than completeness. With these ten blocks in place, the document does its job in three pages.

Block nine draws the same objection every time: "If I name a budget, the agency will spend all of it." In practice the opposite happens. Without a band, an agency prices its standard package, and that package rarely matches what you need. Give a range and the agency tells you what fits inside it and what moves to phase two. To build a realistic band, run the website cost calculator and check the output against the line items in our corporate website cost breakdown. For the wider budgeting method, see how to plan a software project budget.

Block ten gets written least and hurts most. If nobody names the approver, a new executive appears at revision three and the process restarts. Put one name in the brief: final sign-off sits with that person. Define the revision rounds in the same block. A line like "2 wireframe rounds, 2 design rounds, 1 build round" aligns the agency's day estimate with your expectations, and both sides know that requests after the last round get priced as extra work.

Technical and Legal Requirements to Name Upfront

Block eight is what turns a brief from "we want a nice site" into something closer to a specification. Write measurable lines under four headings.

Performance thresholds. "Fast" starts arguments; numbers end them. Google's Core Web Vitals thresholds give you a ready-made standard: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Google recommends measuring at the 75th percentile, with mobile and desktop segmented separately. Put those three lines in the brief and you have written your acceptance criteria at the same time. The technical side lives in our guide to speeding up a website.

Pair the thresholds with a page-weight cap. The HTTP Archive 2025 Web Almanac page weight chapter puts the median home page at 2.86 MB on desktop and 2.56 MB on mobile, up 7.8% in a single year. Images carry the largest share: 1,059 KB on the median desktop home page and 911 KB on mobile. A line reading "home page stays under 1.5 MB on mobile" disciplines your image handover as much as the agency's code.

Accessibility level. Name the standard you want. The W3C moved WCAG 2.2 to Recommendation status on 12 December 2024 and advises using it. For most commercial projects the practical target is WCAG 2.2 Level AA.

The numbers explain why this belongs in writing. WebAIM's annual Million report tested the top one million home pages in February 2026 and found automatically detectable WCAG failures on 95.9% of them, averaging 56.1 errors per page — 10.1% more than a year earlier. The three most common failures are low-contrast text (83.9%), missing image alternative text (53.1%) and missing form labels (51%). All three are cheap during design and expensive after launch.

Timing is the real argument here. Fixing contrast while you pick the palette costs nothing; changing the palette after 40 pages go live is a redesign. One line — "WCAG 2.2 AA, automated scan report delivered at handover" — settles it at the start.

Privacy and legal pages. Forms, cookies and consent are part of the build, not an afterthought. Write down which forms need consent, how the cookie banner should behave, and who drafts each policy. Our guide to website cookie compliance covers the implementation. If you sell to consumers in the EU, accessibility is a legal question as well as a design one: the European Commission lists e-commerce among the services covered by the European Accessibility Act (Directive 2019/882).

Infrastructure and ownership. Whose name is on the domain? Who controls DNS, who hosts, and who owns the source code at the end? Asking these four questions in the brief is far easier than asking them after the final invoice. Our article on source code ownership shows how to word it in a contract, and choosing a domain and hosting plan covers the server side.

Redesigning an Existing Site: Four Extra Blocks

A redesign cannot reuse a new-build brief. Four extra blocks protect the traffic you already have.

Analytics access. Give the agency GA4 and Search Console access. Without it, the team cannot see which pages earn traffic and will happily redesign the ones that work. Add a list of your top 20 pages by traffic to the brief; those URLs and their content structure go on the "preserve" list.

A URL mapping table. Google's documentation on site moves with URL changes spells out the process: map old URLs to new ones, set up server-side permanent redirects (301/308), avoid redirect chains, and update internal links to point at the new URLs. Write into the brief that the agency produces the old-to-new mapping table and submits it for approval.

Redirect lifespan. The same documentation says to keep redirects "for as long as possible, generally at least 1 year," and suggests keeping them indefinitely from a user's point of view. Google also notes that ranking fluctuation during a move is normal, and that most pages on a small to medium site move within a few weeks. Putting those sentences in the brief prevents the panic that hits two weeks after launch.

A cutover plan. What time does the old site come down, who changes DNS, who approves on staging, and what is the rollback path? Ask these in the brief and launch day stays calm. If a fixed date drives the project — a trade show, a campaign, a season — schedule the cutover at least a week ahead of it.

If you are still deciding whether to rebuild at all, our piece on website redesign lists the seven signals. Moving to a multi-language structure adds its own block; building a multilingual website covers the hreflang side.

Copy-Paste Website Design Brief Template

Copy the structure below and fill it in. The lines in brackets are sample answers from an industrial equipment manufacturer in Ohio selling into Germany and Poland — replace them with your own.

1. Company and market

• What we sell: (CNC machining centres and spare parts)
• To whom: (mid-sized metal fabrication shops in the US, Germany, Poland)
• Three competitors: (links to their sites, no commentary needed)
• What makes us different: (spare parts shipped within 24 hours)

2. Why now

• Reason: (site built in 2017, unusable on mobile, no German pages)
• If we don't do it: (we only capture export enquiries at trade shows)

3. Goals — maximum three

• Goal 1: (25 quote forms per month from German-language pages; today 0)
• Goal 2: (move 40% of spare-part phone enquiries to self-service search)
• Goal 3: (organic sessions 1,400 → 3,000 within 12 months)
• Trade-off: (if only one lands, it is Goal 1)
• Measurement: (GA4 and Search Console setup in scope)

4. Audience

• Profile 1: (purchasing manager, 35-50, desktop, wants technical documents)
• Profile 2: (shop owner, mobile, wants price and lead time)
• Device split: (current GA4: 62% mobile)
• Buying cycle: (about 3 months, 2-4 email touches)

5. Current state

• Current site and platform: (WordPress 5.x, self-hosted)
• GA4 / Search Console access: (will be granted)
• Top 20 pages by traffic: (attached table)
• Pages to preserve: (3 product pages, 8 blog posts)
• What is broken: (quote form, German translation, mobile menu)

6. Scope

• Unique templates: (home, product list, product detail, spare-part search, references, blog list, blog post, contact)
• Features: (spare-part search with filters, quote basket, PDF catalogue download)
• Integrations: (ERP for stock and pricing, daily one-way sync, API documented)
• Languages: (EN + DE + PL; we supply copy, you build the routing)
• Out of scope: (mobile app, live chat, checkout and payments)

7. Content ownership

• Copy: (agency writes 8 pages, we write 6)
• Images: (product photography ours, application photography shot by agency)
• Video: (none)
• Translation: (DE and PL copy from us, delivered 15 March)

8. Technical and legal

• Performance: (mobile LCP < 2.5s, INP < 200ms, CLS < 0.1; home page < 1.5 MB)
• Accessibility: (WCAG 2.2 AA, scan report at handover)
• Browsers and breakpoints: (last 2 versions of Chrome, Safari, Edge; 360px-1440px)
• Privacy: (cookie consent UI, privacy policy, form consent text — legal copy from us)
• Infrastructure: (domain ours, hosting on agency recommendation, source code delivered to us)
• SEO: (URL mapping table, 301 redirects, sitemap, robots.txt)

9. Budget range and dates

• Band: ($X - $Y, excluding taxes)
• Payment preference: (3 instalments tied to milestones)
• Fixed date: (live before the 12 September trade show)
• Non-negotiable item: (German pages; the blog can move to phase two)

10. Decisions and approval

• Brief owner: (marketing manager, contact details)
• Final approver: (managing director)
• Revision rounds: (wireframe 2, design 2, build 1)
• Meeting cadence: (weekly, 30 minutes)

Do not delete the lines you cannot answer — write "we don't know" instead. You have just flagged the questions the agency will raise in the first meeting, and that meeting stops being an exchange of guesses.

One practical test for the finished document: hand your website design brief to a colleague outside the project. If they can explain the project back to you in ten minutes, it is ready to send.

What to Leave Out of the Brief

A longer brief is not a better brief. Some decisions belong to the agency, and writing them down wastes your time and narrows your quote.

• Hex codes and font names. If you have a brand guideline, attach it and stop there. If you don't, let the agency propose.
• Layout sketches. Say what you need on a page, let the designer decide where it goes. A brief drawn as boxes turns a designer into a copyist.
• Technology choices. "Use React" only helps if you have a real constraint: a developer on staff who knows it, or an existing system to extend. Otherwise ask the agency to explain its choice. Our comparison of website builders and custom builds covers that decision.
• Day-by-day staffing. How many days go to design versus build is the agency's plan. You define the output and the date.
• "Make it look like this site." Share three sites you admire, but write one line on why: "the menu structure is clear" or "the product photography is large." A reference without a reason becomes an order to copy.

Eight Questions to Ask the Agency

The meeting after you send the brief is where you actually evaluate the agency. These eight questions separate the teams:

1. What are the three gaps in my brief? A strong team arrives ready for this and points at the risk areas.
2. How do you break this scope into line items? Ask for an itemised quote; a single line reading "website design" cannot be compared to anything.
3. What does a revision round include? "Unlimited revisions" is not good news — it means undefined scope.
4. Who owns the source code and the design files? The answer belongs in the contract.
5. What happens to the timeline if content runs late? This question reveals who manages dependencies.
6. How do you test the performance and accessibility targets? You want tool names and a point in the schedule.
7. What happens in the 12 months after launch? Maintenance scope, response times, cost.
8. Who will actually work on this? Is the team in the sales meeting the team that builds the site?

For the full evaluation framework, see our 10 criteria for choosing a software development company — the same criteria apply to design projects.

How to Compare Proposals After the Brief Goes Out

When three proposals land on the same brief, read the line items rather than the totals. The table below gives you a comparison skeleton.

Normalise before you compare. Copy every proposal's line items into one sheet, mark what appears in one quote but not another, and ask for a price on the missing items. After that step the cheapest proposal often stops being the cheapest.

For the baseline of what belongs in a commercial site, work through the 12 criteria for a corporate website. Add the launch checklist to the back of your brief as well: the SEO launch checklist catches the items teams skip on go-live day. The design-side SEO work sits in SEO-friendly web design, and the device side in our responsive design guide.

Frequently Asked Questions

How long should a website design brief be?

Two to four pages is enough. When scope gets complex, move the detail into attachments: URL lists, category trees, brand guidelines, integration documentation. Keep the main document short, because the project manager opens it in every meeting.

Do I have to share my budget in the brief?

You are not obliged to, but a range works in your favour. Without one, the agency prices its standard package and the scope rarely matches your need. Give a lower and upper band, and the agency tells you what fits inside it and what moves to a second phase.

Can the agency write the brief for me?

Yes, and for many agencies that discovery step is a paid service. Watch two things: agree the price upfront, and state in writing that the resulting document belongs to you. Keep the right to take the same brief to other agencies, and ask for it as a website design brief rather than a slide deck.

Is it fair to send the same brief to several agencies?

Yes. One condition: send every agency the identical document and tell each of them how many teams you are talking to. Different documents make the comparison meaningless. Give everyone the same deadline as well.

What is the difference between a brief and a specification?

The brief states the business goal and the constraints; the specification defines the technical solution. You write the brief, the agency usually writes the specification and you approve it. On small projects the two merge into one document.

Should the brief go into the contract?

Yes. When a scope argument starts, both sides should be reading the same text. Keep two annexes — "Annex 1: Brief" and "Annex 2: Proposal scope" — so the origin of every requirement stays visible.

Can I change the brief after sending it?

Change it, but version it and circulate the change in writing. A heading like "Website design brief v2 — 18 March" makes clear which version a proposal answers. Additions that arrive after the quote stage get priced as extra work.

I have never run a website project. Where do I start?

Settle your business goal and your budget band first, then fill in the ten blocks above. To see the whole process end to end, follow the roadmap in getting a website for your business.

Writing a brief is the cheapest high-leverage step in the whole project. Two pages drafted in an afternoon remove the scope argument you would otherwise have in month three, and they put every quote you receive on the same footing. Leaving a line blank with "we don't know" is information too — a good agency starts exactly there.

Once your template is filled in and you are ready for quotes, review the scope on our web design service page and get in touch — send us the brief and we will tell you what is missing in the first call.