How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr

Today, being a designer is about much more than drawing beautiful interfaces in Photoshop or Fireworks. To properly design a website or application, a UI designer must understand the technology with which their products will be built; therefore, they must have a minimum set of front-end development skills. The World Wide Web is not static. Quite the opposite: It’s responsive, fluid,evolving and ever changing.

Web designers need to be familiar with HTML and CSS code and front-end technologies when they conceive a website or application’s interface. It might be of no real interest to some of you, but it could add some precious assets to your range of skills. Or, as Jeffrey Zeldman put it five years ago:

Real web designers write code. Always have, always will.

His words are still valid today.

I recommend that you read a very interesting article, “About HTML Semantics and Front-End Architecture,” by Nicolas Gallagher, creator of Normalize.css (a modern alternative to CSS resets) and one of the web’s most popular front-end templates, HTML5 Boilerplate.

Knowing front-end development will also facilitate the work of the developer who will implement your design later (that is, if you’re not both the designer and the developer).

I still notice that quite a few designers are extremely good at creating beautiful user interfaces but do not have enough experience in HTML and CSS — and coding experience is even more important these days.

Adobe Fireworks is a graphic design tool, but it has always been focused on web and UI design. In Creative Suite (CS) version 6, a CSS Properties panel was added to its toolset — a tool that, if used properly, could help both designers with CSS coding experience and beginners alike.

By the end of this article, you should have a better overview of this feature and also know how to use it with CSS Professionalzr, a free extension developed by Matt Stow to further optimize the code generated by the panel.

Note: Even though Adobe Fireworks CS6 was “feature-frozen” in 2013, it still works as of the end of 2014, with no issues in the latest editions of Windows(8.1) and of Mac OS X (Yosemite). Not only does it work, but it’s still being actively used by many designers — among them, designer and illustratorFabio Benedetti, who recently wrote an extensive piece about designing and illustrating icons in Fireworks.

Leave a Reply

Your email address will not be published. Required fields are marked *