Table of contents
So, you’re in the market for a new website? Congratulations! It’s a sound investment and one that can help your business grow if done right. But before you hire your designer and put them to work, it’s important to provide them with as much information as possible, especially if you have a vision of how the site will look and feel.
Creating a website can be a daunting and time-consuming task. You have to decide on what content to include, create all your copy (written text), get all your images and other media ready, design the site, make sure it’s responsive, make sure it’s conforming to SEO best practices…the list goes on! But don’t worry, we’re here to help you every step of the way and advise on how to write a design brief and provide your new website assets.
This blog post outlines what you should include in your website design page brief, along with examples and a website design brief template for you to download.
And we’ll also talk about the web design assets that you need to provide your designers to create your new website. And how to provide them.
Trust us, spending a little time on this ahead of jumping straight into the design makes the process smoother for both you and your designer!
Web design brief
What is a website design brief?
A website design brief is a document that outlines the specific requirements and expectations for your new website. It’s a very important tool for both you and your web designer or design agency. Web design briefs help you articulate your needs and wants for your website, and they give your web designer or design agency guidance to follow during the design process. A well-crafted website design brief will result in a better end product that more closely meets your expectations.
Who makes the website design brief?
The website design brief should be created by you, the client. However, if you’re working with a web designer or design agency, they may have a website brief template or website design brief example that they prefer you use, follow or that they can help you fill out. You may download and use the one we have provided here, if you like, to get started.
Why should I write a design brief?
Whether you want to have a website designed for your business or your personal use, it is important to provide your website designer or design agency with a brief. The brief should help the designer understand your needs and what type of website you are looking for.
Creating a brief for website design is important for a few reasons:
- It saves time by helping you figure out what you want before starting the project.
- It helps prevent scope creep by defining the scope of work upfront.
- It ensures that both you and your web designer or design agency are on the same page from the start, which can save a lot of time and frustration later on.
- It can help keep costs down by avoiding changes that would require more work later on.
When should I create the website design brief?
The website design brief should be created as soon as possible, and definitely before starting design work on the project. This will give you enough time to gather all of the information you need and provide it to your designer.
What should a website design brief include?
Your website design brief should include all of the following:
- Background information about your business
- Website goals and objectives
- Who will be responsible for creating and updating content
- What type of design you are looking for (e.g., minimalist, modern, traditional, retro, vibrant, etc.)
- Any information or details surrounding branding specifics
- Any specific features or functionality you would like included
- Any specific features or functionality that the site should NOT include
- Your budget and timeline
- Site page structure and/or sitemap example
- Any specific page brief design
Depending on your level of experience with websites and web design, some of this information may be more relevant to you than others. But don’t worry, we’ll go over each item in a little more detail below.
Business background information
Include some basic information about your company such as:
- What is your industry?
- How long have you been in business?
- Your company’s mission statement or vision
- Who your customers are and how you should market your services or products to them
This information is important for your designer to get a sense of who you are as a business and help them create a design that reflects your brand and resonates with your ideal clients.
Website goals and objectives
You should explain the overall aims of the website. For example, will the site be promoting and selling products or services? Is it for providing information about your company or team? Are you looking to increase traffic to your site? Convert more visitors into customers? Gather leads through a contact form? Or is it something else entirely?
Knowing this upfront helps your designer better understand how to structure and design the site and determine which features would be most useful.
Who is responsible for creating and updating content?
This is especially important if you don’t have in-house design or web development experience. It outlines who is responsible for creating and updating all the website’s written, visual, and media content. Collectively we call all of this web design content ‘assets.’
If you’re not sure, it’s best to err on the side of caution and include everyone who might be involved in any way with content creation. That way, there won’t be any surprises down the road, and everyone will be clear on their responsibilities from the start.
Your designer or design agency needs to understand who has the final decision on what to include or not. Everyone must be aligned on how the design will pan out. Therefore, it is also important for design teams to understand who has the authority over any final decision within an organization.
You should channel requests for information, materials, and assets and supply them through one individual to act like a champion on behalf of your organization and your internal web design project team. This individual should coordinate with the team internal to your organization and have a voice on the design outcome for the project. This individual should also seek sign-off on any information or materials from the person who holds the authority or final decision within the organization.
When multiple people within an organization have an input, it’s crucial that any information, materials, or assets fed to the designer or design agency are correct and agreed on. We must try to avoid having a designer conduct design time on a page or portion of the website to find out later that this was never fully agreed or signed off internally within the organization. The reason is that abandoned designer time spent in this way can be costly to the client or organization. If a designer is instructed to work on something that then later has to be abandoned or a change of direction is required, the abandoned design time is, in almost all cases, billable to the organization or client.
What type of design are you looking for?
This is where you get to be specific about the look and feel of your new website. Do you want a minimalist site with clean lines and lots of white space? A modern design with bold colors and typography? A traditional site with lots of images and a classic layout? Have you seen a theme you like or even another website you like the look of?
Your designer needs this information upfront to get started on the initial concepts, so be as specific as possible. If you’re not sure what you want, that’s okay too! Your designer can help you decide on a style that’s right for your business.
You should include any specific branding requirements that you may have, including things like your company’s color palette, fonts, or logo. If you already have these materials prepared, be sure to include them with your brief so your designer can use them as a reference point.
If you’re still working on finalizing your brand identity, don’t worry! Your designer can help you with that too.
Features and functionality
This is where you outline any specific features or functionality that you would like to be included on your website, including things like a custom contact form, an e-commerce shopping cart, a blog, an email opt-in, or a photo gallery.
If certain features are essential to you, make sure to list them here. But remember, not every website needs all the bells and whistles. So if any functions aren’t necessary for your business, let your designer know so they can be left out of the design.
If you’re not sure what you need, your designer can help you determine which features would be most beneficial for your business.
Budget and timeline
Probably the most important part of the brief. It outlines the expected timeline for the project from start to finish and how much you have to spend. Again, be as specific as possible, including deadlines for each stage of the process. Understanding deadlines helps keep everyone on track and avoids delays down the line.
Be realistic about your budget, and remember that a website is an investment. Therefore, it’s important to think about the long-term benefits a well-designed site can bring to your business.
If you’re not sure how much your project should cost, ask your designer for advice. They’ll be able to give you an estimate based on the specific requirements of your project.
Site page structure and/or sitemap
Provide your designer or design agency with an overview of the pages they should include on your website. For example, if you have an existing site, you could provide an example of a sitemap or even a simple bulleted list or sketch of how you would like your new website to look. This helps your designer better understand the overall structure and layout of your site.
If you’re not sure how many pages your website needs, that’s okay too! Your designer can help you determine which pages are necessary for your business.
Including all of this information in your brief helps to ensure that everyone involved is on the same page and that your website design project runs smoothly from start to finish. And don’t forget, if you need any help putting together your brief, your designer will be happy to offer guidance.
Specific page design brief
This section is where you have any specific design requirements for a given page. It might be that you know how many sections the page should have and what functions or assets it should contain. A page-specific brief may contain references to certain design assets and how to use them. A page design brief is a more specific document focussing on a singular page in the website.
What is a sitemap?
A sitemap is a list of all the pages on your website. We can use it to plan the structure and hierarchy of your site before any design or development work begins. In addition, sitemaps can be used as a reference point during the design process to ensure that all the required pages are included in the final website.
When we talk about sitemaps on a website, there are two types of files: XML sitemaps and HTML sitemaps.
XML sitemaps are designed for search engines and contain all the technical information about your website (like URL, other metadata, etc.). HTML sitemaps are designed for humans and usually contain a simplified view of your website’s structure.
Both XML and HTML sitemaps are important for a well-designed website. XML sitemaps help search engines index your site so people can find it when they’re searching for keywords related to your business. HTML sitemaps help visitors navigate your site and find the information they’re looking for.
How to find the sitemap of a website
XML sitemaps are usually submitted to Google Search Console to know how to index your site. So that would be the first place to check. Failing that, it depends on what platform your site runs on and also how it may have been created.
Another place you can check, especially true for WordPress websites, is to have a look to see if you have any SEO plugins installed. SEO plugins usually build an XML sitemap as part of their service offering.
If you are still unable to find the sitemap, then take a look at this good article – how to find your sitemap, which goes into a little more detail and can assist in helping you find it.
What are website design assets?
A design asset can include copy (your text), photos, videos, icons, infographics, screenshots, images, logos, and any other files to help the designer create an accurate rendering of your desired website and what you would like to appear on the page. Providing this information up front saves time and helps ensure that you end up with the envisioned website.
Why do I have to provide or produce assets for the website?
By providing assets to your designer, you are essentially giving them a roadmap for your website. The assets should support and work with the design brief for the site or specific pages. Doing this ensures that everyone is on the same page from the start and helps avoid any miscommunication or wasted time down the road.
In addition, it allows your designer to carefully calculate and design the page layout with consideration given to certain section layouts, columns, symmetry, balance, proximity, and white space. Also, responsive design so that the layouts render correctly on all devices. A designer needs to understand what assets are to be used before planning a layout or design section.
Consider the number of words in your copy. If you had a designer build a page with no brief or assets provided, they might design sections for, let’s say, 400 words and two images to break up the white space. If you then decide you have 2000 words of text, the designer must almost start the design from scratch. The designer would also require new images, sections, or design elements to break up the text and information to make for a better user experience.
So by providing the assets initially, your designer has a better idea of what layouts to consider knowing what assets they have to work with.
How should I provide my site or page assets?
When you start to gather all of your site assets, your design brief, information, and any materials relevant to the site’s design, it’s very handy to use cloud file-sharing or collaboration tools with your designer. Google Drive, Onedrive, or Dropbox are three examples that work very well for this and allow for organizing files and data into folders much like you might have on your computer hard disk. It’s also very easy to share files and folders and add additional collaborators later if required.
Your designer may provide you with instructions on what tools to use along with what assets you should be thinking about providing for each page, and they should also give you instructions on correct formats or files to use for the assets you provide.
Some of the most common types of design asset that you will likely need to think about might include:
This is the text or written words that appear on your web page. Usually, the copy can be provided as a Microsoft Word or Google doc file. The copy should follow the correct web copy hierarchy and be laid out using H1, H2, H3, etc., headings. And for each heading, usually a paragraph or a few of the text beneath it. Remember, keep the context of the copy relevant to the heading or subheading and always consider readability for your audience.
Nobody likes to be greeted with a wall of text thousands and thousands of lines long. So break the text up using smaller paragraphs, ordered or unordered lists, and use graphics and other media to complement your writing.
Images are graphic assets that usually begin with the top header image or ‘Hero’ image. Your images can also include logos, photos, animations, icons, backgrounds, infographics, etc. It would be best if you always aimed to use high-quality images and the smallest file size possible without compromising the quality of the image.
Your website must use high-quality images to display your brand and demonstrate professionalism. However, it’s also important that your pages load quickly and page load speed is not compromised due to excessive image filesizes. Different file types help you achieve the best results for the website image requirements.
Your web designer should offer some advice or guidance on optimizing the images or filetypes you provide.
Videos can be quite similar to images in that there are a few video file format options available, along with compression and quality settings that you can also make. They are similar in that they need to be optimized for the best quality and smallest possible filesizes to prevent excessive page load times. It is possible to have a video file and player loaded from the website, or it is also possible to embed videos from 3rd party sources. For example, your website may have a page that loads an embedded youtube video.
Icons are essentially a type of image. But we’ve given this its section here because it’s often one of the most difficult and overlooked assets to provide or obtain if you are not familiar with the provisioning process. So we have written a few paragraphs on how best to approach any icon provisioning that you may want or need to undertake.
Most designers or agencies should have a few icon sets or libraries that you can use. They may be included as part of a layout or theme. Ask your designers if there are any icon sets from which you can choose icons.
However, suppose you want something more exclusive, perhaps in a specific style? This is where icon provisioning can get very involved. Many websites offer icons or icon design as a service.
When a website uses icons to complement the navigation or service/product information on a page, it often uses more than one icon. So the icons in use have to have a similar style or be from a complementing set to look right and represent your brand. Icons from different authors or websites may not work so well together on a page.
So it can be a very time-consuming process provisioning icons for use on a website. Sometimes it may be best to hire a designer or icon author to create an entire icon set to ensure they all use the same styles and work well together on the page. Icon design can be a little bit like logo design in that it takes a few revisions or iterations to get right. However, when you have a logo designed, it’s usually just one logo. Imagine how much design-time might be required if you have 6 or 12 icons to create or provision?
So if you know you will want custom-made icons or icon designs, it’s best to start this process at the earliest opportunity to avoid holdups or delays on the production or launch of your website.
Your web designer or agency may be able to assist with finding or procuring icon sets for an additional fee. But remember, you’ll be paying for their time on a per hourly rate, so it may be costly if this is not a quick process. In addition, they may be able to point you in the right direction for 3rd party designers who can create you a unique and custom set of icons for your website project.
You probably have an idea of the keywords you want to rank. But did you know that those keywords should be part of your design assets? That’s right – for us to help you rank on search engines, we need to know what keywords you’re targeting.
You should provide your designers with any target keywords you are looking to target on the page. Usually, a page targets at least one keyword. We call this the primary target keyword. This keyword usually appears in the title and meta and can appear in the page name or page structure. A page may contain multiple target keywords and the primary target keyword – we call these additional target keywords.
Title and meta tags
Title tags are the titles that appear in a web browser’s tab, and search engines also use them to determine the content of a page. Your title tag should be no more than 60 characters long, and it should accurately reflect the content of your page.
Meta descriptions are brief snippets of text that appear under the title in search engine results pages (SERPs). They should summarize the content of your page in 160 characters or less, and they should compel users to click through to your site.
Call to action (CTA)
A call to action is usually a button or text on a web page that encourages the user to take action, such as buying a product or sign-up for a newsletter. A call to action design is important because it can influence how likely users are to take the desired action.
Therefore, calls to action should be easy to see, and clear language clarifies what happens when the user clicks them.
Some common types of calls to action include:
- Buy now buttons
- Subscription Forms
- Download buttons
- Call or email us buttons
- Links to product pages
A form is a way to collect information from your website visitors. This information can be anything from their name and email address to more detailed information like billing/shipping address, debit/credit card number, surveys, questionnaires, etc. Forms are essential for any website that wants to interact with its visitors in any way, shape, form or acquire data or feedback from the page visitors or users.
A custom-built form gives you control over the look and feel of the form layout. In addition, it allows you to specify certain conditions that need to be completed or provided in a specific format. You can also force-require a user to complete fields in the form before submitting it.
When designing your form, there are a few things you need to take into account:
- The type of information you want to collect from users
- How much information do you want to ask for at once?
- What layout is easiest for users to understand and complete?
- Will the form be used on a single page or multiple pages?
- Do you need any special features like conditional logic or file uploads?
It is possible to add or serve other files on your web page to visitors or users.
You might want to provide a few types of files on your web page: downloadable, embedded, and static. Each one has its unique benefits and drawbacks.
- Downloadable files are those that the user can save to their computer or device. They can be opened by any program that supports that particular file type. For example, a PDF document can be opened in Adobe Reader, while an MPP file can be opened in Microsoft Project.
- Embedded files are those that are inserted into the web page itself. They cannot be saved to the user’s computer or device; instead, they are displayed directly in the browser window. Embedded files usually have smaller file sizes than downloadable files, making them quicker to download and use. However, they can only be viewed by people using a compatible web browser or operating system.
- Static files are stored on your web server but not embedded in the page itself. They are retrieved each time a user requests them, so they have longer download times than embedded or downloadable files. However, any visitor can use them on your website, regardless of their web browser or operating system.
Which type of file is best for you depends on your specific needs. If you want your users to save the file to their computer or device, then a downloadable file is the way to go. On the other hand, if you want the file to be displayed directly in the browser window, an embedded file is better. And if you want the file to be available to all visitors, regardless of their web browser or operating system, then a static file is the best option.
Suppose you have any specific requirements, it’s important to advise your web designer or agency. Or, if you are not sure which to use, speak with your designer to discuss the requirements, and they can help and advise on the best method or solution.
Apps / Tools
Sometimes you may be asking or providing information to your visitors or users to use a 3rd party app or tool. By providing clear and concise instructions on how to access the various tools and apps you suggest, you make it easy for them to use the tools or apps you suggest.
When you’re providing your web page assets for 3rd party tools or apps, make sure to include the following:
- The name of the app or tool
- The version of the app or tool
- A link to where users can download the app or tool
- Instructions on how to use, or any other necessary information
For example, here’s how we would provide our assets for contacting us through skype:
- Name of app or tool: Skype
- Version of app or tool: Latest version
- Link to where users can download the app or tool: Download Skype here, or buttons to the Apple App Store or Google play store
- Any other necessary information: Make sure you have a working webcam and microphone before contacting us! Run through the Echo / Sound test service first to ensure your hardware is set up correctly
If you are linking to any 3rd party sites or applications, you should ensure that you have thoroughly tested the links provided and the tools or apps you are linking. Remember, also, you may need to ensure these links are kept current and up-to-date as time goes by and new versions of the app or tool are released.
There are a few key things to keep in mind when it comes to navigation and menus. First, think about what information needs to be displayed in the menu. Of course, this varies depending on the type of website you have, but some common examples include pages, categories, blog post articles, contact information, social media links, etc.
When it comes to providing navigation for your website, there are a few key things to keep in mind:
- Think about what information needs to be displayed in the menu.
- Consider how you want that information displayed (drop-down menu? Horizontal Menu? Sidebar widget?)
- Make sure your menu links are formatted correctly and pointing to the right URLs.
- If you have a lot of pages or categories, consider using a bulleted list or organizational chart to help your designer or agency understand how everything is to be interconnected, making it easier to create a functional and visually appealing website.
Guidance and usage notes
It can sometimes be useful to your designer or agency if you can give some guidance notes on using the page assets you provide. For example, you may provide 1000 words of copy on the page along with 12 images to choose. If your designer is just provided these assets and nothing else, they then have to decide how they will lay it out or use those assets.
Use guidance notes if you have any specific preferences or if the use of certain things should take priority over others. Try to make your guidance notes clear and stand out from the copy that the page is to use.
How should I structure my content hierarchy?
One important aspect of creating effective web content is to think about your content hierarchy. The hierarchy is how you organize and present your information, and it can be a helpful tool for both you as the writer and your readers. Also, search engines pay close attention to your content hierarchy to ensure you make the information as easy to read, find and follow as possible.
Why is page content hierarchy important? For one thing, it helps to ensure that your readers see and read the information that you want them to. That’s because when you have a clear hierarchy, readers can easily scan your content and pick out the most important points.
But page content hierarchy is also important because it can help you focus your thoughts better as you’re writing. Knowing what order you want to present your information in makes it easier to stay on track and avoid getting sidetracked by tangential thoughts.
So how can you create a good page content hierarchy? Here are a few tips:
- Start with an outline: This is especially helpful if you’re working on longer pieces of content. By starting with a brief outline of what you want to cover, you can ensure that you hit all the key points without getting bogged down in the details.
- Use headings and subheadings: Breaking your content up into smaller chunks can make it more digestible for readers – and it can also help you to organize your thoughts better. Headings and subheadings are a great way to do this.
- Follow the best practice guidelines for using headings tags:
- H1 tag – there should only ever be ONE H1 tag used on a page. And this should be for the main heading or title of the page or article. The H1 heading tag almost always appears at the top of the page.
- H2 tags – you can use as many H2 tags as you need to. H2 tags are useful for breaking up the content when a clear change of subject or point is being discussed.
- H3 tags – you can use as many H3 tags as you need. An H3 subheading may still belong to the overall parent topic or subject (or H2 tag).
- H4, H5, and H6 tags are also available for you to use if your article or page needs to go into different levels of depth.
- Use visual cues: In addition to using headings, you can also use other visual elements to help readers understand the hierarchy of your content. For instance, you might break the content into colored sections using bullet points, numbered lists, or different font sizes to highlight the most important parts of your text.
Another thing to consider is the most important part of your content. May you have heard of the term “above the fold”? The “fold” is the bottom of the screen where people scroll down to see more content. There are two terms you might hear web designers talking about when they discuss placement of content on a page:
- above the fold: The most important content on your page should be “above the fold” so that people don’t have to scroll down to find it.
- below the fold: Once people start scrolling, they’re more likely to keep going. So you can put less important content “below the fold.” Just make sure it’s still easy to find and navigate.
Another consideration should be given to where the fold might be. For example, on larger screens with higher resolutions, the fold will be considerably lower down on a page in comparison to, let’s say, a small displayed device such as a smartphone. So in responsive website design, the fold is not a fixed position, and consideration needs to be given to the range of devices in use.
By following these tips, you can create both content easy to read and easy to write. So take some time to think about the hierarchy of each page – it just might make a world of difference.
And dont worry, if you don’t know at this stage, what your hierarchy should be. Your designer should be able to help you with this and layout the page based on their experiences and what they know works best.
Web page design brief
What is a web page design brief?
Suppose a website design brief is a document that outlines the specific requirements and expectations for your entire new website. In that case, a page design brief is a document that outlines the specific requirements and expectations for a new singular web page. In other words, a web page design brief gives specific guidance and instruction to a web designer on how to design a specific page within the new site.
Web site brief vs web page brief
While the two documents are similar, they are also very different. The site brief sets the scene for the entire site. It might give certain information relating to branding or styling, which each page brief should also consider.
A good page brief should include guidance on how to use the assets provided within the context of the page they are provided for and for the entire site that they are to be hosted. So you could think of the site brief as the parent document setting out the rules and regulations for the entire site. At the same time, the page brief gives more specific instructions for that particular page but also toes the line for the parent site brief’s guidance and instruction.
What should my web page design brief include?
Your web page brief should essentially be a guide and instructions to your web designer on how to use the assets provided for that page. So if you have any specific instructions or requirements add them to this document.
Layout techniques and section considerations
Most website layouts and pages follow a layout design with various elements on the page that fall into one of three main sections:
The top of the page section usually contains any top navigation bar and logo, with menus. The header section usually contains the topmost image (hero image) for each page.
The body sections usually contain all the assets, information, and materials that are relevant just to that page. The body is usually the section of the page that contains all of the unique information.
Resources and tools
Below are several resources and tools that you may find useful for helping you understand best practices and offer some assistance on creating and collecting your website assets together, ready to hand over to your web designer or agency.
There are some tools available to assist you with providing the copy to your web designer or design agency. There are also several tools to help you deliver this in professional and user-ready formats.
The first tool you need is a good word processor application.
- Microsoft Word is the long-time Word processor of choice for many. However, it requires a suitable license or ongoing subscription for use for the installed version of it’s app. Or you can use it for free (online only)
- There are also open-source and free alternatives to Microsoft’s service offerings such as OpenOffice, or LibreOffice
- Google docs – A free and very popular alternative. This app can be run entirely from within a web browser and is very effective for collaborating and sharing documents with colleagues or other people who need to share work with the document.
Grammar and sentence checking
While most modern-day word processors can help with spell checking your copy and even go so far as to understand and offer some help with the grammar also, there are better tools out there to offer the slightly more polished version of the copy you produce:
For writer’s block
Sometimes even professional copywriters struggle to put pen to paper and get an article moving. Copywriting is an art, and not everyone is born with this gift. If hiring a copywriter is not for you, and you are adamant you are going to do it yourself, there are some options and tools to help you get the words flowing onto the page:
- Answer the public – If you are stuck for ideas to write about, why not try and answer the world’s most pressing questions?
- CopyAI – Use artificial intelligence to give your copywriting a leg-up.
- Jasper – Another AI copywriting platform with some awesome integrations to other tools mentioned here in this article.
It’s important to know which keywords your copy should be targeting. Fortunately, there are a few tools out there to help you with your keyword research and content strategy:
- SEMrush – One of the best SEO tools on the market. Keyword research and lots lots more.
- Ahrefs – Another great SEO tool and sturdy competitor in the marketplace.
- Moz Pro – Another great SEO tool and serious competitor in the SEO space.
- Surfer SEO – SEO meets keyword research meets content strategy meets AI. Wowsers! Add this integration to Jasper and you’ll be churning it out it no time!
Many tools and resources are available to help you provision images for your website. Here are some of our favorites:
- Adobe photoshop – THE most comprehensive photo and image editing software around.
- Canva – Stock photos and editing so easy, even Grannie can do it!
- Pexels – Free stock photo library
- Unsplash – Free stock photo library
- Pixabay – Free stock photo library
- Deposit photos – affordable stock photo library
- Shutterstock – arguably the most comprehensive and highest quality stock photo library available. But it’s not cheap.
Like images, there are also several good resources and tools for helping you create and edit videos for use on your website:
There are many sites that you can use to provision icons for your website. Here are some of our favorites: