Getting Started with SketchFlow in Expression Blend 3

Hello SketchFlow

Last year Microsoft shipped Expression Blend 3, and along with it the first release of SketchFlow. SketchFlow is a set of tools which allows designers and developers to quickly mock up or sketch out concepts for user interface design. Under the covers, SketchFlow mockups are XAML just like WPF and Silverlight windows. To give them that “sketched on a napkin” look and feel, a sketch style is applied to the controls on the screen.

There are some good resources for getting up and running quickly with SketchFlow in Blend. However, they are still few in number since it is a relatively new product.

The first thing to do is to install Blend. A 60-day evaluation copy of Blend can be downloaded here. There are evaluation copies of the other Microsoft Expression products available there as well. There is also a link to a preview of Expression Blend for .NET 4 on the page but it does not currently support SketchFlow projects.

When you launch Blend and select “New Project…”, you will be presented with the New Project dialog:

You can select WPF or Silverlight SketchFlow project types, give your project a name and click OK.

The SketchFlow Design Environment

Here’s a rundown of the windows you’ll be working with when you create a SketchFlow project in Blend.

Editor – This is the main window where you can either manually write your XAML or use the WSIWYG designer.

SketchFlow Map – The Map window displays all of your screens and component screens and provides the ability to map out the flow between them. In the example map below, I have create a Main Window screen which has a Detail View component screen. This component screen is displayed within the Main Window. There is also an Add Item screen which can be navigated to from the Main Window.

Projects – A treeview of all the files in the current project. This should be familiar to any Visual Studio or Expression user.

Assets – From the assets tab, all of the sketch-style controls can be added to the editor window. They can be found under the SketchFlow—>Styles—>SketchStyles tree. Under the SketchFlow assets, you can also find all of the current Navigation Screens, Component Screens and Behaviors in the project.

SketchFlow Animation – The animation panel allows you to create states of the controls on the screen and builds an animation. The example below has a single button control that changes its background color from red to white twice during the animation.

Objects and Timeline – The Objects view provides a hierarchical view of the controls on the selected screen. This is the easiest way to determine which control is currently selected in the Editor window. The timeline is used when creating storyboards for event actions.

Properties – This is pretty self-explanatory. The properties window displays the available properties for the selected control and allows them to be set.

Quick n’ Dirty

Here is an example screen mocked up in SketchFlow containing some of the available sketch-styled controls. The sketch style is great for design reviews. It tends to keep feedback focused on what the screen does, not how it looks.

More Resources

• Prototyping with Sketchflow in Expression Blend 3 Starter Kit – This kit from Microsoft Downloads has tutorials, sample projects and videos to get you started with SketchFlow.
• Dynamic Prototyping with SketchFlow for Expression Blend – The official website for the first SketchFlow book, due out in April 2010. The site has a sample chapter and some sample code.
• Expression Blend + SketchFlow Forums – Microsoft MVPs and other experts are ready to answer questions about the Expression products.
• SketchFlow: From Concept to Production – Christian Schormann’s presentation from MIX09 last March. PowerPoint slides and multiple video formats are available to download.
• SketchFlow: Prototyping to the Rescue – Schormann’s PDC 2009 presentation on SketchFlow.

Happy Sketching!