January 23, 2008

Mucking Up the Fireworks

Anyone following me on Twitter will likely tell you I have a love/hate relationship with Adobe products, specifically Photoshop, the application I use the most. After all, Photoshop is chiefly an image-editing application, but like most people I know, I use it as fully fledged layout program. Unfortunately, this requires jumping through numerous hoops, leaving one a pitiful sobbing mess by the end of the day. As a means to a website layout, Photoshop is woefully inadequate.

Photoshop is a lumbering dinosaur of an app (and the cause of many a marble of doom), snatching the attention of available resources until it’s finished whatever it needs to do. Unfortunately, Adobe’s efforts to make Photoshop such an all-in-one tool has clouded what its real use should be, and the loss of a competitor in Macromedia has stifled most forward progress. Hell, once you start needing to issue multiple editions of the same program, you should probably just split up the functionality into different apps. Let’s not even get started on the farce that is Creative Suite, where only the most popular of the bundled apps get more than a glance with each “new” edition. I’d guess Adobe has all but lost the respect of the community responsible for their success, because it seems as though Adobe has given up on respecting us.

Adobe Fireworks logo

In a moment of frustration the other day, I remembered an old friend: Fireworks.

While in college and shortly after, I actually designed many of my first websites in Fireworks. At the time it was still under Macromedia’s guidance, and on a natural path to become a strong UI design application. Fireworks blended some of the vector power of applications like Freehand and Illustrator, with some light bitmap handling and great image optimization. But then Flash got really popular and Fireworks became neglected. Now, approaching three years since Adobe bought Macromedia, Fireworks still languishes.

Don’t get me wrong, I’m not saying Fireworks hasn’t received any love, but the features being added are paltry at best, most being touted by how they integrate with other Adobe programs, leaving little for Fireworks to actually get done. The plain facts are it doesn’t do bitmaps better than Photoshop and it doesn’t do vectors better than Illustrator. It does do a scant handful of things better than those programs concerning the web (specifically image optimization), but do I really need a piece of middleware to bridge that gap? No. So, just who is Fireworks for? The casual web designer? Hardly. It sits firmly on the fence between power users and weekend web designers.

It’s high time we had a grown up User Interface design program, one that understands the nature of the web and the parameters we work under. Each time I revise a bunch of related text in a Photoshop comp, I wonder why the hell there aren’t Styles palettes like InDesign. But let’s not stop there: how about per-document grids, rather than system level settings. Or functionality to treat images and text as flowing and wrapping elements, rather than islands of content that need to be moved individually. Perhaps a rendering engine that understands CSS, the intricacies of type styling, and relative sizing units (px, em, %). Knowledge of current browser UIs, chrome, scroll bars, and libraries of those elements to use in comps (Fireworks does currently touch on libraries of form elements). Also, we don’t really think of pages as flat and static entities anymore; we now have pages that adapt to user interactions, reflowing, recreating, and altering content without a page refresh. The framework for what a page is has changed considerably even in the past few years, though our applications to design those frameworks are still stuck in the web of yore.

All of this is just scratching the surface. What we need is simply a dedicated and professional level UI design application, and Fireworks could still be it. And if Adobe can’t get it done, surely the independent development community could answer the call. In the past year, a rash of image editors running on Apple’s Core Image have been released. Pixelmator for example, is basically all the functionality I currently use in Photoshop, without the stuff I don’t (as soon as they get decent color and type palettes, I would seriously consider switching).

I really do hope the answer might be my old friend Fireworks. Photoshop seems like a lost cause at this point; soon enough it will be too bloated to run on modern computers anyway. For now, the ways in which we author and design websites have grown up, and our programs need to as well.

Commentary (76):

1. Dave Conrey says… jan 23, 2008 | 1:34 am

Come on Jason, drink the Adobe Koolaid.

Or you could always go with the GIMP.

2. Jim Jeffers says… jan 23, 2008 | 2:05 am

You are dead right! I take for granted all of the hoops I jump through to design comps in photoshop. I much rather get the approval to move forward and start doing HTML/CSS to tweak content than to mess with it in photoshop. It just takes to long. Smart Objects in PS3 have helped me with web design to some extent. But there really needs to be a better way.

3. Frank Jepsen says… jan 23, 2008 | 2:15 am

I sure hope Adobe’s Fireworks team is reading your blog.

Photoshop is bloated with features that should be in Fireworks (or other apps) instead. Can’t wait to see what features they include in the next version. My guess is support for http-equiv=”X-UA-Compatible” …

4. Greg Kaufman says… jan 23, 2008 | 2:26 am

JSM you hit the nail right on the nose in suggesting that Web design apps should understand things like CSS, sizing units, and type. I’ve found myself more and more in the past few years conducting design and development in a fully ad-hoc, build-as-you-go fashion.

In light of the complexity of Standards-friendly layout techniques, browser rendering engine frustrations (IE, mobile devices, email clients… bleh!), and the need for page elements to load in and out on the fly using JS/Ajax methods, I often find that coding up a simple HTML framework and simply “dropping in” Photoshop’d or Flash’d design elements is a more efficient and effective approach to getting the job done.

Gorgeous and artistic design is wonderful, but the majority of today’s most popular Web applications and sites are being used en masse primarily for their functionality alone. We need sites that load quickly, render properly on mobile devices, and interact gracefully with increasingly sophisticated client- and server-side technologies.

Why can’t we have a Web design application that helps to create CSS-ready designs, facilitates layouts which will easily integrate with CMS theme/template engines, encourages the designer to work from a unified style guide, blends in the suggestive aspects we find in YSlow and the Firebug Net tab, and uses predictive technology to help us accelerate our design process?

5. Brian Flanagan says… jan 23, 2008 | 3:17 am

I’d love to switch to Pixelmator. I dream about the speedy workflow and good user experience that I might get from it. However, every time I open it up, I go about 10 minutes and then realise its missing x, y, and z, and it’s back to Photoshop.

After switching to Coda, I’ve been on the lookout for a trendy young image editor to complement my trendy young code editor.

6. Simon says… jan 23, 2008 | 3:58 am

Bizarrely, it’d never occurred to me how useful it would be to have a ‘styles’ palette (a la InDesign) in Photoshop. Seems obvious now!

7. Matt Wilcox says… jan 23, 2008 | 4:45 am
I sure hope Adobe’s Fireworks team is reading your blog.

I hope there is a Fireworks team.

Photoshop is a great application, and I never did get on with Fireworks actual image editing/creation aspects, but I did love the library, and it was nicer to lay things out in. I for one would love to see a ‘Fireworks’ that handled more like Photoshop, but had all of those nice layout features you mention. Because Photoshop really isn’t a document design tool, despite how we all use it. None of us would try to lay out a print page using only Photoshop, so I think many of us have unrealistic expectations for the program. It’s for tweeking photos.

8. Brian Flanagan says… jan 23, 2008 | 5:03 am

re: It’s for tweaking photos.

Adobe knows very well that for a long time Photoshop is not for tweaking photos.

Take a look at its website:

It says CS3 is for professional photographers, serious amateur photographers, graphic designers and web designers. Under its ‘ideal for’ list for Extended, photographers don’t even get mentioned directly.

If anything, PS is trying to cater to too many fields. Enter Fireworks, that one can be ours.

9. Alcides Fonseca says… jan 23, 2008 | 5:20 am

I’m a webdeveloper and I do all my desiging stuff in Fireworks! It’s interface is way more intuitive than Photoshop and the app ligher too…

I am only sad that there was no major improvements since MX 2002! I just asked for Photohop’s brushes! That’s the only thing I really miss!

10. Kevin Cannon says… jan 23, 2008 | 8:21 am

Couldn’t agree more. I’ve been thinking that for awhile. I’d say something may appear in a few years. I think all the turmoil of technology in the web makes it a hard target to pin down and develop a application for.

Ideally you could build an all-in-one app, that created CSS too. If you look at Microsoft Blend, that is the UI design app you’re talking about, but it’s geared at creating application interfaces, since it’s a more defined medium.

Unfortunately, I don’t think Adobe are going to change Fireworks into the tool you describe any time soon. They are working on a UI tool, called Thermo, but it seems like it’s only geared towards Flex, and doesn’t even allow you to do all that much design in it.

11. Stevie K says… jan 23, 2008 | 9:14 am

Another problem with Photoshop for me, is their rendering is so much better than most of the browsers at the moment. Something that looks good in Photoshop does not look good in firefox 2 with its smaller colour palette and current text rendering.

I know this is more the browsers fault than Photoshop but a dedicated UI design program would go down a treat. Although I wouldn’t want to lose a lot of Photoshop’s functionality which is the main problem I have when laying out in Fireworks and the main reason why I often turn to Photoshop instead.

12. Rachel Maxim says… jan 23, 2008 | 9:31 am

All great points, I have often wished for all the features you mention, especially text/paragraph styles in Photoshop - web and CSS aside, there’s no reason not to have text styles in Photoshop! We need a better UI design tool. So here’s the Adobe wish form, everyone go fill one out!

Adobe Wish Form

13. Leeps says… jan 23, 2008 | 9:31 am

Amen! It’d be fantastic if Adobe would pay a bit closer attention to what the design community actually wants and needs, rather than the convoluted mess we get saddled up with.

14. Ian says… jan 23, 2008 | 9:56 am

“How about per-document grids, rather than system level settings?”

That would be extremely convenient. I’ll put that on the Adobe Wish Form. Keep fighting the power, Stan.

15. Jason Santa Maria says… jan 23, 2008 | 10:06 am

It’s good to see I’m not alone on this one!

To be honest, I really can’t see Adobe touching this. They are really caught up in building their full suite of apps, specifically pushing the namesake ones out there, and coming up with ways to move them all online. Fireworks is one of the bastard children that shook loose from the merger. In fact, it isn’t even listed in their main nav Products dropdown, or from the Products landing page.

My money is on the independent developers here. Speaking of which, if any independent developers want or are making something along these lines, and want a designer full of some good practical ideas to consult with them, please drop me a line. :D

16. Patrick Haney says… jan 23, 2008 | 10:19 am

I’m with you all the way on this one, Jason. We as web designers don’t have a tool made for us specifically and we end up carrying around a tool belt of things to use in different situations.

I’m actually a regular Fireworks user, and have been for quite a while. I gave up on Photoshop some time ago because it has too much crap I don’t need, and Fireworks had vector tools (Photoshop didn’t at the time) and better web optimization. But it hasn’t gotten much better for me over the last 3 versions.

Maybe we’ll see the independent guys create a tool just for us. I just picked up Pixelmator from the MacHeist bundle and pretty much have no reason to ever open Photoshop again.

17. Levi Figueira says… jan 23, 2008 | 10:48 am

Jason, you’re definitely not alone in this! Fireworks is my preferred UI/Web Interface design tool out there and I was certain and optimistic Adobe wouldn’t shut it off when they bought Macromedia. But like you, I wish I could see some more investment in the app that, currently, provides the best tool for new media interface design, which is the fastest growing market right now!

Like you said in your last comment (#16) I’m going with independent developers a lot more now. I really wish somebody hears you out and does that!

Of course, for work’s sake, I still need Illustrator and InDesign… :(

Trivia: None of their suites has both Fireworks *and* InDesign… unless you get the Master License! And considering how many Print/Web Designers are doing both Print and Web, this sounds dumb… You need to get the “Design Suite” *and* the “Web Design Suite”, overlapping apps like Photoshop, Illustrator, etc… OR you spend money on individual apps… arghhhh

I surely hope someone at Adobe hears you out! :)

18. Dan says… jan 23, 2008 | 11:08 am
I hope there is a Fireworks team.

There definitely is a Fireworks team. And they’re actually pretty responsive to feedback and feature requests.

I beta tested CS3 and there was a lot of discussion going on about this very issue.

Who knows how much freedom Adobe will give them to move the app in this direction, but there are definitely people working on Fireworks who want it to be the web/layout/UI design app you’re looking for.

And for anyone with ideas, suggestions or just wanting to express their support of Fireworks, this is the guy you should talk to:


19. Nathan Smith says… jan 23, 2008 | 11:09 am

I have to say, I loves me some Fireworks. It really helps improve workflow. Did a write-up here:

Enterprise Fire-Flow

20. Trevor McCauley says… jan 23, 2008 | 11:23 am

Hey Jason,

Thank you for for your analysis and requests! Know that the Fireworks team is paying attention and greatly appreciate your feedback.

Trevor McCauley

21. Jason Santa Maria says… jan 23, 2008 | 11:49 am

Trevor McCauley: Thanks very much for stopping by to chime in! Are your teams’ hands as tied as they seem? In all honesty, what if anything do you think could actually change in the path of development for Fireworks? What I propose, and what I really think needs to happen to set it apart form being a middle-of-the-road solution, is really a change in course from the ideal of flat page development. I really am an optimist here and want to believe that some good can still come out of Adobe, but my gut tells me I am a fool.

(Please don’t take offense from that, I’m sure you and your team are all wonderful and highly talented people, this is more a comment on Adobe direction from a business perspective.)

22. jake says… jan 23, 2008 | 12:24 pm

Come on now. Weak web designers? Surely its weakened web designers who cannot get the best out of a program that are weak. Fireworks is a great app, a blank canvas if you will. It is lighter than photoshop not to mention far more precise with fine details. It allows illustrator style tools for the base of your site without the cumbersome lag time of saving and importing. Fireworks is superb and deserves its place as one of the best UI web design tools on the market.

23. roxanne sutton says… jan 23, 2008 | 12:28 pm

I am among the great number of designers using Fireworks as a primary tool for large commercial websites. I find it more intuitive and faster at doing just the things in need to do for web graphics, as opposed to photoshop (which i reserve for photo work only). Fireworks has been consistently better at text and optimizing. And I agree with you that, it would be in Adobes’ best interest to support the vast web-building FW community.

24. Trevor Davis says… jan 23, 2008 | 1:29 pm

I haven’t spent much time with Fireworks, but there are a lot of things in Photoshop that I hate.

I really wanted to comment about the wonderful splash page and mystery meat navigation on the Bredstik site! Can you imagine if web-standards and CSS never really came about?

(I hope you don’t take that as an insult, everyone used to make sites like that!)

25. Lander says… jan 23, 2008 | 2:20 pm

Don’t forget about ImageReady’s magical slicing capabilities. When I first discovered slice sets I danced a jig in my office. When I installed CS3 and discovered ImageReady was dead, it was a dark day indeed.

26. kasnj says… jan 23, 2008 | 2:51 pm

Funny you should mention this…lately I’ve been turning to Fireworks for my UI comps and app planning. It’s not perfect, but I find I can get things done faster with less aggravation. And it doesn’t choke when I’m running more than 1 app at a time (which is always the case!). Plus the pages/layers combo makes it easy to show different states and keep multiple versions while we play with options.

27. Leo Klein says… jan 23, 2008 | 2:53 pm

I use Fireworks all the time to do layouts. Here’s one I just did for someone running for Congress.

The appeal of Fireworks is that it’s good enough for both bitmap and vector.

The day when there should be a difference between the two is passed. It’s so early nineties. That I should have to go from one application to another is a crummy workflow.

I am less than optimistic about the future of Fireworks (or Dreamweaver). I mean, remember ‘Go Live’?

28. Will Caslon says… jan 23, 2008 | 3:10 pm

Whaaaah. I gotta set type in points… Whaaaah. You kids don’t know how good you got it.

29. Greg Hoy says… jan 23, 2008 | 4:07 pm

Fireworks is for me Stan. Fireworks. Is. For. Me.

30. Johannes G. says… jan 23, 2008 | 4:49 pm

@Will C: ORLY?

31. Z says… jan 23, 2008 | 6:31 pm

For desktop software UI design there is no better tool than Fireworks, really. Photoshop might be better at resizing bitmaps or working with different color modes or what not, but this is all pretty irrelevant when it comes to being quick and productive while designing an application or a website layout.

In case of a serious design project, for final touch, you will always find the time for fine-tuning in Photoshop if necessary. But in order to be sure about what your layout or composition will look like and play around with it in no time, forget about PS. Fireworks’ “no-need-to-look-at-the-layer-palette” approach is simply a bliss. If you haven’t tried it, you really should. I’ve spent several years designing software GUI using Fireworks and I think it is a seriously comfy tool for that.

Besides, if you really think a bit before you leap, you can produce some killer graphics in Fireworks as well. No major difference to what you can come up with when using Photoshop.

32. Aaron says… jan 24, 2008 | 12:05 am

It’s nice to read a blog talking about something other than version locking. Thank you.

I’ve been wanting a suitable replacement to Photoshop for a long time, but I KNOW Photoshop, so I want an easy to use interface, that is built for designing for the WEB. I never use Fireworks but might check out some of its features.

I use CS3 at work and at home, but I’d love to find some nice, lightweight, not to mention low-cost alternatives to Adobe products. Text/HTML/CSS editors are pretty easy to come by but something for design other than Photoshop would sure be nice.

33. Graham says… jan 24, 2008 | 9:19 am

I use Fireworks almost exclusively for my web comp work, and receive much scorn for it from my Photoshop-using brethren, but I really feel that it’s more intuitive for me when sketching out web layouts and comps.

34. Jason Santa Maria says… jan 24, 2008 | 9:46 am

Will Caslon and Johannes G.: It’s great to see such famous and deceased type people stopping by :D

Trevor Davis: I know! Bredstik was only the second site I ever worked on. Rob Weychert and I put that together about seven years ago. Ah, those were the days.

35. Trevor McCauley says… jan 24, 2008 | 10:41 am

Jason Santa Maria: The Fireworks team is constantly busy working on Fireworks adding new and useful features to the product. It’s true that we might not have the same resources that, say, the Photoshop team might (given Photoshop’s leading position in the industry), but it doesn’t mean that we are ignoring the community and their needs. The more the community speaks out, the greater of an impact it will have in the direction of the product. After all, there’s no point in adding features that people aren’t going to use. The team spends a lot of effort trying to find out what Fireworks users’ needs are every release, so the louder you speak out (and in greater number of voices) the more likely something will be done about it. Be sure to, and this goes for everyone, use the wishlist form to send comments or suggestions. All submissions are read by a number of members of the team (myself included) and are a great way to get heard.

36. Michael Robertson says… jan 24, 2008 | 1:56 pm

Fireworks has long been my go-to app for web design and comps. As others have noted the blending of vector and bitmap functionality with conveniences like round corners and effects makes it a natural fit.

In addition to the great suggestions Jason and others have made for features, I have two major annoyances that I’d love the FW team to address.

One is the performance of the app when drag copying objects; which we all do repeatedly. The cloned objects lag far behind the mouse movement and frustratingly putter along as if in slow motion, until the processing finally catches up with your mouse. It’s been like this for at least three versions.

Second, the web layer functionality could benefit from a simple yet powerful enhancement. Each layer in the document should have it’s own web layer capability (much like adjustment layers in Photoshop). I’m forever having to do special saves or dead-end edit sequences (where you ultimately revert) just to avoid web layer overlaps and the resulting slice confusion. Document layers are routinely used to comp different states of a UI, having a single slicing layer is extremely inefficient.

Fix those two things in the next release Trevor and I’ll be first in line for the upgrade.

37. Jason Santa Maria says… jan 24, 2008 | 2:16 pm

Trevor McCauley: Thanks!

So, everyone who has hopes for Fireworks becoming the app we want, stop by the Adobe Feature Request form and submit features like the ones we’ve been discussing here.

38. Mike says… jan 24, 2008 | 10:10 pm

Gotta agree with this one. I grew up with Photoshop, but when I began doing more hard core web design and development, I switched to Fireworks. Of course this is when Macromedia had it. It took some getting used to, but it seemed like it was headed in the right direction and took heed in the backbone of UI design.

I knew Fireworks was in trouble when Adobe took over Macromedia. I just assumed they would try and merge PS an FW. While they haven’t done it as yet, as you said, PS is so bloated it’s as if they had merged them.

I’m with you JSM. Lets go indie developers!

39. Guillermo Rauch says… jan 25, 2008 | 2:23 am

Nice article! I thought I was the only one who found in Fireworks one of the most suitable existing tools for UI design.

For quick mockups, though, Photoshop does a very good job (remember http://www.alistapart.com/articles/quickcssmockupswithphotoshop/)

40. Phil says… jan 25, 2008 | 5:53 am

I have to say that I personally love Fireworks. It does take some getting used to if you are coming from Photoshop but once you make the effort it’s awesome for layout. I think the use of symbols for repeatedly used elements and non-destructive image resizing are much more intuitive than smart objects in Photoshop.

I use Photoshop for any serious image manipulation and bring the element into Fireworks for the comp. This works well. It would be a shame to add any additional image editing tools to Fireworks at the expensive of extra bloat.

The only thing that would improve Fireworks for me would be a CCS type style pallete as Jason suggested.

41. Dave Wright says… jan 25, 2008 | 2:21 pm

When I see sites like http://www.buzzword.com (which is Adobe’s Flex-based online word processor) it occurs to me that Adobe may be pursuing a strategy of bringing select apps online.

Photoshop doesn’t seem like a good candidate for this treatment, but Fireworks sure does: a collaborative, creative workspace that exists inside of the very medium it would be used to create.

Another independent developer has already started traveling down this path: http://a.viary.com/

42. Mike D. says… jan 25, 2008 | 10:12 pm

Hmmmmm, Pixelmator. That looks pretty tight. Fingers crossed…

43. Jason Santa Maria says… jan 25, 2008 | 10:35 pm

Mike D.: Pixelmator is really damn promising, though for me, and probably for you too, the OS color and type palettes are a deal breaker for now. If they work that out, it could be a serious contender for the low-bulk Photoshop crowd.

44. shane says… jan 26, 2008 | 12:36 am

I do all of my lay-out work in Illustrator. But I also started in print design, and just recently have become more involved and learned in the ways of the web.

However recently I have tried to keep my website as light as possible and have been using the least amount of images as possible.

Perhaps this is because in some way I am sub-conciously having the same problem you are and I am unable to find a program that is adaquate enough for web design.

Instead I am left coming up with lay-out ideas in illustrator and then moving things over to photoshop to optimize the images for web.

45. racerx says… jan 26, 2008 | 2:14 am

often I don’t use text layers in photoshop. I style the text in safari and take screenshots to paste into photoshop.

46. cpawl says… jan 29, 2008 | 10:41 pm

After 45 posts I would have to be the guy to disagree here…
After using Photoshop since version 2 I can not get use to the layout and lack of functionality that Fireworks has. It feels rather amateurish to me. I was always surprised of all the little things it just could not do. Although there is short comings with Photoshop I can run the program with my eyes closed. As a matter of fact we have a few Firework junkies on our team and I constantly challenge them to do a quarter of things you can do in PS. I equally like to show off that everything they think is better and easier I can perform in PS is a few easy steps, most of the time less steps.

My point is, with PS being the app with everything in it, there are multiple ways to do everything and once you understand those ways completely it is not as hard as you all are making it seem. For instance, the lack of CSS means nothing to me. My comps are jpgs, or if they are sliced and coded I write or someone else writes the CSS anyway. I would never trust an editing app to write my code - if I did I would be using Dreamweaver. Is it really so difficult to draw out a text box and set the text in it? Set the style to none, work out the spacing and line height -Really I can not understand all the crying. The same with CSS, is it really so hard just to write the code? Relying on an image app to do that takes all the fun out of it.

Jason, when I look at the sites that you have worked on I can not see one thing that would have been that big of an issue to mock up with PS. For instance, Happy Cog, uh… as beautiful as it is…

I feel lucky to have Photoshop on my side and I am grateful for all it has taught me. I could not live without it.

47. Webdesign Den Haag says… jan 30, 2008 | 5:03 am

Haha just give me photoshop ;) but eitherway thanks for your effort!

48. Jeremy Anderson says… jan 30, 2008 | 8:11 am

Couldn’t agree more Jason, although I am really hoping to see, rather than yet another design application I will need, a modular design application that can be optimized for a particular need. In other words, if you are doing web design, you could open the web module. This way the program would only sap the memory it needs, to preform the functions at hand, similar to a good old font manager.

49. Jason Santa Maria says… jan 30, 2008 | 10:25 am

cpawl: You’re missing the point of what we’re talking about. It has little to do with feature comparisons; Fireworks and Photoshop are both moving in their own directions, and each application has their appropriate uses.

The things we’re all crying about (as you so kindly put it :D) is that while we can use Photoshop (or Fireworks) when designing for the web, neither one is a dedicated application for the purpose. The websites we build have changed tremendously over the years, and it’s a shame our applications haven’t changed in kind. The examples I gave in my article above are just some of the potential outcomes of that, but the real change would be a shift in aim at the application level towards a more screen-focused program. Not just web/phone/whatever, but actually screen design and the interactions that happen there as the jumping off point.

50. Sean Schroeder says… jan 30, 2008 | 12:36 pm

I couldn’t agree more…while there is no question that Fireworks, is much faster workflow-wise than Photoshop, it could definitely be geared more to the web professional. I’ve been using it since v1 and it’s a great tool, but some of the features are definitely for those that don’t do design and dev everyday. That being said, it is truly the best tool for designing for the web, hands down. Photoshop is obviously extremely powerful, but it’s so-so for layout and design, as Jason pointed out.

51. Kevin says… jan 30, 2008 | 1:19 pm

Adding my name to the list that would LOVE a UI designer. Good description of what we need, right on!

52. Robb Hamilton says… jan 30, 2008 | 2:00 pm

Just adding my name to the list of long-time (since version 1) Fireworks users. Glad to know I”m in good company!

53. Adam says… jan 30, 2008 | 2:15 pm

@racerx I feel your pain - I can’t stand the way Photoshop (or Fireworks) renders type - this is my biggest complaint about them. Working on the web is all about typography, and not being able to accurately mockup web-type is such a loss.

@cpawl I agree about Fireworks - after becoming sooo proficient with Photoshop and ‘getting’ how it works, I can’t stand the feel of the FW interface.

My ideal app would combine the focus/lightweight of FW with the interface of Photoshop and all the additional features/focus stated here already.


54. Gareth says… jan 30, 2008 | 3:17 pm

Someone needs to talk to the guys at panic!

55. Simeon says… jan 30, 2008 | 4:48 pm

Panic! Exactly what I was thinking. The sort of folks that know all too well about simple functionality.

56. Jason Santa Maria says… jan 30, 2008 | 6:16 pm

Gareth and Simeon: Now you’re talking. The guys at Panic are exactly the kind of company that could do this the right way. They have a fantastic attention to detail and make some of the tightest software around. The only problem is I believe they only make Mac software. Which isn’t a big deal for me, but I imagine that might make the prospect of making such an app difficult. And this clearly wouldn’t be a small throwaway app.

57. Pete B says… jan 31, 2008 | 4:52 am

Illustrator has always been my choice for mocking up layouts it’s a lot quicker for throwing things around.

When the layout is more established then I move to photoshop to add the details. But I must admit hopping between the two programs is not ideal

58. Anthony Baker says… jan 31, 2008 | 10:16 am

I still don’t understand how web developers use Photoshop for site design.

In PS, the simple things you do a lot in web design are just too damned many steps, or far too difficult. Sizing a box? Open your info palette, draw a square, make sure the dimensions are accurate, stop dragging when they are. Want to change the size? Click the object to transform it, drag the edges again, stop when pizel-perfect. Want to manage the color and pixel width of a stroke — or, better yet, edit one you’ve already done? Good luck. Call it Photoshop’s performance cruft, if you will. Would be great if an Illustrator design could be imported perfectly into PS, but that’s almost never the case. Most designers I know who do an IL design first and then import end up tweaking far too much, or simply re-doing the design over the IL comp. (ick!)

The key for me about Fireworks is the pixel-perfect control of elements that I’m creating in the app using their properties palette. Want a box 300x40 pixels? Draw a box, define the width and height, done. Want a rectangle with curved edges? Draw a rectangle, define the size, define the curve in the properties palette.

For me, it begins and ends in Fireworks. Certainly PS has better font control, and there are graphical elements and effects that you can’t get in FW, but those are pawned off to PS and then imported. And, thankfully, FW CS 3 runs faster and more reliably (at least for me) than some previous versions. And lest we forget, slice-and-dice capabilities of FW when you’re finished are brilliant.

I’d certainly love to get a formal Adobe UX in the sucker and enhance its capabilities — either that or create some new app that pulls in the best of PS and Illustrator into something entirely new.

Until then, I’ll lovingly embrace the yellow bastard and contend with some of the scoffs I get from long-standing PS users.

Someone said, when the iPhone debuted, that their previous phone had a camera and other features superior to what Apple offered in theirs, but the fact of the matter was that 95% of what they did on the phone every day was just so astoundingly easier on the iPhone that it’s what made all the difference. This, in my mind, is the same with Photoshop versus Fireworks.

59. Glindon says… jan 31, 2008 | 1:38 pm

Yes, Fireworks seems like the red-headed step-child. I’ve even come to find Adobe didn’t even package it in the CS3 suite I have. If only text editing were more friendly/intuitive in Photoshop, I might complain less.

60. Tem-Tupac Aguerre says… feb 1, 2008 | 8:02 am

Glad to see someone disagrees, however I must disagree with cpawl (post #46).

To put it simply, Fireworks is not amateurish. Sure, the GUI is outdated. I was hoping FW would get the CS3 OWL interface, like all the other apps got. Sadly it didn’t, but apart from that, the only things I wish fireworks would have are photoshop brushes.

Too bad it’s so hard to explain why FW kicks so much ass. Especially when trying to differentiate it from photoshop.

For example, I made this site for Samsung and MTV without even opening PS, not once. http://www.nordicunsigned.com/. I’ve been using FW for several years now and I am able to work some serious black magic with it.

I hardly ever open photoshop nowdays, unless I want better control over my printing. Another thing I wish FW had, PS’s printing API.

For more examples on stuff done with FW, check out http://www.dynamicdevil.se. All websites, including that one were mocked up in FW.

61. will speak says… feb 4, 2008 | 5:59 pm

well when i took my gnvq in ict and multimedia that was sponsored by adobe we didn’t have photshop to work with just dreamweaver flash and fireworks, from then on i love the app as you begin to work out ways of doing photoshop things without photoshop…

62. Jay says… feb 6, 2008 | 3:11 am

I’ve been using Photoshop since version 2.5 and still feel it is one of the best tools for a web designer.

I’ve used Fireworks as well, mostly for optimizing images and creating animated GIFs. It stayed in my dock for quite some time but I dumped it a year ago.

There are a million ways to design a website using Fireworks or Photoshop. Use whatever you feel comfortable with. They’re both great tools to have.

I don’t know of any web designers that use Illustrator to do mockups. I do know of a few print designers that use Illustrator to generate website mock ups. These are the guys and girls that the production artists and web developers curse.

63. Marlyse Comte says… feb 6, 2008 | 2:20 pm

Photoshop has been my 2nd application to use on a Mac way back when I jumped from non-digital to digital (after battling Illustrator for a week until grasping the concept of paths) and ever since I’m also in a love/hate relationship with it.

After all these years I still believe it to be the best image manipulation application out there. But at the same time the forced upon ‘new features!!’ are getting into my (not only wallet) way. I do NOT care about some 3D built in option, much rather make the startup process faster!

Basically I just wish that Photoshop would become more modular and that there are options to what one would want to load and startup sets one could create… then also the path to more integrated and better layout options could be opened wide.

64. Nathan H. says… feb 7, 2008 | 9:55 pm
I still don’t understand how web developers use Photoshop for site design.

That makes 2 of us! I’m guessing the only folks who still use Photoshop for web page layout/design are the ones who haven’t tried Fireworks, else they’d already have switched.

Place me firmly in the Fireworks camp, it’s marvelous. Thanks, Stan, for the article. It’s especially impressive that the FW dev team chimed in!

65. Jason Campbell says… feb 8, 2008 | 5:04 pm

I just recently started to use Fireworks on a regular basis for my web design because it was the app of choice for my Sr. Designer that I recently hired.

I have long been in the Photoshop camp. Though I am pleased thus far with my experience it is tough to turn away from an app I have over 13 years of experience using for a new workflow in a production environment.

I would love it tremendously if you guys who swear by Fireworks would give us some insight into your workflow or tips and tricks, perhaps some insight into the features of the app that improve your process that might not be readily apparent to a new user.

I know that Andy Clarke is a big fan an you yourself Jason, a word or two on that would be lovely. If anyone has some resources it would be appreciated.


66. Lerick Mutis says… feb 10, 2008 | 2:51 pm

Wow! I have never seen this many cry babies in one spot. The problem is that you are using Photoshop as a web design tool, its good for certain things but it’s not meant for developing whole websites in it. You could create a nice comp with it and then take it into Dreamweaver and finish up the design rather easily. For those who have a problem with the speed of it, upgrade your computer if you are working on a G3 then you should probably be doing something else. I constantly upgrade my software and at $600 for the CS3 upgrade I think it’s a great deal.

Now for the main topic, Fireworks. I have used Fireworks in the past and it is a great tool but again you want it to be what its not. While it has some image editing, its not Photoshop, If you want animations use Flash, If you want beautiful vector graphics use Illustrator use the tool for what it is. If you want Fireworks to do all the things you want it to do then you are going to be complaining about how it went the same way as Photoshop.

67. Don H says… feb 11, 2008 | 10:24 am

One small item I didn’t see here, for optimizing GIFs, Fireworks creates a smaller file size using same # of colors, for whatever reason.

68. James L says… feb 11, 2008 | 12:19 pm

I too use Fireworks for nearly all web Design work, only cracking open Photoshop once in a while to do some bitmap work that Fireworks can’t quite handle as well.
There does seem to be a shift towards it again with many respected Designers now publicly saying that they predominantly use Fireworks for web work.
It is lighter, smarter and more intuitive for webwork with loads of handy functions like using frames to hold other pages (I think this has been updated in CS3 to actually give a pages function).
I’d rather live without Photoshop than Fireworks

69. Simon says… feb 12, 2008 | 3:52 pm

I started using Fireworks at version 1 and have used every version since at some level and while I had my doubts early in it’s life I came to appreciate it’s benifits over Photoshop a long time ago.

Don’t get me wrong, I’m no Fireworks fanboy but there is no doubt in my mind that it is a vastly more suited to the creation of web design layouts than Photoshop has or ever will be.

Photoshop, while horribly bloated, is still an incredibly powerful, useful tool but it’s roots (and strength) lie in image manipulation NOT layout. I disagre with Jason on the point that Fireworks has languished however. That it has escaped Adobe’s attention since the Macromedia aquisition is possibly it’s saving grace, as it has not been subjected to the same Adobe penchant for feature bloat as the rest of the suite. The integration with Photoshop and Illustrator has indeed improved while the overall feel and function of the application has changed very little and I beleive this is a good thing.

To be sure, there are things that could be fixed, tweaked or added to improve Fireworks and keep it in line with modern web development, but if they must come at the cost of the applications simplicity then I am happy with the status quo.

I have never seen Fireworks as a “Do All” web application prefering to use it as one tool in an expanding arsenal, where applications come to the party when there particular strengths add value. The idea of an application that is all things to all people is exactly the reason the Photoshops of this world are become bloated and it is my hope that this fate does not befall Fireworks.

70. Loughlin McSweeney says… feb 13, 2008 | 10:30 am

I have to say I always thought Fireworks was muck. And I always thought Photoshop was great. That said you raise some very interesting points. When I started developing websites in 1998 in college Dreamweaver 1.0 just came out. I can’t believe it’s still here. I design my sites in EditPlus. The reason? How can you expect a behemoth like Adobe to overhaul one of the key products in its portfolio to support a standard like CSS that is implemented by browser manufactures in such a disjointed and half-arsed way?

I reckon they should leave photoshop to the photographers and develop, from scratch, a decent web authoring/CSS complient tool that takes the focus away from image editing and more towards page structure, and as you so correctly pointed out, dymanic content flow and wrap.

71. Nicholas Shaff says… feb 13, 2008 | 5:30 pm

I can completely appreciate your annoyance with frustrations with Fireworks and Photoshop Jason.

I’ve come from a slightly reversed approach learning in Photoshop, but I’ve always been annoyed (especially since the Macromedia buyout) that there’s never been one comprehensive product. Not to mention the bloat, I was running CS2 on a 1Ghz G4 until recently… the pain…

I had a little laugh as I too just recently took a look at Pixelmator and wrote the developer on the same two issues complained about. Here’s to hoping they fix the type handling and color soon!

72. Matt Wilcox says… feb 15, 2008 | 4:57 am

After giving it some thought, I’ve actually installed the Fireworks CS3 demo and am giving it a go.

I’ve used Photoshop for web design my entire career, but I’ve used it because I already knew it, and Fireworks has a different feel. It frustrated me that I knew how to select a point of a path in Photoshop, but after five minutes of trying things in Fireworks still couldn’t figure it out. So after a brief flirtation with Fireworks back when I was working with Malarkey (he’s a Fireworks man) I ditched it and went back to Photoshop.

But, Photoshop is bloated as hell these days, and while my workflow in it is very well refined now, it’s still cumbersome at times. So yeah, I’m giving Fireworks a go to see how it suits me these days. I must admit though, it still feels like it’s from the 90’s. I think embracing the Adobe UI and tool behaviours would help that problem a lot.

Also, what I wouldn’t give for a swatch system that was actually useful (you know, a swatch that is embeded in the saved file perhaps? *rolls eyes at Photoshop*).

73. Stéphane Bergeron says… feb 15, 2008 | 10:03 pm

@Matt Wilcox

Matt, the reason you are having difficulty with Fireworks is that you are approaching it as if it was like Photoshop. It’s really not. Although it offers many of the same bitmap editing tools, by nature, Fireworks is a lot more akin to Illustrator than Photoshop. FW is first and foremost a vector based application but is really a hybrid vector-raster beast. If you really want to get Fireworks, ditch your Photoshop mindset, it will really only hinder you.

74. Luke says… feb 18, 2008 | 10:41 pm

Way late on this one, but the issue isn’t FW vs PS (who cares?) but having a solid tool for working in our medium.

Way back in the day most sites were simple, single template jobs or ‘brochure-ware’ and therefore reasonably approximated a print equivalent.

Photoshop = Single flyer/graphic/photo = single template
Illustrator = More layout oriented single page print pieces = single template
InDesign = Many page print publications (esp magazines etc) = closet to what we’re doing on the web these days, and the least usable for web design (now there’s an experiment I wouldn’t want to try!)

These days ‘simple’ web sites are many page publications (blogs) and the complexity often scales up from there.

However we’re left using a tool designed for a single layout to design these publications in a new medium (well, it’s hardly new, but you get the point!). Designing content/database driven, many-page sites in a single-page bitmap editor seems rather backwards when you think about it, but it’s the best we’ve got at the moment.

I find Photoshop an extension of my brain (as others I’m sure find FW) and am more than comfortable working there, but the process still could be infinitely more efficient.

I want to plug in the database of content I almost always have to design for. I want styles across my layout ala the print-pub apps. I want multi-page support, for cryin’ out loud! But most of all I want to be able to design in a more-or-less visual way in a graphical editor, not tweaking pixel/%/em values in a text editor.

Designing for the web these days is more akin to something you would traditionally design in InDesign/Xpress, yet we’re using tools (PS or FW) which are at the opposite end of the scale.
Here’s hoping that one of the bunch of indie developers releasing image editors (thanks to Apple’s library iirc) see this as an interesting market to pursue!

I do wonder how much it would cost to hire an indie image editor developer to build something like this…

75. Peter Gasston says… feb 19, 2008 | 5:01 am

Regarding bloat, I wonder if Adobe should consider shipping a lightweight version of Photoshop with extra features available to activate as plugins? I don’t use half the features it provides, and it would be useful to make the app lighter by deactivating them.

76. SiamJai says… feb 19, 2008 | 8:10 am

Jason: perhaps independent developer communities are your best bet for a dedicated UI design app that you seem to wish Fireworks turn into. :)

I agree with your analysis on Photoshop, yet the irony is not lost on me that while you wish this “lumbering dinosaur” to be split up into different dedicated programs, you also suggest that Fireworks should borrow additional functions from other programs to be some sort of all-inclusive UI design software.

If Fireworks indeed sits on the fence between pro- and causal users now, then such a function merge would push it even more towards the “weekend web designers” - people whose simple tasks can be accomplished by a single app, and can’t afford the pricey bundles that include the rest of the powerhouse CS3 group (particularly Dreamweaver in this case).

Professionals have advanced needs that a generic do-it-all app can’t satisfy alone. Dedicated professional programs are the way to go, and when Fireworks is being developed to enhance integration with other Adobe programs, I take it as sign that Fireworks moves towards professional needs.