At EightShapes, we’ve invested heavily in the use of the Adobe Creative Suite 3 collection of products for creating user experience design and documentation, and leveraged Adobe InDesign as the primary product for creating deliverable PDFs. But what’s this we hear about Fireworks?

With the CS3 release in early 2007, Indesign offered the enhanced capability to place one INDD file into another INDD file enabling us to modularize wireframes and components. With that, we extended our use of InDesign to also include the creation of wireframe artwork (pages, components, elements), abandoning the use of Illustrator for that purpose. This enabled InDesign to serve more comprehensively for the creation of wireframes and the deliverables that contain them. Clients look favorably on learning and buying one tool instead of two. Anyways…

Adoption of InDesign for wireframing is increasingly widespread, and was greeted with enthusiasm by the many EightShapes clients who purchased our documentation system and wireframing component libraries. However, all of a sudden in early 2008, we heard requests and/or interest in Adobe Fireworks for the production of wireframe and mockup-grade prototypes. Trust me, we’d not heard a whisper about Fireworks for documentation systems prior to 2008. Call it coincidence, call it a recent groundswell of popular support for Fireworks as a UX tool. Regardless, the prevailing opinion is that Fireworks is a more optimal tool for producing prototypes and smoothly blends vector- and pixel-based artwork. But is it more appropriate for a large-scale wireframing system?

As we approach not one, not two, but three clients expressing interest in Fireworks for the wireframing portion of the documentation system, it’s high time for a comparison of the strengths - and weaknesses - that each environment brings when considering a modular, component-based approach wireframing, documentation, and prototyping. With that in mind, this article strives to compare InDesign CS3 to Fireworks CS3 across some of the major categories of consideration for such a wireframing system.

Artwork

Both tools support a sufficient array of vector-based illustration, including anchor points, common shapes, stroke & fill controls, effects, object settings (such as rounded corners / “9 slicing”) and more. As far as vector-based artwork, both products are sufficient.

Modularity

Both tools support drag-and-drop panel collections of symbols (including elements and components): object libraries in InDesign, the symbol panel in Fireworks. However, that’s about where the similarities end.

Fireworks:

• Symbols are specific to a document, although you can manually import/export, cut/paste, and drag/drop from one document to another.
• Symbols can be managed as libraries, but must still be imported into a document prior to use.
• Symbol master changes can be propagated across instances of that symbol in the same document.
• You can embed artwork from one PNG into another via import; however, you cannot place and link artwork from one document into another.

InDesign:

• InDesign supports snippets, a convenient and independent file of page objects that are often used for wireframe page components. Snippets retain layer associations, resource definitions, styles, and support drag/drop of many items at one time.
• You can embed artwork from one INDD file into another, but you can also place and link artwork from many different formats (including INDD, PDF, EPS, PSD, PNG, JPG, and more) into an InDesign document. Linking files is a central tenet of modularity. Through linking, you can modularize components from the pages that contain them, and manage components over time within and across documents and projects.
• When placing artwork, you can control what layers and which page in the placed file is exposed in the destination file, without impacting what layers or page are selected in the source document.
• You can crop and resize placed, linked artwork in interesting ways without impacting the source file. For example, the placed file could contain a 2 x 2 grid of component variations, of which you’d crop out 3 of 4 variations to only expose the variation of interest in the full page wireframe.

While Fireworks symbols are more robust for within-document modularity, InDesign’s file linking, independent object libraries as panels, and snippet libraries represent a more scalable solution for efficiently and portably applying and managing design assets across files, projects, design staff, and a documentation system.

Typography

Both tools support a rich set of type attributes, including font family, size, weight, decoration, leading, kerning, leading, alignment, spacing, and baseline shift.

However, InDesign has broader features for text areas, flowing text across areas, and more.

Styles

Both tools support fundamental style capabilities for managing and reusing styles across objects and text, including fill type and color, patterns, angle, position, opacity, stroke type and color, type font, size, style, alignment, kerning, scale, and leading.

However, InDesign’s style capabilities are far more robust, which is critical for consistent visual language and maintaining large libraries of flexible design objects. These differentiators include:

• Style inheritance (e.g., quickly propagate a new font through a range of hierarchal styles)
• Style groups (surfaced through folders in each style panel)
• Style quick apply, via CTRL-ENTER followed by typing an autocompleted search for the style name, which is far more efficient than select object-and-click style to apply each one.
• Next paragraph style, useful for relationships such as a “normal paragraph” always following a “header”
• Distinct style collections for paragraphs (blocks of type), characters (inline type), objects, tables, and table cells
• For paragraphs styles: tab rulers with left/center/right aligned tab stops, character color, numbering systems, bullets/numeric lists, hyphenation, and strikethrough
• For object styles: text inset padding (left, right, top, bottom), text column count with gutter size, and text wrap for overlapped objects
• Distinct effects for object, text, stroke & fill

Advantage: InDesign. Sure, these are advanced style features. But advanced style features are just what the doctor ordered when creating a scalable, managed wireframing system.

Interactivity

Both tools support flexible interactive features, including:

• Buttons, hotspots, and hover panels
• Rollovers and disjoint rollovers
• Swap image and restore
• Attaching multiple behaviors to a single object
• Absolute and relative URLs
• Page selection within the current document
• Hyperlink destination management in a distinct panel (Fireworks: URL, InDesign: Hyperlink Destination), and can centrally manage and propagate changes to destinations through a document

But, make no mistake, Fireworks is made for prototyping. If a team is looking to create clickable walkthroughs, then either tool does the trick. But if advanced prototyping features are more your thing, then look only to Fireworks to find:

• Navigation bar collections
• Popup menus
• Animations with frames, tweening, and playback control
• Button symbols (as opposed to only instances)
• Named pages for easier selection
• Alternative text
• Status bar control
• Target specification
• URL library maintenance in a separate HTML file to manage and choose from common destinations.

Advantage: Fireworks. While InDesign provides all the fundamental interactive features needed to create a working, flexible prototype, it’s Fireworks targeted and broader features, ease of use, learnability, and HTML (instead of PDF) output that establish an obvious edge.

Output

Fireworks’ native format is PNG (a plus, for quick previewing outside the program) and can be exported to a range of optimized image formats as well as clickable, HTML-based prototypes. InDesign has a native format specific only to InDesign itself, and produces PDF output, albeit with a multitude of options for interactivity and more. However, InDesign’s export to HTML is pretty horrendous.

Advantage: Depends on your context and workflow. Mostly documents you produce? InDesign. Focused on prototyping? Fireworks.

Overcoming Prejudices

While InDesign is a tool primarily targeted at print publishing, there are existing prejudices that may inhibit individuals from recognizing InDesign product features that lend themselves well to wireframing and mirror those found in Fireworks.

Sure, you can “export html and create an entire site from Fireworks,” whereas the output of InDesign is an interactive PDF, whose behaviors and feel are not equivalent (if still similar) to a browser experience. But, that same designer who dismissed InDesign out of hand is biased by notions about InDesign that are not correct. In contrast to assumptions we heard, you can use either tool to quickly prototype pages, create a walkthrough of multiple pages, and use “symbols.” Plus, the designer’s rejection of InDesign doesn’t really mesh with the 8+ clients that have paid for and enjoyed the benefits of an InDesign-based wireframing  and deliverable solution.

InDesign is not a tool to touch up photos or create pixel perfect design. However, it’s vector approach, superior and broad styles, type capabilities, and modularity support systematic wireframing to depict lower fidelity site structure and behaviors. Additionally, restricting the UI or IA resource from pixel-based can be a good thing. I can recall too often the time lost and rabbit holes explored when tweaking and polishing visual style when a design solution and/or visual system has not yet matured to that stage - OR - matured so far that my artifacts and their audiences need not be concerned with such detail.

The Verdict?

They are both good, very good. Choose a tool for wireframing depends on the specific organizational setting, preexisting tool proficiencies, need to also support visual design in the same tool, likelihood of heavy vs. light prototyping, and modularity.

I don’t regret at all using InDesign for every single component library we’ve built to date, even knowing what I have now learned about Fireworks. It’s a great tool that’s surprisingly well-suited to the extreme wireframing approach we’ve fine tuned with our clients. It has served us - and our clients - very very well. We’ll continue to use InDesign for wireframing and prototyping in the future, I’m sure.

I am also extremely excited by the prospect of using Fireworks as well, kicking the tires and taking it not for a test drive, and diving deep on one or more client component libraries in the coming two or three months. Fireworks usage and adoption, as well as some burgeoning capabilities coming up in the next release, leave me very optimistic that we’ll have yet another tool in our kit. And, as you might guess, another tool mousepad available for sale on our site. Cheers!