The best of Silverlight 3.0 – SketchFlow

Silverlight amazed me again. Some time ago I’ve heard some noise around SketchFlow. Then I only knew one thing – it is very similar to Balsamiq (other tool for mocking your UI). Now, I had more time to elaborate on what Microsoft Blend + SketchFlow really is. To be honest, I am very positively surprised. What great features have I found there?

Common Parts to other tools on the market

I have already used several tools for mocking UI. Enterprise Architect with their forms was quite nice, but the controls set was rather poor. For some time I used Microsoft Visio but I noticed the same issues there. Not sufficient controls and very small configuration possibilities. I needed a more robust tool to show our clients what I want to express with my images. Some time later, my colleague Jakub Zalas showed Balsamiq. A simple application, nice interface, very usable. Still I could not design every little detail but that was not an issue. . Balsamiq has a very unique controls set. The look and feel is more like drawing by hand. While using Balsamiq I automatically switched to the proper approach, not trying to define every little detail. Unfortunately, also Balsamiq doesn’t do everything I need. The navigation between mocks is not intuitive, I miss zoom in/zoom out features and more complex maintenance of common parts in all mock-ups. I hate that feeling when I have to change my main menu structure and I have to go through all mockups to fix it. My colleague already presented a different tool – Axure. Very neat one, huge set of functionalities, possibility to generate documentation, and online HTML with navigation. Summing it up, The best mocking tool should enable:

• “Draw by hand” look and feel for first mocks
• Detailed design possibilities using previous mocks
• Deployment features with navigation between mocks
• Automatic documentation generation from mocks
• Specific mock parts should be reusable

SketchFlow has all of it

While trying to grasp what SketchFlow really is, I have found a really nice video about it. It looks like pretty everything I need is in it. The look and feel is pretty similar to Balsamiq which is really great. Of course you can use standard controls looking regular but for first mocks I would suggest to use the “Draw by hand” ones. SketchFlow also enables to define certain parts of your mock as reusable components. This enables you to make your changes applicable to all mocks if you change for instance the menu structure. SketchFlow also offers a very nice way of linking mocks . There is a special map available, where you can drag and drop new bindings between mocks (blue color) and components (green color).

When you are finished with designing your mocks using Blend, by pressing one button you will deploy the whole project to the browser. The project is ready for your clients to put their comments. What is very useful, is the toolbox on the left side (on the picture below) which enables your clients to navigate through the whole system, put their notes and even draw on mocks using a pencil! All remarks can be later imported back to Blend for later improvements. Just awesome!

From such a project you can easily generate documentation which consists of all views (including screen shots) with proper mocks indent (so the startup mock is at the beginning of the document, more detailed ones are later etc.)

It seems like SketchFlow consist of all the best features taken from their competitors on the market but we have …

…even more

Because the entire project is made using Blend you are able to define your own animations between mocks, drag and drop behavior, launch specific message boxes on client action, change the entire look and feel of all controls you like and reuse previous mocks to improve them and build from it a WORKING SYSTEM. This is because, Sketch Flow is a part of Blend that enables you developing WPF/Silverlight applications directly from your mocks. Ahh, just sweet. Share your opinion and experience with us below or meet us on Twitter: @GOYELLO.