Jul 27th, 2009
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.
8 Responses to “Seven Reasons why Fireworks Works for Screen Design”
Leave a Reply
You must be logged in to post a comment.
One of my other designers, who has been off with a client for months, is starting to swear by FW, but I have yet to be convinced.
My biggest issue by far is the part you find best. It’s pixel based. From a make-final-graphics POV, it’s probably great, but I first and foremost want to make the design right. And just watching people use any raster tool makes me worry that they lock you in too much. The worst case is you get sites that say “best viewed on” with a resolution. Or, hundreds of designs to cover every mobile phone screen resolution.
When instead I like vector based tools to encourage math and rules based design. I rant about this at a lot of length in my design process book, so anyone who wants more can go grab that on their own time.
Ideally, someone will make a real multi-mode tool, or Adobe will take their interop (Illustrator to PS or FW) to heart, and we can move straight from vector to several output resolutions. But it seems far off.
[...] continue reading » var addthis_pub = “lr_button”; Fireworks [...]
@shoobe01
“I like vector based tools to encourage math and rules based design”
That comment is spot on. Building a mathematically grid-based design in Photoshop is a exercise in futility.
If you look at almost all “how to build a website in Photoshop” tutorials, the designers basically say, “We’ll make a box… about here… or so…”, with very little rhyme or reason.
And resizing a rounded rectangle box in PS? Puhleeze.
But, as to Fireworks, I’ve tried time and again to come to terms with its own UI, and it drives me away each time.
That’s why Illustrator is my boy. Plus, the Export to .psd feature saves all of your layers, appropriately named, converts opacity and clipping masks to PS masks, etc., so you could “send over the PSD”.
Hey, author of http://adobegripes.tumblr.com/ here.
Have to say I agree 100%.
I learned to design in Photoshop and went through University using Photoshop, used Photoshop in my first job. However in my second everyone used Fireworks which at first I thought was utterly backwards, until about 7 months later when I had to do some screen design in Photoshop again and couldn’t believe how horrible it is for that.
There is no way I am going back to the days of 1 psd for each page of a site, or a whole site in grouped layers of the same canvas (Enjoy your 300 meg file that takes 10 minutes to open on a brand new machine with 4 gig of ram).
No way am I going to back to having to use the marquee tool to cut the rounded edge off a button, shove it ten pixels right then fill the area in between just because you wanted to expand a pixel perfect button 10 pixels (vector objects are not always pixel perfect so you have to do that sometimes)
Hey photoshop users, need to send some JPG flats to clients? 1 button press to export a multi page document in Fireworks, no screwing around with batch conversions.
How can anyone consider Photoshop a screen design tool when it can’t even centre an element in the middle of the canvas without you creating a filled layer to align to. Basic shit Adobe
You are spot on; I despair at seeing PS used for interface design.
> Fireworks does vector and pixel editing, but doesn’t go deep in either.
I think it would be a waste of Adobe’s time to try to recreate the entire set of Illustrator’s vector editing tools, or Photoshop’s photo editing tools in FW. It helps to think of FW as the equivalent of InDesign — not solely for creating designs from scratch, but used to assemble and layout assets created elsewhere.
Having said that, there are a number of vector drawing features and tools (particularly those in the Paths panel) which are unique, and very useful.
Great article. It inspired me to download Fireworks.
Although I’m not defending Photoshop, it’s worth noting there are a number of ways to select via click in Photoshop. Users can turn on Auto-Select with the move tool or use the command key with the move tool active. Users can select any layer beneath the pointer by right-clicking. It’s also possible to select multiple layers by holding down shift while clicking around with the move tool.
Honestly, Photoshop can handle everything you mention here easily. And it has been able to for about 7 years.
I’m far from a Photoshop apologist. I agree that Adobe needs to refocus its efforts in the UI design space, across all programs. But Fireworks isn’t the answer.
Here is how to tackle each item in Photoshop CS4:
1) Select any object – Right click on any item in Photoshop and you can jump to that layer, or any layer with art in that pixel above/below it.
2) Grouping – Linked Layers or Folders allow for tons of customization. Or Comand-Shift.
3) Vectors – Using the vector tools you can get pixel perfect accuracy. Or the pencil tool can do the same for raster uses. They can be hand tweaked with handles that match the Illustrator behavior.
4) Library – These are called Smart Objects. They can be PSD or AI files and automatically populate.
5) Slices - Slices from guides. Takes about 2 seconds to create items like buttons.
6) Pages/Frames - Um…isn’t this the same as the library point? Smart Objects.
7) Layer Effects – While you can’t add unlimited editable effects you can easily add unlimited effects. Layer > adjustments > Create layer, will allow you to create a layer set of your effects which you can duplicate or modify. And then you can add another layer effect over the top. Continue until your happy as can be.
In the end it all boils down to preference. If you prefer Fireworks, I’m very happy for you. But all of the item’s you listed here are available within Photoshop when used by a knowledgeable hand. I believe there is no question that Fireworks will be absorbed by Photoshop in the next five years.
[...] “Seven Reasons why Fireworks Works for Screen Design” — and, in particular, why it’s better than Photoshop or (heaven help you) Illustrator for this task. [...]