Designing interactive products with Fireworks

I'm often asked the question, "What tools do you use to design your products?" My response, "Fireworks," is frequently greeted with puzzled looks from around the room. I spend a great deal of time explaining our reasoning and can't help but feel a little defensive, as Adobe Fireworks tool is not the industry standard.

When I first joined the Cooper consulting firm and realized that I'd be making the switch from the almighty Adobe Photoshop—my ally since the days before even layers existed—I was a little anxious and skeptical; but after just a few weeks I was a changed designer, free from the perils of the marquee tool. The truth is that Fireworks has many benefits for interactive design, and it supports our process excellently. This article describes how Fireworks drives the design of the interactive products we build.

If you're interested in seeing how we use Fireworks for our interaction and visual design work, as well as getting a glimpse at a new product we designed (mentioned later in this article), check out this short video first.

How we work at Cooper

At Cooper, we design a wide variety of interactive products for platforms, including the desktop, the web, and mobile devices. Our design teams are small and usually consist of an interaction designer, design communicator, visual designer and, if there is a hardware component, industrial designer. The interaction designer and design communicator work together to design and document the behavior of the interface, while the visual designer is responsible for the interface's visual appearance. The industrial designer handles the physical form factor of hardware. Finally, the team is managed by an engagement lead who designs the engagement and provides guidance and direction to the team.

During the solution-creation phases of a typical project, a design team begins storyboarding scenarios on whiteboards and then transfers these sketches to the screen, where they are iterated and refined over and over. The design is then documented for our clients to follow and reference as they build their products.

Where Fireworks fits in

After the big ideas are generated, the interaction designer quickly transfers his work to Fireworks where the details are added to the product. Other design groups or firms may use one tool, like Visio or OmniGraffle, for interaction design and another, like Photoshop, for visual design, but we have learned over the years that working in Fireworks throughout the design process has many benefits.

First, it encourages our teams to be more collaborative as we pass our work back and forth and solve problems together. We also work much faster, as we don't have to recreate elements or check our work against each other's files. Finally, it reduces mistakes during design, as we aren't managing multiple versions of files. Figure 1 shows the different stages of a design with Fireworks.

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.

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.

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.

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.

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.

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).

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.

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.

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).

Because Fireworks is a vector-based program, it's great for designing icons of all kinds, whether simple and graphic or highly detailed. However, when transitioning from Photoshop for the first time, it can be frustrating if you try to work at the pixel level without help from the Path palette. This palette is probably one of the most important tools in Fireworks for pixel precision (see Figure 11.

To illustrate my point, consider the folder icon in Figure 12. I designed a standard 32-pixel icon and now need a 16-pixel version of it. When the icon is re-scaled, the outlines of the shapes get fuzzy. That's because the paths are soft lines and are intended to be aliased. But because the end points are no longer placed exactly at the pixel corner, the lines look fuzzy. When I simply select points of the object and then select "Round points to pixels" in the Path palette, the line now shifts so that it is once again sharp but still aliased.

The selection tools in the Path palette are also very helpful. When rounding all points to pixels, it's easiest to select all points first. When widening an object like a rounded button, it's easy to select all points on the right side of the button with the select right points control (see Figure 13). The width of the button can then be extended quickly using the right cursor button alone, or with the Shift key for increments of 10 pixels.

Finally, you can simplify complex shapes with the smooth and straighten points controls. There are several other useful actions in the Path palette, but I use them less frequently.

Adding power to controls with the Common Library palette and 9-slice scaling

Another great feature in Fireworks is the Common Library palette. This is an extension of the Document Library, which contains common UI controls with labels and states that can be manipulated directly on the canvas.

Note: Fireworks CS3 contains only a limited set of Vista UI controls, but XP controls can be downloaded from the Fireworks Exchange and senocular.com.

You can take a check box from the WinXP folder and place it on your canvas where it instantly shows a label and check box. By opening the Symbol Properties palette, you can quickly change the enabled state from true to false, thus disabling the check box. By clicking the Label field, you can change the name of the label. Finally, by changing the state of the selected field, you can change the check box to checked (see Figure 15).

UI controls are something that interaction designers can manipulate easily without worrying about the visual appearance. The symbols also include 9-slice scaling, so you can modify the width of a text field without having to manipulate the actual object. This flexibility for interaction designers helps them manipulate controls without having to worry about the visual appearance.

You can customize these Common Library symbols with a more unique style, and you can even create your own custom Common Library items, but beware that each common symbol contains specifically named objects that are referenced by code and must not change. For more info on creating Common Library symbols read Using rich symbols in Fireworks by Aaron Beall.

Quick, nondestructive refinement

Visual elements like color and texture are likely to be adjusted multiple times during refinement. Happily, Fireworks supports this behavior with nondestructive filters. One of the last tasks in a project usually involves creating all the different states for buttons such as normal, default, hover, disabled, pressed, and so on. Instead of having to design each one from scratch, it's often possible to take the normal button and remove as well as add filters (see Figure 16). In this example, the white button has a drop shadow. To adjust the button to be disabled it only takes removing the drop shadow filter and reducing the opacity to quickly add the new state.

It is inevitable that designs change during design refinement, and these tools help us make adjustments so that we can quickly share and collaborate new ideas within a team and with our clients.

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).

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.

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.

Fireworks is best known for its effectiveness at graphic production. We mostly export full screens for documentation, but we are frequently asked for production-ready graphics. If you've been meticulous and disciplined about symbolizing graphics in your files, then it's easy to export everything from the Document Library. This is particularly helpful for icons, where slicing of graphics is often unnecessary. Simply go to the Document Library palette options menu and select Export Symbols (see Figure 20).

Batch processing is also helpful when you have a massive collection of graphics in original format that need to be optimized for a specific medium, such as Java Swing or the web.

Advantages and disadvantages of Fireworks

Just because we spend most of our time working in Adobe Fireworks doesn't mean we've stopped using Adobe Photoshop and Adobe Illustrator. Fireworks is fundamentally an application dedicated to screen design, so Photoshop and Illustrator are more appropriate in cases where I'm designing for print. Photoshop also can't be beat for photographic "clean up" with the rubber stamp tool. I find that most photo manipulation, such as levels, curves, and masking, is easily managed in Fireworks and is easier to undo with the help of filters.

Fireworks' other historical great weakness had been its poor type engine, but the new version now uses the Adobe type engine, which has all but removed any shortcomings in the application.

Where to go from here

Over the years we have assessed and re-assessed competing products at Cooper to ensure that we are using the best tools available. For interactive and visual interface design, Fireworks minimizes the production work and allows us to focus on designing great products for our customers.

Refer to the following resources to learn more about the Cooper process, using the Guides panel in Fireworks to align multiple objects to achieve a pixel-perfect layout, and using rich symbols to quickly create and edit elements in your Fireworks documents:

• The Cooper Process
• GoldMail Case Study
• Using the Guides panel in Fireworks CS3 (Eugene M. Jude)
• Using rich symbols in Fireworks (Aaron Beall)