is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Every time I complain about Adobe Photoshop’s handicapped suitability for web production, people tell me to give Macromedia Fireworks a try, so today, I finally did. I spent a few hours in the program re-creating a layout that originated in Photoshop, and, after acclimating myself to the new application’s interface, I was generally pleased. It is indeed faster and more flexible in terms of shifting elements around, and it does in fact match a web designer’s frame of mind better than does Photoshop — I’ll almost certainly use it as the primary comping tool for my next project. However, I’m still not completely sold on Fireworks as the solution for all the problems that web production presents to a designer.
Face the Fireworks
To begin with, I’ve never felt entirely comfortable with the interaction quality of Macromedia’s user interfaces. They’ve always felt a bit shaky and slightly unpredictable to me, and to be honest, I’ve just got a predilection for Adobe’s interfaces, which have always seemed reliable and stable (at least until recently). For example: the way Fireworks’ layers palette functions, the way it responds to mouse-clicks, and the latitude with which it allows me to manipulate the layers — these things are not bad, but I’d much rather just have it function exactly like Photoshop’s layers palette. This is at least one reason to look forward to the fruits of the pending Adobe/Macromedia merger, but that doesn’t do me a lot of good right now.
My bigger problem is that Fireworks — and web design applications in general — remain too exclusively focused on single documents to be as useful as they really need to be. Combine Fireworks with a truly robust database that can keep track of objects and pages, and the result might be something much closer to what I want. The trouble with this approach is that doing so starts to suggest site management and from there, it’s a very short leap over to offering — and perhaps emphasizing — code production features, too. I imagine that, in the conference room of any software company, it would be very hard to argue for the R & D budget for a web tool that doesn’t produce any actual HTML.
Design vs. Code
To be fair, combining design and coding functionalities is a strategy that software publishers have more or less left behind. The line between web design and coding may be blurry, but the way the market has shaken out, virtually all of the advancements we’ve seen in this area have focused on the development of code, usually at the expense of tools for design. (Even Fireworks has seen scant improvements in the past several years, and I don’t count Macromedia Dreamweaver, which I’m not sure anyone should seriously use as either a comping tool or a production-ready coding tool.) To be clear about what I’m saying here: there’s been very little progress in the tools to enable just the visual design of interactive media.
In an ideal world, comping Web sites would be the very same act as developing semantically correct XHTML and CSS, and there would be a host of programs on the market that would enable this act. But I’m pragmatic enough to realize that such a union of sensibilities requires too major a leap forward in the ability of design software to accurately interpret a designer’s intent, and to balance that intent with implementation issues. We᾿re not nearly there yet, and I’ll forgive Fireworks for lacking XHTML knowledge entirely.
All of which is to say that there’s an idea in my head for a perfect production tool for the practice of web design — the rapid visual conceptualization of how interactive solutions might look — and it looks something like Fireworks, and maybe something like Adobe InDesign and Microsoft Visio too… but I don’t expect to see it on the market anytime soon, unfortunately. However, that doesn’t mean I’m going to stop talking about it.
and I don’t count Macromedia Dreamweaver, which I’m not sure anyone should seriously use as either a comping tool or a production-ready coding tool.
I’ve been using DW (in code view) for a few years and I think it’s a fabulous tool. By some reason, when I talk to other web developers, they point and laugh when I tell them I use DW to write XHTML, CSS, PHP, or whatever I might be working on.
I’ve never had one single problem. Dreamweaver has never messed with my code, and the site management tool is perfect.
Mark
As far as using DW for code view only, I really don’t see the point. If you’re just using DW in code view I would highly suggest using Macromedia Homesite instead.
*…Combine Fireworks with a truly robust database that can keep track of objects and pages…*
Actually Fireworks (much like Flash) implements the idea of a Library where you can keep various objects, instances of which you can use across multiple documents.
Combine this with Dreamweaver’s site management tool and you are pretty close.
hello, ever since you blogged about column designing on your site, I’ve been feeding from your rss. This is the first time I’ve felt compelled to comment.
I can’t recommend a code writing tool [i use notepad] but I can say that Illustrator is absolutely the way to go.
I don’t use it for slicing so I can’t recommend it based on that [although I believe its abilities are on par with Photoshop’s].
I also realize that the filters/effects might not quite equal layer styles in PS, but for comping it’s wonderful. And you can always open the file up in PS and apply any styles you want afterwards.
I don’t know if you’re an Illustrator guy at all, but I think you’d find it to be just about what you’re looking for. No awkward “layers for every object”, and while you can still do multiple stacked objects to get an effect, you can group them and treat them as one object, etc…. I could go on and on but my actual work is calling me.
timswan
Mark — There is no Homesite for the Mac, Dreamweaver is as close as we’ve got. People that haven’t used it in awhile may not appreciate just how good it is now. The code is as clean as anything that BBEdit produces.
I agree with Khoi about the seeming fragility and, in my opinion, slightly rough-around-the-edges feel. I use both Photoshop and Fireworks and much prefer the experience of working in PS. I also think that the anti-aliasing of type in FW is inferior (more like Flash) and don’t like that the native resolution is 72dpi so if I want to use the art for anything else I’m out of luck.
That said, I’d hate to lose Fireworks as it truly is a useful tool for the creation of web-only graphics.
Fireworks is my favourite screen graphics tool – no doubt. Whether its website comps or icons, its the best tool in my opinion.
Its layers implemenatation is the one of the reasons I use it. I love the fact that I can select any object on any layer, without having to select the layer first (as in Photoshop). I can also select an object by clicking it in the layers palette.
You have to get in tune with Frames. Ignore the fact that they were set up to create animated gifs, and use them as a way of creating mutliple pages in the document. Label each frame (such as 01 homepage, 02 subpage) and export ‘Frames as Files’. Each frame becomes an image file, named appropriately. Common page elements such as headers can be put on a shared layer and appear on all frames automatically. A real timesaver – and saves having to have a separate file for each page, or messing with layer comps. Just export everything in one go.
Fireworks has a superior gradient tool to Illustrator. Rather than illustrators hit and miss approach, Fireworks gives you a direction line and handles to adjust the gradient precisely.
The only drawback with Fireworks for me is the unorganised font menu. I hope Adobe’s influence will improve this.
While I agree that it would be good if Fireworks would then output XHTML and CSS from the designs, code (especially CSS) can be a very personal thing, and I imagine it would be hard to get it to create the code exactly how you would like it.
I think your spot about Dreamweaver. Code view is perfect it’s good for site management. But the Graphic layout (design view) hasnt changed in years. Macromedia have gone to great effort for code view but not for the graphic end which I think was it’s original purpose.
Jon, you can set Photoshop to select any object/layer by clicking the object on screen. With the move tool selected, check the “auto select layer” box in the tool info at the top of screen. Or.. with the marquee tool, right click on an object in screen and select from a shortened menu of layers.
I love the idea of using frames as pages. Nice tip! Thanks
Having replaced Photoshop with Fireworks for a few years, I have enjoyed the great mix of vector/bitmap tools and export features (slices, hotspots, etc.) for a while now, and find it cleaner and faster to use for simple tasks.
Sadly, Adobe seems to be bent on replacing Fireworks with Elements. I can only hope it will be sold off and kept alive by someone with less vested interest in Photoshop…
As a longtime day-to-day user of Fireworks for web comping and designing (since version 1.0, actually) I feel pouring some words here is in order.
Since 99% of the design work I do is destined for the web, I never felt the neccesity to fire the 800-pound gorilla that is Photoshop when I could accomplish the same results (and in an easier way) with FW. Suddenly, using PS for web graphics felt like driving a Hummer just to get to the drugstore a couple of blocks away.
The fact that you can manipulate bitmaps as vector-based graphics -without switching between applications- is what I’ve come to love most. Over time, I also discovered the trick of using frames as pages as Jon tells above (multi-page PNGs, indeed), and though I don’t use the table-slicing export function anymore (I went back to handcoding after DW proved unable to render CSS correctly), the slicing tool still comes in handy to export a particular section of a graphic piece I integrate later into HTML and/or CSS code.
True, the program is not without its flaws – its cache management leaves a lot to be desired, and after some hours of heavy use the program often turns s-l-o-w as molasses… quitting and restarting FW is often the only way to fix this, and in the Mac it feels even more excruciantingly so (tablet support is also flimsy in FW/Mac). However, these are things that I’ve learned to live with in exchange for the flexibility I get from FW for web comping and design.
It would be a real shame for Adobe to simply let FW go away in oblivion. If only they would roll up the bitmaps-as-vectors handling and slicing/optimization features on PS or a similar program, I would probably be a little less pissed off that when I heard the Adobe-Macromedia merger news.
I agree with Jon, though I’m definitely a photoshop user through and through. I do, however like the idea of using frames in that manner. You can do that with ImageReady (though I wouldn’t….god I hate ImageReady). Anyway, what I really agree with Jon about is the fact that code is personal. I don’t like anything generating code for me. Hence I use DW in code view only. And really I only use it at all because its site management is so extremely useful.
Ward
“With the move tool selected, check the “auto select layer” box in the tool info at the top of screen. Or.. with the marquee tool, right click on an object in screen and select from a shortened menu of layers.”
I switched to Fireworks about 4 months ago and I’ve never looked back. Aside from a few flaws, it is so much faster that Photoshop for creating comps. The flaws that get under my skin are:
– Memory leak. This makes me insane! As mentioned above, you can’t use Fireworks heavily for more than about 45m-1h before having to restart.
– Layer selection. Sometimes when I click on an inactive layer in the palette, it turns on, but then the palette jumps to a seemingly unknown location instead of staying on the layer you tuirned on. This can be very annoying if you have 50+ layers.
– Copy and pasting text. Or working with any text for that matter. Ctrl-V and Ctrl-C never work the first time. You have to paste….delete the weird character it pastes instead of the text, then paste again. On top of that, working with text is sloooooooow.
– I would love to have the ability to lock a single image (not layer). Maybe this is a difference in the layers palette that I simply have to get used to, but I don’t like creating a new layer/folder, just to lock a single layer.
– Shapes. Sometimes when I draw a shape like a square, I cannot grab two of the 4 points and drag them until I click on each one independently first. Also, the round corners option goes away once you move points.
I’m glad you’ve given FW a try – PS has always seemed to be not quite the right tool for the job of web comping and graphic production. While FW’s not perfect, no tool is – there’s enough there to keep my using it.
One reason I like FW is the whole Flash-Freehand-FW workflow – it’s great for cross-media projects. FW and Flash render Freehand files quite well, multiple pages and all. I know each of those tools has its flaws, but they do get the job done. Next time you have to create an identity that has a microsite, CD-ROM, and print collateral (with wireframes, storyboards, and prototypes along the way) that combo is hard to beat.
A few things I like:
– Vector data is very handy and flexible. Symbols are nice too, but I don’t use them that often.
– Slicing is much better, IMHO, than Photoshop’s. But…*
– What they’ve done with PNG is amazing. I love that I can just view them in a browser if absolutely needed.
– File sizes are smaller than equivalent, pixel-based PSD’s in many cases.
– Frames are great for comping up multiple templates. I even use them for storyboards sometimes when Flash or Freehand won’t do.
– Putting images in symbols lets you resize away, without losing resolution. I don’t have CS2 which I know is better about this.
A few things I don’t like:
– *Why can’t slices be per-frame? I hate this. This is the only feature missing from doing multiple pages (say, main and subpage templates) in one document.
– Photoshop’s type tools have caught up or surpassed FW at this point, so that’s less of a reason to go FW for this.
– Button creation (multi-state images) BLOWS. I hate having to make a symbol (an odd-behaving one at that) for each “button”. I usually end up making unique states and just slicing them, spread out over the page.
– Bitmap handling is weak. I still need to use Photoshop for anything but basic editing.
– Why, why why is it so slow?? OMG. It’s slow on both platforms. Text, effects, everything. This point is nearly enough to drive me away. Good for smaller stuff, but it’s as slow as it was when it came out. What is it thinking about…?
You’re right – the Чber-tool is yet to be created.
One thing that attracts me to FW is seeing how Photoshop is used in horribly disorganized ways in production teams. Layers everywhere!
One more cool feature: find-and-replace fonts, colors, symbols, etc. in a whole document (frames!), I think even across files. Try that in photoshop! It’s great for color variations on web comps – huge timesaver.
Okay, after a few more days of intensive use, I like it more. Jon’s tip about using frames for multiple pages is fantastic. I did get some memory leak issues, but nothing debilitating, especially not in the 45 minute time-frame that Mike G mentioned. It’s rough around the edges, but it’s growing on me.
I’d only be re-iterating what most have said above: Fireworks is great for website dsign comps. I then slice away and do all the XHTML/CSS by hand. Hope they fixe its memory problems, but I also hope they don’t discontinue my favourite program altogether.
Otherwise I just wish I knew the FW keyboard short-cut for Image Resize.
I will have to say its always possible to modify the Slice.xtt file or extend FW to work exactly as you want it.
I believe thats one of the biggest benefits with Fireworks especially if your already a coder or at least understand how to read it and modify it. The ability to customize and tailor your apps is golden to me.
Every time I
It never does 😉
I’m a bit interesting in this little quote:
and I don’t count Macromedia Dreamweaver, which I’m not sure anyone should seriously use as either a comping tool or a production-ready coding tool.
I’ve been using DW (in code view) for a few years and I think it’s a fabulous tool. By some reason, when I talk to other web developers, they point and laugh when I tell them I use DW to write XHTML, CSS, PHP, or whatever I might be working on.
I’ve never had one single problem. Dreamweaver has never messed with my code, and the site management tool is perfect.
As far as using DW for code view only, I really don’t see the point. If you’re just using DW in code view I would highly suggest using Macromedia Homesite instead.
*…Combine Fireworks with a truly robust database that can keep track of objects and pages…*
Actually Fireworks (much like Flash) implements the idea of a Library where you can keep various objects, instances of which you can use across multiple documents.
Combine this with Dreamweaver’s site management tool and you are pretty close.
But, as you mention, not there yet…
hello, ever since you blogged about column designing on your site, I’ve been feeding from your rss. This is the first time I’ve felt compelled to comment.
I can’t recommend a code writing tool [i use notepad] but I can say that Illustrator is absolutely the way to go.
I don’t use it for slicing so I can’t recommend it based on that [although I believe its abilities are on par with Photoshop’s].
I also realize that the filters/effects might not quite equal layer styles in PS, but for comping it’s wonderful. And you can always open the file up in PS and apply any styles you want afterwards.
I don’t know if you’re an Illustrator guy at all, but I think you’d find it to be just about what you’re looking for. No awkward “layers for every object”, and while you can still do multiple stacked objects to get an effect, you can group them and treat them as one object, etc…. I could go on and on but my actual work is calling me.
Mark — There is no Homesite for the Mac, Dreamweaver is as close as we’ve got. People that haven’t used it in awhile may not appreciate just how good it is now. The code is as clean as anything that BBEdit produces.
I agree with Khoi about the seeming fragility and, in my opinion, slightly rough-around-the-edges feel. I use both Photoshop and Fireworks and much prefer the experience of working in PS. I also think that the anti-aliasing of type in FW is inferior (more like Flash) and don’t like that the native resolution is 72dpi so if I want to use the art for anything else I’m out of luck.
That said, I’d hate to lose Fireworks as it truly is a useful tool for the creation of web-only graphics.
Fireworks is my favourite screen graphics tool – no doubt. Whether its website comps or icons, its the best tool in my opinion.
Its layers implemenatation is the one of the reasons I use it. I love the fact that I can select any object on any layer, without having to select the layer first (as in Photoshop). I can also select an object by clicking it in the layers palette.
You have to get in tune with Frames. Ignore the fact that they were set up to create animated gifs, and use them as a way of creating mutliple pages in the document. Label each frame (such as 01 homepage, 02 subpage) and export ‘Frames as Files’. Each frame becomes an image file, named appropriately. Common page elements such as headers can be put on a shared layer and appear on all frames automatically. A real timesaver – and saves having to have a separate file for each page, or messing with layer comps. Just export everything in one go.
Fireworks has a superior gradient tool to Illustrator. Rather than illustrators hit and miss approach, Fireworks gives you a direction line and handles to adjust the gradient precisely.
Finally, check out these tutorials from Malarkey:
Work Smarter with Fireworks Symbols
Something About Fireworks
Fireworks and XML
The only drawback with Fireworks for me is the unorganised font menu. I hope Adobe’s influence will improve this.
While I agree that it would be good if Fireworks would then output XHTML and CSS from the designs, code (especially CSS) can be a very personal thing, and I imagine it would be hard to get it to create the code exactly how you would like it.
Just a sidenote: I used Dreamweaver to write two books about Dreamweaver. No kidding. The asset management is still unbeaten.
I think your spot about Dreamweaver. Code view is perfect it’s good for site management. But the Graphic layout (design view) hasnt changed in years. Macromedia have gone to great effort for code view but not for the graphic end which I think was it’s original purpose.
Jon, you can set Photoshop to select any object/layer by clicking the object on screen. With the move tool selected, check the “auto select layer” box in the tool info at the top of screen. Or.. with the marquee tool, right click on an object in screen and select from a shortened menu of layers.
I love the idea of using frames as pages. Nice tip! Thanks
Having replaced Photoshop with Fireworks for a few years, I have enjoyed the great mix of vector/bitmap tools and export features (slices, hotspots, etc.) for a while now, and find it cleaner and faster to use for simple tasks.
Sadly, Adobe seems to be bent on replacing Fireworks with Elements. I can only hope it will be sold off and kept alive by someone with less vested interest in Photoshop…
As a longtime day-to-day user of Fireworks for web comping and designing (since version 1.0, actually) I feel pouring some words here is in order.
Since 99% of the design work I do is destined for the web, I never felt the neccesity to fire the 800-pound gorilla that is Photoshop when I could accomplish the same results (and in an easier way) with FW. Suddenly, using PS for web graphics felt like driving a Hummer just to get to the drugstore a couple of blocks away.
The fact that you can manipulate bitmaps as vector-based graphics -without switching between applications- is what I’ve come to love most. Over time, I also discovered the trick of using frames as pages as Jon tells above (multi-page PNGs, indeed), and though I don’t use the table-slicing export function anymore (I went back to handcoding after DW proved unable to render CSS correctly), the slicing tool still comes in handy to export a particular section of a graphic piece I integrate later into HTML and/or CSS code.
True, the program is not without its flaws – its cache management leaves a lot to be desired, and after some hours of heavy use the program often turns s-l-o-w as molasses… quitting and restarting FW is often the only way to fix this, and in the Mac it feels even more excruciantingly so (tablet support is also flimsy in FW/Mac). However, these are things that I’ve learned to live with in exchange for the flexibility I get from FW for web comping and design.
It would be a real shame for Adobe to simply let FW go away in oblivion. If only they would roll up the bitmaps-as-vectors handling and slicing/optimization features on PS or a similar program, I would probably be a little less pissed off that when I heard the Adobe-Macromedia merger news.
But just a little less.
I agree with Jon, though I’m definitely a photoshop user through and through. I do, however like the idea of using frames in that manner. You can do that with ImageReady (though I wouldn’t….god I hate ImageReady). Anyway, what I really agree with Jon about is the fact that code is personal. I don’t like anything generating code for me. Hence I use DW in code view only. And really I only use it at all because its site management is so extremely useful.
“With the move tool selected, check the “auto select layer” box in the tool info at the top of screen. Or.. with the marquee tool, right click on an object in screen and select from a shortened menu of layers.”
How in the world have I never noticed that?!
I switched to Fireworks about 4 months ago and I’ve never looked back. Aside from a few flaws, it is so much faster that Photoshop for creating comps. The flaws that get under my skin are:
– Memory leak. This makes me insane! As mentioned above, you can’t use Fireworks heavily for more than about 45m-1h before having to restart.
– Layer selection. Sometimes when I click on an inactive layer in the palette, it turns on, but then the palette jumps to a seemingly unknown location instead of staying on the layer you tuirned on. This can be very annoying if you have 50+ layers.
– Copy and pasting text. Or working with any text for that matter. Ctrl-V and Ctrl-C never work the first time. You have to paste….delete the weird character it pastes instead of the text, then paste again. On top of that, working with text is sloooooooow.
– I would love to have the ability to lock a single image (not layer). Maybe this is a difference in the layers palette that I simply have to get used to, but I don’t like creating a new layer/folder, just to lock a single layer.
– Shapes. Sometimes when I draw a shape like a square, I cannot grab two of the 4 points and drag them until I click on each one independently first. Also, the round corners option goes away once you move points.
Mike G
I’m glad you’ve given FW a try – PS has always seemed to be not quite the right tool for the job of web comping and graphic production. While FW’s not perfect, no tool is – there’s enough there to keep my using it.
One reason I like FW is the whole Flash-Freehand-FW workflow – it’s great for cross-media projects. FW and Flash render Freehand files quite well, multiple pages and all. I know each of those tools has its flaws, but they do get the job done. Next time you have to create an identity that has a microsite, CD-ROM, and print collateral (with wireframes, storyboards, and prototypes along the way) that combo is hard to beat.
A few things I like:
– Vector data is very handy and flexible. Symbols are nice too, but I don’t use them that often.
– Slicing is much better, IMHO, than Photoshop’s. But…*
– What they’ve done with PNG is amazing. I love that I can just view them in a browser if absolutely needed.
– File sizes are smaller than equivalent, pixel-based PSD’s in many cases.
– Frames are great for comping up multiple templates. I even use them for storyboards sometimes when Flash or Freehand won’t do.
– Putting images in symbols lets you resize away, without losing resolution. I don’t have CS2 which I know is better about this.
A few things I don’t like:
– *Why can’t slices be per-frame? I hate this. This is the only feature missing from doing multiple pages (say, main and subpage templates) in one document.
– Photoshop’s type tools have caught up or surpassed FW at this point, so that’s less of a reason to go FW for this.
– Button creation (multi-state images) BLOWS. I hate having to make a symbol (an odd-behaving one at that) for each “button”. I usually end up making unique states and just slicing them, spread out over the page.
– Bitmap handling is weak. I still need to use Photoshop for anything but basic editing.
– Why, why why is it so slow?? OMG. It’s slow on both platforms. Text, effects, everything. This point is nearly enough to drive me away. Good for smaller stuff, but it’s as slow as it was when it came out. What is it thinking about…?
You’re right – the Чber-tool is yet to be created.
One thing that attracts me to FW is seeing how Photoshop is used in horribly disorganized ways in production teams. Layers everywhere!
One more cool feature: find-and-replace fonts, colors, symbols, etc. in a whole document (frames!), I think even across files. Try that in photoshop! It’s great for color variations on web comps – huge timesaver.
While we’re on the subject, I thought I share the odd error I just encountered when I went to add an effect to a shape. Dev notes 🙂
Okay, after a few more days of intensive use, I like it more. Jon’s tip about using frames for multiple pages is fantastic. I did get some memory leak issues, but nothing debilitating, especially not in the 45 minute time-frame that Mike G mentioned. It’s rough around the edges, but it’s growing on me.
I’d only be re-iterating what most have said above: Fireworks is great for website dsign comps. I then slice away and do all the XHTML/CSS by hand. Hope they fixe its memory problems, but I also hope they don’t discontinue my favourite program altogether.
Otherwise I just wish I knew the FW keyboard short-cut for Image Resize.
Jeff, open preferences and make a shortcut… it’s really easy to do.
Why start using Fireworks when Adobe (I’m speculating) is going to scrap FW anyway? Curious.
I failed to mention one of my big gripes! (I’ll combine it with a plus as to not sound negative 🙂
Where is the full text justification minus the last line of the paragraph like Photoshop? (not sure if this has an official name)
AS promised….I do love that I can finally create links while designing that actually look like HTML.
Mike G
I will have to say its always possible to modify the Slice.xtt file or extend FW to work exactly as you want it.
I believe thats one of the biggest benefits with Fireworks especially if your already a coder or at least understand how to read it and modify it. The ability to customize and tailor your apps is golden to me.
//Alan