How Fireworks Designers Can Help Developers

I recommend Matt Gemmell’s How Designers Can Help Developers. Being a proponent of Fireworks for UI design, I have a few comments regarding the Fireworks designer to developer workflow, particularly if the developer is working with the Fireworks PNG design file directly.

  • Don’t name styles based on their appearance (“Blue Helvetica 12pt”); use functional labels like “Primary link” or “Default button background”. This makes it easier for you to keep your styles straight after changing the appearance and for the developer to understand the purpose of the object.
  • If you are designing icons for a platform that requires specific names for certain images (such as launch images for iOS apps), use those names for your slices.
  • Use PNG-8 (set through the Optimize palette) for slices where acceptable to reduce filesizes. If you are using Photoshop, ImageAlpha can convert PNG-32 to PNG-8 with alpha opacity. You can then run images through ImageOptim to further compress them.
  • Place a consistently named layer at the top of your pages containing Measure autoshapes to provide pixel sizing for and between elements. To differentiate vertical and horizontal measures in tight spaces, you can subselect the arrows and labels to change their color. Placing a semi-opaque rectangle on the same layer at the bottom of the stack helps with clarity. Or use Specctr to generate such specs automagically.
  • If you are designing a web site or app in Fireworks, tell your development counterpart about the CSS3 extension for Fireworks.


Published by

Daniel J. Wilson

I am a designer, drummer, and photographer in Brooklyn, NY.