Modern User Interface Design Tools – Part 1: Design Marries Development

This series of blog articles deals with the use of GUI development tools by designers and developers, with a particular focus on Microsoft Expression Blend and Adobe Flex Builder.

In the first part, I will have a look at the cooperation between designers and developers during GUI creation, describe some issues that can affect their collaboration and point out how GUI design tools can improve the overall design and development workflow.

After doing so, in the upcoming parts, I will focus on some technical aspects of user interface design and development. The second article will treat the differences between vector and pixel based user interfaces and will introduce the concept of scalable bitmap graphics. The third and last article will then show how the two tools implement that concept and draw a final conclusion on the respective benefits and limitations.

Two Sides of the Coin

Here at Centigrade it is everyday business – designers and developers working together to achieve a common goal: creating both aesthetic and well-engineered user interfaces. But not all projects involve design and development in equal shares: often, clients request a new appearance for their application without any source code being touched or they prefer to handle the programmatic part on their own.

Especially in the latter case, the communication of the client’s developers and Centigrade’s user interface designers crosses company borders: Centigrade provides the pure graphical “building blocks” (sometimes referred to as assets) that are then assembled by the client’s developers to create the final user interface. In order to avoid confusion, we add some kind of construction manual that explains how to assemble those assets. Typically, it contains information about colors, font styles and sizes as well as spacings and positions of graphical elements.

All those crucial facts have to be collected and clearly communicated to developers. Experience shows that it can often be tedious work foreseeing every single possible question that can possibly arise when it comes to implementing a design. That work has to be carried out carefully, however, in order to avoid the danger of conceptual gaps that jeopardize the integrity of the envisioned design, e.g. when important visual details are not accurately defined in the document.

Sometimes, even with a carefully crafted document, interpretation errors made by developers may lead to false implementations. Especially for developers with little to no background in GUI implementation, interpreting and correctly implementing a specification document without additional support can be a challenge.

But even with experienced developers who do a good job in implementing a specification document, difficulties might arise on a larger scale: namely, when different developers work on different GUI elements. This kind of work distribution causes the risk of dissimilar user interface components being used, each of which is well-made, but which do not fit well together in an overall picture. To avoid this, every developer must follow exactly the same approach in implementing the designer’s visions; otherwise, the result would be a non-coherent GUI.

Hence, the important question is: how is it possible to perform a smooth and efficient baton change from the designer to the developer without leaving any conceptual gaps or risk of misinterpretation?

Bringing Together what Belongs Together

The simple answer is: Let designers and developers speak the same (formal) language. Modern user interface design tools combine design and development activities into a hand-in-hand workflow that minimizes informal communication and helps to reduce conceptual gaps. There is no need to have additional documentation on how to use an icon or where to place a panel, because all that information is pinned down when the final (visual) interface is built by the designer using the design tool. Microsoft Expression Blend and Adobe Flex Builder both describe all layout-information (e.g. sizes, offsets, alignments) and the visual style of GUI elements (e.g. fonts, color values) via XML. The designer either creates graphical assets for the GUI elements with external graphic design tools and imports them into the project or he adjusts existing GUI elements and uses them to build the user interface – the corresponding XML code will be generated automatically. Expression Blend uses Microsoft’s Markup Language XAML to describe visual settings and the structure of GUIs, Flex Builder uses Adobe’s MXML. Developers then work on the application-specific code in a 3GL (third-generation language) and connect it with the purely declarative XML code to add interactivity and presentation logic to the user interface, such as adding functionality (e.g. submitting a form) to buttons that have previously been designed. In this way, a seamless collaboration is possible and no dedicated specification document is necessary to describe all properties and behaviors of GUI components – the XML description is the specification. Another advantage resulting from this form of collaboration is the fact that both activities – development and design – are clearly outlined, so each participant can take full advantage of their respective competences.

After outlining the designer – developer collaboration, let’s take a closer look at the technical environments of Adobe’s and Microsoft’s tools. The following table provides an overview of the technologies used for rich internet application (RIA) design and development.

Technical RIA Environments of Adobe and Microsoft at a Glance

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

As outlined above, the next part of this series will show how certain technical aspects, which are important for GUI design and development, are handled by the two tools.