Silverlight 4: SketchFlow for Prototyping UI using Expression Blend 4

Posted by: Pravinkumar Dabade , on 3/9/2011, in Category Silverlight 2, 3, 4 and 5
Views: 38272
Abstract: In this article, we will see how Silverlight 4.0 and Expression Blend SketchFlow helps in designing deep dive prototypes for a product.

When Microsoft released Silverlight 3, they also released Microsoft Expression Blend 3. In Blend 3.0, they came up with SketchFlow for prototyping user interface scenarios.

SketchFlow plays a very important role in our product development. By using SketchFlow designer, we can :

1) Experiment ideas by using ‘Top-down’ and ‘Bottoms-up’ designs.

2) SketchFlow player lets us try our designs at any time.

3) Communicate our design ideas to the stakeholders and customers.

4) Easily gather, evaluate and use the feedback from our stakeholders and customers.

So, let’s get started by taking an example of designing a prototype for an ‘Online Shoppe’. Please note that this article is focusing on how to prototype a product and not on creating an ‘Online Shoppe’.

For this demonstration, you need to install Microsoft Expression Blend 4.0.

Step 1: Assuming you have installed Blend 4, go to your start menu and open Microsoft Expression Blend 4.0 from Microsoft Expression studio. Once you open the Blend 4.0, from your start screen, click on the ‘New Project’ as shown below :

This will bring up the ‘New Project’ dialog box. Select New from Silverlight > SketchFlow > make a choice of ‘Silverlight SketchFlow Application’. Name the application as ‘OnLineShopeePrototype’ and click ‘OK’ button by keeping all the other default settings as shown below:

This will create a Silverlight SketchFlow project.

Step 2: Now let’s observe a couple of windows in this project, to get an idea about the SketchFlow project architecture and how effectively we can use them during prototyping of our product.

So let’s have a look at Project Window as shown below –

If you observe carefully, Blend has created two projects - one is ‘OnlineShopeeProtoType’ and the other ‘OnlineShopeeProtoTypeScreens’. The first project is used to run the ‘SketchFlowPlayer’ and second project is used to store all the screens of our prototype.

In the second project, ‘OnlineShopeeProtoTypeScreens’ you will see a couple of different screens. Let’s analyze all the screens one by one.

Screen 1 - this is a regular .XAML page like any other page in Silverlight.

Sketch.Flow – this file contains the information about all the screens used for prototyping.

SketchStyles.xaml – this file contain the resource dictionary with number of styles which SketchFlow project makes use of them internally.

Step 3: Now let’s see another window which is a ‘SketchFlow Map’ as shown below –

This window shows you all the available screens used for designing the prototype as well as it shows the complete navigation of the screens. This screen too has a couple of options. If you mouse hover on ‘Screen 1’, it will show you four options as shown above:

1) Create a Connected Screen – this option will create a new screen which will be connected to ‘Screen 1’.

2) Connect an existing screen – this option will allow you to connect the existing screen with others.

3) Create and insert a component screen – this option will create a reusable screen which we can as a reusable component.

4) Change a visual tag – using this option, we can change the tag color of each screen as per the rules and regulations decided by you.

So let’s create a basic layout for our example ‘Online Shopee’. For this, we will create a couple of connected screens which will show a complete navigation of our application.

Step 4: First rename our ‘Screen 1’ to ‘WelCome’. Then click on ‘Create a connected screen option’ and drag it to our ‘SketchFlow map’ as shown below –

Now rename this screen as ‘Main Page’. Let’s design a couple of more screens as shown below –

Once you are done with all the connected screens as shown above, let’s observe our Project explorer and see what changes are made in that –

If you see the second project ‘OnLineShopeeProtoTypeScreens’, all the screens which we have created in ‘SketchFlow Map’ got created as .XAML with their code file .XAML.cs.

Now if you observe the ‘Sketch.Flow’ file, it will contain all the details of all the screens which we have created till date.

Step 5: So let’s start designing few screens from our project ‘OnLineShopee’. First we will design a ‘Wel Come’ Screen. To do this, double click on the ‘Wel Come’ Screen and change it’s background color as per our requirement. Now we will use few controls to make our screen look better.

For this we are not going to use the regular Silverlight controls. Rather we will use the Silverlight SketchFlow controls. These controls are existing controls which are styled to show the screens as sketched screens, similar to something that we do using a pencil.

To use SketchFlow styled controls, go to ‘Assets Window’ and choose ‘SketchFlow’ > Styles > SketchFlow Styles as shown below:

This will now show you all the SketchFlow controls. Let’s use some of the controls from it as described below :

1) Title Center – Sketch.

2) Hyperlink Button – Sketch.

Your screen should look similar to the following:

Step 6: Now right click the ‘Hyperlink button’ and choose an option from context menu ‘Navigate To’ > ‘Main Page’.

Now let’s go and design a ‘Main Page’ which will have a navigation menu from where we should be able to access all the other screens. So double click the ‘Main Page’ and add a few SketchFlow controls as described below:

1) Rectangle – Sketch.

2) Button – Sketch.

Your menu should look like this:

Step 7: Now go to ‘Object and TimeLine’ window and select the rectangle and button by pressing control key and right click. From the context menu, make a choice of ‘Make into Component Screen’. It will pop-up a dialog box where we will have to give a name to our component screen as shown below – so name it as ‘Main Menu’.

Now if you observe the ‘SketchFlow Map’ window, you will see the ‘Main Menu’ (In Green Visual Tag) as a separate page which is reusable. So let’s mouse hover the ‘Main Menu’ screen and make a choice of ‘Insert Component Screen’ and drag it to other windows as shown below –

Now if you open and observe the ‘Product Categories’, ‘Company Profile’, ‘Payment Options’, ‘Discounted Products’ screens, you will find that our ‘Main Menu’ is available on each screen. Align the menu on top of each screen.

Step 8: Now open ‘Main Menu’ screen by double clicking it. Right click on the ‘Main Page’ button and from the context menu, make a choice of ‘Navigate To’ > ‘Main Page’ option as shown below:

This will link the screen to the button. When you run the application and click the button, the appropriate screen will open. Repeat this step for all the buttons to connect to their respective screens.

Step 9: Now let’s add few products to our ‘Product Category’ Page. For this we need some data. But as we are at a prototyping stage, we will not be having any data with us. But don’t worry. Microsoft Expression Blend has a new feature which provides us dummy data. By using this dummy data, we can visualize the screen.

So let’s open the ‘Product Category’ page and add SketchFlow control as described below –

1) BasicTextBlock – Sketch

2) Combobox – Sketch.

3) Listbox – Sketch.

Now let’s design some basic data from Expression Blend. For this go to Windows Menu > Data. This will open a ‘Data’ window which has an option for creating a ‘Sample Data’ as shown below –

As you click on ‘Create Sample data’ option, it shows you three different options as described below –

1) New Sample Data – It will create a sample data with properties.

2) Import Sample data from XML – this will import sample data from XML file.

3) Create Sample Data from Class – if you have a class with you, it will create a sample data from that class.

Step 10: For this demonstration, we will create a ‘New Sample data’. So click on New Sample data. This screen will ask you to give a name for the New sample data and scope of the data. Give a name as ‘Categories’ and click ‘OK’ button by keeping all the default options. Now if you see the ‘Data’ window, under categories it will show you ‘Collection’ with ‘Property1’ and ‘Property2’.

Remove ‘Property2’ and rename ‘Property1’ by ‘ProductCategories’ as shown below –

If you observe the ‘ProductCategory’ by clicking a drop box near to it, the data type of the property is string. You can change the data type as well as the format of the data. For example, I want ‘Time’ or ‘Address’ or ‘Email Address’ etc.

Now let’s create one more sample data in which we will create three properties as described below –

1) ProductName.

2) Price.

3) ProductPicture.

Step 11: Repeat the above steps to create a New Sample data and name it as ‘ProductInformation’. After that, add a new property and change the data type of ‘Price’ property to ‘Number’ size – 4 and ‘ProductPricture’ property to ‘Image’. When you make a data type Image, the tool will ask you to browse the folder where you have kept all the product images. For this demo, we will use the default images as shown below –

Now drag and drop the collection from ‘ProductCategory’ to our ‘Combobox’. Then drag and drop collection from ‘ProductInformation’ to the ‘Listbox’. Now if you observe, the list is displaying the data as shown below –

Pretty slick! So let’s run our application by pressing ‘F5’ button. Your application will get loaded with ‘SketchFlow Player’ as shown below –

Step 12: Now if you observe, the most important part in the above image is the ‘SketchFlow Player’. It contains the following –

1) Navigate – this option allows us to navigate the linked pages in our prototype.

2) MAP – shows the complete structure of the project which we have built using SketchFlow Map. In short, it will show you a complete ‘SketchFlow Map’.

3) My Feedback – you can use this feature to give a feedback on each screen. Once your feedback is done, you can export the same to the designer in the form of a file.

SketchFlow Player Navigate

So let’s see each of these options one by one. Let’s start with ‘Navigation’. This option allows us to navigate through all the screens which we have designed during the prototyping, except the component screen, as it is a reusable component. Navigation can be done as shown below –

SketchFlow Player MAP

Let’s see how the SketchFlow Map looks on a browser –

SketchFlow Player Feedback

Now let’s have a look at the feedback option. Under ‘My Feedback’ you can perform four major different operations, as described below –

1) Enable Ink Feedback – enables ink feedback which you can use to mark the parts of the screen and write comments on the same.

2) Enable Highlighter Feedback – enables highlighter feedback.

3) Erase Ink Feedback – can be used to erase the ink feedbacks which you give on screens.

4) Export Feedback – will export the feedback in a file, which can be sent to the designer. The designer can open that file in Blend and work on the feedback as required.

You can even show or hide the ink feedback. You can also clear the feedback.

Let’s have a look how all these things can be done as shown below –

After the feedback is given on the screen, your screen will look similar to the following –

Now let’s export the feedback and open it in Blend. To do this, click on Export Feedback option as shown in above figure. It will ask you for the author name and initials. Now save your feedback on your local drive.

Once you are done, go to the Bblend project - that is ‘OnlineShopeeProtoType’. From the ‘Window’ menu > click on ‘SketchFlow Feed’ submenu. Now browse your feedback file which we just saved on our local drive, as shown below –

If you see the screen, you will find the ink and highlighted feedback, as well as you will also see the comments of the author with revision. If you have given feedback on multiple screens, then you can open ‘SketchFlow Map’ and on the screens where author has given the comments, you will see a bulb icon as shown below –

Prototype Documentation

Now the last thing is to create documentation on our prototype. Microsoft has made our life much simpler in terms of documentation. How? Let’s see.

Go to File Menu and choose an option ‘Export to Microsoft Word’ as shown below –

Export your feedback and open the work file. You will be surprised!!

In this article, I have not shown the following –

1) SketchFlow Animation.

2) Creating Visual States and managing these states on the events.

3) Changing the templates of the controls as per our requirements.

4) And a couple of other features.

Conclusion

In this article, we have seen how to create a deep dive prototype for your product using Microsoft Expression Blend 4.0. We started with a small application in which we created screens, navigations, sample data, different SketchFlow controls, SketchFlow Map, used the SketchFlow Player, enabled feedbacks, exported feedback and opened it back again in Blend. At the end, we saw how to create a document on the SketchFlow Prototype.

The entire source code of this article (7 MB) can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar[attherate]gmail[dot]com


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by j3b on Wednesday, March 9, 2011 10:46 PM
brilliant brilliant walkthrough! Plz Next I want to read on - Creating Visual States and managing these states on the events
Comment posted by Pravinkumar on Wednesday, March 9, 2011 11:34 PM
Hi j3b,

Thank you for your comments. I will surly come up with Visual States and managing these states on the events.
Comment posted by Mikael Javöndre on Thursday, March 10, 2011 10:28 AM
I am excited to learn about the sketchflow tool. I was curious to know if I can use this tool directly from Visual Studio?
Comment posted by Pravinkumar on Thursday, March 10, 2011 11:38 PM
Hi Mikael,

As I understood your question, you want to design prototype using Visual Studio. No, you can not do that.

However, once your prototype is approved by your customer/stakeholders, you can edit the sketchflow project in Visual Studio. Because it is a standard visual studio project.
Pls correct me if I have not understood you question correctly.
Comment posted by Sumit on Friday, March 11, 2011 9:52 AM
Hi Pravin,

Perfect timing on the article. I was trying to make sense out of Blend while creating my first design using it. This article serves as an excellent starting point.

Cheers,
Sumit.
Comment posted by Sumit on Saturday, March 12, 2011 2:52 AM
Hi Pravin,

Perfect timing on the article. I was trying to make sense out of Blend while creating my first design using it. This article serves as an excellent starting point.

Cheers,
Sumit.
Comment posted by Mikael Javöndre on Monday, March 14, 2011 11:07 AM
Ok thanks. Is there a way to localize these sketch flows? So my clients in US see it in English, and the ones in Spain see it in Spanish?
Comment posted by Pravinkumar on Monday, March 21, 2011 4:25 AM
Thank you Sumit !!
Comment posted by naga bhushanam on Friday, August 16, 2013 9:01 AM
It was nice article to know basic knowledge for the Silverlight Sketch flow application.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel