If you have done any type of graphic design work you are probably familiar with Adobe Photoshop and Illustrator. A program you are probably less familiar with is Adobe Fireworks. Fireworks is a hybrid program that combines Photoshop’s bitmap editing features with Illustrator’s vector drawing capabilities. Think of it as a light version of Photoshop with all the major path and drawing tools of Illustrator. It allows you to create multiple pages and states within the same document and link those pages together to present a clickable prototype.
The workflow Fireworks provides is what really sets the app apart for me as the best tool for web and interface design. Here is a list of some of my favorite features in Fireworks that make my design process easier.
The way Fireworks manages pages and layers is probably my favorite feature of the program. Just like a website/app may has multiple pages, Fireworks allows you to add multiple pages to a single document. Each page can have a unique design, or you can create a master template to include elements that stay the same on each page (like a header). Within each page are separate layers for each element, similar to Photoshop.
The interactive prototype feature in Fireworks is awesome. The interactive features allow you to create hotspots on a page that will link to another page in your Fireworks document (or any outside url). With just a few clicks it is easy to produce a prototype you can show to your boss or clients. You can even upload the interactive prototype to a web server, send out the link, and ask for feedback.
After linking the pages together, you can preview all the pages in your web browser.
This handy feature is great when coding higher level graphic features in CSS3. Simply click on an element and the CSS Properties panel provides all the properties you need to recreate the same element using CSS3. Just copy and paste the code and you’re done.
Fireworks provides an easy to use image exporter that I use to save elements needed for a website. There’s no need to open Photoshop when Fireworks does just as good a job of compressing images into smaller sizes. I’ve found Fireworks is especially good for slicing and saving .png images.
This is subjective, but I think Fireworks is very user-friendly, especially for anyone just getting started with the Adobe Creative Suite. The controls are intuitive and easy to find. Changing object attributes is a snap and relevant properties are always shown on the bottom of the screen. It is easy to see that Fireworks was developed with the explicit purpose of being a web/UI design tool.
About a year and a half ago Adobe announced they were going to stop developing new features for Fireworks but continue support and offering it as part of their Creative Cloud package. While I was disappointed that Adobe decided to stop making new versions of Fireworks, the CS6 version has everything you need to design modern, beautiful websites. Take a look at any website today and it can be designed using Fireworks.
There is also a strong community of Fireworks lovers that support the app by creating extensions that add new features and functionality. While there may come a day where Fireworks is obsolete, for now it is still the best tool I know of (especially on PC) for designing wireframes and mockups of full websites or apps.
If you’d like to learn more about Fireworks there are some excellent articles on Smashing Magazine. You can check out their Fireworks blog section here!