Andrew Fox

This may seem obvious to many but here’s my take on the basic steps of designing a web site (or any other design project for that matter). I deal with clients a lot and usually project manage jobs as well as design so this process is very client focused and aims to get the best solution for the client and also help the designer with making decisions along the way.

1. Briefing – Find out what its all about.

It is important to gather as much information as possible at this stage so that you understand what the client wants. Meeting with the client is a good idea as it’s often easier to communicate face to face. It also helps to build a rapport.

Briefs are often given prior to meeting or sometimes it takes a meeting and some furious scribbling of notes to get everything down. Some clients don’t even know what they want so I often find myself writing my own brief and presenting it to the client for their approval.

However you do it, make sure you have the brief set in stone at the start so that both client and designer know what needs to be done.

2. Research – Make sure you understand what to do.

Market research, competitor analysis and research of your clients company, design trend research, design technology research: this is to make sure you understand everything about the project and the situation. Find out where other people/businesses are succeeding (or failing!) and learn from this.

If you don’t understand everything about your client and their market, you wont deliver and your design will usually fail.

3. Scope Document – Tell them (and yourself) what you are going to do.

There are different versions of Scope Document and I usually add/omit contents depending on the complexity of the project.

Essentially, although this part is the boring part, it allows you to seal the deal and lock down what you are going to do, when and how much it is going to cost.

If your client changes their mind during the project, you can refer back to this and give them a gentle reminder that their request isn’t part of the original remit.

…Or worse still, if your client does a runner at any stage of the project, you have this to backup as a case against them. It happens to most freelancers at some time, including me!

• Brief – Add this in again for good measure
• Design Specification – Site architecture/Sitemap, Technology (language), Content/Copy Writing, Hosting, Marketing etc
• Contract – This can come from the client or yourself if they don’t provide one.
• Costings – What it will cost them (and you if you have any suppliers costs)
• Timings – The stages of the project and when it will be complete.

4. Wireframes – Sketch it out.

Okay, now all the boring stuff is out of the way, we can get on to something colourful and interesting right? Wrong! Okay well, this step isn’t compulsory but I have found it to be a useful tool in the past.

Rushing straight into the styling, colouring and texturing whilst also trying to form the basic building blocks of the design layout is sometimes too much at once. If you were building a house, you wouldn’t go straight in with the bricks would you? You’d sketch it out first.

You can use Microsoft Visio, or your favourite design tool to draw out boxes and labels. Get proportions right and work out where content, menus and other features are going.

Okay, really what’s the point of this? Well firstly, it helps break down the process of designing a big site and allows you to separate layout and style and think about them separately. You can show this to the client and when they say they wanted a horizontal menu instead of a vertical one, you can easily change it without having to adjust all your styles etc. It also helps lock the client down to the design so they have less to think about when they see the final all singing, all dancing version!

If it’s a big site you may need to do this for multiple page templates.

5. Graphic concepts – Make it look pretty.

Okay, here’s the fun part! You can use the wireframes to add in your colours and style over the top.

Sometimes I’ve done up to 3 concepts and shown them all to the client to give them options but now I tend to just offer one although I usually go through a few variations before I get to the final. Why? …Firstly, if the company has a solid brand, you shouldn’t confuse branding with the design of the site. If there are branding issues, that is a separate job. You are hired for your design expertise so the design should be correct when you present it to them. Finally, if you give the client too many options, this will delay the design process, which will have implications on the designer and the client.

If it’s a big site you may need to do this for multiple page templates.

Of course, you may have to go back and fourth making adjustments to the design as necessary before the client signs off.

6. Exporting and prep of graphics – Get things ready

Once you have the design approved, you’ll need to prepare them for the site I.e. slicing in your favourite design software or recreating as necessary.

If it’s a big site, you may need to produce separate graphic elements to fit in with the template once it has been developed, for example you may have 100 buttons to create or additional Flash elements or animations etc.

7. Development – Make things work.

Now if you’ve followed the process this far, you will already have this bit planned down to a tee. Whether the site is being built in HTML, or it is a dynamic site in ASP.NET or PHP using a CMS this is the bit where things start to work.

If you’re partnering with a developer and project managing, you’ll need to stay close to the development to ensure things are being developed to spec and on time.

8. Testing – Make sure it works!

Make sure it works or your client and their customers will not be happy!

Its best to test it out as thoroughly as possible. Test all working parts of the site, paying particular attention to any security.

Bear in mind that some larger design companies have a team of developers just for testing purposes!

9. Population

This stage is often overlooked. You will probably have discussed this with the client at the start of the project and possibly even detailed it in the Scope Doc.

Allow plenty of time for content population. If you’re content is coming direct from the client or a translator you may have to make some adjustments.

If you have a good CMS, this will make your life a whole lot easier!

10. Present it to the client – Show them how good it is.

Make sure they’re finally happy. Show them how it works and how good it is. At this stage its sometimes good to go over the original brief and objectives of the project to remind them (and yourself!) what you originally set out to achieve and hopefully you will have …and more!

11. Launch it – Show the world your creation.

Make a big song and dance about it and bask in the glory of your wonderful creation.

12. Evaluate it – Make sure its what everyone wanted.

After launch, keep an eye on it to make sure it is performing. Evaluate it after a while. Is it doing what was asked of in the brief? Things are rarely spot on first time so you may need to make adjustments to the way things work. I’d suggest doing this after a month or so but you may also want to wait a while longer and evaluate after a year or so.

Does the site require anything else? New features to stay fresh with new trends? The most important thing is that you have a solid framework on which to build and grow with your clients business.