Up to part V, and what’s that bleep-bleep-bleep sound? That’s right, it’s the “vital post” alarm going off. You could have skipped the earlier posts if you already had a fairly good idea of what you want your site to do and who you want to do it, but this post should apply to everyone.
Writing a decent brief is probably the most important part of the web build process. Designers and developers – free-thinkers though they are – need to know what it is you’re actually after. Leave too much room for interpretation and you’ll end up with something which only just skims the edges of what you’ve got in your head. It’s also how prices get estimated and agreed, so to get a realistic idea of what it’s going to cost, you need a good brief.
There are several ways to write a good brief. If you’ve got the time and/or money, a project manager with web experience is probably best. They’ll sit down with you and talk about what you want to achieve from your site, your budget, what ongoing resources (time, mostly) you can commit to the site and so on. The agency you use may have a project manager to work with, and they’ll also sit down with you and discuss the brief first. If you’re managing the project yourself, it can be a good idea to chat with a friend about what you think the site should do and how it should feel.
Whatever route you go down, here’s how the design brief is written. Next time we’ll look at briefing a developer and creating a functional specification.
Get the principles
Before meeting with your project manager or agency for the first time (or even if you’ll be writing the brief yourself) start by making a mood board. At its simplest, this is an email with a load of links to sites you like. You could go as far as using something like PowerPoint (I use OmniGraffle on the Mac) or a big sheet of card. The principle is the same: gather examples of websites, colours, magazines, pictures and words which represent the things your site should be and do. Stick them on your card, take screenshots and paste them into PowerPoint, or email the links. If you’re working with a web architect or usability expert, you should work with them at this point as well, and include wireframes on your moodboards.
Now write down what you want the site to do. Keep it top-level at the moment – don’t try to think about the technical details. So, for example, for this site:
- There will be several pages of content on the site which explain what we do. The content won’t change on these very often.
- There will be a blog on the site. We will write posts hopefully every week. There will only be one author on the blog for the foreseeable future.
- There will be a contact page with an email form (which sends to my email address), as well as a map of our office location, telephone number and other contact details.
- The site will display the latest tweet from our Twitter stream.
- The site will include a store for buying downloads.
- The site will also provide WordPress plugins. Each plugin requires an introductory page, frequently asked questions, installation instructions and a download. These may change regularly as new versions are released.
That’s it… there are, of course, extra features on the site, but these came after brainstorming with the designer I worked with. At this stage you’ll meet with your project manager, designer or developer and talk about what you want, and they’ll help you clarify some of the details of these points, and maybe suggest extra features – your designer, especially.
Write a full brief
So at this stage in building this site I met with Mario, the designer, and we had a lovely cup of coffee and chatted about what the site would do. Mario suggested that the home page would look good with a big, sliding feature panel, and I agreed – and thought that this should be something I should be able to change using WordPress, not by having to code it fresh each time. We also agreed that the blog – while an important part of the site – shouldn’t detract from the most important part, selling services (and plugins).
From here, we were able to go ahead with the design of the site – we didn’t do a full written brief in this instance, because I work with Mario a lot and I trusted him to do what we’d discussed, and also because I was building the site myself and therefore cost wasn’t really an issue – it was only my time. We also skipped mood boards as we were starting from an existing design with brand, colours and imagery.
For you, however, now is the time to create a design brief. Here’s what to include, and some examples of what I’d do for this site:
- Introduction – write this last. Summarise what you’re after.
“This brief outlines the requirements for the www.maltpress.co.uk website. The site will be built in WordPress by Adam Maltpress [include your developer’s details at this stage so the designer can check technical details] and will include x, y and z [give an overview of the features].”
- Look and feel – if you have an existing brand, include examples of your current logo, colours, and any brand guidelines you have. Otherwise, try to summarise your brand and how you see this being presented visually.
“The Maltpress brand is about building content-rich websites which are easy to manage. Although we work in WordPress a lot, we’d rather the site show how much further we can go than just blog templates – WordPress can do anything, and we can do anything with it, so avoid obvious references to the WordPress brand. Writing is the root of what we do and how the business started, and we’d like this reflected as much as possible. We enjoy our work and have a real sense of fun in what we do, with a tongue-in-cheek approach reflected by the use of retro, geeky black and white imagery from Flickr’s Commons. We would like to avoid any overtly technical imagery on the site so as not to alienate non-technical customers. The existing colour pallette is based around hex #29241E for backgrounds, #D3D0A7 for text, and #ffffff for links.”
- What needs to be on each page? Check back against your list (above) of the things the site should do. List what needs to be on every page, and what will have its own page, and what needs to be on those.
“Every page will include a footer with phone number, email address, and other contact details. Main navigation will be on every page, and some pages will also include sub navigation. The site will feature a search box on every page as well as a shopping cart showing number of products in it. The Twitter feed will be shown on every page. Blog pages will show comments, and each comment will show the commenter’s image. The blog listing page will show just title, date and excerpt. The contact page will include a form and a map.”
- Outputs – what are you expecting from the designer? You should already have discussed this to get an indicative quote, but reitterate it here – your brief may not be a legally binding document like a true contract, but if you don’t draw up a formal, signed contract then it is a big part of protecting what you’re getting and what you’re paying for it. You should also check with your developer what they’re expecting to get – most will want layered PSD files, but check any further formatting requirements (ungrouped layers is a common request). You’ll need to specify how many pages you want designed – a home and sub-page layout should be enough, but if there are particular pages with special functionality, layout or importance, like store pages or forms, you may want these designed – otherwise your developer will have to interpret and create these pages from your home page design. Look back at your basic “how the site works” for any details here. If the design comes in under budget, consider getting more page templates designed – your contact page, blog comments, that kind of thing.
“We would expect to see an initial round of three concepts [these may be reasonably rough around the edges] from which one will be chosen for further development. After three rounds of amends on the chosen design, the final design will be presented as layered PSD files with fonts supplied as separate files. The final design will be delivered as a home page and one content page, showing rollover state of one button and one link. [rollover states are how things look when you mouse over them – most of the time it’s obvious, but you may want to ask your designer to show these. Menus are especially important, in particular where they’ll have drop-downs]“
- Restrictions – you may want to reiterate restrictions from your brand guidelines here, or you may have other restrictions to put in place… for example, your wireframes or guidance from your UI expert. Bear in mind costs of things like fonts, imagery and so on…
“The design should not use any fonts which require licensing for web embedding [if you don’t have any existing design, this is a good clause to include to save yourself a bit of time and money later…]. Imagery used should be royalty free and available for use commercially on the web without ongoing costs. The site should stick as closely as possible to provided wireframes. Button/icons for download, contact and shopping cart will also be required.”
- Inspiration – include a list of links to sites you like the look of, send your mood board, and chat to the designer about things you like, visually… they might not necessarily become part of the design, but they’ll give a good idea of your aesthetic ideals.
“We like retro (50’s and 60’s) Americana – take a look at I am So Retro for more. Cold War era architecture, Roman statuary, William Blake and black and white portrait photography are also great. Beautiful sites we like include Verle’s design site, Campaign Monitor, and Xero.”
With all that, your designer will now confirm costs – you may need to sacrifice a round of changes or initial design variation to get the cost down, depending on your budget. You can look at anything from £300 to £1500 for website design depending on the number of iterations, what you’re starting from, payment schedule, how well you know the designer… as an example, this site’s design – from an existing design needing an update, including three possibilities, three rounds of amends, design supplied as home page only (but with 4 slider image iterations which added some time) and quite a bit of extra input on structuring the site and how the home page should work – would cost in the region of £5-600 ex VAT, but may come in cheaper with a good relationship with the designer or if it’s an agency who’ll also do the building of the site – because things get easier to manage in that situation.
Next time, briefing developers… in the mean time, if you’re a designer, I’d love your feedback – anything else you want to see in the brief? Any examples of the best and worst briefs you’ve ever had? What else do I need to mention?
Back to blog