Designing and prototyping Flex applications using Fireworks

Getting started

In this sample project, I'll describe the design process to build a simple Flex banking application using Fireworks CS4. If you haven't already, be sure to download the sample files provided on the first page of this article.

Preplanning is essential. Begin by mapping out the flow of your application in order to ensure a successful outcome of your project. Draw a high-level site map that defines user flows, screen, and data flow of the application in Fireworks by using the shape tools (see Figure 1).

Figure 1. Sample site map

If you are following along with the sample files, Figure 1 represents Page 01 Site Map in the DesigningFlexApps.png file. As you build your own site map, you can drag elements from the Common Library to the canvas and use the line tool or the new arrow line tool to connect items in your diagrams. Alternatively, you could also draw these illustrations in a diagramming tool and import them into Fireworks (see Figure 2).

Figure 2. Common Library containing UI elements and Flex components

Fireworks makes it easy to create a site map, and it is critical to have a solid understanding of what the user will see and how the user will interact with the application before creating the design elements.

In the next section, I'll discuss how to begin building out the different views (screens) of the application in wireframe form to ensure that all of the necessary user interface items are included.

Page 2 of 6

Previous Page

Next Page