Fireworks in enterprise IT

When you mention the term "design," especially in the context of visual design using a computer, people undoubtedly think of Adobe Photoshop, the popular pixel-based image editing software. In our culture, the word Photoshop has followed Google in becoming a proprietary eponym. Originally both proper nouns, these brand names are now commonly used as slang: "I'm going to google the answer" or "This image has been photoshopped."

Though I use it as a verb, I rarely run Photoshop unless absolutely necessary. You might be wondering how an information architect who designs websites manages to live without it. Simply put: Fireworks.

Suspend your judgment and disbelief while I explain why I love this unsung graphics application so much. Also, be aware that the purpose of this article is not to downplay the usefulness of Photoshop but to accentuate the often overlooked benefits of its equally capable cousin. It is my assertion that Fireworks makes an excellent choice for designers and developers working in an enterprise environment, helping to streamline workflow and expedite collaboration.

PNG pong

While Photoshop is the ultimate software for master photographers, Fireworks offers an unparalleled feature set for web designers and developers.

One of the obvious benefits of Fireworks is that it saves images natively in the PNG file format (pronounced "ping"). PNG, which stands for portable network graphics, is a lossless compression format supporting alpha transparency and millions of colors. You might be thinking, "What about layers? Isn't the PNG format only for flattened files?" Normally that is true but Fireworks automatically retains the layers you create, just like Photoshop.

Using PNG files created in Fireworks results in significantly reduced file sizes compared to the equivalent Photoshop document. In fact, after doing a few nonscientific tests—saving layered files in both PNG and PSD file formats—I found that the Fireworks file is typically 61% smaller. Another key benefit of Fireworks is compatibility when it comes to sharing your graphic files with others.

Share the love

As a general rule of thumb, anything that can read JPG or GIF files will usually support PNG as well. Unlike the PSD format used by Photoshop, PNG files are readable by a variety of freely available applications, including the most important: web browsers.

Working as an interface designer at a Fortune 500 company, I used to save my work on a shared network drive. The user experience team had full access to our PNG files, whereas all other stakeholders in the company (of which there were many) had read-only rights. This setup allowed my team to go about working in a typical fashion. When it was time to get signoff for our mockup designs, rather than performing a batch export of hundreds of PSD files to either JPG or GIF format, we would just send a quick e-mail:

"Here are the project comps: http://10.10.10.xx/uxd/project/"

The approval team could then peruse the interface mockups at their leisure, without us having to do anything extra special to allow them to see our designs. Even better: being on a conference call with the primary stakeholders reviewing my PNG file in their browsers, I could edit the design in real time, based on their feedback. I cannot even begin to estimate the amount of time I saved.

Former coworker Cody Lindley, now lead client-side engineer at Fluid, told me, "When Adobe acquired Macromedia Fireworks and enhanced its PSD support, they improved the workflow for everyone. Fireworks is what Adobe ImageReady tried to be. If Photoshop is the tool of master photographers, Fireworks is the instrument of web professionals."

Rapidotype

Another strength of Fireworks has always been its capability for rapid prototyping. This process is even faster with the release of Fireworks CS3. This is due to the new Pages feature, which enables you to make master templates from which other subsequent layers can descend. Pages essentially work the way canvases do in OmniGraffle. The main difference between them is that as you create prototypes in Fireworks, you have the ability to simultaneously design the final look and feel of your web application.

From there, you can easily export the project to HTML for a quick and dirty client walkthrough (never do this for production code). Additionally, Fireworks is fully integrated with Adobe Flash, which means you can seamlessly import your PNG design in Flash as a FLA vector interface. To top it off, Fireworks can directly create functional SWF animations as well.

Industry grade

When slicing up images for production use in XHTML and CSS layouts, no other program beats Fireworks in terms of compression. The optimization features available in Fireworks really add up when you consider the amount of images used in larger sites. This has implications for page rendering and monetary savings in bandwidth.

Fireworks can also export MXML, the native interface format for the Adobe Flex platform. Flex powers database-driven rich Internet application (RIA) sites. In this regard, Fireworks is to Flex as Microsoft Expression Blend is to Silverlight. Essentially a visual design tool, Blend generates XAML, Microsoft's application interface file format for Windows Vista. It can then be used in conjunction with their .NET Framework.

Since Adobe acquired Macromedia, they have worked hard to ensure that their products are well integrated. Though Photoshop cannot recognize layers in PNG documents, Fireworks can read and write in the PSD file format. Despite some issues with PSD layers and clipping masks, the process for transitioning between Photoshop and Fireworks is nearly seamless. In the event of a disagreement amongst designers, peacemakers using Fireworks can mitigate any compatibility problems.

Peer testimonials

When this article originally appeared on GeniantSandbox.com, entitled "Enterprise Fire-Flow," it garnered largely positive feedback from fellow web designers. Here are a few select quotes from other industry professionals sharing their affinity for Fireworks:

I too am a happy and loyal user of Fireworks (since version 2, to be precise). Fireworks CS3 is open all day on my iMac where I use it for almost everything, including information architecture, wireframes, image editing, and website plus application interface design. The ability to export to Flex has been a huge boon to my productivity. While there is still a little bit of code cleanup to do, generally the Export to Flex feature is a killer feature. Given the feature set that Adobe already includes in Fireworks CS3, the advent of Thermo will make it an even better product for interface/interaction designers. I'm particularly looking forward to the data integration features. Imagine that: real live data to test and tweak your design in. Way too cool. – Geof Harries

I also am a Fireworks-only web designer. Until recently, I didn't know that so many web designers used it—and, quite honestly, I felt that maybe I had chosen the wrong tool based on the amount of Photoshop users there were. Learning that so many web professionals use it makes me realize that it is a tool that can compete with the best of them. I am a vector junkie at heart and I love making logos, complete website mockups, and art in Fireworks. The fact that Adobe Illustrator vectors copy directly in (in CS3, not sure about the others) is awesome. I'm not a die-hard in the sense of pushing Fireworks. If Photoshop works for you, great; however, I love using Fireworks and I am pleased to see that Adobe continues to better it.
– Rogie King

Fireworks is awesome. I too first started web design using Fireworks. Before I knew much about file formats, I was always confused as to why Photoshop rendered PNG files as flat images. The built-in layering of the standard PNG format is so much more useful than toting PSDs around and having to convert them for various uses.
– Ben Carlson

Fireworks definitely deserves more face time. I know it's an indispensable tool for my work. I only open Photoshop when I'm editing photos. I had never thought of putting a Fireworks file on the web server to share with clients. That is just awesome!
– Dave Lowe

Photoshop is truly the king of photo editing, but if web design is your bag, Fireworks will most definitely serve you well.
– Craig Erskine

I loves me some Fireworks. I've been using it since version 1! Fireworks still isn't a great photo editing tool but I can't think of anything better when it comes to web design. It's the perfect blend of features.
– Jonathan Snook

I'm a recent Fireworks convert and I've got to say, once you stick with it (for web work) you definitely come to realize the benefits in comparison to Photoshop.
– Jonathan Christopher

I agree wholeheartedly: I've always been a Fireworks user and enjoy its more web-centric features for fast, flexible production work—start to finish.
– Andy Rutledge

I've been using Fireworks since Dreamweaver 1.2. I quickly saw the advantage of using it within an integrated environment. I still use Fireworks today. I can run circles around most Photoshop heads doing layout and I've put up with enough mocking, knowing that in the end (of Macromedia), Fireworks would indeed remain and join Adobe's family of products.
– Brandon Richards

Where to go from here

I hope that after reading this article you will consider Fireworks as an option for improving the way your creative team works. If you own Adobe Creative Suite 3 Web Standard or Web Premium, chances are you probably already have Fireworks installed. Do yourself a favor and make the time to explore its versatility.

For a jump start on the learning curve, be sure to check out these online resources:

• Fireworks Developer Center (Adobe)
• Learn Fireworks (Craig Erskine)
• Senocular Fireworks Tutorials (Trevor McCauley)
• SixThings: Rapid Fire Fireworks (Erwin Simpauco)
• Screencast: Ajax Loading Animation (Myself)