Rapid prototyping in Fireworks

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

In conversations with a widevariety of designers who use a wide variety of tools, I've learned that justabout everyone who produces comps or mockups for a customer would love to makethe process quicker. Better yet, they would love to actually use that comp ormockup as the foundation for actual website production. What an incredibletimesaver.

Examining the process today

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

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

Because the marketing team atthe 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 savedeach of these layers out as a flattened JPEG file. She then imported each JPEGinto Microsoft PowerPoint and e-mailed the PPT file to the marketing team. Overthe phone, she explained the design, slide by slide, and gathered designchanges or got approval for the project going forward.

A better way

Adobe Fireworks CS3 is afantastic tool for quickly building out rich Internet applications. Adobe hasrecognized this "niche" and, in Creative Suite 3, added a number ofnew features that make it even more compelling in the specific area of rapidprototyping.

Let's take a look at a secondexample. In my last role as a product manager at Electronics for Imaging—beforecoming to Macromedia (and then to Adobe)—I managed a web submission softwareapplication for the printing of short-run, on-demand color documents. Thechallenge was to make selecting File > Print as efficient and accurate aswalking into a local print shop and describing a print project to the personbehind the counter.

We on the product design teamwent through many, many variations of web interface design to replace the humaninteraction with an intuitive web experience. In our process, we began with avisual example of the print production workflow. Rather than starting offelectronically, we brainstormed with whiteboards and pencil on paper. Our firstworkflow iteration managed to describe the workflow quite accurately (seeFigure 1).

Once we felt we had a senseof how all the pieces of the process played together, we began to brainstormwireframes for each relevant component. Figure 2 shows an example—again withpencil and paper—of a wireframe sketch of the new "print driver" webinterface.

Our next step produced severalvariations on this theme using many, many wireframes. Once we felt that eachindividual screen included the right amount of information, we began thelaborious task of mocking up each screen directly in Macromedia Dreamweaver MX2004.

To be honest, at that timeMacromedia Fireworks MX 2004 was not the product we thought of using forbuilding our design variations. But, being the career product manager that Iam, I decided to challenge myself and the Adobe Fireworks CS3 feature set todayby 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).

My rapid prototyping experience

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

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

Once I created the individualpieces, building out the pages was just simple production work. In thisexample, the header tabs and top navigation occurred on all the pages, so itmade 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 theheader elements would automatically propagate across the pages.

The same was true for theside navigation. I shared the basic navigation across all pages and added avariable length of the column and an actual, active navigation button to eachindividual page.

Building out the formelements that were unique to each specific page was simply a matter of draggingout the rich symbol on the Canvas and defining the label in the SymbolProperties panel.

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

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

Where to go from here

I hope you enjoy the resultsof my labor. Download the PNG file and explore how it's put together inFireworks CS3.

Check out this video where I show you how Fireworks helps you quickly communicate your web designs to your clients or development/design team.

Running time: 10:37

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.