Modern User Interface Design Tools – Part 3: Expression Blend vs. Flex Builder

In the previous part I took a closer look at how and to what extent Microsoft Expression Blend and Adobe Flex Builder offer pixel-graphics and vector-graphics tools to enable GUI designers to create modern user interfaces. In addition I outlined the concept of 9-Slice-Scaling, a method to make pixel graphics scalable without any quality loss. In this last part of the series I’m going to give a short example of how the concept is implemented in both tools and finally provide an overall comparison of the two tools to point out their strengths and weaknesses.

Building Buttons

Microsoft’s tool Expression Blend relies more on vector-based graphics than on pixel graphics and is therefore slightly less convenient when working with pixel graphics. But Blend provides very much design flexibility in general and therefore does allow to follow the 9-Slice-Scaling approach. With its grid GUI control, it is possible to create a stretchable custom component that consists of 9 individually pixel graphics, each one following its own layout policy. To create a custom button, you simply have to take a grid, add the 9 individually slices and adjust the grid’s layout behavior. This will tell the grid how and if a slice should be stretched when the entire button is stretched.

Flex Builder, features an even more convenient way to realize pixel-based skinning of components. It offers a skinning editor and uses CSS to describe the style of each GUI control. Using the editor you can define how your graphic should be “cut” into nine pieces – you don’t have to prepare 9 individual slices by yourself.

Conclusion

After working with both tools, Flex Builder and Expression Blend, it is hard to nominate a clear “winner” as judgment highly depends on the preferences of the respective design- and development team. As shown above, both tools have their way of implementing the 9-Slice-Scaling method, so it certainly depends on a lot of other criteria which tool to choose. In summary, we can say that Flex Builder is the tool with more comprehensive support for pixel-based graphics but Expression Blend features more flexibility in general and a more convenenient way to style components using vector graphics: all tools that are necessary to design vector based shapes and a built-in animation timeline to add an intuitive interaction design to your user interface are included right out of the box.

At first sight, one major difference is the platform independence of Flash. Microsoft, however, is working on Eclipse plugins, which should enable the development of Silverlight applications for Linux. At the moment, the Flash Player still is much wider spread than the Silverlight Player, but Microsoft’s announcements regarding Blend 3 sound very promising and the acceptance of Silverlight is growing. Silverlight enables the creation of very interesting applications that can seamlessly be embedded in websites and features great functionality. A good example is the deep zoom technology we used in a recent tech demo to illustrate resolution independent icon design by smoothly zooming between different static icon sizes.

Comparing the visual appearance of the tools, the first impression is that Expression Blend seems to be geared at designers while Flex Builder seems to embrace a developer’s viewpoint. The user interface of Expression Blend looks more sophisticated and target-group orientated in comparison to Adobe’s candidate. Flex Builder, on the other, hand looks more like an Eclipse plug-in (which is not surprising as it builds on the Eclipse RCP), but it is also clearly arranged and all functions are easy to access. Obviously these different approaches to GUI design result from the fact that Microsoft made an all-new tool to enable designers to create GUIs easier and more intuitively while the Adobe product is based on the already-existing Eclipse RCP, aiming at developers who want to have a GUI design tool embedded in their development environment.

Expression Blend: Stylish dark GUI and well-arranged layout.

Flex Builder: Rather clinical GUI design but clearly arranged and accessible.

Altogether, both GUI design tools provide a wide variety of functions to create Rich Internet Applications and desktop applications. Flex Builder (and Flash) may currently be wider used in that field but Expression Blend shows much potential to become an equally good or even better opponent. As mentioned above, Microsoft designed and created a sophisticated, all-new tool while Adobe bases Flex Builder on the already existing Eclipse RCP. Therefore, the decoupling of development and design seems to be applied more consequently by Microsoft’s candidate as there’s almost no need for the designer to touch any code, whereas, in Flex Builder, many properties have to be changed programmatically. To be fair it should be noted that – with both tools – some background knowledge of GUI development is indispensable in order to produce professional GUI controls and designs.

To sum things up, the following table shows the main differences, benefits and drawbacks of Microsoft Expression Blend and Adobe Flex Builder.

Expression Blend and Flex Builder Quick Comparison

All trademarks and product names used on this website are the properties of their respective owners and are used solely for descriptive purposes.