web 2.0

How to: Create an advanced SketchFlow Prototype

Login view sketch

I’m working on a Silverlight demo LoB application as a part of my bachelor thesis and I made a UI prototype with a couple of screens containing sample data and some basic functionality like navigating through screens, autocomplete boxes, some pop-up windows…

At first, check out the SketchFlow prototype (or just PDF exported document) which I’m going to describe here, to see whether the rest of article is interesting for you.

Download the source code of the project.

Why to do WPF/Silverlight UI prototypes in SketchFlow?

We usually build the software for our customers and therefore we have to check regularly whether our work really meets their expectations.

To avoid reconstruction of the user interface near the end of the development, project teams tends to do UI prototypes. This way we could get the feedback from our managers and customers about the basic design elements like layout, UI components used, data that is shown, etc.

SketchFlow enable to create UI mocks that looks like hand-drawn, but with real XAML elements and C#(or VB) code so there is a great chance, that in the end you can reuse a lot of the XAML code for the real project. Plus you can easily create Sample Data Sources with “lorem ipsum” style data.

To enrich the communication process between you and the customer there are some feedback controls to draw and write notes in the running prototype and then export it.

I will explore the whole process of creating SketchFlow prototype in the next couple sections.

Basic Orientation in SketchFlow Project

Overview of Expression SketchFlow

Overview of Expression SketchFlow

The most important parts of the environment are SketchStyles assets, that are actually styles applied on dozens of classic UI controls.

Another important tool is SketchFlow Map where you can create connected screens, organize component screens and visually tag them to express some king of grouping.

In the right panel there are by default Properties (of selected component) and Data panels. In Data panel you can create collections of sample data or import data sources from XML files.

In some cases you would like to create some basic animations of the content and this can be done with the animation panel.

If you can’t find some of these panels you can show them by the Window submenu in the Main menu.

Create navigation screen with views as component screens

At first, you should see the first blank screen in your project. You can place there some Sketchy controls to create the user interface on that screen.

SketchFlow Map

SketchFlow Map

This will be the first screen in your project and by clicking on buttons in the SketchFlow map you can create screens that are connected to this screen.

You can also create new screen separately and after that connect the screen to another existing screen.

To create a component screen I recommend to create some basic stuff at the source screen first, place it in some Grid and than raise context menu on that Grid in the Objects and Timeline panel and choose Make into component screen.

Group UI controls into Layout element

Group UI controls into Layout element

Make element into...

Make element into...



Then you can see in Objects and Timeline that the Grid changed to the “NewComponentName” and you can edit its contents and its code-behind in separated files.

In my case I have a TabControl in every screen (Products, Customers…)  and TabItems content is transformed to separate Component screens. I have the navigation of my app as a separate UserControl, to enable placing it in all Screens, but still edit it in one place.

To enable navigtion between the screens from the screen by clicking on some buttons, you have to open the context menu on selected button and choose Navigate To and selected the desired screen. Only screens to which current screen is connected could apper here.

Create Sample Data and bind UI controls to it

You can easily create new collections of sample data, that contains simple/complex properties and sub-collections. After creating a new property you should set the type and some details (size, max length, etc.).

SketchFlow Sample Data

SketchFlow Sample Data

There is also an option to edit pre-generated values and set the count of sample records in a collection.

Image type property should be linked to a directory that contains sample images.

Binding works the same way like in normal WPF/Silverlight project. I recommend to set the DataContext of the LayoutRoot grid to the ProjectDataSource and then just bind ItemsSource properties of ListBoxes, Grids on the screen to sample data collections.

How to create sketchy controls that are not included in default SketchStyles

SketchFlow Apply sketchy resource

SketchFlow Apply sketchy resource

There is limited amount of controls that could be drag’n'dropped from the SketchStyles panel.

In my prototype I used AutocompleteBox, DataPicker and maybe some other controls, that should be styled the sketchy way, as well.

A lot of these extra controls are derived or contain some primitive UI controls. AutocompleteBox is derived from standerd TextBox and therefore we can apply TextBox-Sketch resource to it.

In other controls we could at least change the Font to Buxton Sketch and set colors of control to grayscale ones.

Publish the project, Export to Microsoft Word, Manage the Feedback

In the Main menu, you can Package the SketchFlow project and that will export your prototype to a specified folder. Actually the only files you need for publishing on the web or to deliver to customer are Silverlight XAP file and an HTML document that hosts that Silverlight application. Show my published project.

The other interesting function is Export to Microsoft Word, where the SketchFlow generates a Word document with the SketchFlow Map and all the Navigation and Component Screens. Show my exported document saved as PDF.

SketchFlow project Feedback

SketchFlow project Feedback

In the running project, the user can navigate through the left sidebar or by clicking on buttons in screens.

In the left sidebar there is also a Feedback panel where the user can write, draw feedback and then export it and send the exported file to development team.

You as a developer could import/add feedback files from your customers (or managers) via the Feedback panel (on the left from the Objects and Timeline).

Useful links about Expression SketchFlow

In the end, I will share with you some links about SketchFlow I’ve already collected.

How to: Create a sketchy Siverlight GroupBox in Blend/SketchFlow (ondrejsv, 17th January 2010)

How to: Create a new format for sample data in Blend/SketchFlow (ondrejsv, 17th January 2010)

Using SketchFlow to Create Better Prototypes (Simon Guest, 29th April 2009)

Getting in-depth with SketchFlow (Alex Knight, 26th October 2009)

Sketch Flow: From Concept to Production – MIX ‘09 video (Christian Schormann, 20th March 2009)

SketchFlow tutorial

Thanks for reading.

Download the source code of this project.

5 Responses to “How to: Create an advanced SketchFlow Prototype”

  1. Hi Lukas, I read about your Sketflow project and I think it’s excellent.
    I tried to download the source code from this page but I think It’s not working or the file is wrong.
    I wanted to ask you if you could upload it again.

    Thanks in advanced.
    Marianela.
    E-mail: suarezmarianela@live.com.ar

  2. Hi,

    I cannot open the zip source code file.

    Regards

  3. Sorry guys, the upload of file probably failed somehow and 300 kB were missing. I’ll upload it once again and test whether it’s OK.

  4. OK, I uploaded the source code, then downloaded it and it works in Blend 3 and in Blend 4 Beta (it will convert automatically).

  5. Hi,

    I’m just a novice at Bled3 so I’m at the beggining of my adventure with SketchFlow. Though I find your “How to” very helpful and encouraging. Good job!