Chapter 11

Using SketchFlow

After completing this chapter, you will be able to:

  • Create and run a SketchFlow application.
  • Navigate between SketchFlow screens.
  • Create an application flow.
  • Add controls and use sample data for prototyping.
  • Make your SketchFlow projects interactive.
  • Modify the SketchFlow Player settings.
  • Package your application prototype.
  • Use the feedback functionality to collect new ideas and comments.
  • Generate documentation in Microsoft Word format.
With Microsoft Expression Blend, you can do more than just design and develop applications, with its built-in dynamic prototyping tools you have the freedom to experiment with ideas without having to build the entire application. Expression Blend's exciting prototyping tool is SketchFlow . With SketchFlow, you can sketch and quickly prototype applications, including all interactivity. You can create a working "initial prototype" of an application in just a few hours without writing any code, thus improving productivity and letting you experiment with multiple ideas. You can import scanned paper sketches, use the power of sample data, include built-in navigation between screens, switch between states, and add animations so that you and your clients can test how the prototype behaves.


Sometimes you have a really great idea, and you say "Eureka! That’s what I need!” Your mind begins working more intensely, and you think about how to implement and evolve the idea. Sometimes you want to share your idea and get input from others. Often, such ideas are born on scraps of paper or napkins and are nothing but pencil sketches. Then you might take these rough sketches and draw everything out more cleanly on larger paper, perhaps drawing several screens or parts of screens that you evaluate as the idea transforms into a rough draft, and then you experiment with the details. Often, if something doesn't result in what you envisioned, you start over from scratch.


Creating and Running a SketchFlow Project

The process of creating a prototype is similar to that for creating a real Microsoft Silverlight/Windows Presentation Foundation (WPF) application in Expression Blend. It starts from the New Project dialog box, where you can create either a Silverlight SketchFlow application or a WPF SketchFlow application, depending on the type of application you want to build after the prototype phase. It's worth noting that a SketchFlow prototype actually is a Silverlight or WPF application.


Creating an Application Flow

When you first create an empty SketchFlow project, you'll see only one empty screen. It looks like a piece of white paper onto which you can sketch your ideas. You can add any number of additional "papers” to your application from the SketchFlow Map panel, filling them with content and defining the navigation between them, connecting existing screens with new screens. Every screen in your prototype appears as a node in the SketchFlow Map panel. The connections between these nodes simulate the navigation. You can have both connected and unconnected screens in a SketchFlow application.

Creating an Application Flow

Navigation and Component Screens

The SketchFlow Map panel displays two types of screens: navigation screens and components. You worked with navigation screens in the previous example. Component screens are similar to navigation screens but contain content that you can reuse on multiple screens. A component screen can also be part of a navigation screen. These Component screen nodes do not have incoming navigation connections on the SketchFlow Map panel. You can organize content that you want to reuse on multiple screens into component screens. Such content might include a header with the company logo, menus, footers, and so on. Component screens are similar in functionality to an HTML website’s templates.

Navigation and Component Screens

Adding Controls and Data

Adding new controls to your SketchFlow application is similar to adding them to other applications. The difference is that controls in SketchFlow prototypes have a hand-sketched look and use special Sketch styles. You might notice that the two buttons on the Start screen in this chapter's example have this odd look.

Sketch Style Buttons

Microsoft chose the Sketch style for controls to help users focus on ideas rather than appearance at this early stage of the application design process. At the prototype stage, you should concentrate on thinking and experimenting with ideas, and postpone skinning for the next phase of the application’s development.

Using Sample Data

The main purpose of sample data is to quickly fill prototype applications with temporary but realistic data , which you saw in Chapter 10 "Working with Data”. Again, at this prototype stage you should concentrate on ideas, not on production data. You can fill your completed application with real data later, at the appropriate point in the development cycle.

Sample Data and Images

Sketch Illustrations

When you design an individual screen for a prototype application, you can also draw with Expression Blend’s vector tools, scan paper sketches, or import graphic assets from Microsoft Expression Design, Adobe Photoshop, or Adobe Illustrator. Additionally, you can use the custom shapes from the Assets panel. The shapes also have Sketch styles appropriate for use in SketchFlow projects.

Creating a Sketch in Expression Design

Adding Interactivity to a SketchFlow Project

Interactivity provides a feeling of realism to the user interface (UI) elements in your SketchFlow prototype. SketchFlow provides tools for creating true interactivity and for simulating it. Applying behaviors to elements in your prototype, using states to switch between different scenes, and adding specific navigation to elements all enable you to include real interactivity. Simulated interactivity works by using animations instead of behaviors.

Adding Additional Interactivity

Using States and Behaviors

You learned about states for controls in Chapter 9, "Skinning Controls.” You can also use the states model for screens when you are designing a prototype application. States help you demonstrate interactivity and can help provide different design alternatives for a single screen. For example, you can display different states for the contact form, login, or cart screens of your shop. Adding animation between the various screen states provides additional realism.

States and Behaviors

SketchFlow Player Settings

You can customize the SketchFlow Player runtime environment by changing the SketchFlow project settings. By default, the SketchFlow Player includes a branding area that displays text and has active Navigation and Feedback panels. You can customize the branding area to suit your needs: enter a new title for a project, add versions, or include a custom image by using special tags.

SketchFlow Player Options

Packaging a Prototype

When you have finished your prototype application, or when it reaches one of the final phases, you might want to show it to your friends, colleagues, team, or customers. Creating a SketchFlow package enables you to include all the required files to view the project without source files, making it easy to share with others.

Prototype Packaging

Getting Feedback

While viewing your prototype, your friends, colleagues, team members, or customers might want to provide comments or feedback. Feedback is a valuable way for users to inform you about what they liked, about needed changes or missing features, and so on. By collecting these comments, you can improve your prototype to make the final application better—before investing the work to build the final application.

Feedback in a SketchFlow Project

Generating Documentation

Expression Blend supports the creation of documentation about your prototype application. The report file, which Expression Blend exports in Microsoft Word format, includes a table of contents, a list of figures, the SketchFlow Map, navigation and component screens, the screens' states, and user feedback.

Word Document Format Documentation

You can easily make this a point to YOUR company OR hide it all together.