{"id":53,"date":"2009-06-26T13:16:09","date_gmt":"2009-06-26T11:16:09","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=53"},"modified":"2020-01-25T19:48:38","modified_gmt":"2020-01-25T18:48:38","slug":"modern-user-interface-design-tools-part-3-expression-blend-vs-flex-builder","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/modern-user-interface-design-tools-part-3-expression-blend-vs-flex-builder\/","title":{"rendered":"Modern User Interface Design Tools – Part 3: Expression Blend vs. Flex Builder"},"content":{"rendered":"

In the previous part<\/a> 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\u2019m 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.<\/p>\n

<\/p>\n

Building Buttons<\/h3>\n

Microsoft\u2019s 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 <\/em>allow to follow the 9-Slice-Scaling<\/a> approach. With its grid<\/strong> 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.<\/p>\n

\"9-Slice-Scaling<\/p>\n

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 \u201ccut\u201d into nine pieces – you don\u2019t have to prepare 9 individual slices by yourself.<\/p>\n

\"9-Slice-Scaling<\/p>\n

Conclusion<\/h3>\n

After working with both tools, Flex Builder and Expression Blend, it is hard to nominate a clear \u201cwinner\u201d 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.<\/p>\n

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\u2019s 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<\/a> to illustrate resolution independent icon design by smoothly zooming between different static icon sizes.<\/p>\n

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\u2019s viewpoint. The user interface of Expression Blend looks more sophisticated and target-group orientated in comparison to Adobe\u2019s 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<\/a>), 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 <\/em>to create GUIs easier and more intuitively while the Adobe product is based on the already-existing Eclipse RCP, aiming at developers <\/em>who want to have a GUI design tool embedded in their development environment.<\/p>\n

\"Expression
\nExpression Blend: Stylish dark GUI and well-arranged layout.<\/span><\/p>\n

\"Flex
\nFlex Builder: Rather clinical GUI design but clearly arranged and accessible.<\/span><\/p>\n

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\u2019s candidate as there\u2019s 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.<\/p>\n

To sum things up, the following table shows the main differences, benefits and drawbacks of Microsoft Expression Blend and Adobe Flex Builder.<\/p>\n

Expression Blend and Flex Builder Quick Comparison<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n
<\/td>\nAdobe
\nFlex Builder 3<\/strong><\/span><\/td>\n		Microsoft
\nExpression Blend 2<\/span><\/strong><\/td>\n<\/tr>\n
Integration of Design Activities<\/span><\/strong><\/td>\no<\/span><\/td>\nRequires Adobe Creative Suite (Photoshop, Illustrator and Flash) to perform design activities effectively<\/td>\n+<\/span><\/td>\nNo 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.<\/td>\n<\/tr>\n
Standards
\nConformance<\/strong><\/span><\/td>\n		–<\/span><\/td>\nUses a derivative of CSS to style GUI components, however MXML is proprietary<\/td>\n–<\/span><\/td>\nProprietary XML (XAML)<\/td>\n<\/tr>\n
Platform
\nIndependence<\/strong><\/span><\/td>\n		+<\/span><\/td>\nFlash Player runs on Windows, Mac OS X, Linux and Solaris<\/td>\no<\/span><\/td>\nSilverlight runs on browsers on Windows and Mac OS X and is planned for Linux. Eclipse-based development tools<\/a> available for Mac OS X<\/td>\n<\/tr>\n
Acceptance<\/span><\/strong><\/td>\n+<\/span><\/td>\nWidespread and well-accepted<\/td>\no<\/span><\/td>\nSmall so far, but with rapidly growing acceptance<\/td>\n<\/tr>\n
Appearance<\/strong><\/span><\/td>\no<\/span><\/td>\n\u201cClinical\u201d, well-arranged UI, aiming at developers<\/td>\no<\/span><\/td>\nClearly arranged, stylish layout, aiming at designers<\/td>\n<\/tr>\n
9-Slice-Scaling
\nSupport<\/strong><\/span><\/td>\n		+<\/span><\/td>\nSupports 9-Slice-Scaling conveniently<\/td>\no<\/span><\/td>\n9-Slice-Scaling can be realized, but is less convenient to handle<\/td>\n<\/tr>\n
Prototyping<\/strong><\/span><\/td>\no<\/span><\/td>\nNo explicit prototyping tool available yet, but Adobe Flash Catalyst<\/a> has been announced<\/td>\no<\/span><\/td>\nNo tool available yet, but Microsoft SketchFlow<\/a> has been announced for Expression Studio 3<\/a><\/td>\n<\/tr>\n
Design\/
\nDevelopment
\nDecoupling<\/strong><\/span><\/td>\n		–<\/span><\/td>\nMany properties have to be changed in code<\/td>\n+<\/span><\/td>\nGood separation of development and design, not many adjustments via code necessary<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

All trademarks and product names used on this website are the properties of their respective owners and are used solely for descriptive purposes.<\/span><\/p>\n","protected":false},"author":14,"featured_media":0,"template":"","tags":[42,41,43,36,24,44],"class_list":["post-53","blog","type-blog","status-publish","hentry","tag-blend","tag-flex","tag-look-and-feel","tag-silverlight","tag-visual-design","tag-wpf"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/14"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/53\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}