Fireworks Article

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.

Running time: 2:58

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.

Figure 1. Initial wireframe sketches created by the interaction designer, and the look refined by a visual designer

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 6

Next Page

About the author