Creating user interface mockups with Fireworks

A neighborhood art gallery has hired you to design and build a web application that contains the following features:

• A search page that finds artwork in the gallery's database
• An update page that lets gallery employees modify records in the database
• An insert page that lets employees add new artwork to the database

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.

Creating the mockup file

Let's decide to create a simple page design with two layers: one for the page header and one for the page body:

1. In Fireworks CS3, select File > New.
2. In the New Document dialog box, specify the following canvas properties:
   • Width: 800 pixels
   • Height: 600 pixels
   • Resolution: 72 pixels/cm
   • Canvas color: White
3. In the Layers panel on the right of the document, click the New/Duplicate Layer button at the bottom of the panel to create a new layer.
4. Double-click the Layer 2 layer in the panel. A small Layer Name dialog box appears (see Figure 1).
5. Rename the layer Header and press Enter.
6. Double-click the Layer 1 layer and change the name to Body.

   You should now have two layers in addition to the default Web layer: Header and Body.

7. Save the file as gallery_mockups.png.

Creating the header for your pages

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:

1. In the Layers panel (Window > Layers), select the Header layer.
2. Select the rectangle tool from the Tools panel, or press U.
3. On the canvas, draw a 780 x 40 – pixel rectangle. You can use the width (W) and height (H) text boxes on the Property inspector to set the exact size.
4. Position the upper left corner of the rectangle at the (10, 10) coordinates on the canvas. You can use the X and Y text boxes on the Property inspector to set the rectangle's exact position.
5. Make sure the rectangle is selected and then set the following rectangle properties in the Property inspector:
   • Fill color (bucket icon): #CCCC99 | Solid
   • Stroke color (pencil icon): #FFFFFF | None
   • Rectangle Roundness: 40
6. Select the text tool from the Tools panel, or press T.
7. Click the left side of the rectangle and type Etna Gallery.
8. Select the pointer tool (the black arrow at the top-left corner of the Tools panel), select your new text, and set the following text properties in the Property inspector:
   • X: 20
   • Y: 20
   • Font: Tahoma
   • Size: 18
9. Convert the header into a Fireworks symbol by Shift-clicking the text and the rectangle objects to select both of them, and then selecting Modify > Symbol > Convert to Symbol.
10. In the Convert to Symbol dialog box, enter Header as the new symbol name and make sure the Graphic option is selected. Click OK.

    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.

11. Save your work.

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:

1. Create a new page based on your current design by selecting the Page 1 page in the Pages panel (Window > Pages), and then dragging it to the New/Duplicate Page button (the page icon) at the bottom of the panel.
2. Double-click the label of each page and rename it SearchArt and UpdateArt, respectively (see Figure 2).
3. Save 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.

Creating the search 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):

1. In the Pages panel, select the SearchArt page.
2. In the Layers panel, select the Body layer. You want this layer to contain the UI components.
3. In the Common Library panel (Window > Common Library), double-click the Flex Components folder to open it.
4. Drag a Panel component on your page.
5. Select the Panel component on the page and set the following properties in the Property inspector:
   • W: 760
   • H: 260
   • X: 20
   • Y: 60
6. Make sure the Panel is still selected and enter Search Art (see Figure 3) as the title property in the Symbol Properties panel (Window > Symbol Properties). Use the Symbol Properties panel to modify the characteristics of rich symbols.

7. From the Flex Components folder in the Common Library panel, drag a TextInput component and a Button component on the Panel component on your page.
8. Select the TextInput component on the page and set the following properties in the Property inspector:
   • X: 160
   • Y: 140
9. Select the Button component on the page and set the following properties in the Property inspector:
   • W: 42
   • X: 325
   • Y: 140
10. Make sure the Button is still selected and enter Go as the label property in the Symbol Properties panel (Window > Symbol Properties).
11. Select the text tool (T), click to the left of the TextInput component on the page, and enter Title: (including the colon).
12. Switch to the pointer tool, make sure the Search text object is selected, and set the following text properties in the Property inspector:
    • X: 120
    • Y: 144
    • Font: Verdana
    • Font size: 11
13. From the Flex Components folder in the Common Library panel, drag a PopUpButton component on the Panel component on your page
14. With the PopUpButton still selected on the page, set the following properties in the Property inspector:
    • X: 160
    • Y: 170

    Tip: To align elements vertically or horizontally, you can also Shift-click the elements and select Modify > Align.

15. Make sure the PopUpButton is still selected and enter Painting as the label property in the Symbol Properties panel (Window > Symbol Properties).
16. Select the text tool (T), click to the left of the PopUpButton component on the page, and enter Object: (including the colon).
17. Switch to the pointer tool, make sure the Object text object is selected, and set the following text properties in the Property inspector:
    • X: 108
    • Y: 174
    • Font: Verdana
    • Font size: 11
18. Save your work.

The search page mockup should look like Figure 4.

Creating the update page

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:

1. In the Pages panel, select the SearchArt page and drag it to the New/Duplicate Page button (the page icon) at the bottom of the panel.
   Fireworks creates a new page called Page 1 based on the design of the update page.
2. In the Pages panel, select the existing UpdateArt page and drag it to the Delete Page button (the trash can icon) at the bottom of the panel. You won't need this page anymore.
3. Double-click the Page 1 page in the Pages panel and rename it UpdateArt.
4. Select the Panel component on the UpdateArt page and change the following property in the Property inspector:
   • H: 360

   You want to make the panel a little larger to accommodate more UI controls.

5. Make sure the Panel is still selected and enter Update Artwork as the title property in the Symbol Properties panel (Window > Symbol Properties).
6. Select the Button on the page and change the following properties in the Property inspector:
   • W: 60
   • X: 160
   • Y: 220

   You want to move the button below the controls rather than beside them.

7. Make sure the Button is still selected and enter Update as the label property in the Symbol Properties panel (Window > Symbol Properties).
8. From the Flex Components folder in the Common Library panel (Window > Common Library), drag a CheckBox component on the page.

   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.

9. Select the CheckBox component on the page and set the following properties in the Property inspector:
   • X: 330
   • Y: 174
10. Make sure the CheckBox component is still selected and set the following properties in the Symbol Properties panel (Window > Symbol Properties):
    • label: Appraised
    • selected: true

    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.

11. Save your work.

Your update page mockup should looks like Figure 5.

Creating the add page

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:

1. In the Pages panel, select the UpdateArt page and drag it to the New/Duplicate Page button (the page icon) at the bottom of the panel. Fireworks creates a new page called Page 1 based on the design of the update page.
2. Double-click the new page in the Pages panel and rename it AddArt.
3. Select the Panel component on the AddArt page and enter Add Artwork as the title property in the Symbol Properties panel (Window > Symbol Properties).
4. Select the Button component and enter Add as the label property in the Symbol Properties panel.
5. Save your work.

That's all it takes to create the add page based on the design of the update page.

Where to go from here

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.