Making Designer/Developer Collaboration a Reality

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.