Microsoft SketchFlow is a rapid prototyping tool that allows users to quickly create interactive prototypes of applications to visualize screen flows and gather user feedback before development begins. SketchFlow projects can be deployed as Silverlight, Windows Phone 7, or WPF applications and include a built-in viewer. The tool focuses on structure using a map panel and screen content using an artboard. Sample data, visual states, and animations can be used to demonstrate interactivity and enhance prototypes. Best practices include becoming familiar with Expression Blend first and using SketchFlow early in iterative cycles with users.

1. Microsoft SketchFlow
Presented by Reuben Ahmed & Mel Leeb

2. Microsoft SketchFlow

3. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

4. + Rapid Prototyping tool available with Expression
Studio Ultimate. Other editions have free 60-day trial
versions.
+ Before SketchFlow, apps were prototyped using:
1) Visio and some basic user control stencils
2) Static, designer generated wireframes
+ Images lack interactivity. Users have questions:
1) “What happens when I click this button?”
2) “How do I get to the Checkout screen?”

5. + Sketchflow can quickly/easily fill in those
interactive gaps.
• Helps users visualize what an app would do from a
“screen flow” perspective
• Lets users see UI screens and realistic data, before
development begins

6. + Sketchflow has three Project Template types
• Silverlight – Deploys to a website for users to see
• Windows Phone 7
• WPF – Packages as an .exe and sent to your users to
see
+ Sketchflow has a built in “viewer/player” for demoing
your resulting prototype solution

7. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

9. + The SketchFlow Map panel is a graph editor in which
you can define the flow and navigation of an application.
+ The Map panel focuses on the structure of an
application; the Art Board focuses on the content of
individual screens.
- Create a basic Sketchflow Map for a Shopping
site (BigRiver.com)

10. + SketchFlow applications are meant to be design-less
+ How? Add simple visual assets using “Sketch-y
controls”
+ i.e. instead of “TextBlock”, we use “TextBlock-Sketch”
- Create sketchy visuals for BigRiver.com on the
Artboard

11. + How can the users navigate?
+ Create a re-usable Component Screen
- Create Navigation for BigRiver.com

12. o What is SketchFlow?
o Basics of SketchFlow
o Integrating Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

13. + Blend supports creation of Sample Data
+ Technique helps to simulate appearance of
data in our prototype
+ By default, generates fake “Lorem Ipsum”
data; should be replaced with more realistic
sample data
Create Sample Books for BigRiver.com

14. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

15. + Adding some “flair” to your SketchFlow …
+ In addition to using effective sample data, give your
application a realistic “feel” by leveraging the
following features in Blend:
• Visual States
• Animations

17. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

18. + Package & Deploy SketchFlow Project
+ Collect User Feedback with the SketchFlow Player
+ MS Word Documentation Export Feature

19. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

20. + Get a little familiar with Expression Blend first
+ Take advantage of Blend's "search" window for filtering
+ Use it early in the project (i.e. - before too much UI work)
+ Have a couple iterative cycles with users
+ Apply "sketch" styles and focus on a design-less layout
+ Use realistic sample data when available

21. + Take advantage of using quick drag & drop + copy / paste
WYSIWYG layout. Focus on screen flow and core content.
+ Make use of Visual States and Animations to demonstrate
interactivity. These states also useful in the real, final
application you will be building too.
+ Use Sketch styles when possible but if you plan to use
any 3rd party controls (ex. - Telerik), you can use them as
well in SketchFlow, to show off their features (ex. - grid
sorting, filtering, grouping, etc.).

22. o What is SketchFlow?
o Basics of SketchFlow
o Sample Data
o Enhanced Visual Techniques
o Customer Review & Feedback
o Best Practices
o Q&A

23. o Credits / Resources:
• Foundation Expression Blend 4 with Silverlight :
• Tailspin Travel Sample - SketchFlow + RIA Services:
http://tailspintravel.codeplex.com/releases/view/52129