Following a detailed and well explained web design and development process speeds up my workflow and thus saves you money and save everyone involved a lot of headaches. Hopefully once the process has been explained you’ll feel much more confident and comfortable with the services you’re paying for. This article will give a general outline of the steps needed to be taken, from start to finish, for completing a web design and development project. It’s divided into 3 main sections; Planning, Design and Development.

Planning

This is what I consider the most important stage, because this lays the foundations for the project. This stage requires a lot of client interaction and good attention to detail.

• Requirement analysis
  First we need to need to discover what your goals are and who your target audience is. Gather as much relevant information as possible and write a detailed list of required features.
• Web Specification/Brief
  This document outlines the information agreed upon in the previous point and will serve as a point of reference throughout the project.
• Site Map
  A site map is a guide for users to find a piece of information quickly. Rather than simply listing pages, draw out links and a hierarchy of page organisation. This is part of a skill known as Information Architecture (IA).
• Content
  Once we’ve decided upon what pages are needed and drawn out the structure in the site map, we need the content. I wrote an article about how important the content is and how much easier it makes the process if we have this in the planning stages.
• Wireframes
  This point closely relates to the design stage as we’re designing the structure of the site. Using simple shapes with no colour, fonts or even images we can easily focus on the IA (Information Architecture) and UX (User Experience). It’s much easier to make changes to a wireframe than it is to a design draft or a built website so it’s important we get this right in the planning stage to avoid further amends in the design and development stages.
• Extras
  There may be extra resources I require to complete the project, for example; photography, illustration, copywriting and/or specialist software. All of these need to be taken into account in the planning stage so I can charge appropriately and there’ll be no surprises at the end of the project.

NB: The design and development process can’t proceed until the web specification, site map and wireframes have been signed off and confirmed by you, the client.

Resources for this phase:

Google Docs – File sharing and collaborating
Drop Box – File Sharing
Mindmeister – Drawing site maps and brainstorming
Lovely Charts – Drawing site maps and wireframes
Mock Flow – Drawing wireframes
iStock – Stock imagery