Benefits of prototyping

There are a wide variety of techniques for prototyping, from paper prototyping to high fidelity and fully functional executions. While each approach may vary in the level of detail and time required to execute, the benefits of prototyping are numerous—whether the final experience is a website, rich Internet application (RIA) or desktop application.

No matter what type of prototype you create, adding more details will yield more detailed insights and feedback. However, the sooner you can put a prototype in front of users, the faster you'll be able to do the following:

• Ensure that all parties can easily understand the end goal
• Help the internal team build the final product more accurately
• Reduce the documentation overhead
• Avoid misinterpretation of key functionality
• Generate excitement for internal buy-off, funding or demonstration
• Test and refine concepts

Check out Dave Cronin's article, Industry trends in prototyping, to learn more about how prototypes are used and why they are an integral part of the design process. Creating prototypes for desktop applications is easier than ever before using Fireworks CS4 and the new AIR export features.

Choosing the right tool

Fireworks is the perfect environment for rapidly creating user interfaces for desktop applications. The fast, drag and drop environment allows you to manipulate bitmaps and vectors to generate pixel-precise designs. Best of all, the ability to intuitively structure and repurpose assets makes broad-sweeping changes a non-issue throughout the project.

Of course, creating a design is only the first part of the story. You also have to consider how the design will be integrated into a development environment. All assets created in Fireworks are production-ready, which means you can do a lot of rapid prototyping without coding, but when you get to a final state you can seamlessly move the assets right into production.

When you use an image-editing program, you are working with static views. One of the most important aspects of a prototype is that it is interactive. Fireworks includes tools that allow you to attach simple behaviors, such as rollover buttons and links, to slices and hotspots. In addition, you can also attach AIR events, like window close, that will give your prototype the feeling of a true desktop application. For those a bit more daring, custom JSF commands can be written to extend functionality beyond the default AIR events that ship with Fireworks CS4.

For more information on designing with Fireworks, read Nick Myers' article, Designing interactive products with Fireworks, which delves into the greater details of why Fireworks is ideal for designing these types of products.

How AIR fits into the picture

Adobe AIR allows the creation of desktop applications using web technologies, such as HTML, Ajax and Flex, which can be deployed across operating systems. With the ability to export to AIR from Fireworks CS4, you can create prototypes for desktop applications and take advantage of the great features of AIR.

Using AIR, you can completely customize the window chrome as well as the application icon. These features allow for a completely unique and branded experience that will look consistent across operating systems. However, while creating completely custom chrome may sound like a complete necessity, it is always important to consider the native chrome of the user's operating system. In some cases, you may discover that users become disoriented when presented with an unfamiliar window chrome, but that's precisely why prototypes are important!

Learn more about the six AIR features that may annoy your users on Serge Jespers' blog.

With many AIR applications out in the wild already, there are plenty of examples you can examine to get inspiration. In many cases, the application has been customized to create a completely unique experience for the user. Although you won't be able to export fully functional applications from Fireworks CS4, you can test the visual design, structure and interaction in your application. To see a great showcase of AIR applications, visit the Adobe AIR Marketplace or Refreshing Apps website.

Building the AIR prototype

Before you start any type of project, it's always a best practice to create a strategy of execution. Using Fireworks to prototype an AIR application isn't any different, but sometimes it's better to follow a specific order of operations. For the purposes of this sample project, we'll walk through the following steps in order to create a packaged AIR application ready to distributed:

1. Create a roadmap for the application.
2. Structure the Fireworks project.
3. Design and build the prototype.
4. Add interactions.
5. Export the Adobe AIR package.

Page 2 of 8

Previous Page

Next Page