Seven Reasons why Fireworks Works for Screen Design

Editorial note: File under user interface design tools.

I have been advocating Fireworks as the best tool for screen design since Fireworks 3. However, somehow a good portion of the industry is still stuck with a photo editing tool. Here are seven reasons why Fireworks works for screen design.

1. Click = select

Few things in life make less sense than the Photoshop layer palette. Why look at tiny pictures to try to select what you need? Why not just grab it? Why should designers have to label every item they create, just so they can find it? Fireworks uses an object model like Illustrator, where all items are selectable with a click. Unlike Photoshop, when you select an element in Fireworks, you get visual feedback. Need to select an item that isn’t in the front? Use the handy “Select Behind” tool.

2. Group / ungroup / multi-select

Photoshop layers were created for photo compositing, not drawing a UI comprised of hundreds of small pieces. In Fireworks small assets are can easily grouped and ungrouped. While nested layer sets begin to address this in Photoshop, the result is a kludge wired onto the side of the virtual darkroom.

3. Vectors are great, but screens are made out of pixels

Using vector objects makes a lot of sense. They are scalable, editable and precise. Illustrator does a great job as a vector editing tool, but it’s horrible at translating them into crisp pixels. Ever try to draw a one pixel line in Illustrator? Even in Photoshop, making a one pixel line is way too complicated. This is partly because Photoshop and Illustrator are both designed to output high resolution artwork for print. Fireworks is designed with screen resolution in mind.

4. Library symbols

UI’s often use repeated components and regions. Library elements allow designers to make quick changes across an entire project. Need to change that arrow icon to a star? Do it once, and it changes everywhere. For even more coolness, check out the existing symbol libraries created for common os and mobile platforms.

5. Two words: 9-slice

If you have ever created a button or ui element that needs to stretch, you need to know about 9-slice. Wrangling rounded rectangle radii seems to be a common task these days. 9-slice makes it easy.

6. Pages / frames

Most UI projects use a few similar templates across many screens. The Fireworks pages metaphor allow for shared layers across screens. More recently Fireworks added a Master Pages feature for even more control. Need to change that annunciator region that shows up on every screen? Just change it on the master page.

7. Stackable layer effects

Have you ever wanted to add more than one drop shadow to a layer? Because Fireworks’ live effects are stackable, you can add as many as you want.

____________________

Despite its utility, Fireworks does have its issues, and it certainly shouldn’t be used for everything. Here are some thoughts about where Fireworks doesn’t work as well.

1. Type setting

First, type setting in Fireworks could use some real help. At a minimum, it needs a font menu that groups types by families and keyboard control over kerning. The good side? Fireworks has a great type rasterizer. It’s crisp without looking over-hinted. Also, Fireworks’ support for type styles is great for designers looking to use a consistent type palette across a design system.

2. Vector tools / Painting Tools

Fireworks does vector and pixel editing, but doesn’t go deep in either. So if you want to make an ever so popular, gratuitous sprig of curling vines and flowers, you might want to jump into Illustrator. Likewise, Fireworks falls down with virtual painting tasks, so for that plasma explosion or space background, you will want to crack open Photoshop. The good news is that Fireworks is able to stay lean by not trying to be all things for all designers.

3. Performance

Every version of Fireworks has gotten slower. Some of the features are clearly worth the performance hit, but the biggest speed bump came with the Creative Suite application framework.

4. Adoption

The biggest problem? Adoption. It is common for industry folks to ask for the “PSD’s”, assuming that no one would use any other tools. It was once the case that UI designers were all young turks, willing to try any tool. Now the old guard, standardized on Photoshop when Fireworks was in its infancy, is reluctant to make the switch. Better cross compatibility will help adoption, but attempts to rationalize the document formats between Photoshop and Fireworks could make Photoshop a worse photo editor and turn Fireworks into feature soup.

Regardless of these quibbles, I still recommend Fireworks as the best tool for drawing UI. So pick it up and give it a try. Check out how easy it is to make a gradient filled shape, add three different kinds of drop shadows, and export an 8 bit png with alpha transparency.