16 April 2007
This tutorial focuses on working with Fireworks CS3 to create site designs with the new Pages feature. It assumes you are familiar with the Fireworks interface and have previous experience exporting files and using the slice tool.
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.
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.
Start by creating one page for each cell:
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.
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 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.
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:
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.
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.