The Web Design Process

People who have never designed a website before normally have no idea what the process is. Even people who do design and develop sites for a hobby or living, do not know the best practices. I have been guilty of this myself. I get an idea in my head and jump straight into coding the site. There is no surprise that the site does not look or function correctly.

This is a quick tutorial on what I believe to be the best practice:

1) Concept
Decide what you want the site to do. Think about this as if you are in the customer's shoes. What kind of information are they looking for? How do they want that information organised? Do they want the site to be interactive? Do not try and be to fancy at this stage. It is important that you get the basics right.

2) Customer process
Map out the customer process. This is particularly important for ecommerce sites. Get a rough idea of the functionality required. Use flow diagrams where appropriate.

3) Graphic design
You may hire a graphic designer for this stage, or you may do it yourself. First, sketch out on paper how the site should "look and feel". When you are happy with the rough sketch, use a programme like Macromedia Fireworks, Adobe Photoshop or Illustrator to design the site. I will provide a tutorial on this in a later post.

4) User testing
Send your design to friends, family and colleagues and get their option on how the site looks. Include a description of its core functionality. Take their views very seriously. After all, it is the user’s opinion of the site that is paramount to its success.

5) Design revision
Based on the user testing, revise your design.

6) User testing 2
Test your revised design again with family, friends and colleagues.

7) Front end coding
Once you are happy with the over all design, start coding the front end in HTML and CSS. Make sure the site is accessible. Test it in multiple browsers. The most important are Firefox, Opera and Internet Explorer version 6 and 7. Make sure the mark-up is valid using the W3C tool. Also, make sure that the site will function without JavaScript. People who use screen readers need to be able access the core of the site without JavaScript.

8) Backend coding
Develop the back end functionality using your chosen programming language such as php or You may want to do this before the front end coding, but if you do, always ensure that you have the customer experience in mind.

9) Test the whole site making sure it is fully functional and fix any errors.

10) Deploy the site to your server.

This tutorial is obviously just a basic overview of the process. I will touch on each stage in more detail in the near future.