SketchFlow
By far the most significant new development is the new SketchFlow feature, now built into Expression Blend™ 3 (included with Expression Studio 3). SketchFlow is a tool for rapid prototyping of alternative user interfaces. Not only does SketchFlow create quick and simple mock ups of different UI screens, but it is also capable of linking them together to allow clickable navigation from screen to screen in order to model usability flow in addition to static designs.


Figure A. This screenshot illustrates a sample application user flow design.

In addition to simple page to page navigation, Sketchflow supports a number of built-in behaviors such as DragDropItem and PlaySoundAction.

SketchFlow uses a special style, like Sketch or Wireframe styles (illustrated in Figure b), which emphasizes the prototype nature of the illustration -- thereby focusing attention on the existence or absence of key elements and not on issues of color, font, micro-positioning, etc.


Figure B. This screenshot illustrates a simple mockup of a UI screen.

Unlike yellow pad or even Adobe Illustrator mock ups, Sketchflow contains built in animation support. While not as fully functional as WPF or Silverlight animations, the Sketchflow version can nevertheless be very useful for demonstrating user interaction movements.

Sketchflow comes with a special player that enables anyone to view Sketchflow designs even without an installed copy of Expression Blend. This player even supports annotations (referred to as "feedback"), which permits each participant in the design review process to conveniently communicate their comments with other participants.

As an added bonus, once a SketchFlow generated UI design has been approved, the tool can instantly generate a requirements document.

It is difficult to appreciate the full potential of SketchFlow without seeing a demonstration of its use. Fortunately, there are several good videos that provide a helpful overview in just a few minutes.

Importing Graphic Assets into a Project
Expression Blend, the designer tool for building rich user interfaces, is now capable of directly importing a wide selection of Adobe Illustrator and Adobe Photoshop files without the need for any external conversion utility. The following screenshot shows how the Ruffmouse file was imported directly into Expression Blend with complete fidelity.


Figure C. Compare this to the earlier screenshots and it is evident that this rendition by the Expression Blend Adobe Illustrator importer is fully equivalent to the original file.

I also tested several other files from the Adobe Illustrator sample file collection, and while some imported perfectly, others had discrepancies and one exceeded the size limitations of the Expression Blend import feature. Almost by definition, however, these sample files represent a collection of above average complexity and for that reason are not fully representative of typical vector graphics imports. In summary, in most instances, this new feature is likely to be a useful convenience--although in some cases it may be necessary to fall back on the existing alternatives in order to achieve a better result.

In addition to Adobe Illustrator files, Expression Blend's importer is also capable of bringing in Adobe Photoshop files through a process which converts the original file into a collection of .PNG files. A major advantage of this new process is that each PNG file corresponds to a layer in the original Photoshop document and developers can hide or display different layers as they see fit. In addition, editable text and vector components continue to be editable after import.

Historically, Microsoft's strength has been in the area of developer support, as illustrated by its flagship product Microsoft® Visual Studio® 2008. Even evangelists for Microsoft's rival, Adobe, speak highly of Microsoft's record supporting developers. And of course, the impressive size of the Microsoft® .NET developer community itself is proof of this premise.

By contrast Adobe's strength has historically been in the field of designers with its industry-leading products, Photoshop and Illustrator. Adobe further strengthened its position in this area with its 2005 acquisition of Macromedia and designer-oriented products Flash and Fireworks.

These facts have led to the rather interesting phenomenon that these two companies appear like inverse mirror images of each other with Microsoft being strong with developers and much weaker with designers and Adobe being strong with designers and much weaker with developers. Ironically, both companies are now pursuing a strategy to attract followers from the other company's camp. Although coming at this from different starting points, both companies agree on the importance of improving the designer/developer workflow in achieving this goal. Recently, Microsoft has made some significant further steps along this road.

Contributions of the Expression Studio to the Designer Developer Workflow
Over the past several years Microsoft has been working hard to become more designer oriented by offering products that are tightly integrated to its existing developer products. The primary fruits of this effort are the various products which make up Expression® Studio currently in its second edition.
(Editor's note: The third edition was released in July 2009.)

A major goal of Expression Studio was to facilitate designer/developer collaboration to reduce overall project time to market while simultaneously achieving a better final result. The key element of this strategy is the new UI tool Expression Blend™ which designers can use to create rich user interfaces for both Microsoft® Windows® Presentation Foundation (WPF) and Microsoft Silverlight™ applications. What makes this possible is that the underlying language of Expression Blend is XAML, a variant of human readable yet highly toolable XML. Designers can therefore build the actual user interface using either a WYSIWYG designer or in code (the XAML). When done, this XAML is immediately usable without modification (not counting, of course, subsequent design improvements) by a developer who can open up the same project in Visual Studio 2008.

By contrast, if a designer creates a mockup of the user interface with Photoshop (as is often the case for those not targeting WPF and/or Silverlight), the developer needed to convert this vision into his best approximation using Visual C#® (or Visual Basic® .NET). Of course, not only did this typically require a significant amount of time and effort, but also the user interface (UI) actually produced by the developer was only a reasonably close approximation of the designer's original vision. This oftentimes resulted in a final product that is not a high-fidelity reproduction of the original design.

Like any complex application, Expression Blend has a learning curve but any competent designer should be able to master it without too much difficulty. Microsoft has intentionally made the Expression Blend UI similar to the UI with which Adobe-based designers are already familiar. For example, many of the Expression Blend (and other Expression products as well) keyboard shortcuts match their Adobe (and industry standard) equivalents. Microsoft also has an extensive collection of free training materials including Quick Start Guides and training videos. Often for designers new to Expression Blend, it is easiest to begin by using the visual design surface and then studying the XAML output before graduating to hand coding the XAML.

Importing Graphic Assets into a Project
Support for designers in the Expression Studio does not end with Expression Blend, however. Very few web applications consist of nothing more than a combination of text and some form controls. To the contrary, almost every web application will require copious quantities of images, some vector and some bitmap. While the Expression Studio does include a vector graphics application (Expression Design) which a designer can use to create two-dimensional graphics from scratch, Photoshop and Illustrator still hold a commanding percentage of the image creation market share. Acknowledging the likely ongoing popularity of Photoshop and Illustrator, Microsoft has created a pathway to facilitate the use of Photoshop and Illustrator graphics in Silverlight and WPF.

In addition to Microsoft efforts in this respect, there is an interesting community supported tool for converting Illustrator vector art into XAML for use in a Silverlight or WPF project namely a XAML exporter created by Mike Swanson. This exporter is a standard plugin for Illustrator and can be obtained as a free download from Mike Swanson's website. I have used this exporter on numerous occasions in the past but to test it out for purposes of this article I selected one of the sample graphics that comes with Illustrator (Ruffmouse.ai). The following screenshots show what this image looked like in Illustrator, in Expression Blend after the conversion to XAML and in a running Silverlight application.

Figure 1. Ruffmouse Screenshot using Adobe Illustrator.

Figure 2. Ruffmouse Screenshot using Expression Blend after Using the Mike Swanson XAML Exporter.

The Microsoft supported way to convert an Illustrator .AI file into a XAML file is to open the file directly in Expression Design and then export it to XAML. Unfortunately, Expression Design could not handle the background of the Ruffmouse image, so care must be used when following this method.

Figure 3. Ruffmouse Screenshot using a Running Silverlight Application (Internet Explorer®).

Figure 4. Screenshot of Ruffmouse Image Opened in Expression Design.

Problems of this type are obviously image specific, as the Bedlam Ballroom Illustrator sample file converted nicely in Expression Design, as the following two screenshots show.

Figure 5. Screenshot of Bedlam Ballroom Image using Adobe Illustrator.

Figure 6. Screenshot of Bedlam Ballroom Image Opened in Expression Design.

Also, problems of this type would not occur for vector images created directly in Expression Design and then exported to XAML.

Once the image has been included into the project UI, a developer can add functionality through event handlers as this simple example illustrates. Animated Ruffmouse.

Expression Support for Bitmap Images
Another feature improvement in the Expression Studio which is intended to facilitate designers who choose to continue using Adobe products is the ability of Expression Web to directly convert .PSD files into .GIF, .JPG or .PNG formats. The following dialog box illustrates how EW2 permits a designer to choose which layers from the .PSD file to include in the new image file as well as various other optimizations.

Figure 7. Expression Web 2 Has a Built-in Capability to Convert .PSD Files into .GIF, .JPG or .PNG Files.

Even more interesting is that if the original .PSD file is modified, it is possible to pick up these changes simply by right clicking on the image and selecting the "Update from Source" entry on the context menu in Expression Web.

Figure 8. Screenshot Illustrating How to Update an Image that Has Been Modified in Photoshop.

Silverlight Video Support Via Expression Encoder
One of the most important components of a rich Internet application is video. Regardless of the source of the video, Expression Encoder combines simple editing capability with extensive encoding and deployment capabilities. For hosting these videos Microsoft is offering a free (or in some cases low cost) home at Silverlight Streaming. In addition to optimizing videos for use with Silverlight applications, Expression Encoder includes the integrated capability to upload these videos directly to your Silverlight Streaming account. (Editor's note: For more on Silverlight Streaming, see this article.)

Thus once the designer has created (or selected) the video components for a project, the encoding and publishing tasks for Expression Encoder are simple enough that they can be performed by either a designer or a developer. However, while the selection of which player to use is typically within the purview of a designer, the choice of which encoding profile to use, involving a tradeoff between video quality and performance, is probably best decided jointly between the designer and the developer. If after publishing, one of the videos needs to be modified, Expression Encoder's publishing capability provides a simple and convenient mechanism for replacing the earlier hosted version of the video with the modified version.

On publication of a video, Expression Encoder provides an HTML snippet (also available directly from Silverlight Streaming) which can be directly pasted into a web page to access the video (see figure 9).

Figure 9. Expression Encoder Provides You with the HTML Snippet Necessary to Call Your Video from a Web Page.

Thus, a simple mechanism exists to incorporate video into a Silverlight project regardless of how the original video was produced. Moreover, the method used for inclusion is very unlikely to cause problems for either designers or developers working on the project.

New Paradigm Requirements
So what are the new requirements for developers and designers to follow in order to benefit from the new structure that Microsoft has created for the designer/developer workflow?

1. Designers must learn to use Expression Blend to design Silverlight (and WPF) user interfaces. It is perfectly acceptable for designers to continue to use Photoshop and Illustrator to create bitmap and vector images or Premiere for video creation and editing, but UI layout and interactivity would need to be designed in Expression Blend so that the designer's work product is immediately usable by the developer responsible for adding application functionality to this design.
2. As a first corollary to becoming proficient in Expression Blend, designers definitely need to learn XAML. This may seem like an imposing task but it really isn't harder than working with HTML (or CSS for that matter). The reward for mastering XAML is much higher productivity for designers in building the UI for the initial hand off to their developer partners.
3. Designers and developers need to be in continuous contact regarding progress on the project. Before starting the project they must agree regarding their respective scopes of responsibility. Furthermore, as the project progresses they must constantly review each other's efforts to see how those efforts fit with their own portion of the project.
4. Because of the shorter production cycle that this new designer/developer workflow permits and the need for multiple people to work on a project simultaneously, both designers and developers must learn to use an effective source control system. For this purpose both Microsoft-based and open source options are available.
5. Developers have to become at least minimally proficient using Expression Blend. As of this point in time, the visual designer in Visual Studio 2008 is read-only for Silverlight applications (although fully functional for WPF). Obviously at some future date, this will be corrected, but in the meantime, the only usable visual design surface is the one in Expression Blend. Moreover, for creating any complex animation, the only suitable tool is Expression Blend.
6. As a corollary to learning to use Expression Blend, developers also will have to become fluent in XAML. All Silverlight (and WPF) user interfaces should be constructed with XAML and it would be unrealistic to believe that underlying functionality could be bolted on without a thorough understanding of the XAML to which it needs to connect. Also, to the extent that a developer does make any changes to the project UI, it is critical that those changes be implemented in XAML rather than in C#. This is necessary in order to allow the designer to continue to be directly in contact with the UI without having to work through the developer on this aspect.
7. Both designers and developers must accept a state of mind shift which accepts their relationship as more of a project start to finish collaboration than a designer hand off of a vision to a developer for subsequent implementation. There are many benefits which derive from this new relationship including, for example, the flexibility for the design to undergo continuous tweaking throughout the life of the project without a serious disruption of the developer's implementation. This benefit alone almost certainly will result in a better final result for the project without any concomitant delay in completion or substantial increase in costs.

More Resources

* This article was commissioned by and prepared for Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.