Fireworks Article

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.

Requirements

To make the most of this article, you need the following software and files:

Fireworks CS3

• Try
• Buy

Sample files:

gallery_mockup_fw_cs3.zip (ZIP 76K)

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.

   

   Figure 1. Changing a layer's name

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.

Page 1 of 2

Next Page

About the author