Flex Skins: The Thick and Thin

If you build and deploy applications in Flex, then you know there are only two paths to follow when crafting the style and overall theme of your application.

The first is an obvious low barrier; use the built-in UI components based on the default Halo Aeon theme, which can be easily manipulated using CSS to change underlying colors and contours. The second is the high barrier; create a unique graphical skin using one of the many Adobe design applications like Fireworks, Flash, Illustrator and Photoshop.

If the application you’re delivering is intended for mass distribution/adoption, then there are a number of items you need to consider before choosing one of these directions.

Flash Player has the highest ubiquity of any runtime in the world and this simply means you have the potential ability to reach any particular size audience (billions) you’d like, so before you architect, build and deploy your application, you need to consider your audience and the client(s) in which it is deployed to.

Now, leveraging Flex Framework 3.0 (Moxie), you can greatly reduce the stress on the client with the caching in Flash Player 9, but only if the application is built and designed using the built-in UI components and default theme.

This however, excludes the style of the application. For instance, custom components, CSS and skins are not cached, so a unique style still comes at the cost of file size.

This factor is nothing new. Web pages built today inherit the benefits of inline UI components like buttons, scrollbars, radio buttons and panel windows of current industry browsers. Thanks to Adobe Platform Components like the Flex Framework we now have an extensive variety of UI components to assist in the construction of our applications without impacting the bottom line.

Default example…

Custom example…

The most significant benefit to design customization is the flexibility you will have when integrating a particular brand or experience design using graphical skins and custom components.

The application will leverage component caching on many levels, but now additional assets must be included like custom skins and class libraries, and CSS. Custom Flex applications can easily balloon in file size, extend initialization times and stress the utilization of client resources (cpu, memory, bandwidth…etc.) from any number of areas (architecture, 3rd party components, visual effects, transitions, streaming media, skins…etc.).

When possible I always recommend leveraging the UI components as well as configuring the default theme via CSS as it will save you from unnecessary drawbacks (see above).

For a more advanced approach, you can manipulate the UI component libraries to reflect your UI architecture and leverage vector art for custom skins. Between Adobe Illustrator and the Flash IDE, Flash can generate the smallest skin file size. Both Illustrator and Flash produce vector art natively and will always perform better than a bitmap skin. If you can however, afford the bandwidth and significantly larger file size for a bitmap skin, then Fireworks or Photoshop will be the way to go.

I personally have found Fireworks and Flash to be the most efficient applications to use, from both a productivity standpoint, and a value-add to project and application performance for every rich application I have designed and built.

Always remember, if you intend on releasing your application to the public, keep the end user in mind throughout the build and design process, as both are equally important. A great User Experience is a combination of functional features and intuitive design, it is always a balance of the two.

rob.

[images courtesy of Eylon Stroh]