Michael Gaigg: Über UI/UX Design


MS SketchFlow meets Sketchables

What is SketchFlow?

Sketchflow (a feature of Microsoft Expression Ultimate) is a prototyping tool that allows designers to create sketchy looking mockups, publish them and in that way gather feedback from their clients/colleagues.
As SketchFlow is tightly integrated into Expression Blend, any sketched control is behind the scenes already a Silverlight control that can be styled and consecutively used by your .NET application in Visual Studio. Any SketchFlow project can be converted into a production project, so the path from sketch to production-ready solution appears to be paved...

Why you should use SketchFlow

Like any other prototyping tool, SketchFlow

  • makes it clear that this is a prototype, it looks like drawn on paper or whiteboard
  • is a fast, easy and cheap way of putting visual ideas in front of your clients
  • allows you to link sketched pages together to create a navigable site structure
  • provides SketchFlow player for easy way of navigation through your pages without building any code
  • gives reviewers the ability to add comments directly from the SketchFlow player, making it easy to collect feedback

Why you should not use SketchFlow

During my research I found an article by Jag Reeha who argues that just because you can it doesn’t mean you should:

The aims and mindsets used to create a SketchFlow prototype are different from how you would go about creating a real world production solution.

  • A designer doesn't (and if he does, he shouldn't) think in development details and best practices, code re-usability or testing. A designer should flat-out ramble on UI elements and workflow, navigation architecture and content. Any thought that is put into structuring the solution, creating reusable controls and resources or even laying the page out in a way it can scale are counter-productive and ineffective.
  • The price tag is considerably higher (Estimated Retail Price $599 USD) than other prototyping tools like Balsamiq ($79 for a single-user, multi-computer license).
  • Another big downer is the limited amount of available sketch controls, about 17 if I counted right. Here is where Sketchable comes in handy.

What is Sketchables?



Sketchables (by Philipp Sumi) is a simple framework complemented by a set of controls that allow you to quickly create common controls in a matter of seconds. Sketchable extends the limited set of out-of-the-box sketch controls offered by SketchFlow.

Download Sketchables Preview

How to add mockup controls to your Expression Blend library?

Sketchable files to copy

Sketchable files to copy

After downloading the Sketchable libraries using the link above, copy the files (in the case of sketchables copy the complete /Sketchables/Build/SL/Debug directory, including the Design folder) to your Silverlight install directory. Well, while you are at it already, enable standard mockup controls for any SketchFlow project and copy them to the same target directory as well.

Here is how to do it:

  1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug

  2. Add copied files (including Sketchables) to the following destination:

    Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >

  3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

Your experiences?

What are your experiences and opinions on designing with SketchFlow or Sketchables?

Similar Posts:

Posted by Michael Gaigg

Comments (10) Trackbacks (0)
  1. Hi, Michael,

    Sorry to say that these instructions do not work for me or two of my colleagues. Perhaps they are not specific enough…. WHICH folders should be copied from Sketchables to the Libary directory? The post implies that ALL of them should be but that seems unlikely.

    A screenshot of the directory AFTER the correct files have been copied will probably do the trick!

    Many thanks.

  2. Hey Bryce, I've updated the article with a screenshot and description of the files that need to be copied. Hope it works for you now.

  3. Pretty good write-up. I simply found your weblog and wanted to mention I’ve genuinely liked reading your opinions. By any indicates I’ll be subscribing for all feed and I actually hope you submit another time soon….

  4. Thanks for sharing your thoughts about .net. Regards

  5. Education teaches us the simplicity, in which we should live in a very normal style. Because education tells that be humble with the other people. We should try to behave politely and humble as well.

  6. Thankfulness to my father who stated to me about this webpage, this blog is in fact awesome.

  7. I just bought Microsoft's Expression Web programming and am eager to begin yet I know from nothing about web outline. Along these lines, I am searching for an exhaustive instructional exercise that begins from the very nuts and bolts of outlining a site with this system and closes with clarifying the full capacity of the project.

  8. This web site can be a walk-through its the data it suited you relating to this and didn’t know who ought to. Glimpse here, and you’ll certainly discover it.

Leave a comment

No trackbacks yet.