in General Coding

Adobe Fireworks CS3, my new favorite prototyping tool

I think the actual release of Adobe CS3 is still a couple weeks away [actually, just received an email from Adobe that it’s shipping now], but I’m already reading up on every last tidbit about this great new application framework. As a UX designer, one of my main focuses has been on Fireworks CS3, which has added at least two features that I think will make it a very popular rapid prototyping tool.

First, they’ve added multiple pages and master pages. That was one the biggest let-downs with previous versions – even if you did a quick design mockup of a single page, propagating that across multiple pages was a pain in the #@*$! (and one of many reasons I chose to not use FW for prototyping.) Now you can quickly create a mini-site with common elements on one page.

The other great new feature is smart symbols, which use something called 9-piece slices (?), which basically means that you can resize them without distorting them. This is a critical feature when working with UI widgets, since you often want to, say, make a text field wider. And better yet, the app allows for creating your own custom symbols with these properties. This really sets FW CS3 apart from a lot of other prototyping tools, who often have a fixed library of UI widgets. I think there was a time when UI widgets were reasonably stable – as in, you basically had Windows, Mac, and *nix widgets, but all that has changed with the Web itself becoming a platform. Take for example the reply feature in Gmail…

Gmail reply feature

This isn’t exactly a standard widget. Sure, you could probably re-create the functionality represented here with a vanilla drop-down, but it would just not have the same elegant feel. With FW CS3, you could basically draw whatever kind of element you want and then turn it into a Smart Symbol, i.e. a widget in the UXD world.

Btw, I think it’s starting to sound like a traveling salesman for Adobe (but wait, there’s more!) – I’m not – it’s just that I’ve been waiting so long for something like this and all the other tools that seem to do what FW CS3 claims to do have turned out to be duds. Of course, this app could be a dud as well, but I have a good feeling that it won’t be – keeping my fingers crossed…

  1. Very interesting. While I’m somewhat partial to hand-coding my xhtml/css for production work, this could definitely have potential for migrating a FW prototype into a xhtml prototype.

  2. I also forgot to mention there are developers in the community working on HTML/CSS export scripts/components so when designing with them in terms of prototyping, you will easily be able to output a clean CSS document with the components exporting as known HTML form elements. We didnt have time to integrate this into Fw CS3 since the technology is new, but you can get an example of how it works using the Flex Components in the Common Library that export as expected and clean MXML.

  3. Yes, I have tried a few different versions of Axure – while I think the tool has a lot of strengths, I think one of it’s biggest weaknesses (at least based on my knowledge of Axure – I actually haven’t looked at the very most recent version) is one of the main features that attracted me to Fireworks – Smart Symbols – the evolution of user interfaces, particularly in the web sphere, is too rapid to allow for having a prototyping tool with a set of pre-packaged widgets. I think what might happen when using a tool like Axure, is that you (consciously or not) constrain your design solutions to the set of widgets provided by the tool. At the same time, that is not to say that FW CS3 is the be all and end all of prototyping tools – far from it – one key drawback is that you can’t apply links directly to text; instead you have to apply it as a separate hotspot, which can become somewhat clunky.

  4. Anders, have you used Axure before? I’m interested in what you think of Axure compared to FW CS3 in rapid prototyping of interactive web apps. I agree that quickly applying changes across many pages (templating) and symbol libraries are a must for workflow.

Comments are closed.