Nitin has posted 391 posts at DZone. View Full User Profile

Prototyping with Sketchflow (Part 1 of 12): Introducing SketchFlow with Expression Blend 3

  • submit to reddit

SketchFlow provides prototyping features that allows anyone to quickly map out the flow of an application as well as the layout, user interface, and transitions from one state of the application to another.  In this video, Jeremy Osborn explores a final SketchFlow project and the benefits of the prototyping workflow.

 Click here to download the assets, step-by-step guide, and video package associated with this video and StarterKit. (127MBs)

Watch the other parts in this series:


Part 1: Introducing SketchFlow

Explore a final SketchFlow project and the benefits of the prototyping workflow. 

Part 2: Adding Navigation Screens in SketchFlow

Learn how to create a new Silverlight SketchFlow project. You'll also learn how to set up a prototyping workspace, create connections between screens, and learn how connections work in the SketchFlow flow. 

Part 3: Building Basic Layout in SketchFlow

Learn how to work with basic SketchFlow tools and SketchFlow elements including shapes, buttons, and notes. You'll also learn how to add images to a SketchFlow project. 

Part 4: Using SketchStyle controls to enhance a SketchFlow layout

Learn how to add interactive controls to your online snowboard application. Contents include adding divisions to your screen with Sketch rectangles, as well as adding text and combo boxes to simulate an online form.

Part 5: Working with components in a SketchFlow project

Learn how to create components in a SketchFlow project. Concepts covered include the purpose of components, creating a component from existing elements, as well as adding and modifying components to your navigation screens. You'll also learn how to modify the appearance of SketchStyle elements using the properties pane. 

Part 6: Adding Navigation to buttons in SketchFlow

learn how to create interactive buttons in your SketchFlow projects using the 'Navigate To' feature. Additionally, you'll learn how to add navigation to your components. 

Part 7: Working with States in SketchFlow

Learn how to use the States panel to record layout changes and create animations that users can view and interact with in the SketchFlow player.

Part 8: Working with the SketchFlow Animation panel

Learn how to create animations in SketchFlow that simulate user behaviours such as adding a product to a shopping cart. 

Part 9: Working with Behaviors in SketchFlow

Learn how to work with behaviours in SketchFlow to add simple interactivity to buttons or to a plain animation upon loading a screen. Additionally, you'll take a look at SketchFlow's extensibility which allows you to add custom behaviours to your project, in this case to simulate drag-n-drop behaviour in an application. 

Part 10: Using Sample Data in SketchFlow

Learn how to use the Sample Data in SketchFlow to simulate the appearance of data in your prototype. Concepts include adding sample data sources, data binding, and modifying the appearance of a listbox.

Part 11: Adding feedback and annotations in the SketchFlow player

Learn how to add feedback to a prototype in SketchFlow player and then import that feedback into SketchFlow in order to evolve your prototype.

Part 12: Exporting your SketchFlow project

Learn how to package your SketchFlow project for external use. Additionally, you'll learn how to export your project to Microsoft Word for a more traditional hard copy use. 


Published at DZone with permission of its author, Nitin Bharti.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)