Fireworks: the essential tool for web prototyping

I’ve been using Fireworks since version 1, and singing its praises to all who will listen. If you’re in the business of doing web graphics or prototypes, and you’re currently using Illustrator or Photoshop to do it, then you really should consider switching to Fireworks.

So why is Fireworks so much better? Because it does it all, and it does it well. Fireworks is an application in a category all its own. It is essentially a hybrid of Illustrator (vector tools), Photoshop (bitmap tools), InDesign (master pages and layout tools), and Flash (symbols and animation tools). You can easily import Illustrator artwork or native Photoshop files with filters and layers. It exports working CSS and HTML, integrates beautifully with Dreamweaver, and you can even do round-trip editing of graphics. Fireworks is by far the fastest, easiest and best way to make a clickable prototype, and then later turn that prototype into working CSS and HTML. (Read more about what makes it great)

So why haven’t you heard of it? Unfortunately, Fireworks hasn’t had the PR behind it like other applications have– namely, Photoshop and Illustrator. Most designers are comfortable using tools they already have and know, and so there’s the inertia problem. Also, recent versions of Fireworks, since Adobe took it over from Macromedia, have been plagued with some bugs and instability problems.  But despite all that, I really think it behooves all web designers to give it a try.

Yesterday I taught a Fireworks class to the art department of a large financial services firm here in Dallas. Having worked with them for several years on web projects, I’ve gotten to know their processes pretty well, and have been dying to help them update their workflow. So I was excited when they asked me for help.

This art department had been doing all their mockups in Illustrator, then exporting the files as PDFs to show their clients for approval. It was a tedious process. There were several problems with this method:

• Illustrator is vector-based, not pixel-based, which means that it is very hard to know if your fonts are too small to be legible on the web. You can’t make things pixel-perfect with Illustrator. Inevitably, you think you can squeeze more on the web page than you really can.
• Illustrator doesn’t support multiple pages, so you have to rig up layers to act like pages, and go through a tricky process of turning layers on and off to show and hide certain things. Either that, or you need to have a separate document for each page of your website. Very clunky.
• You can’t export multi-page PDF prototypes from Illustrator. You’d have to export individual PDFs, then link them together manually.

The goal of our first training class was to introduce them to the best tool for the job – Fireworks -  and show them how to make a multi-page prototype with it. I walked them through the basics of how to use the drawing and text tools (most of which are similar to what they already use in other Adobe apps), how to set up pages and master pages, and how to create a clickable PDF prototype using hotspots that link to the pages.

It wasn’t a hard transition for them, having used other Adobe apps. After a couple of hours, they were clicking along at a good pace, and pretty fired up to start building all their pages in Fireworks. We were able to copy and paste lots of page elements straight from Illustrator into Fireworks. (One thing that doesn’t copy well is an open shape with a gradient. You have to close the shape to copy the gradient.) I showed them how to set up a master page template, how to use the HTML components to mimic form input fields, and how to organize the page so that it’s easy to work in tandem.

After we went through the process of designing a prototype, I set them up to use Acrobat Commenting with my server, so that they can gradually get their bosses used to adding their feedback that way. Right now, they tend to have very long phone or in-person meetings, and write all their changes on paper. Ugh. My next goal is to convert them to an Adobe PDF proofing workflow, like I use with other clients. (But that’s the subject for another post.)

If you’re interested in learning more about Fireworks, here’s a short list of free resources:

Rapid prototyping tutorials

• http://www.photoshopsupport.com/photoshop-blog/08/10-cs4/fireworks-cs4-web-design-prototyping-video.html
• http://www.guuui.com/posting.php?id=2112

Miscellaneous tutorials

• http://www.layersmagazine.com/category/tutorials/fireworks
• http://www.adobe.com/devnet/fireworks/
• http://www.adobe.com/devnet/fireworks/?view=gettingstarted

(If your company can spring for a monthly membership to Lynda.com, I’d highly recommend that too. )

Other Fireworks resources

• Fireworks Exchange – has lots of useful free add-ons for Fireworks:Adobe forums - a community of Fireworks users
• Gurus Unleashed
• Fireworks Ning forum
• Why choose fireworks?- a good article covering the benefits of Fireworks

It’s fun introducing people to an awesome tool they never even knew existed. I could see the lightbulbs going on when my client realized how much better it is than Illustrator for website mockups and interactive prototypes.

If you’re in the Dallas area and your art department needs some help in learning Fireworks or making your workflow more efficient, contact me.