Fireworks Article

Creating user interface mockups with Fireworks

Creating the pages of your 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.

   

   Figure 2. Creating and renaming pages in the Pages panel

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.

   

   Figure 3. Setting the properties of UI components

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.

Figure 4. Complete mockup of the search user interface

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.

Figure 5. Completed mockup of the update user interface

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.

Page 2 of 2

Previous Page