Sunday, November 1, 2009

Expression Blend 3 SketchFlow : New era in Prototyping – Part 3

First of all sorry for delay in posting this last part of this series which is quick wrap up of first two, I was under heavy work load and rest of the time went into Windows 7 Party preparation which will be around next weekend.

In last part, we saw various aspects of SketchFlow and how we can improve our design with the SketchFlow controls, How we can program it and make it more real, We also saw how we can render that inside browser and navigate among various pages, Lastly we saw how we can give feedback with Ink tool provided to us and how it empower us to give correct feedback, We even went ahead and store feedback of that last example in a separate feedback file.

Now lets open that feedback file by going to Project->Add Existing Item.. Once you load that file you will see a Lamp kind of symbol inside Sketch Map and once you get your mouse pointer there, you will see the feedback available,Also you will see the corresponding feedback in your designer too like this :

feedback

loginfeedback

So, once we import this particular feedback file, Designer will be able to see the changes and what all things he/she need to improve in the same. This is how its very interactive for Designers,Developers as well as to Clients/End Users who give feedback.

What add cherry on the cake kind of thing is the feature introduced by Microsoft to import your Adobe Photoshop and Illustrator work inside blend and on top of that, You can scan images and make your design(Do refer videos shown on Virtual Kitchen), You can also import your PowerPoint work inside blend, So for these all you need is to visit File menu and you will get following options :

imports

Note that, for PowerPoint, there is no assurance that Animations inside PPT will work on Silverlight, This is a twist and there was lot many discussions went into community to have PPT with Animations directly exporting to Silverlight. Well, A paid solution is there, Check this out :

http://www.erain.com/products/convexion/default.asp?erain=cnvannc

Another question may come to your mind that, till this part of this article, I am talking all the scenarios happening on local machine, But how will one export that? A simple way to export this SketchFlow is just go to file Menu and choose “Package SketchFlow Project…” you will get following output :

export

Yes ! everything will be exported as a proper package and a TestPage is in place to check out.

Now for my designer friends, there is always a lot of pain to prepare documents and put these screens inside as specs, No wonder lot of efforts take place and time also get waste in that most of the time. But thanks to Microsoft who coming with new revolution in Blend and yes ! now you can create documentation of your design work. All you need is just save your work and go to File Menu-> “Export to Microsoft Word…” and see the magic ! :

doc1

doc2

doc3

Point to make a note here is that, if you open feedback file and export this to Word, you will not find the feedback reflected, So its a general export of your actual screen with a neat layout and schema in form of Microsoft Word Document (PDF?? well you need to take pain for that to export from doc/docx to PDF :) )

Well this was all about SketchFlow inputs I want to share with you and I am very sure this will help you a lot to move ahead in your prototype development, maybe in coming future I will try to build and demonstrate an end-to-end application via SketchFlow.

Meanwhile there is a must have book for SketchFlow which is a great refer which you can find it here :

http://www.dynamic-prototyping.com/

Another good resource you can find on my blogroll, Blog by Renuka Prasad, A fellow MVP in India and good friend of mine who have made some posts on Expression Blend SketchFlow, Check those too.

Thanks for your feedback and mails, I will soon back here with Silverlight and much more things.

Vikram.

5 comments:

Tejaswini said...

Hi Vikram,
thanks for such good explanation on MS Expression + SketchFlow.
I've decided to use SketchFlow for making prototype (WPF) of my new project.
I'm stuck up with following queries
1. Can we use third party active X controls is SketchFlow while making interactive prototype?
2. I added one control from Infragistics as a reference, but it gave build errors.
Please guide me,
Thanks in advance,

Tejaswini

Vikram Pendse said...

Hello Tejaswini,

Thanks for your comments.

Regarding your query on adding third party controls to Blend, Well, Yes, Blend do allows third party controls to add, You can refer this particular article where they have demonstrated it in pictorial way,Check : http://www.developer.com/net/article.php/10916_3851621_2/Rapid-UI-Prototyping-with-Microsoft-Expression-Blend-3.htm

Hope this will help you.

Vikram.

Tejaswini said...

Thanks a lot Vikram.
I'll check that link. sorry for dealy in reply.

Tejaswini

Tejaswini said...

Thanks a lot Vikram.
Sorry for delay in reply.
I'll check the link for using 3rd party controls in SketchFlow.

Tejaswini

prasad said...

Thank Vikram for refering

Renuka Prasad