An Effective Style Guide With Adobe Fireworks

Set up a style guide using 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.

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>


Be the first to write a comment

You must me logged in to write a comment.