Using Fireworks CS3 to design effective, interactive website presentations

Creating a new website design is (relatively) easy. Explaining how the design translates into a real website is not. A series of screenshots for the website or interface that you've designed may make sense to you, but to everyone else they're just a bunch of random pictures. Communicating your ideas effectively to convey your message to others can be challenging but the process of developing iterative mockups and securing approval from web clients can result in successful websites—especially when you present your design ideas using strategic and proven guidelines.

In this tutorial, we'll discuss how to use the Pages feature in Adobe Fireworks CS3 to effectively explain an interaction design, and how to create an interactive click-through for presentation purposes.

Telling a story

As you develop a site design, simplify the message you hope to convey into a single short sentence. Spend some time sketching your ideas on a piece of paper, and allow time to brainstorm your ideas. If possible, share your ideas with others and get feedback about the images and symbols that work best. Once you have a solid understanding of the message and have developed some design ideas that you feel strongly about, it is time to prepare some graphics to show your client. It is very important to give them a visual illustration of the design directions you are considering to help them understand and approve of the design approach before moving forward with site production.

As you think about which screenshot to mock up to generate a presentation, think of this process as though you were making a movie. The screenshots of your design are similar to individual cells in a storyboard. Start by asking yourself how many—and which—screenshots would be most successful to effectively tell a story. Once you've determined how the presentation should flow and which scenes (screenshots) to include, you can begin to develop the site storyboard.

Creating the cells for a storyboard

Start by creating one page for each cell:

1. Select Window > Pages to open the Pages panel. Alternately, you can use the F5 keyboard shortcut.
2. Double-click the page name and type a description of the first cell in your storyboard. Be sure to use an underscore instead of spaces when you type in the descriptive name. This description will be helpful later when organizing cells.
3. Click the Add/Duplicate Page button located on the bottom right of the Pages panel to create a new page.
4. Double-click the new page's name and type in a description for the second cell in your storyboard.

Repeat the previous steps until you have created a series of ordered pages that will serve as cells in your storyboard. The Pages panel lists the pages you've created (see Figure 1). This is a very useful approach because you can use the Pages panel to develop a compelling presentation, using screenshots to convey a story. The pages you create can be used for presentation purposes as well as in the final project.

Understanding the Pages feature in Fireworks CS3

Pages contain many powerful features that are outside the scope of this short tutorial. To learn more about the new features included in Fireworks CS3, please refer to the Fireworks product page and take the feature tour.

Here is a list of my top three favorite new features in Fireworks CS3:

• The Pages panel is extremely useful. Each page acts like a separate file. Your pages can have different dimensions, background colors, and layers (including web layers!). This is a huge timesaver because you no longer need to worry about empty layers and matching canvas sizes.
• You can now share layers across multiple pages, whenever desired.
• The updated Layers panel now includes sublayers, giving you the convenience of selecting and editing only the items you want.

Creating an interactive design presentation

The first step to creating a successful presentation involves developing a great storyboard. But if your clients cannot navigate through the screenshots and understand the story, your great storyboard will go unnoticed.

The next section of this article discusses how to create a clickthrough presentation that replicates the user experience. Fireworks CS3 makes it easy to create an impressive clickthrough presentation using high-resolution artwork and design elements.

Linking pages together

1. Select the Hotspot tool in the Toolbox (or use the keyboard shortcut and press the J key). Use the Hotspot tool to draw a hotspot on the current page. If you have added buttons to the page, Fireworks automatically creates a slice around each button.
2. Turn on the option to view both hotspots and slices by selecting View > Slice Overlay. Alternately, you can use the keyboard shortcut by pressing 2.
3. Make sure that a hotspot or a slice is selected (see Figure 2).

4. Open the Property inspector (select Window > Properties) if it is not already open. In the Property inspector, click the arrow next to the Links field and choose the page to which you want the hotspot or slice to link so that you can effectively create navigation between the different pages (see Figure 3).

5. Draw another hotspot, or select another slice, and repeat the process until all pages are linked together. Hotspots are objects, so you can cut and paste them like any other object in Fireworks. For example, if you want the logo image to link back to the home page on every page, simply create a hotspot once and then paste it on every page of your design.

Exporting the presentation

After you are finished with adding navigation between the different pages of design, you are ready to export the presentation to send to your client:

1. Choose File > Export.
2. In the Export dialog box, enter a name and choose the location to save the presentation. It is very helpful to create a new folder first and then export the presentation into that folder, so that you can easily share, upload, or relocate the files.
3. As you export the files, use the following choices when selecting the Export Settings:
   1. Export: HTML and Images
   2. HTML: HTML File
   3. Slices: Export Slices
   4. Make sure that the "Current Page Only" option is unchecked
   5. The remaining settings are optional, so make the choices that work best for your presentation
4. Click Export.

That's all it takes to create an interactive presentation that you can use to sell your great design ideas to clients. Remember that web design is a collaborative endeavor. Communicating your ideas and suggestions regarding design direction in a compelling presentation will save you a great deal of time securing your client's approval. Making sure that everyone involved with the project understands how the pages flow together helps eliminate possible confusion that could result in extra work as you develop a website.

Where to go from here

Be sure to visit the Fireworks Developer Center to find more tutorials and articles about web design techniques and strategies. Many of the articles include sample files to help you explore design strategies and take your web design projects to the next level.

To learn more about the new features in Fireworks CS3, read Introducing Adobe Fireworks CS3 by Alan Musselman. If you haven't done so already, I highly recommend checking out the Fireworks Exchange to find out about new ways to extend Fireworks.