Over the years, I’ve used many apps for wireframing, from Mockflow to Mockingbird, Dreamweaver to Flairbuilder, Protoshare to Balsamiq, Omnigraffle to Indesign and Illustrator. And, of course, everything still begins (and sometimes ends) on paper. But I’ve yet to give Fireworks a whirl, despite the fact that some UX people rave about its strengths as a wireframing and prototyping tool.
So last night I began developing some wires using Fireworks, and thus far I’m pretty impressed. I can export the wireframes as clickable PDFs or as PNGs with HTML hot spots, or as sliced HTML files with rich interactivity, making them easy to share with clients and colleagues.
A wireframe done in Fireworks.
Supposedly I will be able to bring them directly into Photoshop for UI design when they’re complete. All wireframe pages are stored in one Fireworks file (Fireworks uses a flavor of PNG that permits multiple layers and states, as well as vector shapes, symbols, and interactivity). I can use standard Adobe keyboard shortcuts. And, I can work the way I’m used to working: like a designer, not a programmer.
The biggest challenge so far hasn’t been learning Fireworks, but forgetting Photoshop: both apps are very similar in terms of form and function, yet they are different in subtle but critical ways. I seem to keep trying to do things the Photoshop way, and it doesn’t always work. Nonetheless, it’s a familiar environment, and that’s pretty helpful.
Some of my friends have said they don’t understand why I try to so many apps when there’s probably one that works better than others (and they each have their own preferences, of course). In my case, however, either I haven’t found the perfect tool or, more likely, in my opinion, each project requires a different tool.
In any event, I’m going to try to slug it out with Fireworks on this project, and I’ll report my progress when I’m done.
Update: Well, that was fast. After one day of use, I can state without equivocation that I won’t be trying to tackle this project using Fireworks. I wrestled for a couple of hours with the States / Layers / Pages confusion. Adobe’s help application was confusing, verbose, and incomplete. I’m sorry to report that Fireworks won’t be at the top of my tools of choice for wireframing, as I believe a great tool should be fairly self-explanatory, especially when it comes to basic tasks like exporting pages and states.
Pretty cool!
Another tool for your testing list might be Justinmind Prototyper. We did our best to create a powerful & really usable tool.
You can create interactive wireframes and later export it to HTML code or generate a doc specification. You can also share it with your clients using UserNote our online service that allows your clients to perform comments directly over your wireframes.
Check our blog or contact me if you’d like to know more: http://www.justinmind.com/
Cheers,
Dan
@Justinmind
I think I’ll give Fireworks a spin. Right now I’m using HotGloo which is working pretty well. It has the same feel and functionality as a Photoshop or Fireworks with some nice interactive components (drop-down menu, accordian, etc.). I’ll send you a example.
As you’ll see from my update, I had to bail on Fireworks. While laying out a page was a snap…in many ways easier than almost any program I’ve used so far, creating multiple pages and states was confusing, to say the least.
I used HotGloo for a while, but in my opinion I found MockFlow very similar, with more features. The fact that Mockflow has a desktop (Adobe AIR) version AND allows you to work online at the same time is a big plus. Before you try Fireworks, I’d give Mockflow a try. I think you’ll prefer it to HotGloo.