The new version of Microsoft Expression Blend 3 has a great new feature for Functional Designers, namely Sketch Flow.
You can find a complete overview of the Sketch Flow features here.
In my current project we use Visio with a sketch template at the moment, it does the trick but there is no possibility to use the
screens in “Live mode”. In Blend 3 its possible to give a demo to the users and add comments during the demo.
Its a little bit more complicated than Visio but with a whole load of extra features.
Getting started
At first we need to start a new Sketch flow project:
Here you can choose the type of Sketch Flow project you need, a Silverlight 3 or a WPF version.
Designing the screen
Next you can design the screen as you would normally do in Blend. In the Assets tab under Styles –> SketchFlowStyle several components
are at your disposal for designing Sketch.
For this post i created an application with two screens, a logon screen and a application screen.
Blend automatically creates a navigation map
Navigation between the screens
To give the application a lively feeling you can add a navigation action on the “Log on” button with just a few mouse-clicks.
Right click the control, select the “Navigate to” option and select the screen you want to navigate to. Simple as that.
Running the project in Sketchflow player
When you finished with designing the application you can start your application by hitting F5. The application will be started in the
Sketchflow player.
In the player it is possible to add feedback and export it for late use.
Distribute the design
You have two options for distributing the application, the first option is exporting it to a word document and the second option is to package
the application. The last option creates a folder with all the needed binaries and a test html page (Silverlight) or a test exe (WPF).
In my next blog post I will look more closely at how a screen can be designed using Sketch Flow.
Happy designing…..