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.


Sketch styles 


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.


Application Flow


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.


SketchFlow Player


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.



Comments (43)

  1. silverlight.sam says:

    soma, excellent stuff! this is very useful for prototyping and producing quick demos. silverlight and blend are awesome technologies and have great potential.

    also, just read about silverlight being adopted by the IPL for its live games. awesome!

  2. Somasegar says:

    HI silverlight.sam,

    The IPL games have phenomenal reach in certain parts of the world.  It is exciting to see them use Silverlight for their games this year.  


  3. Thank you for submitting this cool story – Trackback from DotNetShoutout

  4. says:

    Hopefully SketchFlow will be release very soon so we can begin using.  Very Neat.

    Will we be able to open and use existing projects with first release of SketchFlow?  Thanks

  5. Según leo esta mañana en el blog de Somasegar , existe un nuevo conjunto de herramientas muy chulo para

  6. phuff says:

    Shaggygi: SketchFlow 3 (the first version) will not be able to directly convert pre-existing WPF or Silverlight projects into SketchFlow projects. It is possible to create a new SketchFlow project and then reuse controls from an existing control library project by referencing that control library within the SketchFlow project. If you add the controls you want to use directly into the SketchFlow project, there is also a function to convert a user control into a SketchFlow node in the graph. We will be considering how to support more direct types of conversion in future releases.

    Polita Paulus

    Developer Division


  7. Rachida Dukes says:

    How long do we have to wait for it?


  8. I really like the font used in the SketchFlow mockup, what is that?

  9. phuff says:

    Johan, the font is called Buxton Sketch, and will ship as part of SketchFlow. It has been designed specifically for SketchFlow. Buxton Sketch is used as the default font for a set of styles for the WPF and SL standard controls that can be used to give a prototype a “sketchy” look. The styles are seen in the screenshots, and will ship with SketchFlow as well.

    Polita Paulus

    Developer Division


  10. Somasegar says:

    Hi Rachida,

    We plan to deliver this later in this calendar year.


  11. shaggygi says:

    Thanks for the replies.  Will the Silverlight Toolkit Controls also have the "sketchy" look, as well?  I could imagine some cool UI to present to clients with the Chart control.  Thanks again.  Can’t wait to use.

  12. phuff says:

    Shaggygi, the sketch controls won’t ship in the Silverlight Toolkit in the next major release cycle, but it’s something the Blend and Toolkit teams are both hoping to ship in the Toolkit in the future.

    Polita Paulus

    Developer Division

  13. How many times have you sat down and drawn out your application design literally on a napkin? Those early

  14. Publicación del inglés original : sábado 25 de abril de 2009, a las 23:42 PST por Somasegar Recientemente,

  15. shaggygi says:


    Could you be more specific on calendar year release?  Does this mean Blend Beta 1 or Blend 3 RTM by the end of this year?  Thanks again.

  16. Somasegar says:

    Hi Shaggygi,

    It will be available at the same time as Blend 3 RTM later this calendar year.


  17. BrianLei says:


  18. nchen says:




  19. Eric's Blog says:

    According to Somasegar’s blog, VS2010 and .NET 4 is available to download for MSDN subscribers . Downloading

  20. dfgdsfasdf says:

    Nice and awesome article. Looking forward to indepth tutorial

  21. dfgdsfasdf says:

    Nice and awesome article. Looking forward to indepth tutorial

  22. Scott Coleman says:

    I really like the Application Flow Panel. Does anybody know if there are third party controls that have most of the same functionality implemented? I’d like to implement a similar feature in a WPF application that allows a user to connect objects with a similar UI structure.

  23. phuff says:

    Scott, the Expression Blend team built their Application Flow Panel controls themselves and aren’t distributing them, but I’m aware of a few commercial graph editor frameworks for WPF.  This is by no means a complete list or an endorsement of any of the frameworks on the list.

    • yWorks,

    • Mindscape,

    • MindFusion,

    • Syncfusion,

    • Orbifold has an open source version,

    If someone has another WPF graph editor framework, go ahead and post; we’d love to know about it.

    Polita Paulus

    Developer Division


  24. Scott Coleman says:

    Thank you Polita! I appreciate the response! I found some of the same ones, but I like the ones you provided that I hadn’t seen before! I too may have to develop my own control, as I really like the feature of the Application Flow Panel where each ‘Page’ node you click on drops down a small panel with additional options.

    Thanks again!

  25. Support for ASP.NET applications?

  26. phuff says:

    Anthony, SketchFlow targets Silverlight and WPF.  However, you can use Silverlight (built with SketchFlow) inside your ASP.NET application.

    Polita Paulus

    Developer Devision


  27. says:

    I probably should just wait and play around with SketchFlow when it is released in the next few weeks, but I would like to know if a particular scenario will be included in version 1.

    Let’s say I have a WPF or SL app that will flow from UI to UI that collects data to be processed at the end of selections.  I would like to have multiple UIs that navigate to several UIs depending on what selection the user selects.  Each UI would append/store the data somewhere and when they get to the last UI, it would process the gathered data from all UIs.

    It seems like this feature would be included as the type of examples I’ve seen in screenshots/videos would require this.  The Snowboard website is a good example using the Cart UI.

    Will there be examples/walkthroughs on how to do this type of scenario?

    Thanks in advance.

  28. There are various ways how you could handle scenarios like the one you describe. You could use a data form to collect information. You could also write a set of behaviors that can store or append state and data to some backend object.

    We are not shipping with such a set of behaviors, but it is quite easy to do. I was planning to post a sample for doing this on my blog at some point.



  29. LeRoy says:

    When is Sketchtool going to be released to preview?

  30. Sujay Ghosh says:

    How is Sketchflow different from Mindmaps ; or is Sketchflow a mindmapping tool itself.

  31. Pratish Pillay says:

    Nice post.

    I am using Expression Blend for prototyping and must say it is a nice tool.

    My question – is the SketchFlow player available separately or as an integral part of Expression Blend? We have purchased Expression Blend licenses based on the # of developers here in the team.

    But how do the end-users use the SketchFlow Player to review the prototype and provide feedback? Are we saying I need to purchase Expression Blend for all my users if I only need the SketchFlow player ability?


  32. Jon Harris says:

    Hi Pratish

    The SketchFlow player is automatically created as part of the build process when you run your project in Blend.

    So for example if you’re building a Silverlight prototype Blend will build the project and wrap it with a Silverlight SketchFlow player. For someone to view or review this Prototype a client or team member will only need to have access to a Silverlight enabled browser and they will not need to have a copy of Blend installed.

    A good scenario here is if you need to show something to an external client you can simply copy the SketchFlow project to a webserver and send the URL to your client (password protecting the URL if appropriate). The client can then use the URL to view and test the prototype and then add their feedback. Once they’ve completed their feedback they can easily export it and email it back to your team where it can be viewed directly on the design surface in Blend.

    If you’re building a WPF prototype then Blend will create a WPF SketchFlow player. Again this can be packaged up and sent to your client for review. All your client needs to view this is a WPF enabled PC – again they don’t need to have Blend installed.

    I hope this helps.

    Kind regards, Jon Harris

    Product Manager Expression Blend

  33. starter says:

    Hello, I’m using sketchflow and encountered a problem.  I created a project in sketchflow.  The font I’m using is Buxton Sketch.  It looks alright in my designer, but once i ran it on the player, all my Buxton Sketch fonts were turned into some default Times New Roman (or something like that) font.  How can I change that?  thanks for your help.

  34. Krishnan Iyer says:

    I see the exact same problem as the Starter above.. and have SP1 installed on ExpressionsStudio3..

    I’m using sketchflow and encountered a problem.  I created a project in sketchflow.  The font I’m using is Buxton Sketch.  It looks alright in my designer, but once i ran it on the player, all my Buxton Sketch fonts were turned into some default Times New Roman (or something like that) font.  How can I change that?  thanks for your help.

  35. Tony says:

    I have the same issue as the previous two posters, losing the sketch font when displaying in a browser.  Any way around it?

  36. Bob Pappas says:


    Regarding the issues of Buxton Sketch, please contact me via email: bpappas (at) microsoft (dot) com.


    Hello, I’m using sketchflow and encountered a problem.  I created a project in sketchflow.  The font I’m using is Buxton Sketch.  It looks alright in my designer, but once i ran it on the player, all my Buxton Sketch fonts were turned into some default Times New Roman (or something like that) font.  How can I change that?  thanks for your help.

  37. Dave Schinkel says:

    This is probably the 2nd best tool next to Visual Studio that I’ve ever seen in terms of quality come out of Microsoft period and that’s saying a lot.  It’s outstanding.  

    I no longer see any point in wasting time coding out some static or even light data bound HTML pages even if they are light just to get a working concept/prototype to show… when we now have Sketch Flow.  It’s just as realistic and saves the developer and the business so much time with prototyping and brainstorming ideas for new applications before the REAL development begins.

    For those of you who have not tried it and just think this is just another "Graphic design tool" think again.  Software Engineers should be using this to flow out their designs and screens and discussing that with the business based on the requirements you are given.

  38. Jane says:

    Hello Somasegar,

    I've been working with SketchFlow, It's a very cool tool to work with. Even though I'm having a problem when I try to work with the feedback panel. My users give me their comments using the tools provided for it, but when I try to run the project again in my machine to work with those suggestions, I just can't see them.

    However if I do some changes in my machine, close the project and open it again the feedback comments are there. Am I doing something wrong? Maybe should I save the feedback comments in other file and import them later?

    Thanks a lot for your help.

  39. Kelly says:

    Hi Jane,

    I'd love to have more information about the problem you're seeing to see if I can help.  Could you possibly email me directly?  kellycan (at) microsoft (dot) com.  Just give me a little information about the version of Blend you're using, the project type, and how you're importing the feedback.  If you could attach your project, that would be even better.

    Thanks so much,


  40. gold_partner says:

    It would be great if you made SketchFlow available to Microsoft Gold Partners. We get Expression 4 Premium but not Ultimate.

  41. Preethi says:

    I was wondering if deep zoom functionality can be seen in sketchflow? I know I can drag and drop multiscaleimage control, but when I set its source to dzc_output.xml (which was generated using deep zoom composer), I don't see it working. I am trying to prototype for a gallery of images (similar to but not the same as