Designing for mobile devices using Fireworks CS4

Design plays a vital role when developing user interfaces with the goal of creating rich immersive experiences for end users. Mobile application development involves many other factors besides setting the stage size to match small screens or mapping functions to a device's soft keys.

The visual elements that comprise the user experience on mobile devices are themselves becoming more important as devices become more complex and users become more adept. I believe there is a great opportunity at this time to help shape the future of user interfaces on handheld devices and promote intuitive interaction as a standard. Making something beautiful, as well as functional, will result in an application that is useful and offers a more interesting and compelling experience for consumers.

Put simply: small is beautiful. When interface design effortlessly fulfils the purpose of an application while also enhancing its aesthetic, there is a greater chance that the end product will be successful. Users are naturally more drawn towards an application that they view as enjoyable and engaging.

During the pre-planning stage of mobile development, remember that you are designing applications for a mobile lifestyle—meaning that your target audience may be anywhere in the world when they use your application. The key is to create elegant and simple designs that focus directly on the users' needs. A good mobile application is not only easy to use but provides entertainment and services on demand.

In addition, you should strive to offer functionality that results in creative interactive experiences, because users tend to develop an emotional attachment to an application that they can personalize and customize to make it feel like their own. Build a project that includes visual and audio elements that are defined by user preferences and that offers an intuitive, enjoyable interface design and you've got a winning combination.

It is fairly common for designers to think of Adobe Photoshop first when discussing their primary design tools. However, with the release of Fireworks CS4, I feel that this mindset may change. Once you appreciate the power of Fireworks CS4, you begin to realize that its integration with Photoshop offers an efficient workflow for crafting rapid design prototypes.

I use Fireworks CS4 almost exclusively on every project I create for mobile devices. It is my first choice because I find it to be much more user friendly in terms of creating graphics and exporting files to a wide variety of formats. Additionally, the integration between Fireworks CS4 and Adobe Flash is just fantastic. This article provides real-world considerations and tips for creating assets for your mobile development projects using Fireworks CS4.

This section examines a mobile movie application that I recently created. As I built this project, I designed the prototype template in Fireworks so that the design elements could be repurposed for use in Flash to develop the final product.

The screenshots highlight the main features of the mobile movie application. Users can watch trailers of new releases (with normal display or full screen), get detailed information about each film, and buy tickets to see the show. I also created a built-in help system to make it easy for users to navigate through the application. This may be a small application, but it fills the needs of the average film buff while also marketing new films in theaters.

Here's the application's feature list:

• Watch movie trailers (normal display)
• Watch movie trailers in optional full-screen mode
• Get detailed information about movies
• Buy tickets
• Control video playback: play, pause, rewind, and fast-forward
• Adjust audio levels with the built-in equalizer
• Set the volume
• Get instructions on how to use the application in the help system

In order to make it easy for users to navigate through the list of movies, I created a simple interface using the right and left arrow keys (see Figure 1).

A large "Info" button allows user to access more information quickly about the current movie title they are viewing (see Figure 2).

When users visit the information page for a movie, they are presented with a "Play" button. This offers the ability to view the movie's trailer. The "Tickets" link makes it easy for users to purchase tickets to see a specific show (see Figure 3).

This interface allows users to scan quickly through the featured movie selections, get more information about their favorites, watch a movie trailer, and purchase tickets to go see it, all in a very natural and intuitive manner.

Since the show times and theaters are listed right where the users purchase their tickets, they are able to select their desired location and time without ever leaving the interface. In fact, during trailer playback, users can purchase tickets and return to the movie's information page.

Full-screen mode allows users to see a better quality version of the trailer (see Figure 4). Pressing the asterisk ("*") key does this; otherwise the trailer plays in normal mode.

The movie application offers the ability to increase or decrease the volume of the trailer's audio. It made the most sense to me to use the up and down soft keys to accomplish this (see Figure 5). And if you like to watch trailer again you can just click the rewind button.

While the movie trailer is playing, it's important to provide users with a quick way to stop the movie since they may encounter situations requiring them to focus their attention elsewhere. The built-in help system offers quick tips for navigating through the application (see Figure 6). This quick reference tool makes it easy for people to find out which keys do what in the application.

In the next section, I describe some of the guidelines and considerations I followed when building the mobile movie application.

Fireworks is my preferred tool for creating graphics for mobile applications. Here I outline some of the techniques I used to build the layout and generate the design assets in the mobile application. Hopefully these strategies will come in handy for you as you design your own mobile projects.

Screen size and orientation

When you design a mobile application, it's critical to determine your target device range because different handsets have different screen resolutions. The dimensions can vary greatly (such as 240×320, 176×208, and so on).

Fireworks makes it very easy to set the screen size. Simply select File > New and enter the height and width of the desired canvas. The canvas orientation and the resolution of the pages can be changed very quickly in a single document.

Pages and states

The Pages panel is helpful when you need to create master templates. Just make duplicate copies of the subpages and then edit them as desired. This is a really fantastic option because you can easily create a variety of different designs for a single page (see Figure 7).

The States panel is a wonderful new feature because it allows you to set up the look and feel of each state in the application (a page may contain different states of the same page). However, when you export the PNG, only the active state will be exported.

Rich symbols

Use rich symbols whenever you plan on duplicating graphic elements. They'll save you a lot of time. When you use rich symbols, you don't need to rework the graphics on each page. Rich symbols in Fireworks are very similar to the symbols (movie clips) in Flash. You can convert any graphic into a symbol by pressing F8. And if you edit or modify the symbol later, all iterations of the symbol's instance will change automatically in every page.

In the mobile movie application I used rich symbols for many elements, including the movie logo, left and right arrow keys graphics, and CD and box elements. Whenever it was necessary to modify the logo, I changed it once and the logo was immediately updated on all the other pages.

Adobe Illustrator integration

You can even import Adobe Illustrator files directly into Fireworks CS4 while retaining the layer structure, text, complex vectors, masks, colors, groups, and images (see Figure 8). Also supported is the ability to convert layers to states. It just got easier to jump between the two programs and copy, open, or import illustrations.

Testing mobile device designs with Adobe Device Central

With the emulator in Adobe Device Central, you can quickly test your design to see how the application looks on the actual mobile phone. Open your PNG files with Adobe Device Central and choose your target mobile device from the list of handsets. There are many device profiles available, so simply click each device to see how it displays your graphic content. Adobe Device Central allows you to choose from a wide range of handsets, based on manufacturer, screen resolution, or supported versions of Flash Lite (see Figure 9).

Adobe Device Central doesn't support the display of all layers of your PNG files—only the top pages. For this reason, I recommend exporting each subpage as an individual PNG file (or other web image format). After you export each page separately, open each page individually in Adobe Device Central to review the look and feel of your designs.

Exporting the final design to deliver to clients

After you are finished designing a prototype, you can choose either to export them as an interactive PDF file or as HTML images, allowing great flexibility as you deliver your product designs to your clients.

Interactive PDF files

One of my favorite features in Fireworks CS4 is the ability to link the pages together using the Slice tool. It's a snap to export the designs in PDF format (see Figure 10). Also clients love the ability to review designs as they click through them. Best of all, PDF is a widely used file format that is easy to view with the free Adobe Reader, streamlining the review process considerably. Check out the PDF file I created for this mobile application:

i2fly-movie.pdf (PDF, 1.8 MB)

HTML export

Another easy format to export to is HTML. It previews like a charm and is widely accepted by clients. Fireworks generates pure HTML that can be read by most web browsers and HTML editors, such as Dreamweaver. For more information, refer to Exporting HTML and Exporting Fireworks HTML in the Fireworks LiveDocs.

Integration with Adobe Flash

You can also repurpose all of the graphic symbols, elements, and PNG files in Flash CS3 Professional. You can choose to maintain the editability of the pages or import them as a single, flattened bitmap (see Figure 11).

PNG files generated by Fireworks CS4 contain metadata and important file information. When you import those PNG files into Flash, the symbols you created in Fireworks are recognized as symbols in Flash. Vector shapes are recognized as editable paths. Text is also maintained as editable if desired. This is truly a timesaving feature because it allows me to work perfectly with my designs from Fireworks to Flash without any extra effort. The import process also includes many different options that allow you to choose how you want to import the PNG files into Flash.

Where to go from here

As you can see, Firework CS4 includes many workflow benefits that go above and beyond creating rich graphics and rapid prototypes. You can reuse the same graphics to build out different versions of your projects without wasting any time adjusting files. This means you can create one version of the design and use it across many different applications with minimal effort.

To get more information about creating graphic elements with Fireworks CS4, check out these resources:

Creating an interactive PDF file from a multipage document in Fireworks CS4

Introducing the new vector manipulation tools in Fireworks CS4

Be sure to visit the Fireworks Developer Center to access sample projects, articles, and tutorials.