Create content on the artboard

  • Article

Most of the SketchFlow workspace is the same as the Microsoft Expression Blend workspace. The Expression Blend artboard gives you a view of individual screens on which you can draw by using any of the drawing tools in Expression Blend, import images from Adobe Photoshop, or use the full range of controls available in Expression Blend for Windows Presentation Foundation (WPF) and Microsoft Silverlight. You can also use animation to display different visual states of a particular element or represent the interaction with the elements on the screen.

You add new screens to your prototype project in the SketchFlow Map panel, and then create content on the artboard in the Design window.

Ee341385.c5da9dd8-4356-4803-aab0-64635bf9866b(en-us,Expression.30).png

Ee341385.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png

Artboard
Ee341385.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png

SketchFlow Map panel

When you focus on individual screens, you can draw with any of the vector graphics drawing tools available in Expression Blend, or you can import files from Photoshop, preserving layers, vector masks, and text, if you like. You can also use pictures of user interface (UI) controls as part of your prototype, and create reusable components on the fly. You also have access to the full range of actual UI controls available for WPF and Silverlight.

To create a new unconnected screen

  1. Right-click anywhere in the SketchFlow Map panel, and then click one of the following:

    • Create a Screen

    • Create a Component Screen

    Note

    To connect the new screen to an existing screen, click the new screen, and then drag the new screen to the screen to which you want to connect it.

  2. To draw something on the new screen, double-click the node in the SketchFlow Map panel to select the associated document tab.

For more information about creating new screens and working in the SketchFlow Map panel, see Create an application flow.

Objects

In Expression Blend, an object is anything that you can position on the artboard. For example, after you add a visual element to the artboard, it becomes an object in your application.

You can add an object to the artboard by selecting a tool in the Tools panel or the Assets panel, or by selecting a styled or custom control from the Assetspanel. You can also drag a styled control from the Resources panel, or drag resources from the Resources panel onto an existing object on the artboard to apply the resource to one of the properties of the object. In addition, you can drag images, sound files, video files, and other media directly from Windows Explorer into Expression Blend, or copy images from other applications and paste them directly onto the artboard.

For more information about working with objects, see Working with objects and controls.

Controls

A control is a type of object that enables user interaction or input. Expression Blend provides an extensive list of controls that you can use to design your WPF and Silverlight prototypes.

Because polished UI elements can distract from reviewing the interactive design instead of the look of an application, SketchFlow also includes a set of styles that give the standard controls a hand-sketched look while maintaining all their functionality. On the Assets panel, click Styles.

For more information about working with controls in Expression Blend, see Choosing and using interactive controls.

SketchFlow animation

SketchFlow animation can be used in SketchFlow prototypes to help reviewers visualize the different states a particular part of UI might be in. They can be used to show how interaction with the screen might look, using animation. They can also be used to hold different design alternatives for any given screen.

For more information about working with SketchFlow animation, see Add interactivity.

Behaviors

Expression Blend includes behaviors, which are reusable blocks of code that make it easy to apply production-quality interactivity to any design element on the artboard without your having to know or write code. Although Expression Blend provides some prepackaged behaviors, you can also add custom behaviors. A developer can provide a custom behavior that a designer to can then easily apply to a design element on the artboard.

For more information about working with behaviors in Expression Blend, see Add interactivity.

Zoom and pan

If you have a mouse with a mouse wheel, you can zoom in on the artboard by pressing CTRL and rotating the mouse wheel.

You can also drag the artboard and any of the elements contained in it if you press SPACEBAR while dragging. In addition, you can drag the application flow diagram anywhere in the window by pressing SPACEBAR while dragging the diagram.

Annotations

In addition to creating and modifying objects and controls on the artboard, you can leave comments and notes on the artboard by using Annotations. Annotations can also be attached directly to objects on the screen. Design-time annotations are visible when you open a SketchFlow project in Microsoft Visual Studio.

For more information, see Annotate a document.