Getting Started in Adobe Flex (for Designers)

This article is intended to be the beginning of a series of articles on Adobe Flex from a User Interface Designer's prospective. I hope that it will give any designers out there that are new to the Flex framework a jumping off point to help them figure out exactly where to begin when designing for and/or developing new applications. I plan to add follow on articles to dive into more details about the aspects of Flex that would interest UI designers in the future.

Overview
Flex is a framework for rapid design and development of Flash-based RIAs (Rich Internet Applications). Underneath the covers, it uses a mix of an XML-based language (mxml) and Actionscript that gets compiled into a Flash swf, which is then published to the web. The standard user interface components available in Flex apply some of the best aspects of both desktop user interface behaviors and web interface element behaviors. The standard components are extremely customizable both in appearance and behavior and custom components are relatively easy to develop for design elements that do not fit the standard set of components.

Although the resulting application is a Flash swf, building an application in Flex feels more like working with HTML/Javascript than it does Flash. There is no obvious concept of a stage or timeline. Each screen or set of screens is self-contained similar to a typical HTML-based website until the application is compiled. However, because of the limitless user interaction possible with Flex, designing interfaces for it is much more challenging than designing traditional web application interfaces where there are certain limits to what can be done in a reasonable amount of time. There is much less of a linear navigation scheme of page-to-page or screen-to-screen. It is easy to create conditional transitions that react to user input on a single screen. And similarly to Ajax, Flex applications can pull back data for display real-time, without a "refresh" or sending the user to another screen.

For a more in-depth look at the Flex framework and code, I would recommend Adobe's Getting Started with Flex guide. If you are primarily a designer, you will most benefit from the Getting Started, Building a Simple Interface, and Building an Advanced Interface sections.

Design Considerations
The easiest way to get started learning and using or designing for Flex is by exploring Adobe's component and style libraries. This will give you a basic idea of what is available "out of the box". It also gives you code snippets that you can copy and paste into Flex Builder.

• Flex Component Explorer
• Flex Style Explorer

The more your design can conform to use and styling provided with the standard components, the faster and easier it will be to design and develop your interface. However, the true power of Flex lies in the fact that you don't *have* to stick to the standard components and that nearly anything is possible. Rather than making it easier to design an interface, this makes it much more complex. Here are some aspects that should be considered:

Component Behaviors
Most of the standard components have built-in behaviors that you may or may not wish to make use of in your interface. When considering the overall user experience of your application, you may find that some of the behaviors fit and some don't. For example, a "panel" object can be dragged around by its title bar. This is a behavior you may wish to turn on for certain elements and off for others.

Transitions and Effects
Transitions and effects are not traditionally part of web-based application user interface design. For one thing, they're not necessarily "easy" to create and can even hurt the user experience due to slow page loads. And let's not even mention browser compatibility. In Flex, there are some standard effects and transitions that are very easy to employ. .Also, because there is no sense of a "page refresh" as you would have in HTML to alert the user that something has happened, transitions are sometimes necessary in order to provide that feedback to the user and maintain the usability of your application. For example, what happens when the user clicks the Save button on a form? In a traditional web application, you might see the page refresh and your new data added. The page refresh alerts you that something has changed. In Flex, your data could also be refreshed, but that alone may not be obvious enough for the user to feel confident that the change has been made. You may wish to replace the "page refresh" with some other type of transition or effect that accomplishes that purpose. I hope to explore the many options for this in a later article.

Images
It may be worthwhile to give greater consideration up front as to what tools you will use to create your design comps. One great advantage of a Flash interface is that it can include vector images and thus create a very small download for a finished file. If you design using a vector graphics tool (Illustrator, Fireworks, Flash, etc.), you can use those graphics to create your image library for your Flex application. I have found a Flash-based image library to be very efficient for use in Flex applications (also more on that in a future article).

Skins
As with the image library, I highly recommend working with vector-based graphics when skinning for a more crisp appearance and smaller downloads. The gist of skinning is that you can make any component in Flex look exactly how you want it to. But keep in mind, some components will be easier to apply significant modifications to than others. For example, you cannot, through skinning, make the tab bar display vertically rather than horizontally. You will need to develop a custom component for that (which I found out the hard way on my first Flex project). There's only so much that skinning can do. But, if you just want to make your Flex application look a bit different and not like everyone else's Flex application, modifying the skin is an easy way to do so.

Adobe offers skinning templates in Flash, Photoshop, Fireworks, and Illustrator and instructions how to use them on their website HERE.

CSS
Cascading Style Sheets in Flex work much the same as they do in HTML. The syntax is slightly different in that the property names are camelback instead of hyphenated (ex. font-family = fontFamily). However, Flex seems to recognize styles written in HTML property syntax as well. Some limitations that I've found:

• width, height, x, and y properties cannot be set through the style sheet
• style inheritance seems a little odd sometimes due to the component inheritance (ex. the ComboBox component seems to inherit styles from button, so styles applied directly to the Button selector through the CSS apply to ComboBox as well)

Adobe has a complete list of CSS properties for Flex 3 available on their website HERE.

Communicating the Design
You may also find it a challenge in this media to communicate your design to the business and development teams. For your design concept presentation, I recommend using storyboards to portray the transitions and user interaction as necessary. This method will also be useful when communicating the design to the development team for implementation. However, I think that there is no better way to communicate the design than to create a high-fidelity UI prototype directly in Flex. This will require more technical capability than a pure graphic designer would typically have, but it is really the only way to ensure overall consistency in design. Even so, if you are working with a large application and team, documentation may also be necessary. I highly recommend using detailed User Interface Specifications coupled with a Navigational Blueprint and Wireframes and/or Storyboards as necessary. I will expand upon these recommendations in another article about Design Process as related to RIA.

More to Come
So I obviously haven't touched on everything here, but have hopefully given you some basics and provided links that will help you get started. If there are any specific user experience or user interface design topics related to Flex or RIA in general that you would like to see, please let me know.

I welcome respectful, constructive feedback or corrections.