Home > About > 10 Ways to Skin an App

10 Ways to Skin an App


flex theming

1. Style it with CSS

This is one of the quickest and easiest ways to start making your Flex 2 Application look a bit more “custom”. CSS styling can be applied using an external style sheet or directlyinline of your MXML. A great tool for creating and understanding CSS styling is Peter Baird’s Flex 2 Style Explorer. This tool also gives you the ability to export your CSS to use in your Flex app. Whether inline or as an external stylesheet.

Examples: Moxy Theme , Mac OS X Theme by Adobe Consulting

2. Go Graphical

Another method is Graphical Skinning, which can be a bit more time consuming, but allows for more control over the look of the UI. Most “unique” looking Flex applications use this method in combination with CSS styling to get a more custom look.Graphics can be created a few different ways using Photoshop, Fireworks, or Flash. Scale-9 or 9-slice tactics can be used to allow your graphics to scale uniformly with the component it’s applied to. Also, like styling, this method can be used inline or with definitions in anexternal CSS file.

Check out Narcisso Jaramillo’s great tutorial on how to do all this. If you’re using Photoshop there’s this video tutorial from Jesse Warden about getting a Photoshop design into Flex 2.

Examples: Messenger Theme , Picnik , Flip Flip Books

Resources: Flash 9 Button in Flex 2Integrating a Flash interface into Flex 2

3. Make it Programmatic

If you want the most control over the way you Flex 2 application looks, then programmatic skinning is the way to go. It is a more advanced method of skinning and requires programming knowledge. Eylon Stroh of Adobe put together a really great step-by-step walkthrough, including implementation of programmatic skinning.

Examples: Napkin Skin by Eylon Stroh

Other Styling and Skinning Resources: Programmatic Skinning with Flex 2 , Interface Customization in Flex , ScaleNine Resources

4. Customize the App Preloader

One of the ways you can usually tell an application was built using Flex is it loads in with the default preloader. I’ve run across several people in various forums asking about how to skin the preloader. The Adobe Live Docs provide a method and explanation on how to do this. Ted Patrick also provides some insight on how to do this.

Examples: Picnik , Flip Flip Books , Flipper FlexApps Viewer

5. Establish a Color Scheme

Another way to get a great looking Flex app is to establish a appealing and consistent color scheme. It seems like something small, but it can make a big difference when executed correctly. I know not everyone is a designer and picking colors can be scary, but it’s worth it. There’s a lot of great online tools to help with this. Of course, there’s Adobe’s Kuler, which is easy to browse and find a color scheme you like. Write or copy the values and use them to give you Flex app a new color scheme. There’s also Daily Color Scheme, this Color Scheme Tool, and I’m sure many others.

Keep in mind that color does play a big role in your application and depending on it’s functionality or purpose you may want to go with more neutral colors like greys, subtle color shandes or white.

6. Fonts

The way text looks in your app can set it appart from others. In Flex you can embed other fonts (inline or via external CSS file) to use for any purpose, whether for your application as a whole or in select locations to bring attention. At the moment Flex 2 only supports the embedding of TrueType fonts.

Choosing a font, like choosing a color sheme, can be tricky. Again, it depends on what you wnat to accomplish with it and insuring legibility and usability when implemented. Keep in mind that fonts range in price from free to fairly expensive.

Here’s a few resources for finding fonts: Font FreakFonts For FlashOrgdotFree-Fonts,DafontVeerAdobe Type

7. Icons

Usuability and an intuitive user interface can make or break an application. The use of visual cues can ease a users perception of an application and increase the pace at which they learn the app. Icons are an easy way to give users “directions” in what they need to do and can compliment or reenforce the text the icon may be next to. Like the saying goes, “A picture is worth a thousand words.” In some cases an icon can say more than text.

Here’s a few resources for icons: Fam Fam FamStock IconsGlyph LabIcon Buffet,Fast IconIcon ShockIcon BaseIcon Fish

8. Add Some Effects

Selectively adding static and animated effects like drop shadows, glows, etc. can help add a polished look to your Flex 2 app. You can use Flex’s effectscreate composite effects, or take advantage of importing Flash Filters for images and text. To get a better idea of what’s possible by using effects check out the Flex Component Explorer.

In addition, David Keutgens put together a Flex Effects Explorer, which makes it easy to see what these effects can do to various components in your app. And a more in depth display of Distortion Effects was created by Alex Uhlmann.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: Flipper FlexApps ViewerJamJar

9. State Transitions

Smooth out your app’s state changes by creating transitions. With a little code components can grow, reveal, collapse, flip, etc. for any number of purposes. Definingmultiple transitions can create an even more fluid user experience.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: FlexStore

10. Get Feedback

Successful applications are rarely built without the influence of other people and I know not everyone has access to advanced user group testing and polling. However, during the process of creating a UI it’s always a good idea to get feedback from people who are familiar with what you’re doing and, maybe more importantly, by those who are not. There’s a lot to learn from a fresh and unfamiliar perspective. In most cases, these perspectives can help shape a final product.

Categories: About
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: