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
Explore a final SketchFlow project and the benefits of the prototyping workflow.
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.
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.
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.
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.
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.
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.
Learn how to create animations in SketchFlow that simulate user behaviours such as adding a product to a shopping cart.
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.
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.
Learn how to add feedback to a prototype in SketchFlow player and then import that feedback into SketchFlow in order to evolve your prototype.
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.
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