This is part two of a four part series. To read part one, click here.

Designing the MAX Volume Experience

Designing the MAX Volume Desktop App

I designed the MAX Volume desktop experience with our idea and list of technologies in mind. There are three views within the application: the Albums view, the Album/Songs view and the Visualizer view.

The Albums view allows user to search, toggle layouts and view the song queue. The Album/Songs view lets user vote for a song they want to hear, which gets added to the queue, and the Visualizer view shows various visualizers with content about the song queue at the bottom.

For the actual designing I used Fireworks. It’s my application of choice when designing apps and the organizational structure of the file maps exactly to Flash Catalyst, which I used to add interaction. When my designs were solid enough I went over to Flash Catalyst to add my interactions. I was a little discouraged at first because there is no “Import from Fireworks” option. However, there was an “Import FXG” option, so I exported my Fireworks file as FXG and then was able to successfully import my designs.

Everything I imported didn’t come through flawlessly, but I was easily able to correct the issues. Before I started adding interactions, I also spent some time organizing my layers and naming them. Once a solid structure was established I started turning my artwork into working components. Just like Layers, I was diligent in meaningfully naming the components I was creating, for example “Search Button” rather than “Button_3.”

In addition to creating components I added some animation effects and transitions. I didn’t want a user to pop in and out of states, I wanted smooth transitions to help guide the user where they were coming from and where they were going. I also used animation to add depth to areas of the application, like the ability to “toss” and album off screen to move to the next song.

Once I was happy with the level of interactivity and incorporated animations, I was able to hand over and FXP file right out of Flash Catalyst over to RJ and Leonard to work their magic. Throughout the design and development process there were changes that needed to be made, both on the design and interaction side. While I didn’t use the new round-tripping capabilities in Flash Catalyst, I was able to repeat the above process for other areas of the application and send over real code to incorporate into development. It had been a while since I last used Flash Catalyst, but was pleasantly surprised by it while working on this app.

Designing the MAX Volume Mobile App

Designing the mobile version of MAX Volume worked pretty similarly to the process for the desktop version. My design started in Fireworks and eventually made its way into Flash Catalyst for some elements. In most cases, RJ grabbed graphics from my Fireworks file to implement into the mobile application so it would be lighter weight. In some select instances we opted to use MXML right out of Flash Catalyst, which ended up working quite well.

All in all, designing both the desktop and mobile applications, and getting them implemented into development, went very smoothly. It was much better than the struggles I became accustomed to with Flex 3. Best of all, there was very little loss in vision going from design to development and implementing changes all along the way.

“Developing the Desktop Application and Mobile Experiences” by RJ is up next.