Adobe Flash Catalyst is a new software to design interfaces. It is clearly different than other software because of its purpose : to fill the gap between design software (such as Photoshop or Illustrator) and the development software of these interfaces (FlashBuilder).
Despite a release date due to first semester of 2010, Adobe offers a beta version of this software ; probably to answer to the recent release of SketchFlow by Microsoft.

At PIA, until now, we mainly used Omnigraffle to produce lo-fi prototypes and the combo Photoshop / Illustrator for the hi-fi prototypes.
That is why, for a few months, we are flollowing with great interest Flash Catalyst, which is the promise of a better production of industrial prototype.

This first article about the design of interface with Catalyst is followed by a second article covering the collaboration between designers and developpers.
To get a proper conclusion about Catalyst, we tested it about the different aspects of the prototype production :

1. Creation of a Catalyst project
2. Design of interface
3. Adding interactivity
4. Improving the look & feel with Illustrator

1. Creation of a Catalyst project

The interface of Catalyst is very similar to Illustrator : a working zone, a layer management, drawing tools, symbols to drag and drop. So it is very handy (see the tutorials), despite it is not easy as Balsamiq.

The Flash Catalyst interface

To start the design of an interface, catalyst can import a Photoshop or Illustrator file (a storyboard for example) and preserves the layer structure of this one. However, starting with a new project seems the best solution. Indeed, Catalyst has simple and versatile tools, which obliges o stay concentrated to the the interface design.
Moreover, the look & fell will be improve later with Illustrator.

The layer panel

2. Design of interface

Thus, the interface can be drawn or created from the basic components of Catalyst. But in contrry to its concurrents like Omnigraffle, Catalyst has a few components. Fortunately it has been announced that the final version will offer more components. Futhermore, you will find a lot of additional components in this article

The drawing tools and the basic components

One more regret, it is impossible to give a relative dimension (in percent like in the “design” view of Flash Builder). For example, the prototype cannot fit the browser size. Again, you can find an article here to solve this problem.

Example: the properties of a rectangle

On the other hand, Catalyst allows the user to create its own components, which will be accessible from the library. Likewise the imported images (the main vectorial and bitmap formats are supported).
This library can be exported ans used in other Catalyst projects, and therefore allows a collaborative job (but far from the quality of ProtoShare).

The ressource and component library

But the extra value of Catalyst is its ability to give life to simple drawing : for example making functionnal a scrollbar. Here again, the choice of behavior is very limited (button, list, text or scrollbar).

Viewer creation “from scratch”

At last, Catalyst uses states : the application and the components have several states, in which each element can be placed or displayed differently. Ususally, a state represents a screen of the application or a particular look (when a button is down for example).
It is sad that there is no flow chart to show the links between these states and help to detect navigation incoherency, like in Adode Encore DVD.

The 3 states/screens of my application : login / HRD role / Assessor role

3. Adding interactivity

To become interactive, the prototype uses these same states. Indeed, each component can interact when an event occurs (click, rollover, value change or text input) by changing its own state or the one of its children (impossible to change a parent’s state, which is very annoying). It is even possible to add a condition on the component’s state. However, some events are missing, such as drag & drop or double-click.

An example of an interaction with a condition

There are other types of interactions : disabling a component, changing the transparency or the text, moving, resizing, rotating and adding a tooltip.
But, these interactions are very limited in comparison of Axure or FlairBuilder : for example, in a list, it is not possible to apply a different interaction depending on the row.

Changing the transparency on rollover

Every state changement defines a transition which can be animated via the Timelines panel. It is possible to play with rotating, resizing, moving and fading effects. Catalyst has even a “smooth transition” button, to create automatically an animation between two states.

An example of transition with a lot of animation !

4. Improving he look & feel with Illustrator

Each graphic element can be edited with Illustrator. Switching between Catalyst and Illustrator can be tiring at first, but it allows to progressively make hi-fi a lo-fi prototype.

Editing the viewer with Illustrator

Here are two versions of a prototype created with Illustrator. Catalyst exports only to Flash (SWF) : PDF export is missing for printing, and there is no possibility to add comments to the prototype unlike JustInMind.

 First version of the prototype

 Second version of the prototype

Conclusion & links

Despite its beta status, Catalyst already offers original features and nice perspectives : render which is very close to the final interface, custom-made components, deep modification of the look through Illustrator.

However, as Catalyst is part of the Adobe suite, it is very dependent of his brother Illustrator. This is making it less accessible than most of its “all-in-one” concurrents. Moreover, there still are major flaws to fix, like the lack of components and more sophisticated interactions.

But this is exactly the goal of a beta version : get feedback. And the Adobe employees are very reactive on the forum. Thus encourage to think that the next beta will be a great step in the right direction.

Read the second part about designer/developper collaboration.

Liens

• Catalyst
• Catalyst forum
• Flash Builder
• Tutorials
• Blog / Wireframe Magazine