You are currently using a browser that is no longer supported and may therefore cause display errors. Feel free to switch to another browser to experience a better design.

Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.

Close

Thinking Out of the Box

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

David Patrizi
David Patrizi
June 26th, 2009

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.

9-Slice-Scaling with Expression Blend

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.

9-Slice-Scaling with Flex Builder

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
Expression Blend: Stylish dark GUI and well-arranged layout.

Flex Builder
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

Adobe
Flex Builder 3
Microsoft
Expression Blend 2
Integration of Design Activities o Requires Adobe Creative Suite (Photoshop, Illustrator and Flash) to perform design activities effectively + No compatibility yet, but import for Photoshop and Illustrator file format are announced for Expression Studio 3. However, compatibility is less necessary as many design tools are already included.
Standards
Conformance
Uses a derivative of CSS to style GUI components, however MXML is proprietary Proprietary XML (XAML)
Platform
Independence
+ Flash Player runs on Windows, Mac OS X, Linux and Solaris o Silverlight runs on browsers on Windows and Mac OS X and is planned for Linux. Eclipse-based development tools available for Mac OS X
Acceptance + Widespread and well-accepted o Small so far, but with rapidly growing acceptance
Appearance o “Clinical”, well-arranged UI, aiming at developers o Clearly arranged, stylish layout, aiming at designers
9-Slice-Scaling
Support
+ Supports 9-Slice-Scaling conveniently o 9-Slice-Scaling can be realized, but is less convenient to handle
Prototyping o No explicit prototyping tool available yet, but Adobe Flash Catalyst has been announced o No tool available yet, but Microsoft SketchFlow has been announced for Expression Studio 3
Design/
Development
Decoupling
Many properties have to be changed in code + Good separation of development and design, not many adjustments via code necessary

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

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Corporate Experience Manager
+49 681 959 3110
Contact form

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119