Transitioning to the visual designer

While the interaction designer is working out the scenario flow and major screen anatomy, the visual designer begins working on the visual strategy. Usually this consists of several directions that represent the product's intended experience attributes as determined by research. A strategy is chosen, and the direction is then applied to the scenario when it is received from the interaction designer.

Laying the grid groundwork

The visual designer starts by setting up the underlying grid to organize the design with the use of guides. The Guide panel (see Figure 6), which you can download as an extension, helps speed this process nicely. For more information on the Guides panel, read Using the Guides panel in Fireworks CS3 by Eugene M. Jude, a user interface designer on the Fireworks team.

Figure 6. Guides panel, which eases the process of setting the underlying grid

Next, the visual designer adds styles to the major interface elements on the screen. This usually starts with the largest objects, like the interface background, and gradually shifts to smaller objects that might be symbols. The visual designer can add style to the global navigation example shown above, and changes are instantly displayed in all the states.

Sharing style attributes

One of my favorite tools in Fireworks is the Paste Attributes command. This command can be used to quickly share styles between objects (see Figure 7).

Figure 7. Quickly giving all buttons in your interface the same outline, fill, and drop shadow by pasting the attributes from one button onto all others

Suppose you have established a style for labels in your interface and you want to propagate that change to all your labels in the scenario file. You simply copy the original text object (Ctrl+C) and paste attributes (Ctrl+Shift+Alt+V) to every relevant text object. It's lightning-fast.

This command copies not only the text size and color, but other attributes as well, including font style, leading, and any filters you may have applied to your object. This can be helpful if your text has a drop shadow. The Paste Attributes command can be used on all objects, including vector shapes, lines, text, and photos.

You can also create and manage your own set of frequently used style attributes with the Styles palette (see Figure 8). You can add a style to the palette, from which it can be copied to other objects.

Figure 8. Using the Styles palette to view and manage your styles (access a standard set or view just styles for your currently viewed document)

If you decide you need to change the style of these objects, simply change one object and select "redefine style," resulting in all objects of that style being updated (see Figure 9). Styles can be recorded for other objects, and you can also use objects from other open documents. It's not easy to distinguish similar styles in the palette from the small icons, but labels in the bottom of the palette help a little.

Figure 9. Changing an object and redefining a style to update all objects in your document

Editing symbols

If the interaction designer has set up the file properly, any frequently used objects will have been symbolized. It'll take just a double-click of a symbol to edit it. Symbols are now edited in place, while the background recedes. Double-clicking the canvas approves any changes and brings you back to the entire screen (see Figure 10).

Figure 10. Double-clicking the rectangular symbol to open it for editing in place

Page 3 of 6

Previous Page

Next Page