Using states to create a scenario

The interaction designer begins designing the scenario by laying out the major anatomy in Fireworks in a house style that looks like a sketchy wireframe. We intentionally don't apply visuals yet because we want to focus initially on the product's behavior. The interaction designer doesn't just design one screen, though. He might design 20–30 screens to storyboard a variety of interface behaviors and several usage scenarios. Fireworks manages all these screens in one file using states (formerly frames).

For example, one scenario we designed for GoldMail, an application for sharing photos with human voice messaging, shows Nicole, the user, adding and arranging photos of her cat and family to share with her mom, Margaret. Figure 2 shows the scenario distributed across multiple states in one file. Managing multiple screens in one file reduces production time and helps our teams focus on solving design problems.

Figure 2. Final screens distributed across multiple states in one Fireworks file

Organizing the interface anatomy with shared layers

The power of states becomes apparent when you start using shared layers. Take a look at the global navigation in the GoldMail screen shown in Figure 3. In the scenario, the position of the navigation menu remains consistent but the buttons change appearance as Nicole creates, records, and shares her GoldMail.

Figure 3. Navigation objects distributed across multiple states, needing only to be changed once for all states to be updated

By placing all objects of the navigation menu in a shared layer, you ensure that it is managed and presented in one location but accessible across all shared states. When the navigation menu needs to show a change, like showing that Nicole is either in the Create or Record screen, a different shared layer can be used that all states in the file can access. Again, each shared layer of objects is managed in one location but distributed across multiple states. Each shared layer can be turned on or off at will in the scenario.

Not only is the setup quicker, but managing the content in one place ensures that everything in the scenario, whether text labels or button positions, is consistent. The shared layer containing the navigation now only needs to be adjusted in one state for it to be updated in all 20 states. This not only saves the interaction designer time when he's iterating the design but also saves the visual designer time when he needs to add and refine the visual style.

It's often necessary to have an unshared layer or two dedicated to screen-specific elements. An example might be the photos and captions in the workspace that change constantly throughout the scenario (see Figure 4). Usually, you'll find it's best to put everything that will be on at least two states in a shared layer.

Figure 4. Unique object changes placed in unshared layers

Setting up symbols for common controls and icons

The other major task that the interaction designer does before handing over the completed scenario file to the visual designer is to transform objects to symbols. Symbols in Fireworks work similarly to those in Adobe Flash. The symbol resides in the Document Library palette and can be edited there while "instances" of the symbol are placed on the canvas. Any changes made to a symbol instantly change the look of all instances on the canvas. Double-clicking any symbol instance on the canvas opens the symbol and allows it to be edited in place.

The best objects to symbolize are ones that are used frequently and that change position on the canvas. For this reason, icons and controls are ideal candidates. Usually the interaction designer knows that a control or icon is needed and puts a symbol placeholder in the Document Library. He'll then place this approximately within each page and leave it for the visual designer to refine later.

Symbols are easily produced by simply creating and selecting the object on the Fireworks Canvas and then selecting Modify > Symbol > Create Symbol or pressing F8. This opens a dialog box wherein it's best to choose "graphic" unless you plan on doing more sophisticated exporting of your images. For controls that might stretch, like text fields, it's best to enable 9-slice scaling (see Figure 5). For icons, you can disable 9-slice scaling because it's unnecessary.

Figure 5. Creating a symbol by selecting one or more objects and pressing F8

Page 2 of 6

Previous Page

Next Page