PDF (adobe.com)

Prototyping workflow

By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and software prototypes. To convert a finalized prototype to a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®.

For a video tutorial on prototyping application interfaces, see www.adobe.com/go/lrvid4034_fw.

1. Create the pages

In the Pages panel, create the desired number of pages or screens for your initial design. As the design evolves, you can add or subtract pages as needed.

2. Layout common design elements

On the canvas, layout design elements that you want to share across multiple pages, such as navigation bars and background images. To align elements, use Smart Guides. For maximum flexibility, structure your layout with CSS. (See Smart Guides and Creating CSS-based layouts.)

3. Share common elements across multiple pages

When you share common elements, a single change automatically updates all affected pages. Use a master page to share all elements it contains, or share layers to copy subsets of elements. (See Use a master page and Share layers.)

4. Add unique elements to individual pages

On each page, add unique design, navigation, or form elements. In the Common Library panel, you’ll find many buttons, text boxes, and pop-up menus that speed up the design process. Component symbols in the Flex Components, HTML, Mac, Win, Web & Application, and Menu Bars folders include properties that you can customize for individual symbol instances. (See Create and use component symbols.)

5. Simulate user navigation with links

From web objects such as slices, hotspots, or navigation buttons, link between the various pages of your prototype. (See Link to pages in a Fireworks document.)

6. Export the finished, interactive prototype

Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation. To share a flexible CSS-based prototype with clients, or further edit it in Adobe Dreamweaver, see Export a CSS layout. To create a more conventional table-based prototype, see Export Fireworks HTML. To distribute a PDF version for comments or printing, see Export Adobe PDF files. To create a Flex application prototype, see Prototyping Flex applications. To create an Adobe AIR application, see Create an Adobe AIR application.