The Website Development Process...

introducing

.....................................................................................

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.
...................................................................................


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.

...................................................................................


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.

...................................................................................


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.

...................................................................................


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 you 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, you 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 HTML…
You can then begin to build the actual HTML pages…

...................................................................................


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).

...................................................................................


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

...................................................................................


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

...................................................................................


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.

Pingmag