Fireworks isn't perfect, but I've come to believe it's better than the alternatives for user interface and web design. Here's why:
1. Responsive Designing
You can have a different screen size for every page in a Fireworks document, if you want, as well as taking advantage of the Master Page functionality. Unfortunately Photoshop doesn't allow you to have different screen sizes for various layer comps (Photoshop's take on "pages"). The closest you can get in Photoshop is having a large canvas that will fit the various comps. Besides, Photoshop layer comps are a pain in the ass since they break anytime you move or edit anything. Not an issue in Fireworks.
2. Symbols
Symbols can be created from an instance of any graphic. This includes buttons, layouts, containers, icons, whatever. After creating a symbol you can copy and paste that symbol as many times as you want to any page of your document. Any change made to a symbol will cascade through every single other instance of it in the document. If you want to make an independent change to a symbol without affecting the others, you can do that too.
3. Object Selection
Similar to Illustrator — and unlike Photoshop — you can click around a canvas and easily select any layer on it to edit and move. Yes, you can (sort of) do that in Photoshop, but because you have to regularly toggle direct select on and off to select the desired object. Because of the more usable and intuitive selection capabilities in Fireworks, it's not as important to organize and name layers or even really worry about them. You'll find that the only time you have to dig around layers is to find something that was locked that needs to be unlocked, which is easy because you can simply scan for the lock icon.
4. Path Tools
Path tools in Fireworks are very similar to Illustrator's tools and have been for several versions. Fireworks also includes a ton of other useful tools such as Sharpen Points and Filet Points, which allow you to round or sharpen the corners of shapes.
5. Clickable Prototype Creation
One of the handiest tools in fireworks is the ability to create hotspots through your document, linking various pages to others and exporting them all as HTML and CSS to create a quick and dirty prototype for usability testing. This is incredibly useful when validating workflows before going into full-bore coding.
6. CSS Sprite Export
Another handy tool in the Fireworks toolbox is the ability to select any number of slices and export them as a CSS Sprite with designated spacing and alignment.
7. Styles
You can save styles quickly and easily to apply to other objects throughout your document. This is faster than copying and pasting styles.
8. Document Size
Storage space is pretty easy to come by, but there is a big difference between waiting for a 30- to 90-MB Photoshop file to sync up on Dropbox vs. an 8-MB Fireworks file. And all but the largest Fireworks files will fit in an email attachment.
9. Illustrator Imports
If you enjoy building vector assets and icons in Illustrator, you can copy then paste them directly into Fireworks. The difference between Fireworks and Photoshop is that you won't lose any of the attributes of the vector work. Photoshop drops colors and won't allow compound shape import. Fireworks does.
---
Fireworks is not the silver bullet for UI design, and I wouldn't pretend that it is. But these (and other) reasons do make it a clear choice for me to use as my primary design program. I'm writing about it to hopefully help fellow designers find a similar experience and improved workflow efficiency.
Some of my complaints about Fireworks:
1. The text anti-aliasing blows
2. It crashes all the time. If you're not a reflexive saver, you will be, or your laptop is going through a brick wall.
3. Not as widespread as other tools. Most of the design community produces freebie asset kits for Photoshop. You can open these in Fireworks, but the import PSD function is far from perfect and tends to leave important layer styles out so it's almost not worth the time. Also since it's not as widespread there tends to be a quick training period with development teams that are used to PSD deliverables.
4. Layer masks are awkward and cumbersome.
2. Symbols
Symbols can be created from an instance of any graphic. This includes buttons, layouts, containers, icons, whatever. After creating a symbol you can copy and paste that symbol as many times as you want to any page of your document. Any change made to a symbol will cascade through every single other instance of it in the document. If you want to make an independent change to a symbol without affecting the others, you can do that too.
3. Object Selection
Similar to Illustrator — and unlike Photoshop — you can click around a canvas and easily select any layer on it to edit and move. Yes, you can (sort of) do that in Photoshop, but because you have to regularly toggle direct select on and off to select the desired object. Because of the more usable and intuitive selection capabilities in Fireworks, it's not as important to organize and name layers or even really worry about them. You'll find that the only time you have to dig around layers is to find something that was locked that needs to be unlocked, which is easy because you can simply scan for the lock icon.
4. Path Tools
Path tools in Fireworks are very similar to Illustrator's tools and have been for several versions. Fireworks also includes a ton of other useful tools such as Sharpen Points and Filet Points, which allow you to round or sharpen the corners of shapes.
5. Clickable Prototype Creation
One of the handiest tools in fireworks is the ability to create hotspots through your document, linking various pages to others and exporting them all as HTML and CSS to create a quick and dirty prototype for usability testing. This is incredibly useful when validating workflows before going into full-bore coding.
6. CSS Sprite Export
Another handy tool in the Fireworks toolbox is the ability to select any number of slices and export them as a CSS Sprite with designated spacing and alignment.
7. Styles
You can save styles quickly and easily to apply to other objects throughout your document. This is faster than copying and pasting styles.
8. Document Size
Storage space is pretty easy to come by, but there is a big difference between waiting for a 30- to 90-MB Photoshop file to sync up on Dropbox vs. an 8-MB Fireworks file. And all but the largest Fireworks files will fit in an email attachment.
9. Illustrator Imports
If you enjoy building vector assets and icons in Illustrator, you can copy then paste them directly into Fireworks. The difference between Fireworks and Photoshop is that you won't lose any of the attributes of the vector work. Photoshop drops colors and won't allow compound shape import. Fireworks does.
---
Fireworks is not the silver bullet for UI design, and I wouldn't pretend that it is. But these (and other) reasons do make it a clear choice for me to use as my primary design program. I'm writing about it to hopefully help fellow designers find a similar experience and improved workflow efficiency.
Some of my complaints about Fireworks:
1. The text anti-aliasing blows
2. It crashes all the time. If you're not a reflexive saver, you will be, or your laptop is going through a brick wall.
3. Not as widespread as other tools. Most of the design community produces freebie asset kits for Photoshop. You can open these in Fireworks, but the import PSD function is far from perfect and tends to leave important layer styles out so it's almost not worth the time. Also since it's not as widespread there tends to be a quick training period with development teams that are used to PSD deliverables.
4. Layer masks are awkward and cumbersome.