Fireworks CS4 Resources

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®.

See the following articles on Fireworks Developer Center for general tips on prototyping workflows:

Nick Myers’ article on designing interactive products with Fireworks: http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html
Dave Cronin’s article on industry trends in prototyping: http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html
Matt Stow’s article on using prebuilt CSS templates in Fireworks CS4: Prebuilt CSS templates in Fireworks CS4.
Jim Babbage’s article, Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling.
Dave Hogue’s video tutorials on using Fireworks CS4 for interaction design and rapid prototyping:
- Using Fireworks for information and interaction design: http://tv.adobe.com/#vi+f1498v1661
- Creating interactive prototypes with Fireworks: http://tv.adobe.com/#vi+f1498v1660
- Rapid prototyping with Fireworks: http://tv.adobe.com/#vi+f1498v1659
- Fireworks as part of the complete design process: http://tv.adobe.com/#vi+f1498v1658
Article on designing a website application with Fireworks CS4: http://www.adobe.com/devnet/fireworks/articles/carshare_design.html
Kumar Vivek’s article on designing for mobile devices using Fireworks CS4: http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html

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. See the following articles:

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.