The Production Phase

The Production Phase

The goal of Production is to create a detailed set of deliverables that embody and represent the final design idea. The deliverables, including interactive prototypes, written descriptions, guidelines, and specifications, are high-fidelity and contain as much detail as possible about the layout, navigation, visuals, and content for each Web page. Exactly what is delivered at the end of this phase depends on whether you will continue to the next phase (Implementation) or hand off the design to someone else.

If you will hand off the design, then make the interactive prototypes and specifications precise and highly detailed so that there is no ambiguity about what the next team will implement. You may want to call for more evaluation during implementation to ensure that the specification is being implemented correctly. The client should review the ongoing development to catch any problems before the new team does too much work. Ideally, though, the design team will work hand in hand with the engineering, art, marketing, editorial, and management teams so that the site is implemented as designed and tested, and so that the inevitable questions that arise can be answered.

During the Production phase, continue evaluating the product with real customers. Because this will be the first time the new system comes together, often with more complexity than existed in earlier prototypes, new interaction issues may arise.

During Production the patterns become more low-level as the problems become increasingly technical. For example, one pattern that will be used here is ACTION BUTTONS (K4), which explains how to make buttons that look like they can be pressed. Another useful pattern at this stage is OBVIOUS LINKS (K10), which discusses why links must be easy to see and explains how to make them that way.


The deliverables of the Production phase vary from firm to firm. We list the most common ways of describing the design in detail.

Design Document

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

If your work stops here and you hand the project off to another team, the design document needs to be detailed, descriptive, and unambiguous. If the same design team continues to do Implementation, the design document does not need to be so detailed. Provide just enough information that the client and the team understand precisely how customers will interact with the Web site, and how and when the site is complete.

Interactive Prototypes

Often delivered along with the design document, an interactive prototype gives you and your client a better grounding for how the finished Web site will look and behave. Create interactive prototypes using standard Web site production tools, such as Adobe GoLive or Macromedia Dreamweaver, as well as with prototyping tools such as Macromedia Director. The idea is to provide enough detail that everyone can see how the final Web site will look and feel. (For example, not all of the links have to work correctly, as long as it is clear what they do.) Some firms deliver interactive prototypes in lieu of a design document but embed many of the details as annotation to the prototype. For example, moving the mouse over certain sections of the prototype might pop up a specification of the font family and size.

Technical Specifications

Technical details are elucidated in this document, which includes things like the kind of Web server, the kind of programming and scripting languages, the kind of database, and the version of HTML that will be used. Performance metrics can also be included, such as how many people can be supported simultaneously. Optionally, the technical specifications might include some engineering prototypes as a proof-of-concept demonstrating that the difficult parts of the proposed design are technically feasible and can realistically be built.

Design Guidelines

These guidelines are the general rules to be followed on every Web page to minimize inconsistencies between pages. A design guideline could describe which fonts should be used, what color the links should be, when the logo should be used and where it should be positioned, what color scheme to use, what the maximum file size of each Web page is, and so on. The person who will implement and/or maintain the Web site should be able to understand and use the guidelines. Optionally, the guidelines might also include a style guide to ensure that the writing is consistent throughout the Web site, for example, using the term email instead of e-mail.

Web Page Templates

Web page templates are the HTML files that represent typical Web pages on the site. The goal of using these templates is to avoid inconsistencies between pages. With a minimum of effort you can copy and modify these templates with content specific for a particular page. Six patterns that are useful to consider when you're developing Web page templates are PAGE TEMPLATES (D1), GRID LAYOUT (I1), ABOVE THE FOLD (I2), CLEAR FIRST READS (I3), EXPANDING-WIDTH SCREEN SIZE (I4), and SITE ACCESSIBILITY (B9).

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows