Stress Free and Efficient Designer/Developer Collaboration

Expression Blend™ 3 includes a terrific new prototyping tool, SketchFlow, which is designed to provide quick and simple UI mockups for evaluating different UI alternatives. This new tool skews the balance greatly in favor of the designer first approach.

Expression Blend 3 now includes IntelliSense, a major convenience and productivity booster when hand-editing XAML and .NET code.


Figure 1. The appearance of IntelliSense in Expression Blend is quite difference from its appearance in Visual Studio even though its functionality is comparable.

Expression Blend now also includes a built-in code editor (also with built-in Intellisense support) which permits simple editing of .NET code without the need to switch to Visual Studio.

Since the first article was written, the number of built-in controls now included in Silverlight and/or offered by the Silverlight Toolkit, has significantly increased -- and many of the controls previously included have appreciably matured. This permits designers working with Expression Blend to accomplish more without requiring as much custom coding assistance from developers. Moreover, Silverlight and WPF Behaviors -- pre-built custom actions like drag and drop -- are also now included in Expression Blend giving even more flexibility to designers.

Expression Blend 3 has upgraded both the appearance and functionality of the Visual State Manager.


Figure 2. The Visual State Manager in Expression Blend 3 has undergone an appearance makeover.

Also, the Visual State Manager has been ported to WPF and is available in the WPF Toolkit on CodePlex.com. The most recent release of the WPF Toolkit (June 2009) lists the VSM in the Stable Quality Band (roughly equivalent to Beta). At the present time, certain manual steps are required to use the VSM in a WPF project but at least it is now possible to do so.

As had been promised by Scott Guthrie, Expression Blend 3 is now integrated with Microsoft Team Foundation source control. (Recall that source control is very important to facilitate the concurrent efforts of multiple designers and developers -- particularly when under harsh time and deadline constraints.) Meanwhile, for those who prefer to use Subversion source control, there is an additional option for Mac-based designers to run Expression Blend and Microsoft Visual Studio® on their computers: VirtualBox, an open source virtualization product, originally from Sun Microsystems.

Every application which requires interaction from a user needs both designer skills to be applied to the appearance and usability of the user interface and developer skills to implement the required functionality of that interface. While it is a well known fact that many (if not most) developers are somewhat challenged in the areas of both graphic and user interface design, it's also equally true that, many designers are simply not trained and/or proficient in "coding". For years designers and developers have had to work together developing applications not completely understanding the challenges the other one faces in doing their job—exacerbated by personality and communication issues between these team members. It seems that designers and developers on software development teams have always operated with an unhealthy tension—never good for the final product.

Microsoft has long been aware of this situation and with the introduction of Windows® Presentation Foundation (WPF) has made a real effort to address the difficulties of designer—developer interaction. Prior to WPF (and still true in other programming languages such as Visual C++® and Java), the user interface in an application was created in code by the developer, albeit typically using GUI tools. The situation in the area of web development is somewhat different where the user interface has historically generally been created in HTML, often including the use of ASP.NET® or Flash controls. In many cases (more commonly in the Windows world than in the Web), the output of the designer took the form of one or more Photoshop or Illustrator files which expressed his or her vision. Working from these files, the developer would then create the UI in code.

The heart of the new Microsoft strategy is to use a declarative language called Extensible Application Markup Language or XAML (pronounced zam-mel) to build the user interface both for Windows applications (WPF) and for web applications (Microsoft® Silverlight™). XAML, as an XML derivative (and somewhat similar to HTML), is a much more comfortable structure for designers to work with. By using Microsoft's new Expression Blend—a graphically-based tool for constructing user interfaces—designers can create a user interface and then hand over the XAML—a textual representation of the graphical UI—to the developer to incorporate into the application. Because Expression Blend™ uses the identical project structure as Visual Studio® 2008, and because both applications are able to understand XAML, design work can be completed using Expression Blend and programming functionality can be easily added using Visual Studio. In essence, this coordination between the designer tool (Expression Blend) and the developer tool (Visual Studio) is intended to put both designers and developers on common ground, able to work cooperatively on the same project with the same language.

The purpose of this article is to evaluate how successful this structure is to facilitate efficient designer/developer collaboration, as well as to provide some useful tips for minimizing any remaining difficulties. There is an excellent introduction to different techniques for designer/developer collaboration in the Visual Studio help files.

Designer First vs. Developer First
When working in a WPF/XAML/Expression Blend/Visual Studio environment, a major consideration in determining which party should begin the project (designer or developer) is the degree to which the developer possesses design skills vs. the degree to which the designer is proficient in Expression Blend and is familiar with the basics of programming. The goal, of course, in deciding who should begin the project is to minimize wasted effort by avoiding any actions which are inconsistent with the responsibilities of their collaborator. For example, a designer with minimal Silverlight experience could understandably be perplexed in choosing between a StackPanel, a Grid or a Canvas as the appropriate container for some combination of controls. Similarly, a designer might select a TextBlock instead of a Label if he is unaware that only a Label supports the use of an access key to navigate to an associated TextBox. Conversely a developer might set various control properties via code (in the Load event handler, for example) instead of in the XAML. This might lead to confusing results if the designer later sets any of these same properties in XAML (whether directly, in styles or in animations).

Our principal recommendation is that whichever party has more experience with the above-mentioned technologies should begin the process. This will frequently lead to a Developer First approach principally because, at least as of now and probably for quite a while longer, many more developers will be experienced with Silverlight than designers.

Some situations would require a designer-first approach. For example, when mocking up a project which needs further approval before full commencement, or where it is necessary to create a presentation for buy-in from upper management or for outside investors.

It is interesting to note that in discussions with other designers and developers regarding the relative merits of the designer first approach vs. the developer first approach, we found very little agreement. Accordingly it is probably best to conclude that this decision should be made on a case by case basis, hopefully, after careful consideration of the relevant factors and potential pitfalls.