SketchFlow: Exciting new design tool

At the Mix 09 conference held this year, one of the very exciting new products I reckon is SketchFlow, whic is going to be part of the upcoming Expression Blend 3. It’s a new design tool that will allow rapid prototyping of UI sketches and wireframes. This new tool will help facilitate communications between designer, developer and business stakeholders. Traditionally, designers use paper, powerpoint, word or visio as a medium for the UI design, and these mediums do not scale well at all. Changes and comments are hard to track, not to mention time consuming and  increasingly cumbersome after many iterations of design.


How SketchFlow solves this problem is really interesting. First of all, there’s a SketchFlow Map at the bottom where you define the pages/screens your application is going to have, and you can define their interactions/navigation by linking them up. After that, you can mock up your screens using the SketchFlow toolkit controls in a matter of minutes. Furthermore SketchFlow provides functionality of linking up e.g. a Button to the next screen/page. Most impressive of all, you can actually run your completed sketches in a browser, and the controls and navigations actually work. This provides the audience with a sense of realism, and one no longer has to imagine/visualize how these screens navigate by looking at visio diagrams or paper. From the Remix09 (Sydney) video I saw, here are more features in SketchFlow:

  • When a user runs your sketch in the browser, there’s a docked toolbox you can access which allow you to add a comment on a particular sketch and save it to disk. When the designer takes that comment file and loads it in Sketchflow, he/she can see the user’s comments.
  • You can write up annotations in your sketches and all the other designers in your collaboration group can view/modify/add these annotations.
  • Ability to data-bind XML data sources to controls like ListBox and DropDowns. These XML sources also provide master-slavedetails, e.g. when you click on a Category (master) in the ListView, the values of the Items (slave) for that category is changed dynamically.
  • Ability to export your sketches to a Word document. The generated word document is complete with table of contents, all page/screen flows, and all your sketches. Seems to be SketchFlow has helped with partially completing your UI Requirements Document.

Unfortunately at the time of writing this post, Expression Blend 3 is in Preview stage and SketchFlow will only be available in the next build. Hopefully we can have a play with this really soon.

If you want to learn more, here are very good resources:

Silverlight Team blog about SketchFlow

Mix 09 video on SketchFlow

See my post on a guide to SketchFlow

Share this post :

One Response to “SketchFlow: Exciting new design tool”

  1. Expression Blend 3 + SketchFlow (RC) Released « Code Blitz Says:

    […] July 9, 2009 — Ed Foh Previously I talked about a great UI Design tool called SketchFlow, but was not available yet at the time of writing. Not […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: