...or how I learned to stop worrying and love Fireworks.
Photoshop has been my go-to tool for many years now. Like a trusty sidekick it was reliable and always helped me get the job done. It was the Robin to my Batman, the Hobbes to my Calvin. But there was always another other program lingering off in distance, a mysterious one I had minimal first-hand experience with; little did I know that it would soon forever change my workflow.
Don’t get me wrong, Photoshop is a great tool, but when it comes to building and managing web comps, Photoshop is just the wrong choice. It’s akin to using a spoon to cut a steak--it’s simply the wrong tool for the job, and although it may work eventually, the experience leaves much to be desired. Below are my top 10 reasons why I’ve decided to use Fireworks over Photoshop as my primary web comp tool.
1. Pages
When building out multiple pages of a web comp in Photoshop, I would generally create a folders in the layers panel, in which each folder would represent a different page of the site I was working. The problem with this approach is that a) pages and layers become mixed together which can potentially lead to confusion and b) some pages may be longer than others which can result in some awkward gaps appearing in your comps. Fireworks handles this by separating pages from layers, therefore each page of your comp can contain its own distinct layers. Each page can also have its own unique canvas size which gives you complete control over how each page will appear to your client.
2. Master Pages
Similarly to InDesign, Fireworks allows you to create master pages which can contain content that can appear on multiple comp pages. The most common use case for master pages would be for the site header and footer. You would only need to design the header and footer once in the master page and then you can simply make it appear on any pages you’d like. The advantage to this approach is that if you have to make any edits to the header or footer, you will only have to make the edit once in the master page and the change(s) will be reflected in all the pages that use that master page.
3. Find and Replace Color
Perhaps a lesser known but equally awesome feature of Fireworks is the ability to find and replace all instances of a colour across your comp. To access this feature, go to Edit > Find and Replace and then change Find Text to Find Color. This feature isn’t perfect as it occasionally seems to miss some items and it will only affect vector items not rasterized one’s, but it’s great if you’d like to quickly take a look at your comp with a slightly different colour scheme.
4. File Size
Photoshop is a beast of an application and as a result it often produces files that, like a patron at an all you can eat buffet in Vegas, are excessively large. I had often produced detailed website comps in Photoshop that were over 100mb in size. I suppose that might not seem like much, but when you compare it to the fact that you can build out extensive comps in Fireworks that are only 7mb or 8mb, the difference is clear.
5. Library of Form Elements
Trying to layout a form in Photoshop is just a pain. Designers are forced with two options, taking a screenshot of some form elements and then copying those into your project one by one, or finding/purchasing a collection of Photoshop form elements online. Fireworks thankfully has a vast library of form elements built right in. Need a text area styled in the OSX fashion? No problem, simply drag it in from the library. The real power of Fireworks’ form elements become apparent when you need to customize them. By clicking any form element you can toggle all of its preferences (checked/unchecked, horizontal/vertical scroll bars, initial value, enabled, etc.) in the symbol properties panel.
6. Rounded Corners
I’ll be honest, I am not a fan of rounded corners. In my opinion they seem to be a somewhat passe web trend. But, if you’re the type of person that simply can’t get enough rounded corners in your designs, Fireworks makes them much easier to manage. The problem with Photoshop is that although it does have the Rounded Rectangle Tool you are mysteriously unable to update the corner radius once it has been set, which would force you to delete that shape and draw a new one in its place with the updated radius. Not only does Fireworks allow you to alter the corner radius at any time, but it will also let you resize shapes with rounded corners while keeping the corner radius intact.
7. Easier Transition to Dev
I suppose it could be considered a drawback, but I think Fireworks’ lack of effects and filters helps me design websites that are much quicker, cleaner, and easier to build out. This isn’t to say that Fireworks doesn’t have filters and effects—it does—just not nearly as many as Photoshop. In all honesty, if the success of your website’s design balances on a lens flare -, then there is clearly a larger underlying problem at hand. At the very least I think Fireworks just encourages me to think more about how things are going to be built out once the dev phase rolls around. On a side note - don’t rely on Fireworks to export your site’s HTML / CSS, as it tends to be a complete mess; I only recommend it as a tool for comp design.
8. Speedy Slices
Although Photoshop has a very similar slice concept in place, the process is much faster in Fireworks. For those who don’t know, the slice tool allows you to draw a rectangle around any element of your comp and then give that element a file name and type for export. The slice tool effectively lets you export site assets en masse. The problem in Photoshop is that it can be very time consuming to draw many perfectly sized rectangular slices over a bunch of tiny icons you’d like to export. Fireworks makes this process much faster by letting you select all of the icons (or any type of asset) you’d like to export at once, right clicking and selecting Insert Rectangular Slice. That’s it; Fireworks will automagically create perfectly sized rectangular slices for all the assets you selected, eliminating the need for you to ever have to manually create a slice again.
9. Symbols
Anyone who has ever used the Flash IDE will know the benefit and concept behind symbols. Essentially, a symbol is a smaller version of a master page. For example: let’s say you wanted to create a small calendar widget to appear on multiple pages. You would design the widget once on one page, make it a symbol, and then copy and paste that newly created symbol to the other locations in your comp you’d like it to appear. Now, if you have to make any edits to the look and feel of the calendar widget, you only have to edit any one instance of it and the updates will be reflected in all the instances of that symbol.
10. Clickable Comps
It’s a fact: clients like to click on things. Sure static comps are able to convey your vision just fine, but clients get a certain twinkle in their eye when they can actually interact with that comp. They’re able to quite accurately get a sense of how their complete site will look AND function, and with Fireworks building interactive comps is a breeze. To turn any element into a link, simply right click on it and turn it into a hotspot, then in the properties panel you can set which page that link will connect to; it really couldn't be any easier or faster than that.
Summary
Fireworks has definitely proven to be a great asset to me. It has let me focus on creating better designs and user experiences without slowing me down with having to juggle hundreds of layers and folders. My only regret is not trying it out sooner, so if you’ve yet to take Fireworks for a test drive I strongly encourage you to do so!
TL;DR The termites of the world outweigh the human beings of the world.
The ratio is 10:1
