Interaction design and rapid prototyping with Fireworks
Created
11 January 2010
Requirements
Prerequisite knowledge
Basic familiarity working with Fireworks is helpful.
User level
Beginning
Required products
- Fireworks CS4 (Download trial)
Sample files
- files_f1498v1661.zip (1016 KB)
In the following four short video presentations, I demonstrate how to use Adobe Fireworks CS4 for information and interaction design and creating interactive prototypes quickly, and how you can use Fireworks as a design tool that fits into your complete design process, from concept to development.
Before creating an interactive prototype, you need to create effective wireframes that define the structure and organization of each page and include representative content. Fireworks CS4 allows you to build all of your pages in a single document by creating structured layout patterns with grids and guides. Fireworks includes reusable symbols for common user interface components, too—such as buttons, check boxes, and combo-boxes—so you can focus on crafting strong designs rather than drawing and recreating individual interface components every time.
Prototypes may be simple clickthroughs that allow people to move among the pages, or they may involve complex behaviors such as image swapping, rollovers, and even embedded dynamic content such as slideshows and interactive maps. In these videos you'll see me adding interactivity to wireframes using hotspots and slices, and built-in behaviors for navigation bars and pop-up menus. I'll show you how to use buttons and symbols to create more efficient prototypes, and use HTML slices to include code snippets in the exported HTML.
The design tools in Adobe Creative Suite 4 work well together for the entire design process. For example, I show how we at Fluid use Adobe Illustrator for site maps, flow diagrams, and complex vector art; Fireworks for wireframing along with Adobe Dreamweaver for prototyping; Adobe Photoshop for visual design; and Adobe InDesign for final design documentation. Fireworks is able to open and work with both Illustrator and Photoshop files, and you can easily place the exported wireframes in InDesign for annotation.
Using Fireworks for interaction design and rapid prototyping
Download the sample files and work along with the videos. Everything you need to reproduce the design and the exported CSS and images is included. Enjoy the videos!
Create wireframes in Fireworks using pages, layers, grids, guides, smart guides, and component symbols. Leverage the master page, shared layers, built-in tools, and the common library to create multiple wireframes quickly. (11:14)
Conduct iterative and rapid prototyping in Fireworks using disjoint rollovers, effective use of symbols, and exporting as HTML and images. Add more complex interactivity to the prototype to simulate hop-ups and even include dynamic content. (9:42)
See how Adobe design tools are used in the complete design process and how Fireworks, Illustrator, Photoshop, and InDesign work together to increase your team's efficiency. From concept to wireframe to visual design to documentation, the Adobe Creative Suite tools work together to produce high-quality designs effectively and efficiently. (11:51)
Where to go from here
Visit the Fireworks Developer Center for additional articles and tutorials on using Fireworks for information and interaction design and creating prototypes for both the web and mobile devices. You can also view a screencast of my interactive prototyping session, From sketch to clickthrough prototype, that I delivered at the Adobe MAX 2009 conference.
Finally, to expand on the process I show in the "rapid prototyping" video above, you may be interested in watching three demos of exporting CSS and images from Fireworks CS4, where I show you how to create and organize a web page design and prepare it for exporting to CSS and images from Fireworks CS4.
More Like This
- Using pages, states, and layers in Fireworks CS4
- Prototyping AIR applications with Fireworks
- Designing a website application with Fireworks CS4
- Industry trends in prototyping
- Mobile workflows using Fireworks CS5 and Device Central CS5
- Three demos of exporting CSS and images from Fireworks
- Prototyping for the Apple iPhone using Fireworks
- Setting up a Fireworks web design mock-up for CSS and images export
- Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4
- Creating jQuery Mobile website themes in Fireworks using the CSS3 Mobile Pack
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |
