SketchFlow overview

  • Article

Microsoft Expression Blend includes a new set of features specifically designed to make it easier and faster to create, communicate, and review prototypes for interactive applications and interactive content. This feature set is known as SketchFlow.

SketchFlow prototypes are real Windows Presentation Foundation (WPF) or Microsoft Silverlight applications. You can build a prototype project, run it, and then navigate through the prototype, even if you have only initial sketches of your prototype.

SketchFlow prototypes can be as simple or as complex as necessary for the project on which you are working. 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 (component screens), and navigation between screens (navigation connections).

SketchFlow includes several tools to make your prototype interactive in order to more closely mimic the flow of a production application. For example, with SketchFlow, you can do the following:

  • Begin a prototype with just a site map and a few notes jotted on the application screens, and then continue to refine your prototype as you go along.

  • Either draw user interface (UI) elements, or import them from common drawing programs.

  • Animate your prototype, creating a visual representation of the interaction between the user and the application.

  • Use the full library of standard UI elements and custom controls.

  • Create sample data on the fly, easily build data-driven UI, and add styles to your data.

  • Create interactivity without writing code by using built-in behaviors. Behaviors are extensible, making it easy to add custom behaviors to your prototyping toolbox.

  • Either write code to create custom elements, or use pre-built elements from your development team.

Artboard

SketchFlow gives you two views of your design: the artboard and the SketchFlow Map panel. The artboard gives you a view of individual screens on which you can draw by using any of the drawing tools in Expression Blend, into which you can import images from Adobe Photoshop, and in which you can use the full range of controls available in Expression Blend for WPF and Silverlight. You can also use states to display different states of a particular element, or to represent the interaction with the elements on the screen by using animation.

For more information, see Create content on the artboard.

SketchFlow Map panel

You can easily sketch out the structure of a prototype in the SketchFlow Map panel, which appears at the bottom of the Expression Blend application when working in SketchFlow. It doesn't appear when you are working on other types of Expression Blend projects.

The SketchFlow Map panel is a visual representation of the application flow, beginning with the first screen, and following the user interaction to the final action.

For more information, see Create an application flow.

Screens

Each screen in a prototype is represented by a node in the SketchFlow Map panel. You can quickly and easily create new component or navigation screens. You can have standalone nodes that represent individual screens, and create connections to represent the connections between individual screens.

There are two types of screens in SketchFlow: normal screens (sometimes called navigation screens) and component screens. Normal screens represent a place that you can navigate to. Component screens are reusable blocks of content or functionality that can be reused in multiple navigation screens (for example, a menu or a playlist). You can create component screens directly in the SketchFlow Map panel, or by making content on a screen into a component.

In other words, you can define the navigation and composition of your application directly in the SketchFlow Map panel by creating new component screens, component connections, navigation screens, and navigation connections directly in the SketchFlow Map panel.

Navigation connections represent the navigation between screens. A navigation connection between two screens means that the user of your application will be able to navigate directly from one to the other using the navigation implied by the connections.

With navigation connections, you can quickly create a high-level view of an application flow directly in the SketchFlow Map panel.

For more information, see Create an application flow.

Component connections

As with navigation connections, you create component connections directly in the SketchFlow Map panel. Whereas navigation connections represent the navigation through an application, component connections indicate that the component is displayed on the navigation screen to which it is connected. For example, if your design includes key page elements such as a header, a footer, and a navigation bar, you can draw those directly on the artboard, or create three different component nodes that represent each of those three key elements, and then reuse them throughout your project.

For more information, see Create an application flow.

SketchFlow Animation

By using the SketchFlow Animation panel, you can easily create an animation that represents interactive elements on a screen. SketchFlow animations make it quick and easy to create a simple flipbook-style animation sequence without your having to know how to use the keyframe animation tools that are available in Expression Blend.

For more information, see Add interactivity.

Sample data

Expression Blend makes it easy to prototype data-driven user interfaces without having access to live data. You can use the Data panel to generate meaningful sample data or to import sample data from an XML file. Sample data is available to controls on the artboard at design time. You can extensively customize your sample data details, and you can easily switch between using sample data and using live data at run time.

For more information, see Creating sample data.

SketchFlow styles

When creating prototypes, you may want a hand-sketched look. SketchFlow comes with a set of skins for WPF and Silverlight standard controls that give a hand-sketched look to your application. You can use the basic shapes to create your own sketch-look templates for any custom controls you may have. By using SketchFlow styles in a prototype, you emphasize the application flow over the finished look, allowing reviewers to focus on the interactive design rather than the graphic design of the application. Doing this avoids the misplaced expectations and misleading feedback that can result from a prototype that looks too polished early in the design phase.

SketchFlow Player

At any time, you can build, run, and then view your project in the SketchFlow Player, a runtime environment that plays the application flow as it was designed.

SketchFlow makes this possible by running the prototype in a stand-alone player that lets you click through the prototype, change states within your UI, and run animations. The SketchFlow Player also makes it easy to distribute your prototype to reviewers and collect feedback. You can draw and add comments directly on the prototype. Feedback collected in the SketchFlow Player can be viewed in Expression Blend, where it can then be evaluated and implemented by the designer.

For more information, see Preview a prototype.

Annotations and feedback

Annotations are a new feature in Expression Blend that can also be used in SketchFlow projects. By using the Annotations feature, you can leave notes for yourself and others, or track feedback from other team members while working in Design view. Annotations can be hidden for easier viewing of the current project, and then made visible when you want to review them.

Reviewers can also leave feedback in the SketchFlow Player by using the Feedback panel. Feedback is saved as a .feedback file, which can then be sent to the designer as a separate file.

For more information on annotations, see Annotate a document.

For more information on feedback, see Leave feedback for a prototype.

Converting your prototype

You can create a SketchFlow prototype from a Microsoft Office PowerPoint presentation. You can also import Adobe Photoshop (.psd) and Adobe Illustrator (.ai) images into a SketchFlow prototype. At any time, you can create a Microsoft Word document directly from your prototype.

SketchFlow projects are standard Microsoft Visual Studio solutions and, as such, can be edited in Visual Studio. Once a prototype has been approved, a prototype project can be turned into a production project by removing the SketchFlow data from the prototype file. Once the SketchFlow data has been removed, the project functions in the same way as any other Expression Blend project.

For more information, see Convert a prototype.

Conclusion

In summary, SketchFlow makes it easy to sketch out a conceptual application. To begin, you can just create a series of screens and then begin to draw. As your idea progresses, you can add interactive elements that make your prototype as close to the finished product as you need it to be to communicate the design idea you want to convey. Reviewers can use the SketchFlow Player to view the application flow, and then leave feedback directly in the project as annotations. Once the feedback has been incorporated and the prototype is complete, the prototype project can be handed off to a developer for conversion into a final Expression Blend project.