The Website Development Process

Step 1: Discussion
Naturally the project starts with a client chit-chat. At the first meeting we need to establish the basic scope of the work – what needs to be done, roles and responsibilities, who is the point of contact for materials (text content, images) etc.

Step 2: Brainstorming
Think about how we 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 we might want to create a visual sitemap for the client. Preparing a sitemap is essential if you are reorganising content in any way.

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 we create the wireframe is up to the project – 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.

Step 4: Planning the Content
Working from the sitemap and wireframe, we get together with the client 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.

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.

Step 6: Client Feedback
When the base design is ready, the client needs to check that we are heading in the right direction and suggest adjustments to the design accordingly.

Step 7: Design Rework
…which will probably involve going back and tweaking things…

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.

Step 9: Additional Page Design
Once the base design is agreed on, we can start working on the layout and design of each of the individual pages of the site.

Step 10: Confirmation
And once again they are checked, reworked and then finally confirmed.

Step 11: Build the XHTML and CSS…
We can then begin to build the actual XHTML and CSS pages…

Step 12: …and then setup and implement chosen publishing solution
…we setup eZ publish, WordPress or VZT Light CMS and start building and implementing the templates.

Step 13: Present to Client
Feedback again. We work together with the client – work-feedback-rework – to polish and tweak things until we have a completed site.

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 XHTML & CSS development stage we are checking cross-browser functionality anyway but we definitely need a big check at the end too – one that we actually set aside a decent amount of time for.

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

Photos and text by Yongfook.
(Modified by VZT)