In WUP, there is no difference between designers and programmers: they’re all developers in the WUP team. This, of course, implies that designers will have to read the technical design at least partially, as well as the functional design. Their feedback will only increase the overall quality of the application. However, apart from a functional and technical design, designers need their own set of tools and means of documentation.

Navigation map

A navigation map is a view of the web application showing the specific presentation level HTML pages in a hierarchical tree diagram. This map naturally evolves from the use case model.
Navigation maps can be made for different user levels or even actor specific if necessary. For example, the administrator module of an application has a totally different navigation map than the regular users of the system.
The navigation map can be found in the functional design.

Design brief

The design brief describes high-level user interface guidelines. The design brief is created by a designer and the customer directly. Typically, the creative brief defines:

• the mood of the site;
• whether the site will use frames;
• any color limitations the site will have;
• if applicable: a graphics standards guide.

Technical stuff like the kind of browsers that will be used and the connection speed of most of the users will be in the technical design.

Design template

From the Functional Design, the main web elements can be extracted that have to be designed. Web elements are the set of standard graphical components that return in almost every page. These elements and the design brief provide the information from which the designers make the design template.
The design template consists of one or more web pages that contain the main web elements that will be used. The design template is constructed with the sole purpose to have the customer make a decision on the creative design direction.

Design Comps

Design comps consist of mock-ups of what the site might look like, based on the design template. These mock-ups are typically pictures, with a browser frame around it. The comps supply the interaction designer with a structural style guideline, and the customer with happiness (trust me).

Interaction design and prototyping

From the use cases, the navigation map and the design comps, an interaction design is made. These are preferably black and white pictures that show the GUI functionality of each and every page. Colors would blur the customer’s view on what’s important here: the construction of an intuitive user interface.
If the scope of the project justifies it, HTML prototypes follow from the interaction design. These are plain HTML pages without any design that reflect the functionality of the interaction design, but which have a simulated transaction handling (i.e. no real business logic, just a simulation). This gives even more insight in the GUI.

Design production planning

Fixed estimates can be made for the creation of a navigation map, the design brief, design template, comps, interaction design and prototypes.
Planning ahead for design production in a structured way is only possible after the completion of the initial phase in design. From that moment on, designers (or maybe HTML template builders, depending on your capacity) know exactly what to make. This means that for every page that has to be constructed, the number of PPD’s is estimated by the designer that signs up for the page.