Share via

Prototyping with SketchFlow

  • Article

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.

Namaste!

Comments

  • Anonymous
    April 25, 2009
    PingBack from http://www.anith.com/?p=32376

  • Anonymous
    April 26, 2009
    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!

  • Anonymous
    April 26, 2009
    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.   -somasegar

  • Anonymous
    April 26, 2009
    Thank you for submitting this cool story - Trackback from DotNetShoutout

  • Anonymous
    April 26, 2009
    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

  • Anonymous
    April 26, 2009
    The comment has been removed

  • Anonymous
    April 27, 2009
    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 Microsoft

  • Anonymous
    April 27, 2009
    How long do we have to wait for it? Thanks,

  • Anonymous
    April 27, 2009
    I really like the font used in the SketchFlow mockup, what is that?

  • Anonymous
    April 27, 2009
    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 Microsoft

  • Anonymous
    April 27, 2009
    Hi Rachida, We plan to deliver this later in this calendar year. -somasegar

  • Anonymous
    April 27, 2009
    都是Silverlight做的游戏 http://www.silverarcade.com/Games

  • Anonymous
    April 28, 2009
    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.

  • Anonymous
    April 28, 2009
    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

  • Anonymous
    April 29, 2009
    How many times have you sat down and drawn out your application design literally on a napkin? Those early

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

  • Anonymous
    May 01, 2009
    Soma, 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.

  • Anonymous
    May 01, 2009
    Hi Shaggygi, It will be available at the same time as Blend 3 RTM later this calendar year. -somasegar

  • Anonymous
    May 05, 2009
    [原文地址]：PrototypingwithSketchFlow最近，我们在ExpressionBlend3中加入了一套新的工具，旨在用来辅助设计的早期阶段。使用SketchFlow...

  • Anonymous
    May 07, 2009
    用SketchFlow做软件prototype太酷了，还能收集feedback.并且可以利用WPF的功能设计进去一些界面交互效果。 It'sreallySmart! 介绍的帖子...

  • Anonymous
    May 18, 2009
    According to Somasegar’s blog, VS2010 and .NET 4 is available to download for MSDN subscribers . Downloading

  • Anonymous
    May 21, 2009
    Nice and awesome article. Looking forward to indepth tutorial

  • Anonymous
    May 21, 2009
    Nice and awesome article. Looking forward to indepth tutorial

  • Anonymous
    June 10, 2009
    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.

  • Anonymous
    June 11, 2009
    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, http://www.yworks.com/en/products_yfiles_dotnetplatform_about.html • Mindscape, http://www.mindscape.co.nz/blog/index.php/category/wpf-diagramming/ • MindFusion, http://mindfusion.eu/wpfdiagram.html • Syncfusion, http://www.syncfusion.com/products/wpf/diagram • Orbifold has an open source version, http://www.orbifold.net/ If someone has another WPF graph editor framework, go ahead and post; we'd love to know about it. Polita Paulus Developer Division Microsoft

  • Anonymous
    June 11, 2009
    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!

  • Anonymous
    June 12, 2009
    Support for ASP.NET applications?

  • Anonymous
    June 12, 2009
    Anthony, SketchFlow targets Silverlight and WPF.  However, you can use Silverlight (built with SketchFlow) inside your ASP.NET application. Polita Paulus Developer Devision Microsoft

  • Anonymous
    June 25, 2009
    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.

  • Anonymous
    June 26, 2009
    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. Regards,    CS

  • Anonymous
    July 07, 2009
    When is Sketchtool going to be released to preview?

  • Anonymous
    July 25, 2009
    How is Sketchflow different from Mindmaps ; or is Sketchflow a mindmapping tool itself.

  • Anonymous
    October 13, 2009
    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? Thanks

  • Anonymous
    October 19, 2009
    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

  • Anonymous
    December 10, 2009
    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.

  • Anonymous
    December 10, 2009
    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.

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

  • Anonymous
    December 18, 2009
    Hi, Regarding the issues of Buxton Sketch, please contact me via email: bpappas (at) microsoft (dot) com. Thanks 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.

  • Anonymous
    February 28, 2010
    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.

  • Anonymous
    June 08, 2010
    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.

  • Anonymous
    June 08, 2010
    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, Kelly

  • Anonymous
    September 16, 2010
    It would be great if you made SketchFlow available to Microsoft Gold Partners. We get Expression 4 Premium but not Ultimate.

  • Anonymous
    February 14, 2011
    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 memorabilia.hardrock.com).