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 5-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 the 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 doing.
It’s important to note that a creative brief is different to discovery. A creative brief is the document that results after discovery. You might use a web design questionnaire to interview your clients on what they need for their website, but this can count for nothing if you don’t take what you’ve learned and put it into an official brief everyone involved can agree on.
5 steps to developing a website design brief
1. Interview your client about their business
You obviously don’t just design websites based on the colours or themes that you like. As a designer, you also have good business sense. The more you can get to know the clients 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.
Save time with a web design questionnaire template
Coming up with a list of questions for discovery can be a lot of work, but when you use Content Snare, you can access our pre-set template of questions and save yourself loads of time.
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 colour 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.
Tip - To avoid the headache of trying to collect large files like images from clients over email, you can use Content Snare to collect branding guidelines, logo files, image assets, and copywriting direction all in one easy platform. Take the tour here.
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.
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:
1. 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.
2. The confirmed website goal
Listed in order of priority.
3. 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!
4. 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.
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).
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!
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!
Create your web design questionnaire
Before getting started on your brief, you can use Content Snare to collect all the information you need for clients for discovery. All you have to do is use our pre-set template and save yourself loads of time!