Expression Blend 3 Sketch Flow : New era in Prototyping … – Part 1

First of all, wishing my all blog readers a very Happy Diwali and wonderful year ahead ! Now its almost a month since I am writing something here, I was totally occupied with Community sessions for last two months, now got some time finally to be here with you all again !

Expression Blend 3 is nothing new for us, I have already talking about it since it was in Preview stage at the time of MIX09 around months of March, you can find more here :

http://pendsevikram.blogspot.com/2009/03/silverlight-3-explore-power-of-blend-3.html

Indian Software giant Infosys also made note of this article and they refer on their blog too : (Thanks Infosys !)

http://www.infosysblogs.com/microsoft/2009/03/blend_3_and_sl_3_preview_avail.html

Today, I am going to talk more on Blend 3 Sketch Flow feature which I never touch in past over here. Offcourse there are several resources on net available on Sketch Flow, but as usual here I will make it simple and straight for you without any confusing technical terms and also I will share right resources on net to refer.

To start Expression Blend 3 Sketch Flow, It is very important to first understand “Why you need Sketch Flow?”, This question may be already there in your mind,let me give you pictorial view of Design-Developer Application Cycle to make my point in front of you :

(Picture taken from http://lore.ua.ac.be/Teaching/SE3BAC/SoftwareSpecCartoon.gif   for just example purpose, it carries its respective copyright to its owner)

Well ! Above picture tell us that there is something went wrong in cycle. In above case, we will focus more on Designer and Developer part. Most of the time we have Best Industry designers with us and Best Industry Application Developers with us, but if there is no flow or smooth communication among them and their work, above things are common observations.

Microsoft as usual took lead to bring down the gap among Designer and Developers and they came up with Expression Blend, We all know now, how Blend and Visual Studio are tightly integrated, You do something there in Blend, you can see changes in Visual Studio and vice-versa.

For Designers, there is always challenge to build interactive prototypes for customers so as to give feel of application to customer in reality, Typically before tools like Blend Sketch Flow, we use to either build POCs (Again we need to put Man efforts in this activity) or we use to build designs in Excel or word, Drawback of this was, it does not helps to exactly put forth our point in front of client since they might not be that interactive and realistic which can give feel of application which we plan to build. Outcome of this is something like the picture above I have shown, You design something, Due to lack of awareness or right tools, something different gets designed and output is totally different than required !

Let me introduce Expression Blend 3 Sketch Flow which will give solution to all above concerns we raised above. All you need is to grab bits of Expression Blend 3 with Sketch Flow which you can find on Expression portal (Do you need url ?)

Once you install, it will show you following templates :

Now you need to choose “Silverlight 3 SketchFlow Application” template along with your language choice. Then you can see following things :

1. SketchFlow Map :

2. SketchFlow Animation :

3. Main Designer Window :

So, these are the three main blocks we need to look into more seriously as far as our prototyping is concern. By default you will get one screen and to add rest of it, you can do it via traditional way of adding new xaml pages or you can now take help of Sketch Flow map here like this :

You can see highlighted menu there above, each icon have its own meaning, let’s see one by one :

This is for to “Create a Connected Screen”, A New Screen which you can then further connect with the existing screen.

This is for “Connect to existing Screen”, All you need is to just drag-drop the arrow to the target screen to associate. It will represent connection by means of unidirectional blue color arrow.

This is for “Create and Insert a Component Screen”, Another good feature where you can add particular component which you feel is potential in your design workflow.

This is “Change Visual Tag” and very useful to highlight particular screen with some colors, This is given so as to set the priority screens or to highlight important screens or screen with important or same functionality etc. There is no generic guideline for this, however its purely matter of choice of designer !, Available colors are :

Now we are all set to design our prototype screens, So now its time to hunt for Controls, A normal way is we go to either toolbox or do it via XAML or take help of Asset Manager. Let me share this with you, for Sketch Flow, you have a set of unique Sketch Flow Controls which are similar to your traditional Silverlight Controls, Only difference is that they are especially made different as far as appearance is concerned and they look like someone drawn them with Pencil, Pencil shade looks to each control. Since we are building prototype (Which may turn into final design once client approved), it is good to go for Sketch Flow controls.

Point to be noted here is, Sketch Flow controls can have styles and effects like your other controls and last but not least, you can even write the corresponding C#/VB.NET code with them. So now go to Assets Tab and check for Sketch Controls like this :

Note that each control is having extension as “-Sketch”, This is how you can differentiate among normal controls and sketch controls. Now all you need is just drag drop them on your designer and you are good to go !, Well you need to have Microsoft.Expression.Prototyping.SketchControls.dll on your system which you will get once you install Blend 3 Sketch Flow. If you are not able to see the controls for Sketch Flow, you can refer this thread which I started when I was stuck in early preview stages of Blend 3 Sketch Flow(http://social.expression.microsoft.com/Forums/en-US/blend/thread/5babede8-9cf6-4e1f-b968-1576cebb3e88), If that don’t help you, you can post your query on Expression forums and you will get support there by lot of expertise from Microsoft and from other experts.

Well now once you drag-drop controls on designers, then you may have questions like what to do next? Simple answer is just wait for one more day for my Part 2 article where I will cover how navigation works,what all things you can do,how to run this etc and in Part 2 or maybe even in Part 3, I will talk about exporting features, Documentation Features and much more ..so be here everyday to see more insightful visit of Blend 3 Sketch Flow.

I hope you like this Part 1 and it will help you to start your prototype work, Offcourse your designs will be way good than me since I am developer Silverlight MVP and have very average design sense :) ..but still I am sure in coming parts of this article, I will give you some very good inputs which will help you for months to come ahead.(The way Microsoft coming with its versions, I guess “Months” is a perfect word !!)

Do let me know your feedback and be ready for more in Part 2 and ahead..

Vikram.