Getting started with SketchFlow in Blend

  • Article

Important

SketchFlow is available in Visual Studio Ultimate or Visual Studio Premium when you install Blend for Visual Studio.

SketchFlow is a set of features specifically designed to make it easier and faster to create, communicate, and review prototypes for interactive applications and interactive content.

SketchFlow prototypes are real 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.

Important

SketchFlow prototypes are only available for Windows Presentation Foundation (WPF) and Microsoft Silverlight projects.

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 Blend, into which you can import images from Adobe Photoshop, and in which you can use the full range of controls available in 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 in Blend SketchFlow.

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 Blend application when working in SketchFlow. It doesn't appear when you are working on other types of 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 in Blend SketchFlow.

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 in Blend SketchFlow.

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 in Blend SketchFlow.

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 Blend.

For more information, see Add interactivity in Blend SketchFlow.

Sample data

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 [TITLE USED IN QSG].

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 Blend, where it can then be evaluated and implemented by the designer.

For more information, see Preview a prototype in Blend SketchFlow.

Annotations and feedback

Annotations are a feature in 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 about annotations, see Annotating project files.

For more information about feedback, see Leave feedback for a prototype in Blend SketchFlow.

Publish to SharePoint

Once you have created an Blend SketchFlow project, you can publish your project to a Microsoft SharePoint document library. The SketchFlow project will be available to anyone who has permission to view content on the SharePoint site.

Reviewers can share their feedback with other stakeholders by publishing their feedback to the SharePoint site.

For more information about publishing to SharePoint, see Publish to SharePoint.

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 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. 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 Blend project.