Over a million developers have joined DZone.

DZone Tutorial - Rapid Prototyping with SketchFlow in Expression Blend 3 (12 Part Series)

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Microsoft 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 12 part series, Jeremy Osborn of AGI Training walks you through prototyping a sample e-commerce site for snowboarding equipment.     

Prototyping in SketchFlow with Expression Blend 3

 

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. 

 
About the Presenter

Jeremy Osborn has more than 15 years of experience in web and graphic design, filmmaking, writing and publication development for both print and digital media. Jeremy recently served as the program director of Graphic & Web Design at the Center for Digital Imaging Arts at Boston University.

At AGI, Jeremy has provided in-depth training and custom consulting for students and corporate clients. Jeremy holds a MS in Management from the Marlboro College Graduate Center and a BFA in Film/TV from the Tisch School of the Arts at NYU. Read Jeremy’s contributions to the AGI Blog

 

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}