Fireworks Article

Rapid prototyping in Fireworks CS3

As a "career" product manager, I have not really ever been a power user of the tools I manage. Over the years, however, I have built many solutions to complex print and web workflow problems. For an industry that is 20 years in the making, prototyping is still incredibly time-consuming and redundant. By redundant I mean that work that you create in one application of a concept design is quite often thrown away, only to be recreated in another application at production time.

In conversations with a wide variety of designers who use a wide variety of tools, I've learned that just about everyone who produces comps or mockups for a customer would love to make the process quicker. Better yet, they would love to actually use that comp or mockup as the foundation for actual website production. What an incredible timesaver.

Requirements

Fireworks CS3

• Try
• Buy

Source file:

• quickticket_prototype_fw_cs3.zip (ZIP, 436K)

Examining the process today

Let's take a quick look at how the prototyping process works today in the real world. Cynthia Wang, whom I met last year in New York City, works as an independent designer developing interfaces for online configurators built with Adobe Flash. She knows how to develop in Flash but over time she's specialized on the design aspects in Adobe Photoshop. Once her design mockups are approved by the client, she then hands that Photoshop file over to her Flash developer colleagues, who break down the PSD file into appropriate Flash elements for production.

In this particular situation, the Flash configurator was for a jewelry store's website. Selecting the correct stone, size, and setting would result in a custom product that the customer could then order online. In order to build out all the variations of this site configurator, Cynthia ended up with 172 layers in her Photoshop file. Now Photoshop is a very comfortable designing tool for her so the design process in Photoshop made a great deal of sense. It was only the creating of a comp for her client that was, well, throwaway effort.

Because the marketing team at the jewelry store did not own Photoshop, or even really know how to use it, Cynthia selected groups of about 20 layers in Photoshop at a time and saved each of these layers out as a flattened JPEG file. She then imported each JPEG into Microsoft PowerPoint and e-mailed the PPT file to the marketing team. Over the phone, she explained the design, slide by slide, and gathered design changes or got approval for the project going forward.

A better way

Adobe Fireworks CS3 is a fantastic tool for quickly building out rich Internet applications. Adobe has recognized this "niche" and, in Creative Suite 3, added a number of new features that make it even more compelling in the specific area of rapid prototyping.

Let's take a look at a second example. In my last role as a product manager at Electronics for Imaging—before coming to Macromedia (and then to Adobe)—I managed a web submission software application for the printing of short-run, on-demand color documents. The challenge was to make selecting File > Print as efficient and accurate as walking into a local print shop and describing a print project to the person behind the counter.

We on the product design team went through many, many variations of web interface design to replace the human interaction with an intuitive web experience. In our process, we began with a visual example of the print production workflow. Rather than starting off electronically, we brainstormed with whiteboards and pencil on paper. Our first workflow iteration managed to describe the workflow quite accurately (see Figure 1).

Figure 1. Brainstorming the print production workflow with pencil and paper

Once we felt we had a sense of how all the pieces of the process played together, we began to brainstorm wireframes for each relevant component. Figure 2 shows an example—again with pencil and paper—of a wireframe sketch of the new "print driver" web interface.

Figure 2. Wireframe for the print driver web interface

Our next step produced several variations on this theme using many, many wireframes. Once we felt that each individual screen included the right amount of information, we began the laborious task of mocking up each screen directly in Macromedia Dreamweaver MX 2004.

To be honest, at that time Macromedia Fireworks MX 2004 was not the product we thought of using for building our design variations. But, being the career product manager that I am, I decided to challenge myself and the Adobe Fireworks CS3 feature set today by building out a few design variations. The result is the enclosed PNG file, replete with a few variations on the page design as the web print ticket is "filled out" (see Figure 3).

Figure 3. Web print ticket mockup in Fireworks CS3

My rapid prototyping experience

As I mentioned earlier, the design team I worked with on this project consisted of a concept/interaction designer for the original sketches and a second interface designer working solely in Dreamweaver producing HTML and CSS mockups. The enclosed PNG prototype took me a fraction of the time to mock up in Fireworks CS3.

I began the process by gathering all of the specific graphic elements—icons, form elements, panels, and headers—and built each of them as rich symbols, using 9-slice scaling and applying symbol properties when necessary (see Figure 4).

Figure 4. Graphic elements for the web print ticket mockup

Once I created the individual pieces, building out the pages was just simple production work. In this example, the header tabs and top navigation occurred on all the pages, so it made sense to define a subfolder in the Layers panel for all header elements, and share that layer across all pages. This way any refinements I made to the header elements would automatically propagate across the pages.

The same was true for the side navigation. I shared the basic navigation across all pages and added a variable length of the column and an actual, active navigation button to each individual page.

Building out the form elements that were unique to each specific page was simply a matter of dragging out the rich symbol on the Canvas and defining the label in the Symbol Properties panel.

Because the footer location varied from page to page based on the content, I defined the footer graphics and text as a symbol and placed it in the proper location at the bottom of each page.

Once the page design was complete, my next step was to define simple hyperlinks from page to page or section to section and save the end result as an HTML click-through mockup.

Where to go from here

I hope you enjoy the results of my labor. Download the PNG file and explore how it's put together in Fireworks CS3.

For more information, check out the following articles in the Fireworks Developer Center:

• Creating rich symbols for MXML and Images export in Fireworks CS3 (Trevor McCauley)
• Using Fireworks CS3 to design effective, interactive website presentations (Hoang Dinh)

Note: Thanks to Ev Shafrir, Dick Holmes, and Electronics for Imaging, Inc. for their sketches and QuickTicket design.

About the author