As I have made the transition to consulting and back to hands on work, I find that the tools I have been using are insufficient for my needs.
I can wireframe and create flows and use cases very easily with Omnigraffle, but I find it lacking for creating interactive prototypes. I have investigated Axure and it looks interesting, but I am on a mac and don’t want to have to purchase another OS just to use the tool. Plus I have heard the learning curve is steep.
I write HTML and CSS, but it is time consuming and I really want to be able to wireframe and hook stuff up to simulate AJAX but also be clickable with real text links etc.
So while investigating Fireworks as an option I came across this video of two designers from Cooper talking about using Fireworks back and forth through interaction and visual design. The site has a lot of other helpful how-to videos.
This prompted me to check it out since I had the tool from a recent CS upgrade.
I am still learning how to do things, but it seems like it will be pretty powerful. There is a new export feature called CSS and HTML – that exports layouts into DIVs with selectable text and links – when things are labeled correctly and you use the HTML components from the Component Library. Seems like a great way to rapidly jumpstart a clickable prototype (provided you understand CSS and HTML).
Here are a bunch of tutorial articles and videos I found useful:
Exporting CSS and images in Fireworks CS4
Creating standards-compliant web designs with Fireworks CS4
And if you are interested in using Fireworks to design for a Flex end result, I found these interesting:
Fireworks CS3 : Creating Flex Symbols
Fireworks Flex Components : Extended
I also subscribed to Lynda.com for 30 days to do their tutorials in a rapid training session over the holidays (luckily I had a free 30 day trial from the Start Conference that I hadn’t used yet). I need to be able to work quickly, with little ramp up time so this is the strategy I have taken to get up to speed with this software.
Additionally, the tool has a library system – much like Omnigraffle’s stencils. It comes prepopulated with a bunch of components, including some Flex items and Windows rich components as well as HTML components. I have converted most the Yahoo! Pattern Library stencil elements as well as created some new ones for use for rapid wireframing (I’ll post them later this week). But if you want form elements and items to come through the export intact with appropriate HTML you need to use the HTML component versions rather than any of the other library versions.
So far, I am finding this to be a time saver, not perfect, but definitely a good kickstart.
I’d really be interested in seeing what you’ve done to port the Yahoo library over to Fireworks symbols. I’ve also become a convert to Fireworks and the symbol library. My only real complaint is the lack of stability when you create really large files with lots of pages.