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 2: Graphical Approach of GUI Design Tools

David Patrizi

In the first part of this series I described how user interface design tools bring together developers and designers in a seamless workflow and gave an overview of the technical environments of Adobe’s and Microsoft’s tools in that area.

In this article, I am going to focus on the use of pixel and vector graphics in design, deal with some of the pros and cons of the two graphic types and finally give an introduction on the scaling of bitmap GUI components.

Pixels Versus Vectors

One major difference between Expression Blend and Flex Builder is their preference in supporting pixel and vector graphics. While Microsoft’s tool almost completely focuses on vector graphics, Adobe’s product supports both types to the same extent. Both tools, Expression Blend and Flex Builder, are mainly targeting the RIA sector.

Vectors are attractive…

Vector-based graphics, as favored by Microsoft, seem to be the clear winner in that context because they are smaller sized and consume less bandwidth than pixel based graphics, which makes them the better choice to build interactive and responsive user interfaces for the web.

Besides efficient performance in the RIA sector, Microsoft has a particular good reason to set on vectors: the interactive multi-touch table Microsoft Surface enables users to move, stretch, collapse and rotate graphical objects directly by using gestures. These sophisticated real-time transformations are only possible with the support of vectors. Furthermore, vector-based graphics are easier to handle and manipulate on the programmatic side of the GUI. Changing the rounded corners of a vector rectangle, e.g., is a simple task for a developer as it simply consists of changing one value. If pixel graphics are used, it is necessary for the designer to redo and replace one or more complete graphic files to attain the same effect.

…but raster graphic still matters

So why bother to support those old-fashioned, inflexible and memory wasting pixels as done in Flex? – Because they still are the better solution for complex and delicate graphic effects. The rendering of such effects on a vector base is still not fast enough on many machines. Although Microsoft’s graphical framework WPF is able to support graphics acceleration via the Windows-bound API DirectX, which improves the performance of graphic rendering tremendously, the Silverlight version of the WPF which is a subset of the original WPF and meant for the use in web, is limited here due to its platform independence.

This very real need for relying on pixel-based graphics can be observed when we create an icon with MS Expression Design, Microsoft’s graphic design tool, which, as stated above, focuses on the creation of vector graphics. Effects like drop shadow, bevel and emboss or Gaussian blur are theoretically realizable with vectors, but it would go at the expense of performance. Therefore, after the icon is saved in the XAML format, upon taking a closer look at the containing folder, we discover a sub-folder that contains all the pixel graphics needed to realize the beautiful graphic effects. So, even though it seems at first sight that Microsoft clearly goes for vectors, even for them it is not yet the time to banish pixel graphics completely.

Scaling Bitmap Graphics

In addition to the performance problem with effects for vector graphics described above, a quality problem is faced when scaling down those graphics: vector objects that are scaled down to a small size, e.g. icons, mostly lose their quality and end up as an unidentifiable pixel chunk. (For more information on this topic feel free to read our articles about resolution independent icon design.) Choosing pixel-based graphics is part of the solution to that problem. They, too, cannot simply be resized at will, because blurry or distorted graphics will most likely be the consequence, but when only certain graphical components – as opposed to the whole graphic – are resized, the desired high-quality results can be obtained. This is done in the following way:

9-Slice-Scaling

Most components have a rectangular shape or can be assembled from such shapes. Each of those rectangles can be divided into nine pixel graphic slices, which behave differently when the component is resized. The four corners contain fixed graphics. These are the only areas that are not resized when stretching or collapsing the GUI component. The four edges – top, left, right and bottom – are the areas whose content is only stretched or repeated in one direction while resizing the component. The left and right edges stretch or repeat vertically, top and bottom edges horizontally. Finally, the center graphic has to respond to both, vertical and horizontal resizing.

9-Slice-Scaling

Similar approaches

This method, which Adobe calls 9-Slice-Scaling, is applied nearly everywhere in the user interface development sector, e.g., by the Ajax web application framework ZK, the mobile operating system Google Android (called 9 Patch Images here), Java Swing and last but not least by our own Java Swing Look and Feel Engine Cezanne. 9-slice scaling will even become a standard for Websites as this approach has already been introduced in the upcoming CSS 3.0 release. In this context it is referred to as the border-image.

In the final article of this series, I will take a look on how good Expression Blend and Flex Builder handle pixel based GUI components and draw a final conclusion after comparing both tools.

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