Fireworks Article

Wireframing with Fireworks CS3

Wireframes are barebones sketches of your website or application and you can use to demonstrate, document, and often validate the functionality of a design without any distracting pixel artistry.

This article expressed my thoughts on why Fireworks CS3 is a particularly good tool for wireframing. I also share some of the techniques that have worked well for me in the past.

Requirements

In order to make the most of this article, you need the following software and files:

Fireworks CS3

• Try
• Buy

Digital images saved in a folder on a hard drive

Prerequisite knowledge

Basic familiarity with Fireworks.

Benefits of wireframes

Before I start diving into Fireworks, I'd like to tell you about some of the benefits of creating wireframes prior to design and development:

• Wireframes help you communicate the fact that your design is a work in progress—and therefore subject to change based on feedback
• Wireframes help ensure that the functional design is evaluated separately from the visual design
• Wireframes don't become dated like comps, so you can reuse those unchanged dialog box sketches in your version 2.0 functional specifications even though you have completely reskinned the application
• You can create wireframes much faster than you can design high-quality graphics—and it doesn't require much artistic skill
• Using wireframes instead of comps for initial design reviews helps you to avoid the inevitable "please make the logo bigger" request until the functionality has been decided

Unlike the thinking and discussion that precede your actual sketching, making and editing wireframes should be easy and quick to do.

A key element to a good wireframing tool is the ease with which it deals with the many repetitive elements involved in drawing out user interfaces. In addition to entire screens that share many similarities (dialog boxes and forms), there are user interface widgets (text fields, buttons, and scrollbars) that enable various common functions.

The way of one file

Frames are great but with the release of Fireworks CS3, pages are key to speedy wireframe creation and editing. They allow you to place all related screens—or all screens, if you like—in a single document. Having everything in a single file is quite handy in the initial screen creation stage: Dialog boxes are not mind-bendingly diverse, and it's nice to be able to duplicate an existing page/frame to use as the basis of the next dialog box. Simply choose Duplicate Frame or Duplicate Page from the Panel menu (see Figure 1).

Figure 1. Using the Pages panel to add new pages, delete unwanted pages, and duplicate existing pages

It is the rare wireframe that is created and never edited, so speed is important—not just in relation to executing the initial design but also for rapidly locating and editing aspects of the existing design according to feedback from users and other stakeholders. For example, you might need to quickly locate the sketch for Dialog Box X when it turns out you need to pull Feature Y so that you can take out the third check box. Rather than sift through a number of different files to find the items I need to change, I can rapidly move through all the related dialog boxes to find what I need to find, as well as quickly double-check all items to make sure I'm not overlooking something (see Figure 2).

Figure 2. Using the Frames panel to search for and find common elements across multiple files

You can easily grab design elements from another screen that you know has them, or share them across pages or frames. You can also search for and replace text across all screens. This is useful if you decide to rename some function or other feature of your application.

When you need to show your design to your client or coworkers, the Export Frames to Files feature becomes very useful. I initially used a single Microsoft Word document to hold all the UI specifications, but soon found this to be problematic, because engineers were sometimes working off an old spec. I had people spread out across offices in two countries and had no version control system set up. But I did have a wiki, so we decided to use the wiki to hold the specifications. The effectiveness of this system could be the topic of a whole other article but, that aside, the Fireworks export feature meant I could open a single file to get at all related dialog boxes and then publish them all at once as individual GIFs or PNGs and put them in the wiki for all to see.

Widget-enabled, designer-approved

User interface designers employ many common interface components to build their applications—items like scrollbars, buttons, and pull-down menus (often referred to as "UI widgets").

On the widget front, Fireworks comes to the aid of the designer-in-need in a few different ways. First off, the mixed vector and bitmap toolset is a great help. Most user interfaces involve a lot of boxes—one for the enclosing page/screen, another for the navigation, another for a grouped set of UI controls, and so on. As vectors, these boxes can be easily resized. You can also select them with a single click to get their width and height dimensions. Nondestructive bitmap effects can be applied to provide commonly used design flourishes like the omnipresent drop shadow. And you can save these to the Styles panel to ensure that the same settings are used throughout the document.

However, the big news here for CS3 users is the Common Library panel. Fireworks CS3 ships with a full collection of UI widgets (see Figure 3), which you can scale using a 9-slice scaling grid. Fireworks calls these "rich symbols."

Figure 3. Comprehensive collection of rich symbols (UI widgets) in the Common Library of Fireworks CS3

The 9-slice grid—for those of you who don't know it already from Flash or elsewhere—separates edge elements that should not scale (like rounded corners) from the rest of the graphic. This makes it easy for you to change the size of a graphic element while preserving its precious edges (see Figure 4).

Figure 4. 9-slice scaling of a Mac OS X button

Since not all repetitive elements are graphics, one final "widget" of note that I use constantly can be found in the Commands menu: Commands > Text > Lorum Ipsum.

It's not Photoshop (or Illustrator) for Dummies

Although I use Fireworks, Photoshop, and Illustrator, I find myself using Fireworks more often than either of the others at this point. As someone who used to be extremely skeptical of Fireworks, I feel I should mention its strengths in relation to the other two powerhouse Adobe applications.

I don't think Photoshop or Illustrator can compare with Fireworks when it comes to dealing with multiple screens. Layer comps are nice, but they're ill-suited to wireframing because they are just shortcuts for hiding and showing individual layers. Sifting through numerous layers in either Photoshop or Illustrator quickly becomes tiresome—and the export path is not as streamlined as it is in Fireworks. Beyond a certain point, it just does not scale. With Fireworks, I have been able to handle 25 screens or more without issue—and that was before the addition of pages in Fireworks CS3.

Although Flash CS3 Professional now has nice interoperability with Photoshop CS3 and Illustrator CS3, previously copying and pasting from Photoshop or Illustrator to Flash was not an option. By contrast, items in Fireworks come in very nicely to Flash from the Clipboard. Fireworks was designed from the get-go to produce graphics intended for Flash or HTML—two avenues to choose from when moving from wireframe to quick prototype.

Part of the strength of Fireworks also lies in what it cannot do: Fireworks has been designed to handle the most common design tasks for artwork delivered on a screen. The most commonly used vector and bitmap tools are there at your disposal, without too many of the other (albeit great) features that make learning Photoshop and Illustrator a vocation rather than a weekend exercise.

Where to go from here

Hopefully this quick introduction to wireframing in Fireworks will help make people doing similar design tasks take a closer look at this application. It has a lot to offer. With this release of Fireworks CS3, Adobe has defined a great niche for Fireworks as the interaction designer's graphic tool of choice.

I hope those of you who are in need of such a tool will drop Adobe a line and let them know what features should come next, whether it be the addition of simple Flash interactivity, printing of frames/pages to thumbnails, or additional diagramming tools. (As you can see I've already had a few thoughts on the matter.)

For more information, check out these articles:

• Boxes and Arrows
• GUUUI

Organizations:

• Usability Professionals' Association
• Interaction Design Association

Interaction design pattern libraries:

• Designing Interfaces: Patterns for Effective Interaction Design
• welie.com Patterns in Interaction Design
• UC Berkeley Web Patterns Project
• Sari A. Laakso's User Interface Design Patterns

 

About the author