Following a detailed and well explained web design and development process speeds up our workflow and thus saves the client money and save everyone involved a lot of headaches. Hopefully once the process has been explained to the client they’ll feel much more confident and comfortable with the services they’re paying for. This series of articles 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.


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.

Web Design Planning

  • Requirement analysis
    First we need to need to discover what the client’s goals are and who their target audience is. Gather as much relevant information as possible and write a detailed list of required features.
  • Web Specification
    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 back in February 2012 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 we 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 we 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 by 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

An example of wire frames of the home page and an inner page of a website

Increase your online visibility

Call us on: +44 (0) 161 941 5330 or email us:

Get in touch today!