How to write a web design brief (plus free template)

Designing websites can be a rewarding experience. You get to play a key role in helping your clients represent their brand, provide better customer service, or convert more traffic to sales.

The website design process can also be such a soul-crushing experience if every time you put your designs in front of clients, they hate them!

To avoid these painful rejections, you need to create a comprehensive web design brief that clearly outlines expectations before you get started.

In this post, we’ll teach you a 7-step process on how to write a solid web design brief before you even open up Sketch or Figma. Follow these steps and you’ll be on your way to designing both beautiful and functional websites your clients will be itching to see go live!

What is a web design brief?

A web design brief is a crucial document that serves as a guide for your web design project. It states what your clients’ business does, what they hope to achieve with their new website design, their project timeline, and their budget so you know exactly what to deliver as your project scope.

Sometimes, the client takes responsibility for putting the brief together, but generally, project stakeholders get the most out of briefs when everyone involved collaborates on its development.

A web design brief can be one of the strongest project management tools that helps you stay on track and prevent scope creep. If you skip on putting together a detailed brief, you can:

• Experience tons of setbacks as you go through the website project. Lots of back and forth means it will only take longer to complete.
  
• Have to make endless revisions to your work, needing to bill the client for more than they were prepared for (especially if you’re a freelancer working on an hourly rate).
  
• End up designing a website that doesn’t even meet the client’s business goals.
  
• Take on way more work than you first agreed to do.

Our suggestion is to use a web design questionnaire to interview your clients on what they need for their website. Once done, it’s easy to take what you’ve learned and put it into an official brief everyone involved can agree on.

Steps to develop a website design brief

1. Interview your client about their business

You obviously don’t just design websites based on the colors or themes that you like. As a designer, you also have good business sense. The more you can get to know the client’s business, who they serve, and how they do it best, the better you’ll be able to map out their site and choose aesthetics that fit their brand.

Set aside some time to ask your client about their:

• Product/services offering
• Mission, vision, business objectives, and business goals
• Overall message they want to convey
• Target audience - their demographics, traits, and needs
• Competition - names and websites of these companies

Interviewing them in person and typing out notes on Microsoft Word is one way to do it, but a quicker and more convenient way is to send your clients a web design questionnaire. That way, when they answer it, you’ll have all the info you need in one place.

Here’s an example of how an in-depth web design questionnaire template should look like:

Source: Content Snare template library

2. Identify the primary goals of the website

Once you have all the details on your client’s business in place, it’s time to find out why the client needs the website done. This is such an important step that will determine how you will approach the project.

The client might have one or two goals in mind for their website. Ask your clients to list their website goals in order of priority so you have even more clarification.

Some examples of website goals are:

• Ranking well on Google (SEO)
• Increase brand awareness
• Provide an accessible experience
• Increase subscriptions/ sales
• Generate leads/ inquiries
• Provide a wealth of learning resources

By confirming goals from the start, you’ll be able to make more informed decisions around the design of each page and website function.

3. Confirm all specifications

You want to figure out both the technical and non technical specifications of the site right from the start to avoid scope creep and make sure you have all the tools and resources you need to get the job done.

First, you’ll want to confirm:

• Which pages of the website you’re building and how many there are (e.g. home page, about us page, services page)
  
• What content/elements each page will include (e.g. for the Team page, this will include photos of team members, a short bio, and links to their social media pages)
  
• The structure and intended sitemap of the website (e.g which pages will be in the main navigation and which will be buried in a menu. For example, you might have the Team page fall under the About section in the main navigation.)

Next, figure out the technical specifications. The client might need you to consider:

• How content should be managed (CMS)
• Accessibility requirements (e.g the website is usable by the blind or elderly)
• Industry-specific compliance requirements with regards to copy
• Integrations with other software the company uses
• eCommerce or payment facilities
• Requirements for web hosting location.

The client will also have a list of requirements to make sure that the website best represents their brand. This can mean:

• Using the required color palette
• Adherence to branding guidelines
• Matching the voice & tone of the company in the copy
• Inclusion of image assets / original photography
• Inclusion of other company assets (e.g logo, secondary branding images).

Confirming all these specifications will help you put together a complete and detailed list of project deliverables.

4. Help your client identify their preferred website aesthetics

Some clients are very design-savvy while others lack the design language to communicate what they like and what they don’t like. If your client lacks the design vocabulary to describe what they want in your website design, share this list of terms with them and ask them to take their picks.

• Modern
• Classic
• Minimal
• Complex
• Playful
• Serious
• Loud
• Subtle  
• Playful
• Artistic
• Mature
• Youthful
• Luxurious
• Abstract

If you want, you can go ahead and include this list of terms in your actual questionnaire. But an even better way to approach this would be to take the time to present your client with reference examples. This way, they can visualize their options.

Do some work to collect links of existing websites, show them to your client, and point out what elements make up these websites be it hero imagery, large typography, animated product videos or sliding image galleries. Have an open discussion to gather their feedback. This will help you narrow down their preferences and establish what elements are a want vs. a need.

When you ask for feedback, ask them what they like, as well as what they don’t like.

Ideally, you want to be getting feedback like this:

- “We like the use of CTAs spread throughout Hubspot’s website, but we’re not sure we love the graphic image on the homepage.”

- “We like the layout of content on Content Snare’s home page, but we don’t want our home page to be as lengthy.”

- “We like the animated videos on Grammarly’s website, but we’re not a fan of the abstract graphics in the back. We’d rather use our own photographs.”

Now you have some great insight into what works for the client and what won’t fly.

5. Based on your discovery, write your web design brief

With all the information you uncovered, it’s time to pick out the most important pieces to create your brief. Here’s what to include in your website design brief:

The most important details of the business
This might be the target audience, the products and services offered, and details about the market and competitors.

The confirmed website goal
Listed in order of priority.

List of deliverables including technical and non-technical specs
List out all the individual pages of the website you’ll be creating and relevant specifications for each page. Don’t leave anything out!

Design direction
Use descriptive language to state what type of design will be delivered. If you really want to be a rockstar, add an appendix to the brief with a mood board of ideas.

Timeline
Outline the agreed-on project schedule and list:

• Dates you’ll submit first drafts by
• How long you have to make revisions
• When you’ll be delivering the final design (the hard deadline).

Budget
Lastly, confirm the client’s budget and whether they’re paying you a fixed project fee or paying you per hour. Also specify whether they’ll be paying for revisions or if all of this is included.  

Lay out the numbers so there are no surprises at the end when you submit your invoice.

6. Present web design brief and gather feedback

Have a quick meeting to go over the first draft of your brief and confirm that the details are correct. The client will likely want to make some tweaks, provide additional details, or offer some new recommendations. 

That’s exactly why going through this step is so important. 

This step gives you a chance to make those adjustments that could have ended up wasting your time and energy further down the line. When you fix it all now, you spare yourself the hassle.

7. Incorporate changes and get client sign-off

Go ahead and incorporate these changes into the brief. Once you’ve made the changes, send the final brief through to them a second time asking for their official sign-off.

Now, everyone is on the same page and there won’t be any surprises. It’s time to start creating!

A customizable web design brief template

The following template will help you cover all critical aspects of the web design project. Bear in mind that you can (and should) modify and expand upon this based on specific client needs and project scope:

1. Project Overview

Project name 

Date

Client name

Client contact information

Project summary

2. Company information

Company name

Industry

Products/services

Mission statement

Target audience:

• Demographics
• Traits
• Needs

Competitors:

• Name
• Website
• Key Features

3. Website goals

Primary goals:

• Goal 1
• Goal 2
• Goal 3

Secondary goals:

• Goal 1
• Goal 2
• Goal 3

4. Technical specifications

Pages required:

• Home
• About Us
• Services
• Contact
• Others (let us know which ones)

Content requirements:

• Text
• Images
• Videos
• Downloads

Functionality:

• Content Management System (CMS)
• E-commerce
• Blog
• Contact forms
• Newsletter signup
• Integrations (e.g., CRM, social media)

Hosting and domain:

• Domain name
• Hosting provider

Compliance requirements:

• Industry-specific regulations
• GDPR compliance

5. Design specifications

Design preferences:

• Modern / Classic
• Minimal / Complex
• Playful / Serious
• Loud / Subtle
• Artistic / Corporate
• Luxurious / Budget-friendly

Color palette:

• Primary colors
• Secondary colors

Typography:

• Font families
• Font sizes

Branding guidelines:

• Logo
• Tagline
• Tone and voice

6. Project deliverables

Deliverables:

• Detailed list of all pages
• Design mockups
• Final designs
• Source files (e.g., PSD, AI)
• Other assets (e.g., logos, images)

7. Project timeline

Milestones dates:

• Project kick-off
• Initial mockups
• Client feedback
• Revised designs
• Final delivery

8. Budget and payment

Total budget

Payment terms:

• Upfront payment: [%]
• Milestone payments: [%]
• Final payment: [%]

If you’re a freelance designer, are there any other steps you take when developing your creative briefs? Let us know if we missed anything key in the comments!