11 May 2009
Prototyping is a great way to get feedback on concepts early in the pre-development stage of a project without investing a tremendous amount of time. Although the complexity of prototypes may vary, Fireworks CS4 allows you to create prototypes for desktop applications from the designs you create.
This article provides step-by-step instructions to turn a concept into a design, add interactions and export the prototype to a packaged AIR application using the new features available in Fireworks CS4.
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:
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.
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.
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.
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:
In this sample project, the application you'll be prototyping is a simple desktop application, codenamed "Ventura" that facilitates syncing images across multiple image services. Before jumping into the thick of creating the design, it's best to have a clear understanding of what you're going to be designing and ultimately prototyping.
In this case, you have a rough sketch to work with as a starting point (see Figure 1).
In the sketch above, the general layout of the application is represented, including the following:
Some of the interactions you'll be modeling in the prototype are also shown. When using the application, the user should be able to do the following:
Now that a development plan is established, you can jump into Fireworks CS4 and start to build the prototype. Feel free to start from scratch and create your own design assets, or download the sample files from the first page of this article and use the provided design assets that are already set up as symbols and styles.
As I mentioned previously, Fireworks CS4 includes many features that help you maintain a working structure within your project to keep things organized. The Pages panel, States panel, and Layers panel contain the various interface elements in ways that can be shared throughout your project. For example, since the application chrome is a consistent element that is visible everywhere in the application, you can share that element across the entire visual structure of your project. This makes it easy to make global updates to the application chrome later, after gathering feedback. For more information, read David Hogue's article, Using pages, states, and layers in Fireworks CS4.
Another great feature that helps with rapid prototyping are symbols. Symbols allow you to reuse common artwork repeatedly. If you change a symbol, all instances of that symbol will automatically be updated throughout your design. This is extremely useful if, at the last minute, you decide to change the color of the buttons from white to blue.
Styles are also great timesavers. Styles allow you to save the visual attributes that you've applied to artwork and then apply those attributes to any other piece of artwork. For example, if you have created a button with a gradient and a drop shadow, you could save those visual attributes as a style, select another design element and then apply the style to that new element, to make them match. Styles are handy for maintaining visual consistency throughout your design.
Note: If you simply want to apply the same visual attributes of one object to another, you can also copy the source artwork (Edit > Copy), select the artwork you'd like to apply the copied attributes to, and then choose the option to Paste Attributes (Edit > Paste Attributes).
In order to illustrate some of these concepts more visually, I've created a flow chart that defines how the structure of a design for an ecommerce application created in Fireworks might be organized. Pages have states, states have layers, layers can contain symbols, and styles can be applied to a symbol (see Figure 2).
To learn more about how to leverage the features in Fireworks to organize and repurpose design assets, read Nick Myers' article, Designing interactive products with Fireworks.
Before you begin designing the Ventura application, it is a good idea to set up some of the structure as previously discussed. Depending on the project, this may require a bit of forethought as you define the best way to organize your Fireworks document. It is likely that the initial structure will change organically as needed to accommodate the evolution of the design.
The structure for this prototype has already been defined within the Ventura_start.png file provided with the sample files (see Figure 3).
The sample PNG file also incorporates various styles and symbols you can use to create the design (see Figure 4).
Depending on the type of projects you are developing, you may decide to organize your project differently to facilitate the prototyping process. Either way, setting up a flexible structure not only helps you stay organized, it also makes it much easier to make changes rapidly.
Now that your document is well structured, you can begin adding design elements and create the user interface and views of the application using the provided symbols in the Ventura_start.png file.
The first view of the Ventura application displays the window chrome, footer controls, image albums and a drawer on the left. To add these elements to the design, you can just drag and drop the provided symbols to the layers that have been created. If you'd like to replicate the final prototype as I created it, follow these steps:
After walking through those steps, the initial state of the application should match the structure outlined in the rough sketch shown in Figure 1. At this point your design should look similar to the one shown below, although it doesn't have to match pixel for pixel (see Figure 5).
With the initial view state created, it's time to create a second state that displays the secondary states of various portions of the interface, such as rollover buttons. As mentioned previously, the interactions to be represented in the prototype include the following:
To begin creating this second view state, rename State 1 to Initial in the States panel. Duplicate the Initial state and name the duplicated state Secondary (see Figure 6).
After creating the duplicate state, you'll notice that any changes you make to layers with the page and state icon will automatically update across the pages and states they are shared across.
The first states you'll set up are for the rollover buttons of the image albums. On the Secondary state, select the first dark grey image album background. Right-click (or Control-click) on the album background and select Swap Symbol (see Figure 7).
Select the Album_over Symbol and click OK. The dark gray background changes to a light blue. Repeat this step for the rest of the album background graphics, to ensure that they all have a secondary state for the rollover behavior.
Tip: Swap Symbol is a great feature for easily adding rollover states and switching artwork out while maintaining exact positioning. This strategy prevents accidental shifting of graphics that can sometimes occur when changing states.
Next, we need to add a graphic indicator to represent the functionality of syncing images with the various image hosting services listed in the drawer. In the rough sketches, this was displayed as the circle sync button rotating slightly and the appearance of a progress bar. Again, using the Swap Symbol feature, select the Circle_button symbol (the gray circle button with the rounded arrows) and swap it with the CircleBlue_button symbol.
To add the sync progress bar, drag and drop a couple symbols to the bottom right region of the footer. Add the ProgressBar symbol and the DarkGreyClose_button symbol to the footer. After making those changes and swapping out the sync button, the Secondary state should look something like the screenshot below (see Figure 8).
We need to add different states that indicate that the drawer on the left side can be expanded and collapsed. In the Initial state the drawer is open. Select the Initial state from the States panel, group the drawer artwork and then set the alpha value of that group to 0.
Now, back on the Secondary state, you can add some details to the drawer button and provide the interface item that allows the user to close the drawer. When the drawer is open, you can indicate to the user that the drawer button is toggled or inset by applying a style to the button.
Select the gray Drawer button in the bottom left side of the footer. In the right area of the Property inspector, you'll see a pop-up menu that says "No Style." When you click on that menu, you'll see a list of predefined styles available. Select the style called GreyInset_002. After choosing this style, the drawer button has a slightly inset look. Feel free to experiment with other styles or create your own styles to indicate the toggle effect (see Figure 9).
The final thing to do is provide an interface item to allow the user to close the drawer. Add the DarkGreyClose_button to the upper right area of the drawer. After making these changes, the Initial and Secondary states should look similar to the examples shown below (see Figure 10).
You have now created the two states that will provide the necessary views for the interactions outlined in the pre-planning phase of the application development.
In the previous section of this article, we created the Initial and Secondary states to create the different views. In this section, we'll add interactions to the prototype. To accomplish this, we'll use slices, hot spots and links to incorporate some simple interactivity, as well as incorporating some AIR-specific events to make the prototype feel like a true desktop application.
Note: If you'd like to begin following along at this point, use the Ventura_secondary.png file from the sample files folder as you step through the remaining instructions.
One of the most basic interactions commonly seen in applications is a rollover effect that graphically changes as the user rolls their cursor over an interface item. You've already set up this graphic change by swapping out the symbols to use different artwork for the image albums in the two states. Since we already have two states displaying different artwork, it's a simple task to create the rollover effect:
You've just created an interaction that displays the Secondary state graphic when a user rolls their cursor over that slice. When the user moves their cursor outside the slice area, the image will restore to display the Initial image slice. This behavior creates a rollover effect. Repeat this process to create rollover effects for the other image albums. Be sure to preview the application along the way to make sure everything is working.
To create the simulation of how the images will sync to image hosting services, you can alter the look of the sync button and display the syncing progress bar. We'll use some of the same steps described above to create the album rollover effects, with a few minor differences. The interaction to represent is that when a user clicks the sync button, the progress bar appears. The user can cancel the sync while it is in progress by clicking the dark grey button with the white X:
By adding these behaviors, the sync button will swap to the image in the Secondary state and the progress bar will become visible. The user can also now click the cancel sync button to get an idea of how that interaction might feel.
The steps for showing and hiding the drawer are very similar to the steps for swapping the sync button and progress bar. The behaviors you add in the following steps will display and hide the drawer with the image sync sources:
When a user clicks the expand drawer button, the drawer in the prototype appears to pop out. The user can close the drawer by clicking the dark grey close button in the drawer, which is really using the entire slice as the hit area.
Up until this point the interactions you've added aren't really different from a web-based application, although it's important to know how to create these types of interactivity. However, the purpose of this sample project is to create a prototype of a desktop application. Adding some interactions that you might expect in a desktop application, such as minimize, maximize, dragging the window, and other common interactions are easy to add in Fireworks CS4 with the newly added Commands for AIR Mouse Events.
In order to make this prototype feel like a true desktop application, add AIR mouse events for minimizing, maximizing, dragging and closing the application window. Similar to the instructions in the previous steps, you can attach these special AIR mouse events to hot spots or slices:
Note: Figure 22 displays mouse events that you do not see in your installation of Fireworks. These are custom events that were created in JSF and added to Fireworks. Keep in mind that you can create custom events if you'd like to add additional AIR functionality to your applications.
The interactions you've created in this section are just an introduction to what is possible when creating a prototype in Fireworks. Try experimenting with advanced slicing combinations, using links to jump to different pages and try adding different behaviors. If you would like to review a working copy of the sample project up to this point, the Ventura_interactions.png file from the sample files folder.
Throughout the process of prototyping an application, it is a good idea to preview your progress as you add additional design elements and interactions. Fireworks CS4 allows you to preview the AIR application to make sure everything looks the way you expect it to look before packaging the prototype for distribution.
To preview your AIR application prototype at this stage, select Commands > Create AIR File. The Create AIR File dialog box appears. It contains a series of options, but for the purposes of simply previewing the prototype, the only options you need to set are Window Style (System Chrome or Transparent) and Window Width.
Set the Window Style to transparent since this project uses a custom chrome. Choose System Chrome option whenever you want to use the native Mac OS X or Windows chrome, but for this particular sample project it won't look right.
For the Window Size, set the dimensions to 1 pixel larger than the file dimensions (721 × 521 pixels). If you don't add an extra pixel in each direction, a horizontal and vertical scrollbar will be displayed when you preview the AIR application (see Figure 11).
Click the Preview button to generate a preview of the AIR application. You may have to wait a moment, and then a preview of the application will launch as a native desktop application. The previewed application displays its custom window chrome and transparency. The only thing left to add are the interactions. Close the application by selecting ADL > Quit ADL.
You can preview the AIR application periodically as you follow along with the steps in the rest of this article. It's particularly helpful to preview the file as you add interactions, to ensure that the prototype looks and behaves the way you desire. If you'd like to review an example of how the states are set up, open the provided Ventura_secondary.png file and browse through the structure.
As we've been creating the prototype in Fireworks, we've taken advantage of the Create AIR File dialog box to preview the AIR application. In this section I'll describe the process for distributing the finished application. Using the same Create AIR File dialog box, we'll take a look at the options to create a packaged AIR file, along with some other features.
Note: If haven't been following along but would like to begin with the instructions at this point, open the Ventura_interactions.png file from the sample files folder.
Before you create the AIR file, let's create a folder that will contain the exported assets and application icons:
After defining the export folder and copying the application icons to it, you're ready to create the AIR file.
Note: It is important to copy any dependent files to the export folder that will be packaged with the AIR file prior to creating it, because otherwise an error will occur.
This time we'll export the completed AIR file as a "final" distributed application, which means that you'll need to pay a bit more attention to some of the application settings that we've initially overlooked. Choose Commands > Create AIR File to access the Create AIR file dialog box. Enter the following information into the fields:
The installer settings tell Fireworks which files need to be packaged up for the AIR application. It's similar to how a website might be packaged with the needed HTML files, image files and CSS files. All the required files will end up in the Ventura folder that was created on your desktop:
One of the main differences between simply previewing the application and saving an AIR file is that you can add an application icon to the completed AIR file. This application icon will act just like you would expect it would when the application is installed. The icon will show up on the native operating system, in the Windows Task Bar (or in the Mac OS X dock).
To add an icon to your application, you'll need to create a total of four icons. Make one icon for each of the required sizes: 16 × 16, 32 × 32, 48 × 48 and 128 × 128 pixels. Make sure that the images are saved at exactly those dimensions, otherwise the AIR application won't save correctly. For the purposes of this sample project, application icon images have been included in the sample file folder. These images are located in the icons folder you pasted into to the Ventura export folder before creating the AIR file (see Figure 23).
To specify these icons, click the Select icon images button and browse to select each of the different sized images in the Ventura/icons folder. After specifying all the icons, click OK. Now that you've added all the icons, the Create AIR File dialog box will display the application icons you've selected (see Figure 24).
Note: Make sure to specify the Ventura folder that exists on your desktop for the Use Current Document setting in the Content section of the Installer Settings. If you didn't specify the folder that contains the application icons, you may get an error stating that the icon images are outside the root folder of the application.
When an AIR application is created, it requires a digital signature. When the user installs the AIR application, the digital signature verifies where the application came from and who created it. You can either specify an existing digital signature file or create a new one:
The last thing you need to do is specify the destination where you'd like to save the AIR file. The name of the AIR file will default to the name of your Fireworks file and the destination will default to the location of the export folder. However, you can change either of those settings to suit your needs.
With all of the necessary information specified, click the Create AIR File button to package up your prototype for distribution. An AIR file will be created on your desktop. If you open the AIR file, you can proceed through the installation process and see your final application launch like a native desktop application, complete with the application icon and window interactivity!
Note: If you'd like to review the completed prototype, open the Ventura.air file provided in the sample file folder.
Prototyping can play an important role in the final outcome of any product, including desktop applications. With the new Export to AIR features introduced in Fireworks CS4, prototypes created in Fireworks can now extend to the desktop and offer further details of how an application might actually "feel" in that environment.
There are many online resources available to help you learn more about the concepts described in this article. For more great information regarding prototyping, designing with Fireworks and general tips, refer to the following resources:
To get more information about developing desktop applications with Adobe AIR, visit the Adobe AIR Developer Center.