SketchFlow is a super fast way to get your ideas across to a client without spending too much time on the intricacies that come with building rich internet applications. Gone are the days of trying to express your ideas on pen and paper, which can be extremely tedious when designing applications with hundreds of interconnecting pages . This can be very difficult for a client to visualize and harmful to your concept.
With SketchFlow you can create pages, navigation items, text boxes, buttons, and all items you will ever need to show your concept at its full potential. You can add as much or little detail as needed. Your clients can even leave feedback by drawing directly on the concept with a brush tool or leaving notes next to items, which you can later integrate into the concept.
Have a look at my finished SketchFlow application here.
Let's check out how it all works
Open Expression Blend 3 and create a new project. Here you will find the option to create a Silverlight 3 SketchFlow application.
The layout for a SketchFlow application looks pretty much the same as any Silverlight application with one major difference, the SketchFlow map. By default, this is docked under the ArtBoard area. If not go to Window > SketchFlow Map to open it.
Now we can start creating our mocked-up application. You will see a blue square in your map named Screen 1. This is your first page. Feel free to rename this by double clicking its name in the square.
Now we can start adding items to our first page. My first page will be a log-in page for my commenting system. So we need a username and password field, a sign-in button, and a sign-up button. In your Assets tab under Styles you will find a category called SketchStyles. These give the effect of a hand-drawn application, which can help clients focus on your basic ideas instead of styles.
So now we have our log-in page created, and we need to create a new page for commenting. Right click on your SketchFlow Map area and select Create a Screen. Give it a name and start adding items to this screen. Repeat this process for any other pages you want in your application mock-up and then we will be ready to connect everything together.
Navigation!
Go back to your log-in page by double clicking it in the SketchFlow Map. Right click on your Sign-in button and point to Navigate to. Then select the page you want this button to navigate to and you’re done! You will notice on the SketchFlow map there is now an arrow connecting these screens.
Note: the green arrow next to your screen indicates this is the start page.
Use Component Screens to reuse controls
Another great feature to check out is the component screens. This is basically a control (such as a menu or toolbar) you can place on any or every page. Right click on the SketchFlow map again and select Create a Component Screen. I have created a simple navigation system to show how this works. Now just grab your new component screen in the SketchFlow map and drag it onto another screen. You will see it has created a dotted line between the two items. Now if you view the connected screen you will see the component screen appears there.
Let's run it up!
Press F5 to launch your SketchFlow application. Notice that your application is housed in the SketchFlow Player. This has options for the user to navigate quickly between pages, zoom in and out, and leave feedback or view the map.
All the buttons and textboxes are real and working, so your client can use your mock-up application the way it should work, getting a real feel for the concept.
Either host your application online somewhere, or send it to the client (be sure they have the correct setup to run Silverlight projects internally on their machine).
Once the user has left drawings and notes on the application, they can send back their notes by clicking the Show Feedback Options (folder icon) 
and selecting export feedback. Here they enter their Name and save the file to their computer, pop it in an email to you, and then you import it into your project. It’s an XML file saved as a .feedback file. Having multiple feedback files allows multiple users to provide feedback and to avoid any security flaws in the product.
Import the Feedback
To import feedback into your project, go to Window > Feedback and click the Add icon. Locate the file, and the user’s feedback spills onto your project. Feedback is shown by the light globe icon which you can see above your scenes on the SketchFlow map. You can turn it on and off via the light globe icon in the feedback panel.
Extra Options
If you don’t wish the user to be able to provide feedback or access the navigation panel in the SketchFlow player, go to Project, select SketchFlow Project Settings, and change the options.
The Final Cut.
Once you are happy with your mock-up application, you can export it to Word format as a .doc file. This lays out all of your navigations items, screen shots of each screen, and any other items relevant to your application in a Word document which can be used as a specification document of your prototype.
Check out my specification document here in PDF format.
Thanks for reading.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
