Documenting the form and behavior

Once our designs start to take shape, we take great care to document how they should work. This documentation, known as the "Form and Behavior Specification," is completed by the design communicator, who discusses the behavior of the interface in scenario flows (see Figure 17).

Figure 17. Documenting interface elements and their behaviors, as well as scenario flows, in Cooper's Form and Behavior Specification

We document our designs using Adobe InDesign, with which Fireworks works seamlessly. We simply export all states of the design and place each screenshot in what is typically a big book of delicious information.

Showing the final result in a document or presentation is easily achieved with the Export command (Ctrl+X). You can easily export all states by selecting File >Export and then selecting States to Files in the Export menu (see Figure 18). You can also export via the Image Preview (Ctrl+Shift+X) so that you know exactly what your export quality looks like.

Figure 18. Exporting states to individual files for placing inside an InDesign document

Documenting the style guide

Also in the Form and Behavior Specification, the visual designer documents the visual style of the interface. This detail often includes information about brand, color, typography, imagery, etc. (see Figure 19). We use Fireworks to specify all the details and export this, too.

Figure 19. Documenting the visual elements, such as layout, brand, color, typography, iconography and controls, in the visual style guide

Page 5 of 6

Previous Page

Next Page