Today is day #21 of the 31 Days of Silverlight, and today we are going to be talking about a new tool available to developers called SketchFlow. While SketchFlow can be used in several different ways, I’m going to focus on how it can help you save time (and money) in rapidly getting a “proof of concept” application up and running quickly.

Getting SketchFlow

SketchFlow is a feature of Expression Blend 3, and you can download a 60-day trial of Blend 3 + SketchFlow from the Microsoft Expression website.

Creating a SketchFlow project

In Blend, choose “New Project,” and choose Silverlight 3 SketchFlow application.

What you’ll find is that it creates a pretty standard Silverlight project for you, and then there is an additional project that is the screens of our SketchFlow prototype. Let’s get into the details of what we can do with SketchFlow.

Creating our application’s pages

At the bottom of Expression Blend 3, you will see a tab named “SketchFlow Map.” In this window, there is one blue rectangle named “Screen 1.” Think of this as your home page. In fact, I double-clicked on mine and renamed it “Home.” When you roll over the box, you might also notice that there’s a submenu that appears. To start creating pages for our application, all we need to do is start dragging shapes from the “Home” box.

When you drag them, it will create a new, connected box that represents a new page of your application. I have dragged a few new pages onto my Map. I also changed the color of each section, so that we can visually see which pages belong to which section as it grows. You can do this from the icon on the right of the little submenu.

Representing our navigation

Here’s a more robust version of our site map:

One of the cool things we can do with SketchFlow is represent the navigation visually as well. On the second icon from the left in the submenus, you can connect any page to any other page. Our next step will show why this is an important thing to consider. Drag your pages together, so that they represent how a user would navigate the site. Would there be a button on the “About” page to get to the “Products” page? Then they should be connected! Can you get back to the “Home” page from our 5 navigation sections? Then they should be connected! Hook up your pages like a user should be able to navigate, and then meet me at the next step.

The SketchFlow Player

Go ahead and press your F5 key. (Or choose “Project > Run Project” from the Expression Blend 3 menu.) You’re going to see something new, called the SketchFlow Player. If you were diligent, and actually followed my instructions :), you should see a list of pages on the left hand side of the player. This is a list of pages that your “Home” page is linked to. As you click on those items, you’ll notice that we are actually navigating to those seperate pages, and that the pages that are “linked” to will change. You can always click the Home icon at the top to return to the home page. (click to enlarge)

What I want you to notice is that navigation in this manner is awkward. The reason for that is because

1. We haven’t put any content on our pages, so it’s not always clear where we are
2. We don’t have a way to define our hierarchy. All we have done to this point is create a bunch of pages, and link them together.

So let’s add some content to make this much easier to use.

Adding content to our pages

Like any of the other Silverlight tutorials I have done, each “page” of our SketchFlow application is actually just a XAML file. I am going to add a visual title to each page (so we can see easily which is which). Here’s a screenshot of my Products page (click to enlarge):

You’ll notice that I’m not going for “pretty” here in my prototype application. There’s a very specific reason for this.

<soapbox>
When you start working on a prototype application, one of the first tendencies everyone has is to start thinking about “what it will look like”, rather than “how it will work.” This is a fatal flaw in our thinking, and actually penalizes us later. Have you ever presented screenshots of a potential application to your client/manager/sponsor, with the intention of discussing how pages will work, only to be derailed by the fact that they don’t like the color orange? Or that they wish the logo were bigger?

Take an opportunity to call this a “prototype.” It doesn’t have to look pretty, it has to function properly. We can make that functionality look any way the client desires. But it can often be difficult to shoehorn our functionality into the look and feel that has been determined. Ugly prototypes, For The Win!
</soapbox>

Blend 3 even includes a bunch of fonts and control styles that are specifically meant to look hand-written and hand-drawn, so that we can effectively communicate that this is meant to be looked at from a “how it works” perspective. Nobody is going to assume that this ugly look-and-feel is how it will look when we’re done.

If you run the SketchFlow player again (F5), and as you click through the pages in the left navigation, the screen for each page changes as well. Since this is a prototype, let’s add some controls to some of the pages. I’m going to add a few buttons for navigation on the home page, and a few cool things to the product page.

Our SketchFlow navigation

Ideally, in a prototype, our users should be able to click on buttons and links, navigating through the app as if it works like the real thing. They shouldn’t have to use that confusing navigation in the SketchFlow player. I have added 6 buttons to my Home page, and for each of them, I am setting a “Navigate To” property on them. You can do this with any Silverlight element, it doesn’t have to be Buttons, but for my example, buttons suffice. Here’s a shot of my home page with the Navigate To menu open (click to enlarge):

Making A Component Screen

We need this navigation on each page of this site. It would be silly to have to go create this on each page, even if we have to copy and paste it. If we later decide to make a change to it, I want to be able to make that change once. We can do this by creating a Component Screen. Highlight all of the XAML buttons you created (I wrapped mine in a StackPanel, but it’s certainly not necessary), and right-click to choose “Make Into Component Screen.” I named mine Navigation. You should now see a green oval-shaped element on your SketchFlow Map. Drag the “Insert a Component Screen” option from the green oval to each of your top level pages.

You might have to adjust its position, but you should now have your navigation on each main page of your site. Here’s what my SketchFlow Map looks like now:

More about the SketchFlow player

Inside that player are a couple of other cool features, including a feedback component that lets you draw on and markup the prototype. This is a great way to collect feedback from your clients on the app you’re about to build.

You can also access the SketchFlow Map in that same region of the screen. It allows the user to see the full scope of the entire site, much like a site map does. (Click to enlarge.)

Summary

The best part of building a prototype using SketchFlow is that once you’ve gotten sign-off from your customer/client/boss, you’ve got a working Silverlight application. You can re-style your controls, add some live data (if you didn’t already), and you’re off and running. No need to throw your work away!

Click here to download my sample Sketchflow prototype from this demo.