Continuing our series examining the steps involved in designing a website, we look at the fourth step, Production.

The purpose of the production phase is to create a set of documents that embody and represent the final design ideas. These documents include interactive prototypes, written descriptions, guidelines, and specifications; they are high-fidelity and contain as much detail as possible about the layout, navigation, visuals, and content for each web page.

It is imperative that all documentation, interactive prototypes and specifications be very precise and highly detailed to avoid ambiguity and misunderstandings later during Implementation, particularly if the website design is going to be passed on to another team or third party for implementation.

The client, being still involved, should review the ongoing development to catch any problems before the new team does too much work.

Evaluation of the project will continue during the Production phase.


At this stage the most common documents expected to be written are:

Design Document

In contrast to the specification document, the design document describes how the website works in great detail. It takes all of the features from the specification document and uses site maps, story-boards, and schematics to describe the flow of interaction.

Interactive Prototypes

An interactive prototype gives a good understanding for how the finished website will look and behave. Interactive prototypes may be produced in lieu of a design document with many of the details embedded as annotation, e.g. when moving the mouse over certain sections of the prototype a specification of the font family and size might pop-up.

Technical Specifications

Technical specifications is a most important document often underrated. It will include things like:

  • the kind of web server,
  • the kind of programming and scripting languages, PHP, ASP
  • the kind of database, SQL, MySQL
  • the version of HTML that will be used, HTML 4, XHTML1, strict, transitional, frameset
  • any specific software used.

Design guidelines

The design guidelines are the general rules to be followed on every page, e.g. fonts, links colour, etc… It will minimise inconsistencies between pages.

A design guideline could describe such things as

  • which fonts should be used,
  • what colour the links should be,
  • when the logo should be used and where it should be positioned,
  • what colour scheme to use,
  • what the maximum file size of each web page is.

Web Page Templates

Web page templates are the HTML files that represent typical Web pages on the site.

The goal of using templates is to create consistency and harmony between pages.

Pin It

Hire us to grow your business

Request more information