Prototyping with SketchFlow

Recently, we introduced a new set of tools that add on to Expression Blend 3 that are designed to address the early stages of design. 

With SketchFlow, you can

a)     sketch out ideas

b)    turn those ideas into working prototypes that are as rough or as real as you want them to be

c)     present those interactive user experiences for review and comment in the SketchFlow player 

SketchFlow prototypes are quick and informal, enabling designers to easily explore a variety of ideas.  You can run and explore prototypes from the first rough sketch on. When you are ready to develop further, you can convert a prototype into a real application in Expression Blend or Visual Studio.

Sketching ideas

When you start working on a new prototype project for either WPF or Silverlight, you’ll see the panels, control toolbox, and artboard that you are likely accustomed to in Expression Blend.  You can use the existing set of controls found in Expression Blend 3 or your own custom controls. 

SketchFlow also provides a set of “sketch-styled” controls that provide your prototype with a consistent sketch look so focus can remain on the concepts of the user experience without being distracted by the details of the visuals too early. The sketch-styled controls are fully functional and can be reverted to the high fidelity controls at any moment.  Below is a flavor of how the sketch-styled controls appear.

Mapping flow and navigation

While the artboard provides a view on an individual screen, the Application Flow panel allows you to map out the flow of your application, and then quickly make changes to that flow without reworking the design.

In the application below, solid blue arrows represent stops along the way in the user experience, while dashed green arrows represent content that can be shared or reused between screens, such as a set of common site navigation buttons that appear on multiple pages.

Gathering feedback

SketchFlow provides a way to showcase your prototype to others using the SketchFlow Player. The SketchFlow Player allows you to explore the prototype from the first moment on, even while it consists of nothing but a few rough sketches. The player lets you navigate your prototype, run animations that illustrate how your prototype might work, or switch into different states of your UI, all without wiring up actual UI elements. This lowers the cost of evaluating ideas in early stages before much expense has been incurred.

But showing a prototype to others is only part of the review process, so the SketchFlow Player provides tools to collect feedback from reviewers.  Reviewers can provide feedback either as text, like the comments in the Feedback tab in the screenshot below, or as ink, like the red arrow in the screenshot below.  Then you can incorporate this feedback into the prototype using the Feedback panel in Expression Blend, allowing you to iterate on your design using suggestions from your team.

Adding interactivity and data

SketchFlow leverages features of Expression Blend 3 to let you make your prototypes come alive. Add interactivity without code using Behaviors, prototype your data-driven UI with sample data, and import content from Adobe Photoshop and Illustrator. 

For more information, watch a video on SketchFlow or read my previous post on the Expression Blend 3 Preview.