Developer Viewpoint: Rapid Prototyping with SketchFlow

You can see my own direct review of SketchFlow here.

This article is a great introduction to SketchFlow, which is found in Microsoft’s Expression Blend.

Rapid Prototyping with SketchFlow

Unlike developer “design” tools, SketchFlow is really great at focusing on the interface and how users will interact with the application. I’m not a graphics designer so I know pretty much right off the bat, my prototype may not have the prettiest graphics designs. However, with Expression Blend, I was able to make the UI look half-decent.

It uses XAML files to show case the interface – this is extremely useful as I just grabbed some earlier work being done in Visual Studio and dropped it in – worked like a charm. I was then able to make changes to the XAML from a designer’s perspective instead of a developer’s.

With the SketchFlow Map, you simply draw lines to create a flow between “pages” of your application or to integrate shared components. When you build your application, it provides a SketchFlow viewer with a navigation bar on the right. You can also add animations and direct content to create more interactive shots.

Now to present it, you can do a manual presentation (F5) and walk users through it – but one of the killer features is the ability to “package” the flow and give clients an application that they can walk through on their own, see your annotations or add their own and then send you feedback directly.

I’m a big fan of usability testing and while Sketchflow certainly is more on the prototyping side, it really does let you test concepts very easily.

If you’re happy with what you’ve done, you can actually re-use the XAML and components you’ve built.

The Expression Blend evaluation period is 60 days – so it definitely gives you lots of time to work with it, even just for prototyping out concepts.