Adobe Fireworks and Web Design

It amazes me how many people in my industry are not using fireworks these days. Simply put, its the best tool when it comes to web design. Especially for any kind of content driven design that relies on information for its content rather than graphics alone. For those who haven’t tried it, or don’t know what Fireworks can do, let me try to give you a quick rundown of a few of its advantages.

Integrated vector & bitmap tools & objects

You could say Fireworks isn’t the best at anything. If you need to create a rich, bitmap/raster based image or site, then obviously Photoshop is your tool. If you need to create an official vector logo file then you need to be using Illustrator. Neither one of those scenarios encompasses what I do on a daily basis. I need something that handles raster and vector equally as well, and Fireworks does just that. There’s no need to switch between applications and 99% of the time I can create exactly what I need right then and there. Not to mention it’s pixel accurate rendering which means that even vector elements get rendered to the 72ppi (pixels per inch) grid, and I can edit those bitmap based elements to display exactly how I need them. Fireworks is a vector based program at heart, but it handles bitmap needs well enough that I rarely need to open Photoshop.

Great Optimization Capabilities

Fireworks is a great tool for exporting your finished designs to slices ready for markup. It’s exported, optimized files are just as small and great looking as anything you’d get out of Photoshop or Image Ready. The workflow itself is great for slicing and output of files as well. One of my CSS Ninjas, Ken Hanson, didn’t know a thing about Fireworks, but once i showed him the basics of slicing and exporting files he ran with it. I could hear the excitement flowing from his office as he discovered how much easier Fireworks just made his job.

Small File Size

The Brutal Legend comp pictured here is probably the largest fireworks file I’ve ever built. It’s just under 30mb, and that’s only because of the huge amount of bitmap textures and images used to build the record, paper, and the large image used for the background. Exported to a PSD that same file is over 85mb.

Your typical community, blog, or information based project is likely to stay under 5mb. Even if you use the page functionality to design multiple pages of a single site into one document. The second comp pictured is a blog I designed for the Vista team is under 1mb. To put it into perspective, every project I’ve worked on over the past 3 years is in one folder. “Documents Info” tells me that folder contains 8,536 items for a total of 25.5GB. If I’ve done my math right, that’s an average of 3mb per file. Pretty good average considering there’s a lot of large image files, powerpoints, word docs, etc., but most of it is Fireworks files.

Just Dewit

These are just a few highlights and advantages of using Fireworks. In the end, you just have to give it a chance. Obviously its going to slow down your work flow for a few days, but once you get the hang of the basics I think you’ll fall in love with it just as I have. Simply put, Fireworks was built from the ground up to design websites, and its work flow, tool set and capabilities reflect that. Its got everything you need in a beautiful, seamless package.

For further reading check out Why Choose Fireworks, and Adobe Fireworks Tutorials and Downloads. You can also check out a free trial from Adobe. If there’s interest, maybe I’ll write a few tutorials showing some tips and tricks I’ve learned.