January 11, 2009

Flex Application Design

Posted by Jeremy Mitchell
Today application developers face an ever-increasing challenge of quickly building robust, feature-rich applications that look great.

At a high-level, an application has two fundamental components - application design and application functionality. While each represent a broad category of subjects, application design can be summarized as the style and layout of your application while application functionality includes the features offered.

As developers, we tend to put a lot of emphasis on the features of an application. This is understandable. Developers develop; designers design; and a few exceptional individuals do both. However, in most cases, developers lack design skills and not all projects can afford the luxury of a professional designer. Therefore, developers are left with the arduous task of developing highly-functional applications with attractive and user-friendly interfaces.

Fortunately, for the design-challenged developer, Flex ships with a number of attractive themes (Aeon Graphical, Haloc, HaloClassic, Ice, Institutional, Smoke, Wooden) consisting of default styles and skins for all of your application components. Furthermore, each style and skin can be customized with relatively little effort using Flex Builder's CSS Explorer.

If your design needs are still not met, check out ScaleNine's library of Flex themes or hire a designer with an eye for fonts, colors and the subtle details required to achieve a professional design and differentiate or brand your application.

Equally important, if not more so, to the style of your application is the layout. Application layout contributes to the usability of your application. Successful applications are usable applications.

Application layout helps developers:

1. organize and group functionality relevant to specific business tasks
2. dictate work flow through the use of complimentary application views
3. enforce a standard and consistent display of application components throughout your application

There are many tools available to help you define the layout of your application. Some are free (or almost free) - pencil / paper, whiteboard, etc; others are not - Visio, Photoshop, etc.

Unfortunately, with the majority of a developer's time committed to building the features of an application, little time remains to design the layout of an application. Therefore, the layout design process must be efficient.

To ensure efficiency, I would recommend finding a simple tool designed for one thing - creating layout mock ups.

Balsamiq Mockups fits the bill nicely. Mockups provides a clean and intuitive interface designed for creating fast and informal layout mock ups. Plus, it is fun, easy to use and cheap. It was also built using Flex!

A desktop version of Mockups deployed using AIR is FREE with the ability to unlock additional features for only $79.

Referred to as a "fast tracking prototype tool", you'll find all the essential features required to "mock up" your user interface and nail down your application layout...FAST.

Features include (but not limited to):

- component look up (quick search)
- component drag & drop
- component positioning
- component resizing
- component formatting
- mock up printing
- mock up importing
- mock up exporting
- mock up saving

The Mockups interface is comprised primarily of 2 components:

1. a scrollable library of mock up components
2. a canvas where you will build your layout mock up

Once complete, your mock ups will look similar to this:

After your layout concepts have been finalized and approved, you must architect the view using Flex Builder. This involves selecting the appropriate Flex components (containers and controls) or building your own custom components.

Your mock ups will serve as your guide to the placement and positioning of your Flex components.

Remember, an application is ultimately judged by both its design and its functional capabilities. Neglecting one or the other will most likely result in project failure, so allocate your time wisely and use the right tools for the job.

1 comment:

Anonymous said...

I will strongly second Jeremy's recommendation about Balsamiq. We have been using it now for about 4 months with tremendous success.

Peldi has done a fantastic job of taking comments and incorporating them into the Mockups product. It helps so much to work through design issues that the price is not even an issue!