Expression Blend’s prototyping tool SketchFlow
( According to the book „MS Expression Blend 4 Step by Step“, Chris Leeds, Elena Kosinski )
With SketchFlow, you can sketch and quickly prototype applications, including all interactivity. You can create a working “initial prototype” of an application, 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.
a) Often, your ideas are born on scraps of paper or napkins and are nothing but pencil sketches. All of this sketching becomes the first draft of your idea. But the idea is still on paper and looks static. Prototyping adds life and functionality to your idea; you can feel how buttons click and how and when screens change, you can preview sample data in lists and fill out forms, and more. After a prototype is finalized, it’s much easier to create a real application because almost all of the interactive parts of the application—the screens, the elements, the behaviors, and the parts—are polished and integrated. 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.
b) The SketchFlow Map panel displays two types of screens: navigation and component. 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. You can organize content that you want to reuse on multiple screens into component screens.
( According to the book „MS Expression Blend 4 Step by Step“, Chris Leeds, Elena Kosinski )
With SketchFlow, you can sketch and quickly prototype applications, including all interactivity. You can create a working “initial prototype” of an application, 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.
a) Often, your ideas are born on scraps of paper or napkins and are nothing but pencil sketches. All of this sketching becomes the first draft of your idea. But the idea is still on paper and looks static. Prototyping adds life and functionality to your idea; you can feel how buttons click and how and when screens change, you can preview sample data in lists and fill out forms, and more. After a prototype is finalized, it’s much easier to create a real application because almost all of the interactive parts of the application—the screens, the elements, the behaviors, and the parts—are polished and integrated. 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.
b) The SketchFlow Map panel displays two types of screens: navigation and component. 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. You can organize content that you want to reuse on multiple screens into component screens.
c) 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. 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.
d) The process of adding new controls to a prototype is simple and fast. Even if you directly write or copy XAML code to add elements, you can apply Sketch styles later from the Resources panel or by using the Expression Blend breadcrumb bar at the top of the Artboard. You can also remove the Sketch styles to use the default Silverlight and WPF appearance of controls.
e) In Sketchflow you can use Sample data. The main purpose of sample data is to quickly fill prototype applications with temporary but realistic data. 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.
f) When you design an individual screen for a prototype application, you can also draw by using Expression Blend’s vector tools, scan paper sketches, or import graphic assets from Microsoft Expression Design. Additionally, you can use the custom shapes from the Assets panel. The shapes also have Sketch styles appropriate for use in SketchFlow projects. There are intended to help designers and viewers focus on the interactive design of the prototype rather than the visual design. You can create a hand-sketched look for images and photos you use in prototype applications.
e) In Sketchflow you can use Sample data. The main purpose of sample data is to quickly fill prototype applications with temporary but realistic data. 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.
f) When you design an individual screen for a prototype application, you can also draw by using Expression Blend’s vector tools, scan paper sketches, or import graphic assets from Microsoft Expression Design. Additionally, you can use the custom shapes from the Assets panel. The shapes also have Sketch styles appropriate for use in SketchFlow projects. There are intended to help designers and viewers focus on the interactive design of the prototype rather than the visual design. You can create a hand-sketched look for images and photos you use in prototype applications.
g) 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. In a real application, screens change when users press buttons, select something from a list, enter data in fields, and so on. Providing these interactive features enables users to interact with UI elements much as they would in the finished application. It is possible to use the states model for screens when you are designing a prototype application. States help to demonstrate interactivity and can help provide different design alternatives for a single screen. Adding animation between the various screen states provides additional realism.
h) You can customize the SketchFlow Player runtime environment by changing the SketchFlow project settings. 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.
i) When the prototype application is finished, or when it reaches one of the final phases, it is possible to show it to friends, colleagues, team, or customers. Creating a SketchFlow package enables to include all the required files to view the project without source files, making it easy to share with others.
j) While viewing the prototype, friends, colleagues, team members, or customers might want to provide comments or feedback. The feedbach is a valuable way how to informa users about what they liked, about needed changes or missing features, and so on. By collecting these comments, it is possible to improve the prototype to make the final application better before investing the work to build the final application.
k) Expression Blend supports the creation of documentation about the 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.More about the SketchFlow:
http://www.microsoft.com/Expression/products/Sketchflow_Overview.aspx
More about the book "MS Expression Blend 4 Step by Step":
http://oreilly.com/catalog/9780735639010/
h) You can customize the SketchFlow Player runtime environment by changing the SketchFlow project settings. 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.
i) When the prototype application is finished, or when it reaches one of the final phases, it is possible to show it to friends, colleagues, team, or customers. Creating a SketchFlow package enables to include all the required files to view the project without source files, making it easy to share with others.
j) While viewing the prototype, friends, colleagues, team members, or customers might want to provide comments or feedback. The feedbach is a valuable way how to informa users about what they liked, about needed changes or missing features, and so on. By collecting these comments, it is possible to improve the prototype to make the final application better before investing the work to build the final application.
k) Expression Blend supports the creation of documentation about the 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.More about the SketchFlow:
http://www.microsoft.com/Expression/products/Sketchflow_Overview.aspx
More about the book "MS Expression Blend 4 Step by Step":
http://oreilly.com/catalog/9780735639010/
