Prototyping Windows Phone 7 Applications using SketchFlow

 

I should actually say “Prototyping Windows Phone 7 / 7.1 Applications using SketchFlow” since let it be ver. 7 or 7.1, The way we are going to do prototyping will remain the same.

What is Prototyping and SketchFlow and why to use that? :

Those hardcore developers who are not involved in Designing phase of application usually not much aware of Prototyping and SketchFlow and power of both.Like we see Movie Trailer before actual Movie comes to Cinema Hall, There we get glimpse of Movie and what it will be all about. On the same line, SketchFlow which is the new way of doing Prototypes using Microsoft Expression Blend give glimpse of your application and how it will look like. So being a developer question may come to your mind that why we should use this? Well to answer you, I have already done a series on Prototyping and SketchFlow for Silverlight in past, Those articles will give you more better idea about these,so take some time out and visit those articles as well, you can find them below :

Part 1:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketch-flow-new-era.html

Part 2:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketchflow-new-era.html

Part 3:

http://pendsevikram.blogspot.com/2009/11/expression-blend-3-sketchflow-new-era.html

SketchFlow for Windows Phone :

When you install Expression Blend Designer for Windows Phone or Expression Blend in general you will not get any special or additional Project Template for SketchFlow which you usually get for Silverlight. So I am using the SketchFlow Project Template published on Codeplex site here :

http://wp7sketchflow.codeplex.com/

Creating SketchFlow for your Windows Phone Application :

After installing you will find Windows Phone SketchFlow Project Template inside your Microsoft Expression Blend 4 instance like this :

Once you select this template, Then your design works start,To start with, You can pick few Mockups from Mockup option and also can make use of Controls in sketchflow like this :

For my demo, I am making use of Pivot Control and Pivot Item, you can always connect multiple screens to each other and navigate between them. Designer will look like this :

Once I took Pivot it was looking like this :

If you have multiple screens, you can always track them with the help of SketchFlow Map given with Expression Blend 4 SketchFlow,It will help you to give Macro view of your Design / Prototype, It looks like :

Once you are done with the Design you can Press F5 and Run that in Browser and it will look like this in your Browser :

Inside that, you have various options like Map,Feedback etc. You can give feedback like this :

If above things I mentioned looks difficult for you to understand, Take a look at 5 mins Video below which I have recorded via Microsoft Expression Encoder Screen Capture Utility (Check this post which will guide you how to use that utility)

Using SketchFlow for Windows Phone by Vikram Pendse–MVP Silverlight

The beauty of SketchFlow is that it allows you to export your project as “Word Document” So for that all you need to do is go to File->Export to MS Word option and you are done ! The word document generated by SketchFlow looks like this :

Well, That all today from me, Hope you like this post and I am sure you will try this out and make best use of the same in your Windows Phone 7 Projects. I am going for weekend Bike Ride and will back from there with great ideas for upcoming posts, Till that time you guys enjoy and try this out,See you soon.

Vikram.