September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Rapid UI Prototyping with Microsoft Expression Blend 3

  • December 21, 2009
  • By Vlad Kofman
  • Send Email »
  • More Articles »

Prototyping for .NET Technology - Microsoft Expression Blend 3

If your project is based on .NET technologies, such as desktop applications based on Windows Presentation Foundation (WPF) 3.5 with Service Pack 1 (SP1), ClickOnce deployment apps or web applications based on Silverlight 3, you can benefit from prototypes developed with Microsoft Expression Blend 3. This tool is part of the Microsoft Expression Studio, which also includes SketchFlow 3 used for project workflow designs and Expression Web 3 used for web page creation, (similar to Adobe Dreamweaver) and several other tools. Expression Blend 3 provides full support for application UI prototyping, interactivity through behaviors, Silverlight 3 functionality, and on-the-fly data generation for interactive prototyping. Using Expression Blend 3, designers can make applications that can then be opened in Visual Studio 2008 and worked on by the development team. Under the hood, the UI screens are defined in XAML, which Visual Studio can understand.

RGB Grid
Click here for larger image

Figure 1: Choosing the Type of project to work with in the Microsoft Expression Blend 3

This tool allows designers to import artwork and convert it into interactive components in the application, for instance a custom looking textbox or slider. The tool also supports import Adobe Photoshop and Adobe Illustrator, while retaining layers, shapes and text elements. The interactivity can be added by using "behaviors', which are added to on screen objects without writing any code. All of the features of the interactive prototype will be preserved when the project is opened for development in the MS Visual Studio.

The tool has very robust code editing features as well, for designers who are inclined to look under the hood, or for developers who want to make changes to the prototype inside of the Blend 3. The editor supports XAML, C#, and Visual Basic code with IntelliSense (syntax completion), auto-formatting, brace matching, function summary and event handler creation. Similar to Adobe Dreamweaver, the Blend 3 code editor can be opened in Split view, and will reflect changes in real-time to the screen and code.

Choosing the to View Split Pane or XAML in Microsoft Expression Blend 3
Click here for larger image

Choosing the to View Split Pane or XAML in Microsoft Expression Blend 3

Code Completion in Microsoft Expression Blend 3
Click here for larger image

Code Completion in Microsoft Expression Blend 3

RGB Grid
Click here for larger image

Control widget library in Microsoft Expression Blend 3

The tool comes with an extensive library of visual controls (or widgets). After the control, such as panel or grid are placed on the screen, designers can change the properties. For instance make a gradient color as a background color. These properties will also be preserved when the prototype is moved into the development environment. Blend 3 also comes with an array of different effects and behaviors which can be applied to the controls for dynamic prototypes. Under the hood these effects and behaviors will be translated/defined in XAML and should be preserved when the project is opened in the Visual Studio.

Adding a third party component to Microsoft Expression Blend

In addition to the standard library of controls, such as panels, grids, tabs and buttons, Expression Blend allows developers and designers to import third party controls. The tool can also create new controls and convert or "skin" existing controls. For instance designers can import an image of a button and then make a real button out of that image.

So let's look at how a new control is imported. In the example, I'll import a popular Dev Express library of grid controls for C# and Silverlight applications.

First you need to create a new project, and then add reference DLLs to it. This can be done by right clicking on the project References. Next, navigate and select Dev Express DLLs (Dev Express should be installed separately on the system)

Adding third-party Control widget to the Microsoft Expression Blend 3
Click here for larger image

Adding third-party Control widget to the Microsoft Expression Blend 3
Navigate to the folder where Dev Express is installed and select all DLLs.

Adding third-party Control widget to the Microsoft Expression Blend 3
Click here for larger image

Adding third-party Control widget to the Microsoft Expression Blend 3

After the DLLs are added, you should put them under Project References and now you can also search for the controllers in the Controls library and use it in your projects.

Adding Dev Express Controls in Microsoft Expression Blend 3
Click here for larger image

Adding Dev Express Controls in Microsoft Expression Blend 3

Designing .NET Applications with Microsoft Expression Blend 3 and SketchFlow

In addition to the individual screen design, Blend 3 comes with functionality to design project screen flows. It is possible to create relationships between screens and even create component screens shared by several connected screens. This built-in functionality is called SketchFlow. The SketchFlow prototypes are part of the Blend 3 project and can be as simple or as complex as necessary. For example, a prototype can be a rough sketch with notes, a linear sequence of slides with a few notes that demonstrates a workflow drawn on the artboard, or a complex graph, outlined in the SketchFlow Map panel, that includes reusable elements on a single screen, and navigation between screens (navigation connections). SketchFlow/Blend 3 prototypes are real Windows Presentation Foundation (WPF) or Microsoft Silverlight applications. Designers can build a prototype project, run it, and then navigate through the prototype, even if the skeleton screens are not fully done.

After the flow prototype is done the entire project can be exported to Visual Studio to be finished by the development team.

SketchFlow Map panel in Blend 3
Click here for larger image

SketchFlow Map panel in Blend 3

Appendix

Microsoft SketchFlow, bundled with Microsoft Expression Blend 3, can model the navigation and composition of an application. It can also collect feedback by using annotations, import Microsoft Office PowerPoint files, and images created in Adobe Photoshop. You can:

  • create storyboards and trigger their playback
  • create working interactive controls
  • use data binding to automatically display data or modify the state of your user interface
  • interactively create, apply and edit data templates

Project workflow mapping with Serena Prototype Composer

Conclusion

In this article I have discussed prototyping tools for UI and project workflow. All of these tools are incredibly useful in presenting, defining and finalizing ideas for the software projects. But please note that if the users are only looking for mocking up interactive UI without the ability to reuse the prototype in the development, then prototyping tools like iRise or Axure are a great fit. They are technology independent, which means they can mockup any application. If however there is a need to sketch out a conceptual application and then reuse it in the development environment, then depending on the language/technology a different tool should be used. For Adobe Flex its Catalyst, for .NET its Blend 3 and for Web applications it can be Dreamweaver or other HTML editing tools.

It will be interesting to see how these tools will evolve further and what other technologies these tools will support.

Resources

Software Prototyping

http://en.wikipedia.org/wiki/Software_prototyping
http://c2.com/cgi/wiki?GuiPrototypingTools
http://weblogs.asp.net/fmarguerie/archive/2009/02/15/gui-design-and-prototyping-tools.aspx

IRise
Axure
Adobe Flex Catalyst
Serena Prototype Composer
Microsoft Expression Studio
Microsoft Expression Blend 3
OmniGraffle
Stencils for OmniGraffle





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel