Prototyping with SketchFlow

  • Article

Great products begin with great designs. SketchFlow is a new feature set in Microsoft Expression Blend designed to support the prototyping process, starting with conceptual design and continuing all the way through to the production of the finished application.

SketchFlow makes it easier to do the following:

  • Quickly experiment with dynamic user experiences.

  • Communicate your design intent to stakeholders.

  • Gather, evaluate, and implement stakeholder feedback.

For an overview of the prototyping tools available in SketchFlow, see SketchFlow overview.

Create an application flow

With SketchFlow, a designer can quickly and easily create an interactive map that represents the flow of an application. The map (a prototype project) consists of any number of screens: virtual whiteboards on which you can scribble, draw, write, or insert any of the existing user interface (UI) modeling features of Expression Blend to build a UI. You can also use screens to create reusable elements such as logos, backgrounds, or UI templates, and then include those screens as elements in other screens.

At any time, you can build a prototype project, run it, and then navigate through it, even if you have only initial sketches of your prototype.

For more information, see Create an application flow.

Create content

Unlike with many other prototyping solutions that work with pictures of user interface (UI) elements, with SketchFlow, you can use actual UI controls and dynamic layout containers to create your prototype UI. You can create real interactivity, including navigation and state changes, without having to write code, and you can use rich Expression Blend features such as data binding, sample data, and behaviors. Your prototype can be as real as you want it to be to communicate your ideas.

For more information, see Create content on the artboard.

Add interactivity

You can further refine your prototype by adding interactivity that helps communicate your design intent to stakeholders. You can do the following:

  • Use animation to simulate user interaction.

  • Use visual states to represent multiple states of a single element.

  • Use behaviors to simulate events and actions, so that UI elements in the prototype mimic the functionality of a final application.

  • Bind to sample data to create and demonstrate data-driven UIs.

For more information, see Add interactivity.

Gather feedback

When you create a prototype project, you can build and run the project, and then view the project in the SketchFlow player at any time. When you are ready to share your prototype, you can package the project, which includes the SketchFlow Player, and then share the project with stakeholders, who don't have to have Expression Blend installed to review your project. When viewing the project in the SketchFlow Player, stakeholders can leave feedback directly in the prototype, and then share the feedback files with the designer, making it easier for the designer to review and implement the feedback while working in Expression Blend.

For more information, see Leave feedback for a prototype.

Convert into a production project

SketchFlow prototypes are not just drawings, but are fully functioning prototypes from the first screen on. Your prototype is a real WPF or Silverlight application. With a few minor modifications, you can convert your prototype into a production project, and continue to refine your prototype into a final application.

For more information, see Convert a prototype.