Adobe Fireworks: My Favorite Web Design Tool

Adobe_Fireworks_CS6_IconIf 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.

Pages/Master Pages/Layers

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.

fireworks-pages

 

Interactive Prototypes

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.

fireworks-prototype

After linking the pages together, you can preview all the pages in your web browser.

fireworks-interactive

 

CSS Properties

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-css

 

Export images and elements

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.

 

Intuitive, easy to use interface

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.

fireworks-interface

 

The Future

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!

 

3 thoughts on “Adobe Fireworks: My Favorite Web Design Tool

  1. Fireworks is just so good at what it was made for, and many times i found that it even did a better job at compressing jpeg images than Photoshop Cs6. There is also some features that many people don’t know about, like the “Selective jpg Mask”, that lets you compress only selected parts of a jpeg image. It’s really great even for vector art / illustration.

    – Love Fireworks –

  2. This is awesome! I mainly work with InDesign and Illustrator but I can see how helpful this design tool would be. I really love the layout and the easy to read format you have created. The pictures really help me connect the dots. Keep up the good work!

Leave a Reply