Technique Gallery - Designing a Web Site - approaching the Design Brief
I'm sure you have heard people say: Failing to Plan is Planning to Fail. I often hate these sayings but they carry so much truth. I have seen many clients fail miserably with web sites because they didn't take the time to understand what they wanted from their site and had no idea how to bring things together and build a cohesive whole.
Having a strong plan can save you a lot of stumbling around in the dark and making costly mistakes. Once you have a good understanding why you need a web site and who should be responsible for it the next step is a strong plan. This plan is generally called the Design Brief. This forms the skeleton that the graphic artists, coders and other web propellerheads use to build your site. Without a good brief all these people will scuttle around like confused wind up toys with little else to do but try to appear clever (on your dollar no less).
I know it can seem tempting to think, "Well I am paying these clowns to do it and they should just go away and do it without needing me to do anything at all." Um, ok. I hear the scuttling of toys trying to be clever and the sucking sound of money going down the drain. This scenario ends in tears on both sides. Please don't do it. There is a reason that Chinese Whispers and Mind Reading are considered party tricks and not business tools.
How To Approach a Design Brief?
| Building anything starts with asking questions so really a design brief is a lot of answers that define what the result is going to be. A good brief should look something like: |
|
|
Part 1 - The Company |
Company Name |
So Accounting can write it on the client folder | ||||||||
| A.B.N. | Tax Number id for Australia - can't order .com.au domains without it | |||||||||
|
Contact Person |
Generally the person who will manage the site on your end | |||||||||
| Phone No | ummm | |||||||||
|
Address |
The designer may want to visit you (that and Accounting will need to send you invoices) | |||||||||
| Site Management | Who will insert initial Content | Many companies offer this as a service. My personal opinion is that by the time you have developed your content to the point that it is ready to go into the site, if you use a CMS (which I think you should) you might as well do it yourself. It saves you money and builds your skills for when you do manage your own site. | ||||||||
| Who will manage the site after that | This is the person who will be responsible for managing content on a day to day basis | |||||||||
| Part 2 - Web Details | URL | http://www.yourcompany.com | ||||||||
| Current Domain Host | if you are already hosted for an existing web site | |||||||||
| Who will handle Email | existing email host or being moved | |||||||||
| Email Addresses Required (list all current & new) |
You will either want to leave email hosting as it is or move it. Either way let us know exactly what addesses you have and will want set up. | |||||||||
| Part 3 - Timing | Project Start | Please allow plenty of time from start to finish, be conservative. I am a big believer in allowing Murphy his due in every project. That buffer may not get used but if you haven't allowed for it then you can be in a real flap. | ||||||||
| Populate Content | If content is already built this can go quickly but if you need to develop it allow plenty of time here. The larger the project the more time you must allow. | |||||||||
| Test | It is vital that you test things thoroughly yourself. Even though a good developer will test, they may not find all bugs. Plus even the best of us spelks badelee. | |||||||||
| Go Live | It can take several days to complete the go-live process | |||||||||
| Public Launch | The day that the public can expect to see your site. You can always hide behind a cover page if you don't want people peeking in advance. | |||||||||
| Budget | What is your budget for this project | Please be honest. People approach me all the time and say they want something that would cost a Ferrari to build and when I ask, "What is your Budget?" they get evasive. This is not confidence inspiring. If I know you have $5000 for this Project I may be able to suggest alternate ways of achieving it. You must know what you have to spend before you try to do anything. No true professional will 'run you up a flagpole' - playing games yourself will likely land you up one. | ||||||||
| Part 4 - Products |
Products & Services |
Let the designer know exactly what you do in order of importance to the customer. If you are famous for making beach balls (finally the picture makes sense) then they should go first so people don't land and get confused. | ||||||||
| Buyer Demographics | Ages (eg. 12-18 & 35-50) | Please don't just say 3 to 80 as I bet your main customer base is mostly around 1 or 2 definite age ranges. | ||||||||
| Sex | Without trying to offend anyone, men and women can tend to want to see different things. | |||||||||
| Income range | People of different socio-economic backgrounds can tend to have different expectations and behave differently. People like to identify with people they percieve as similar to themselves. | |||||||||
| Other Defining characteristics or habits common to your customers |
Remember that you want to get their cash so the better you understand and explain their motives the more you can make them happy. | |||||||||
| Competitors | List Competitors and their web sites or other marketing |
You may be amazed when you look at you competitors online. They may out-gun you or you may well find that they have left a gaping hole you can fill. Silly them. | ||||||||
| Part 5 - Logo & Styles | Existing Logo (or need one) | Please supply this in a high quality format. If your current logo is looking tired it may take the gloss off your shiny new site. | ||||||||
| Style Guide | If you have an existing style guide, that saves some work for all. A style guide ensures brand consistancy. A McDonalds store looks like a McDonalds store, looks like a... | |||||||||
| Colours |
These often follow from your logo. Every project (or part of it) should have defined colors - not too many but a few that compliment and set a tone. Supplying PMS, CMY or Hex is helpful for accuracy. | |||||||||
|
Fonts & Sizes (pt or px) |
There are 5 safe web fonts Ariel, Tahoma, Verdana, Trebuchet, Georgia. That can seem a bit of an annoyance but these are the fonts that every computer in the known universe should have. If you call another fancy font that a user doesn't have you may actually be showing them the dreaded Times New Roman. The horror! If you have set or desired sizes also let us know in Points or Pixels (different size formats). | |||||||||
| Look and Feel | Descriptive Words (eg. Clean & Open or Dark, Hard, Smooth) |
A few words to describe how the site should look and feel to the user. Our beach ball company might say things like, Bright, Sunny, Cheery, Exciting, Busy, Fun as these are emotions that people who go to the beach to play with a big plastic sack of air tend to want to feel. | ||||||||
| What does the site need to achieve |
What do you want the user to feel or do on your site? I bet the beach ball company want people to either purchase online right now or to go to a shop and ask for them by name. This is the ultimate aim of the site not the details, they get answered later. | |||||||||
| Sites you like and why |
These sites can be from any industry, they help you to let us see what you want. It is a lot easier to show things than to explain stuff. Just make sure the designer knows what part you like and why. | |||||||||
| Key Images supply product and hero images |
If you have images then please supply them early. The images that you use say a lot (like the image at the top of the page - makes you want to go to the beach with a new ball I bet). If you have no images a visit to the truly excellent www.istockphoto.com is a great idea. | |||||||||
| Part 6 - Navigation | Location |
| ||||||||
| Navigation Tree (generally: Home, Products, Portfolio, About Us, Contact Us) |
So we have establised that often "less is more". I think it generally best to put the Nav items in the order that users will want them. Generally a user when they first land will want to know how you can help them so Products and Portfolio should be up front. Once they like the look of your pudding then they will want to consider the cut of your jib on About Us. Contact Us last on the right is a safe bet as people expect it to be there. Have a look at a sample Nav Tree here | |||||||||
| Comments |
Anything else you need to tell the designer about the look or overall functionality of your site not covered above. Custom development work appears later in the brief. | |||||||||
| Part 7 - Required Features | What will the user be required or want to do on the site | Stop and think about what your users are going to want to achieve when visiting your site, also if there are any specific things you need them to do. | ||||||||
| Do you need any specific features (incl. Custom Code Development) |
Will you need Log-In areas or any other special functions? If you do require custom database development then please understand that this will not be as cheap as a packet of chewing gum. Many companies offer modules that offer common functionality for a very reasonable cost. Use these if you can. Be sure to have a very specific understanding of what you need and why you need it. Databases are very literal so your brief has to be very accurate to save tears all round. A good developer will quote on your brief and build exactly that. If you have got your brief wrong or changed your mind the extra work will be at your cost. Walk the developer through what you want to have happen. A set of storyboards (like they do for movies) can help a lot here - just be careful of getting too attached to your ideas in case they are not as good as you think they are. A good developer will use their experience to help you to design custom functions in a cost effective manner. | |||||||||
| Part 8 - Signature | Signature of Client | |||||||||
| Date |
As you can see there are a few things to consider before the artist puts mouse to Photoshop. Just take the questions a bit at a time. The easy ones are first so that will make the process seem shorter. Above all please don't make a dry, soulless brief - unless of course you are government department then "unexciting" or "trying to look hip" are your main keywords.
If you haven't already realised, it is a really good idea to complete at least a preliminary brief before even approaching a web design company. Any decent developer will ask you many of these questions straight-up as they try to assess if you are a good fit for their business and for that inevitabe moment when you ask "How Much?" We can't quote if we don't know exactly what we need to do. Quotes can take a long time to develop so if you help out, the salesman will go a lot quicker.
If you have any questions or want some assistance with creating your Design Brief please don't hesitate to contact one of us here at iSmart.
iSmart Software
Australia - United Kingdom - Ireland @ iSmartsoftware 2009. All rights reseverd.
