An Effective Style Guide With Adobe Fireworks

Joshua Mauldin started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, he has found it’s been like having a nice combination of a CSS class and a pattern library all in one.

One of the first questions, understandably, is why use Fireworks for a style guide? Well, for him, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but he finds Fireworks’ implementation to be smarter.

Here’s why he loves it:

• Symbols update everywhere, and you have to update them only once.
• Symbols have states, which let you easily show things such as selected and unselected states.
• Symbols may be placed on a single page for easy editing.
• If the styles are for the Web, you can easily export them as CSS.

This article is all about understanding why you would want to set up a style guide using Fireworks, and you’ll also get a little starter template that I like to use.