10 September 2007
A neighborhood art gallery has hired you to design and build a web application that contains the following features:
Before you can start building the application, you must create mockups of the pages and get feedback from the gallery managers. New features in Adobe Fireworks CS3 can significantly streamline this process.
This article describes how to create user interface mockups with Fireworks CS3 so you can spec out and build your web or desktop applications more rapidly than before. In 15 minutes or less, you will create user interface (UI) mockups for the search, update, and add pages of a web application for a fictional art gallery.
Let's decide to create a simple page design with two layers: one for the page header and one for the page body:
You should now have two layers in addition to the default Web layer: Header and Body.
After you use the tools in Fireworks CS3 to create a header for your pages, you can convert the header into a symbol so you can reuse it on each page of your application:
The symbol appears in your Library panel (Window > Library). A symbol is an asset that you can reuse in several locations. As with an include file, if you edit the symbol, the change appears on all the pages that use it. In this exercise you decided to convert the header into a symbol because you will use it on all the pages of your web application.
Now it's time to create the various pages of the application.
In Fireworks CS3, you can add pages to a single document just as you can add layers. Each page has its own set of layers (and now, sublayers), giving you maximum design flexibility. The new page feature also lets you replicate page layouts, which in turn can significantly speed up your work:
Because you created a duplicate of your basic page design, each page has the exact same design—in this case, a shared header. You can click each page in the panel to verify this in the document window. You can now add the UI elements specific to each page.
Fireworks CS3 has a common library of UI images called rich symbols for Flex, Mac OS, Windows XP, and mobile applications. If you plan to lay out your application using an Ajax framework such as Spry, you can use the Flex symbols to approximate the look and feel of your application. You can also create your own rich symbols for different UI frameworks (see Where to go from here section at the end of this article):
Tip: To align elements vertically or horizontally, you can also Shift-click the elements and select Modify > Align.
The search page mockup should look like Figure 4.
Your next task is to create a mockup of the update record page. To keep these instructions manageable, the page uses only a few UI components. However, adding components is easy once you know how to do it.
In this case, the update page contains some of the same fields as your search page—specifically, the Title and Object fields. You decide to create a duplicate of the search page and use it as the starting point for the update page, saving you some work:
You want to make the panel a little larger to accommodate more UI controls.
You want to move the button below the controls rather than beside them.
Note: Because you haven't used a CheckBox component in your document yet, you need to get it from the Common Library. If you wanted to use a component that you already used in your document (a TextInput component, for example), you would get it from your Library panel instead. Unlike the Common Library panel, which lists all the symbols available in Fireworks, the Library panel (Window > Library) lists only the symbols currently in use in your document. To keep your file size as small as possible, you should reuse symbols already in your document.
Note: If the word is cut off in the design, force a redraw by pressing the Spacebar one more time or by clicking the other page in the Pages panel and then clicking the UpdateArt page.
Your update page mockup should looks like Figure 5.
Your next task is to create a mockup of the Add Record page. In most applications, the user interface for adding records is nearly identical to the one for updating records. Using this insight, you know your task will be a snap because you can duplicate the update page mockup and simply make slight changes to it:
That's all it takes to create the add page based on the design of the update page.
This tutorial described how to create basic user interface mockups in Fireworks CS3. Next, you could create a clickthrough presentation that simulates the user experience. You could also export your presentation to send to your clients for their feedback. For more information, read Using Fireworks CS3 to design effective, interactive website presentations by Hoang Dinh in the Fireworks Developer Center.
You can also create your own UI rich symbols in Fireworks. For example, you can create a custom text box that has an editable label to the left of it. For more information, read Using rich symbols in Fireworks by Aaron Beall in the Adobe Design Center.