Share via

Create a prototype project

  • Article

A SketchFlow project in Microsoft Expression Blend functions just like other Expression Blend projects. However, SketchFlow includes tools created specifically for creating prototypes, making it easier to create functioning prototypes quickly.

For more information about SketchFlow, see SketchFlow overview.

For more information about working with projects in Expression Blend, see Working with solutions, projects, and files.

To create a new prototype project

  1. On the File menu, click New Project.

  2. In the New Project dialog box, under Project types, click Silverlight or WPF.

  3. In the window on the right, click either Silverlight 3 SketchFlow Application or WPF SketchFlow Application.

  4. In the Name box, type a name for the prototype project.

  5. In the Location box, browse to the folder where you want to store the project.

  6. In the Language drop-down list, select C# or Visual Basic.

  7. Click OK.

Once you've created your SketchFlow project, you can start designing a prototype in one of two ways: by creating an application flow in the SketchFlow Map panel, or by creating content on the artboard. Once you've started your prototype, it is easy to move back and forth between creating the structure of the application flow and creating content on the artboard.

Create an application flow

The SketchFlow Map panel is a graph editor in which you can define the structure, flow, navigation, and composition of an application.

You can use the SketchFlow Map panel to focus on the structure of an application, and the artboard to focus on the content of individual screens. For example, you can outline the application flow before you begin to think about the user interface (UI), and then immediately review the application flow by using the SketchFlow player, even if your screens contain nothing but a few notes.

For more information about how to create an application flow, see Create an application flow.

Create content on the artboard

When you focus on individual screens, you can use any of the drawing tools available in Expression Blend, or you can import files from Adobe Photoshop, preserving layers, vector masks, and text. You can also use the images to represent UI controls. You have access to the full range of actual UI controls available for Windows Presentation Foundation (WPF) and Microsoft Silverlight. In addition, you can easily create components that can be reused throughout your project.

For more information on creating content on the artboard, see Create content on the artboard.

Refining your prototype

You can continue to move back and forth between the application flow and the artboard, refining the flow or the content. At any time, you can build the project and run it in the SketchFlow Player by pressing F5.