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.
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.
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.
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.
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.
Whilst all this is going on, the designer can be working on the base design – the homepage and main sub-level pages.
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.
…which will probably involve going back and tweaking things…
…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.
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.
And once again they are checked, reworked and then finally confirmed.
You can then begin to build the actual HTML pages…
…and the CSS (I guess I could have put that all in one step, but I really like the little robot guy).
Feedback again. You and the client work together – work-feedback-rework – to polish and tweak things until you have a completed site.
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.
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.