Fireworks: How Does It Fit in Your Workflow?

January 15, 2009

fireworksWorkflow.jpg

I want to open this post to everyone to have a discussion regarding the role that Fireworks plays in your individual or team workflows.

Over the years Fireworks has been a tool that visual designers, developers, interaction designers, art directors, and production artists have relied on to design, prototype and produce amazing designs for the screen.

Through it’s original partnership with Dreamweaver in its first few versions as the premiere tool to build graphics for web sites it had significant integration within the web design workflow. The product then grew becoming a design partner for Flash animations and applications.

As the complexity and scope of web sites and applications grew, there became a clear need to prototype and share designs and interaction concepts with clients and partners before significant time went into final production. This key role is what Fireworks focused on in the most recent version, increasing rapid-prototyping capabilities and output options including PDF and AIR.

With this expanding role of Fireworks, I want to kick off this discussion with these questions:

What role does Fireworks play in your workflow?

Where do you find the value of Fireworks and it’s integration with Creative Suite and other Adobe design and development tools?

Share this:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • PDF
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • email
  • FriendFeed
  • LinkedIn
  • Live
  • Reddit
  • Slashdot
  • Suggest to Techmeme via Twitter

{ 65 comments… read them below or add one }

Jennifer Quigley January 29, 2009 at 2:27 pm

Fireworks CS4 is my current primary tool, though I have used Photoshop (& Illustrator) since version 4. Fireworks is truly the best prototyping tool on the market.

I design application flow charts in Fireworks, one global version & a version broken down into pages that target the developer’s screen size. Over each off page connector element, I create a slice and link so the developer can click to see the next process portion without the need for sorting through document views. It saves them time, and their job is quite difficult.

I use the Smart CSS exporter to get my project from .png pages into HTML /CSS. — Love this feature!

I also layout and draw grayscale wireframes in another file. I provide 2 outputs: one as single images combined into a pdf so the developer can scroll through the count of pages; the other is a Smart CSS export that gives stakeholders a better understanding of actual interactivity.

Next comes the refined mocks. I offer this as a folder of individual .png & .jpg files, as a pdf for sharing, and as a linked Smart CSS export.

I think the trick to getting the most out of your Fireworks workflow is to cater to individual people and how they best comprehend. Take a moment to demo some samples of the various delivery types to your co-workers. Find out what they like, and what helps them work faster. How people learn is a big part of communication often neglected outside the educator’s sector.

(Sometimes I use it do draw graphics for animation in Flash, though I don’t work on so many Flash projects lately.)

On Photoshop, I still use it. If I use it in relation to on screen graphics, it is mainly in the case of complex composites, or if the company I am with needs some promotional print work, which is also the smaller of my work tasks.

Tinsel Fred aka nemrod February 1, 2009 at 3:30 pm

Hi !
- First off all, I apologize for my bad english writing -

Well, well, well …

I’m a small Art director in France, I manage a small team of graphic designers, flashers, I use to work with a lot of agency … and … I must admit that i’m a bit angry when i read some post.
I’m so disapointed, that you anglo-saxon people usually so pragmatic :) , don’t realize the enormous potential of FW !
Stop compare FW to PS, … to Indesign why not …

FW is the graphic bridge for all our workflow !

This software is so much better for production than PS. We earn days when I use FW. An intern can be a worker in 2 days on FW… how much time does it take on PS ???

Many webdesigner and art director I know, have switch to FW, after a small demonstration, none of them are returned to PS, as far as I know :)

Why :
• Easy to learn
• Easy to obtain aethetics design
• Fast to correct, to offer differents propositions
• Share symbols, styles,
• Powerfull batch tool and so easy to script
• Javascript api … don’t limit FW to standard extensions
• Multi mask, Multi effects and always editable
• A powerfull gradient tool (with GDE)
• Multi page then Multi slices layers
• Fast RIA layout
• Subpixel capabilities
and so on …

This kind of job is done in 5-6 days, how long would it takes in PS,AI, etc ?
> http://nemrod.info/www/#web/173
>> Unfortunately, we don’t devellop it

My dream is that FW can work with AE like PS does …
Png is such a great format …vector, bitmap, alpha … perfect for movies !
I’m pretty sure, you’ve already think about it :)

One more time, sorry for my English …thanks to read me :)

William Chadwick February 3, 2009 at 4:15 pm

I can very quickly edit images I’m using in the Flash IDE from Fireworks. Right now we’re using CS3, I know of no plans to upgrade to CS4. I like the export wizard. Photoshop is big and complex.

David McGuigan February 8, 2009 at 2:53 am

When I originally started doing graphic design, I took a while to really explore Fireworks / Photoshop / Illustrator. This was pre-Adobe merger. Within days, a totally opposite-to-what-I’d-heard-and-expected phenomenon surfaced. Fireworks’s interface was 100 times more intuitive, responsive, and easy-to-use.

It handled the integration and preservation of raster and vector images simultaneously, and it really puzzled me as to why Adobe hadn’t put Illustrator and Photoshop together to work the way Fireworks did. I could get the exact same school work (these were graphic design classes) done that the other students were doing in Photoshop in literally a fraction of the time, and was able to just meander through the menus and tools and learn TONS without any documentation or books.

When I got into the habit of creating and reusing styles, holy cow was I impressed. Fireworks made creating flashy, highly effectsy graphics simple and easy, and I could prototype entire interface designs in minutes.

I’ve always done all of my Javascript and interface manipulation by hand, so I’ve never even used what Fireworks is actually marketed for. But as a powerful, best-in-class (my opinion, and yes, I’m implying that Photoshop and Fireworks share a class), everything-but-print-studio design platform Fireworks really dominates. If Fireworks and Photoshop had surfaced at the same time, and the print-prep tools had been similar, I really think Fireworks would be the standard.

I also use the newest version (CS4) for creating rich diagrams and application documentation. The pages and shared layers feature is priceless.

David McGuigan February 8, 2009 at 3:01 am

What would really be powerful, and I mean flip-competitors-on-their-backs powerful, is to seamlessly integrate Dreamweaver, Fireworks, and Flash into a single IDE/tool. Using a unified file manager (Dreamweaver’s), each type of file could be opened in the proper “context”, but all files, independent of the current context, would be tiled inline as tabs they way they already are. When you tab from one file/context to the next, the appropriate toolset appear/disappear. If I double click an embedded .swf in Dreamweaver’s design view, it opens in a new tab in a Flash context. If I double click a PNG, a Fireworks perspective opens. There are many integration points like this that could be leveraged to speed up workflow.

Impact.

A separate approach from this would be just to integrate the major manipulation, creation, and formatting tools from Fireworks into the other products. Dreamweaver first, then it could replace Flash’s pretty inferior drawing set, then who knows, maybe make its way into Flex Builder eventually. I really hope Adobe explores this, it could really embarrass competing products.

David McGuigan February 8, 2009 at 3:03 am

*To be clear, when clicking the .swf embedding the original .fla is what would actually open in the Flash context.

natasha February 12, 2009 at 10:21 am

For years, I’ve always had the most recent version of Fireworks sitting there on my computer. Every once in a while I fire it up and take a look. It seems ok, but I really don’t get why I should be using it.

As each new version comes along, I dutifully read the feature list yet nothing about it ever seems to offer me anything I need over and above what photoshop already offers. Fireworks always has been, and remains a mystery to me.

As far as I’m concerned, if it does something that photoshop doesn’t do, the just stick it in photoshop. What’s the point of having multiple graphix programs? This is one area where Adobe’s strategy seems to be all of a muddle.

natasha February 12, 2009 at 10:34 am

PS – as a clarification to my previous comment, I don’t do any html development, so pretty much anything Fireworks does for html doesn’t interest me.

I’m a Flex and Flash developer. Mocking up Flex apps in Fireworks is also a mystery to me. Why not just mock them up in Flex? Or Flash? I really just don’t get it at all.

ed February 12, 2009 at 10:47 am

On my OSX dock, I’ve got the Creative Suite 4 apps all lined up according to the colours of the rainbow. If Fireworks was missing, the rainbow would be incomplete. Use of the yellow Fireworks icon represents 100% of the usefulness of Fireworks to me.

Like my colleague Natasha (above), I don’t get it.

kosmar February 12, 2009 at 1:59 pm

i use fireworks to sketch, layout, design and produce websites. i cannot understand people still using photoshop for any of these tasks.
i also like to sketch logodesigns in fireworks.

both usecases have suffered a lot from new bugs introduced with fwcs4. the textbox jumping bug is the most annoying one, effectivly reducing my productivity for at least 15% of time and 100% of mood.

the new font engine keeps my now from making fine text layout for logodesigns in fw, as kerning doesnt work as it used and should do. you just cant figure out a proper distance between two letters, if the only way you can manipulate the distance is while one of them is inverted by selction.
therefore, just two weeks after purchasing my copy, i am thinking strongly about switching back to fwcs3 despite losing the mentionable improvements to pages/frames, fontselection and styles features in cs4.

Webhost Deals February 13, 2009 at 11:58 pm

For me, I use Fireworks as my secondary photo editing tool. I still use photoshop as my primary tool. To be honest I have not really look into Firework before. I use photoshop just that, this is the first photo editing software I come across and so I start learning to use it. After time, I’ve already used to it and it’s difficult (and lazy perhaps) for me to switch to other software.

Greg Hart February 17, 2009 at 1:09 pm

We are essentially a Flex development shop with some associated web clients and Fireworks is our graphics tool of choice. We do some logo work using Illustrator and only use Photoshop for image manipulation, otherwise all of our prototyping, creation of flex components and GUI production graphics is all done in Fireworks. (CS4).

Matt Heerema February 18, 2009 at 1:30 pm

Fireworks is my primary graphic editing tool for Web design. Between it and a good text editor (or IDE), it’s all I use for Web dev, with the occasional excursion into Illustrator for logo work. However, Fireworks’ handling of vectors makes it such that I really don’t even need to do that very frequently.

IMO – Fireworks is the ultimate web design tool.

Graphics creation -> exporting optimized graphics with slices, and then hand-coding HTML and CSS to make those images live.

-matt heerema
principal designer
Weblogs, Inc. (AOL / Mediaglow)
engadget.com, autoblog.com, joystiq.com, tuaw.com, downloadsquad.com, etc….

Michel March 20, 2009 at 4:59 am

> What role does Fireworks play in your workflow?

Immense! :-) Fireworks is my graphic design tool of preference. I don’t understand why some prefer Photoshop for graphic design for Web. Fireworks is faster, it’s easier to mock up projects for websites in it, it’s easier to produce the final design, it is an excellent tool for all kind of designs for screen, it opens almost perfectly PSD files, it has the perfect blend of vector+bitmap tools (something that Ps or Ai will maybe never achieve), live effects, pages, layers, intuitive interface (Ps’s interface is still very bad, IMHO, in terms of usability), in a word: this is a program that I cannot live without! :-)

I use it for graphic design for Web, for logo design, for quickly editing photographs, for almost all of my design work…

Only for print design would I use Ps or Ai. All other tasks are for Fireworks. Since I started to use Fireworks (Fireworks MX), I never looked back. And I never quite learned Ps – I didn’t need to! :-) ))

> Where do you find the value of Fireworks and it’s integration with Creative Suite and other Adobe design and development tools?

In a perfect world, Fireworks would integrate 100% with Flash, Ai and Ps. Thus, a file created in one of these three programs could be imported into Fw and then back, without losing vectors or effects or anything… :-)

In a more perfect world, Fireworks PNG format could be opened by Ps and Ai, without any losses, too :-)

Charles Flemming August 19, 2009 at 9:42 am

I don’t know if I should even be posting in this conversation since I’m an absolute noob in web design. However, I have 20+ years in graphic design for print. I’ve gone from Pagemaker to Quark to Indesign.

Because of the changing marketplace and evolving technologies I am aggressively moving toward web design to make a living. I’ve gone through every Dreamweaver, Fireworks, and Flash tutorial I can get my hands on.

I love Fireworks. One thing I wish it would do:

Give us the ability to import raster images the way Indesign does, as a link, rather than embedded. That way we can resize, etc. in a non-destructive fashion. Recently a client had me enlarge most of the photos on his website. I had to replace them because they no longer had the resolution they needed in order to be enlarged. A simple link would have solved that. Another benefit would be an easier way to crop the images (rather than pasting on a mask, which seems counterintuitive to me–I either want to import the image through a frame or else paste it INTO a shape).

I’d also like to have the ability to use the same keyboard commands in Fireworks (and Flash) that I use in Illustrator and Indesign.

Leave a Comment

Previous post: Speaking at IxDA Interaction 09 Vancouver

Next post: Fireworks Workflow — Thank You!