Our three characters: a programmer, a designer and a client.

The Website Development Process

A while ago I put this photo on my flickr page and it was chosen to go on the official flickr blog as the photo of that day (September 23rd). To date it has been viewed over 2000 times.

Written by Jon.

The photo was actually one in a whole series of photos I shot for a client presentation, detailing the website design / development process in a manner that was easily understandable and also fun to look at. This article takes you through that process, using the same photos. We hope you enjoy the pictures and if it also helps you to manage your workflow better if you are starting out as a web designer then that’s cool too :)

However, as is the organic nature of these things, there are an infinite amount of variables that can affect the project timeline. For that reason, projects are never ever as clear-cut as in this sequence of photos. Things may need to be done over and over, steps may get jiggled around, you may need more time for CMS / back-end development etc – so please think of this sequence as merely a basic example of the kind of process that I have grown comfortable with, speaking as a web designer/developer.

big pretty pic
Step 1: Discussion

Naturally you’re going to want to start your project with a client chit-chat. At the first meeting you need to establish the basic scope of the work – what needs to be done, roles and responsibilities, who is your point of contact for materials (text content, images) etc.

big pretty pic
Step 2: Brainstorming

Think about how you are going to structure things. What is important? What is not? What needs to be on every page? Depending on the scale of the project you might want to create a visual sitemap for your client. Preparing a sitemap is essential if you are reorganising content in any way.

big pretty pic
Step 3: Wireframe

A wireframe is a skeleton website, indicating all the navigation, function and content elements that will appear on the final website, but with no graphic design elements. It is used to iron out any problems or missing elements, and will act as the blueprint for the content, design and construction work that comes later.

How you create the wireframe is up to you – for small sites it might be fine to just line-draw it in Illustrator or Photoshop, but for larger, more complex sites, it might be necessary to actually code the wireframe into HTML so the client can click around to check everything is in the right place.

big pretty pic
Step 4: Planning the Content

Working from the sitemap and wireframe, you and the client get together to start planning the content – specifically the text. Content planning and writing is probably the biggest workload the client will have during the project – and it can really take some time.

big pretty pic
Step 5: Initial Design

Whilst all this is going on, the designer can be working on the base design – the homepage and main sub-level pages.

big pretty pic
Step 6: Client Feedback

When the base design is ready, the client needs to check that you are heading in the right direction and suggest adjustments to the design accordingly.

big pretty pic
Step 7: Design Rework

…which will probably involve going back and tweaking things…

big pretty pic
Step 8: Client Approval

…until everyone is happy.

This process of work-feedback-rework is repeated at various stages in the project. Besides preparing the content, this confirmation process is also one of the main responsibilities of the client.

big pretty pic
Step 9: Additional Page Design

Once the base design is agreed on, you can start working on the layout and design of each of the individual pages of the site.

big pretty pic
Step 10: Confirmation

And once again they are checked, reworked and then finally confirmed.

big pretty pic
Step 11: Build the HTML…

You can then begin to build the actual HTML pages…

big pretty pic
Step 12: …and the CSS

…and the CSS (I guess I could have put that all in one step, but I really like the little robot guy).

big pretty pic
Step 13: Present to Client

Feedback again. You and the client work together – work-feedback-rework – to polish and tweak things until you have a completed site.

big pretty pic
Step 14: Test

The final stage of production is the debug. The site needs to be tested across all platforms to iron out any technical problems, and checked thoroughly for content errors. Naturally, throughout the HTML & CSS development stage you should be checking cross-browser functionality anyway but you definitely need a big check at the end too – one that you actually set aside a decent amount of time for.

big pretty pic
Step 15: Launch

The picture says “The End” – but of course you don’t just grab the cheque and run for the door – you need to watch the site for at least around 10 days or so after launch in case of problems, and if necessary fix things.

Hope you enjoyed the pics! Visit our flickr page for larger versions.

Photos by Yongfook.