Designing a web site sounds simple, but too often it’s carried out without a clear plan or process, with the result that development takes longer, and the result is unsatisfactory – if you don’t know exactly what you’re building, or how, things won’t end well

To make sure the site works for the client (and crucially, the client’s audience), we offer a structured approach, based on established user-centered design principles (for more information, I recommend Jesse James Garret’s brief but insightful book Elements of User Experience).

A site can be looked at as having five interconnecting components:elements of user experience

  1. Strategy
  2. Scope
  3. Structure
  4. Skeleton
  5. Surface

1) Strategy

  • Objectives – what’s the site trying to do?
  • Audience groups and what we know about them
  • Targets – how will we know if we’ve got there?
  • Optional extras: review of existing site, or competitors’; persona creation for more detailed look at audience

2) Scope

  • Content – what, how much, how frequently updated, by whom?
  • Functionality – domain name, technology, extra features (newsletter, search . . )
  • Design – usability, look and feel, palette, extendibility, accessibility

3) Structure

  • Main sections
  • Subsections
  • Related links
  • Main user journeys

4) Skeleton

  • How things fit on the page – logo, navigation (main and sublevel), content

5) Surface

  • Look and feel: what the visitor sees – colors, graphics, icons, typography . . .

Too often web design focuses solely on the structure and surface. Ensuring that all the components are thought out and agreed makes the development process easier, and also ensures that the site actually works to achieve the client’s objectives and meets the audience’s needs. In practice, we use the following process:

Development Process:

  1. Submit proposal and price for meetings and documentation to establish strategy, scope and structure (note that until the scope and structure have been established, it’s impossible to give a price for the whole job, as we don’t know exactly what’s involved)
  2. Workshop/meeting to establish strategy, scope and structure
  3. Document decisions in report, submit for changes/approval
  4. Proposal for design and development, inc. price and timelines
  5. Visual design prototypes (skeleton and surface) (submit for changes/approval)
  6. Content wrangling
  7. Build and test
  8. Submit for changes/approval
  9. Train users on content management system (if there is one) – so the client can keep the site updated themselves