SilverlightShow: Silverlight Community http://www.silverlightshow.net/ Silverlight articles, Silverlight tutorials, Silverlight videos, Silverlight samples SilverlightShow.net http://www.rssboard.org/rss-specification Argotic Syndication Framework 2008.0.2.0, http://www.codeplex.com/Argotic en-US estoychev@completit.com (Emil Stoychev) SketchFlow from a developer point of view - Part II - Dev Stuff <div style="padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; padding-top: 5px;border: #dddddd 1px solid;"> <h3>More on this topic..</h3> <ul style="list-style-type: circle; margin: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/shows/SilverlightShow-Webinar-Sketchflow-in-Real-Scenarios-by-Braulio-Diez.aspx">SketchFlow webinar by Braulio Diez</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Sketching-and-Prototyping-with-Blend-3.aspx">Sketching and Prototyping with Blend 3</a> </li> </ul> </div> <p>This article is Part 2 of the series Sketchflow from a developer point of view.</p> <h2>Intro</h2> <p><em></em>In the first part of this article we learnt why was so important to add to our lifecycle a quick and dirty prototyping stage, and learnt as well how to perform that basic sketch prototyping using Sketchflow. </p> <p>So far so good… till now the sensation you can have can be something like: <em>Ok, Sketchflow is just another prototyping tool</em>… <em></em>in this second part of the series we are going to check what makes Sketchflow an advanced prototyping tool: sketching some static images or canned / styled controls with some basic navigation is not bad but not good enough !! We need to validate with the client animations, gestures, behaviors…. remember from the lessons learned and the final client feedback  we pointed out on our previous article:</p> <ul> <li><em>That simple let the user drag a product from the list and drop it into his check out list, turned to be a 3D animation including surround effects, I know it’s our fault, for sure you clearly defined that at project startup when we were drinking beers in that noisy pub.</em> </li> <li><em>The user was not happy with the sketched coverflow control, he wanted to check how does it really worked.</em> </li> </ul> <p>Let’s start exploring the features that makes Sketchflow a unique prototyping tool.</p> <h2>Step 4: What about special animations</h2> <p>Defining mockups and navigation is quite important but another source of problems can be defining certain animations or behaviors.</p> <p><span style="text-decoration: underline;">Animations:</span> Sketchflow has an easy to use and powerful animation window, it lets you define frames and change in each frame properties of controls (e.g. opacity, position, ...), it performs as well interpolation between the frames to allow you create smooth animations without having to define a big bunch of interim steps (e.g. you can place a rectangle at position 0,0 at frame zero, and move it to position 100,0 at frame one, if you click to play, it will perform an smooth animation, moving: 0,0 1,0 2,0… 100,0).</p> <p>About our sample let’s see how to create an animation (opacity full to none) to display an Administration menu:</p> <p><a href="http://www.silverlightshow.net/shows/Creating-Animations-resolution-640.aspx" target="_blank">Video Creating Animations (low)</a></p> <p><a href="http://www.silverlightshow.net/shows/Creating-Animations-resolution-1024.aspx" target="_blank">Video Creating Animations (high)</a></p> <p><a href="http://www.silverlightshow.net/Storage/Sources/05Animations.zip" target="_blank">Sample Creating Animations</a></p> <h2>Step 5: Uh ! Do you want to see how does it work with a real custom control?</h2> <p>Let’s now refresh a bit our mind, we got some feedback from our client about the members coverflow sketched window:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/brauliodiez/CoverflowSmall_2.jpg"><img width="322" height="220" title="CoverflowSmall" style="display: block; float: none; margin-left: auto; margin-right: auto;border: 0px;" alt="CoverflowSmall" src="http://www.silverlightshow.net/Storage/Users/brauliodiez/CoverflowSmall_thumb.jpg" /></a> </p> <p>The client is not happy with that, we need to provide something that could provide a  similar experience to the real app and sign off the behavior of that control: mouse gestures, animations… But how can we achieve this task? Good news is that a Sketchflow solution is a Silverlight app, so we can add DLL’s references (our own controls or third parties ones, or…).</p> <p>In this case we have found an excellent coverflow control in <strong>C</strong>odeplex, let’s see how we can integrate it and add test data:</p> <p><a href="http://www.silverlightshow.net/shows/Adding-custom-controls-plus-simple-data-binding-resolution-640.aspx" target="_blank">Video Custom control plus sample data (low)</a> </p> <p><a href="http://www.silverlightshow.net/shows/Adding-custom-controls-plus-simple-data-binding-resolution-1024.aspx" target="_blank">Video Custom control plus sample data (high)</a></p> <p><a href="http://www.silverlightshow.net/Storage/Sources/06RealControlsPlusSampleData.zip" target="_blank">Sample Custom control plus sample data</a></p> <p>After reviewing the control with the client, he asks us to implement an additional mouse gesture: let the carrousel photos to be moved by dragging and dropping with the mouse. After this we ask…<em>Any other additional gesture you need? No? Sure? Really Sure? … Ok, let’s sign off this requirement.</em></p> <p>Before jumping into the next topic just a warning, be careful using this “real control” approach, if you abuse of this option, you can fall into:</p> <ul> <li>Loosing prototyping speed, not a good idea (finally you can end up more coding than prototyping). </li> <li>User will tend to think that the project is almost done (<em>press click the on the “setup my data and validations there” button</em>). </li> </ul> <h2>Step 6: Test Data plus Behaviors</h2> <p>Today our client comes with a concern… <em>Where is my send a message page?</em> Ehh ummm… after reviewing the sketches and the prototype versions we sent by mail and he agreed / signed, he realizes that … <em>Ouch sorry I forgot to mention that we need that page, what can we do? </em>What we answer<em> No prob, probably is a great functionality what you want to add, we are going to go through requirements gathering, build a quick prototype page and once agreed impact the cost of this change request.</em></p> <p>We build a quick prototype using sketched styles control, but this time: </p> <ul> <li>We want to let the user browse real test data. </li> <li>We want the user to be able to perform a drag and drop operation. </li> </ul> <p>Now we are going to check how to add a custom behavior to our page, in this case we are going to have a page that let us send a message to some members of the community, we are going to show two lists the full list of members and the <em>To</em> list, we will allow the user to  drag from one list to the other:</p> <p><a href="http://www.silverlightshow.net/shows/Custom-Behaviors-plus-ObjectDataSource-creation-resolution-640.aspx" target="_blank">Video ObjectDataSource plus Behaviors (low)</a> </p> <p><a href="http://www.silverlightshow.net/shows/Custom-Behaviors-plus-ObjectDataSource-creation-resolution-1024.aspx" target="_blank">Video ObjectDataSource plus Behaviors (high)</a></p> <p><a href="http://www.silverlightshow.net/Storage/Sources/07DragAndDrop.zip" target="_blank">Sample ObjectDataSource plus Behaviors</a></p> <p>After reviewing the prototyped page, and realizing that the change request means more budget + timeline, the client decides to postpone the implementation of this “important” functionality to a later release, no more <em>Hey dude add a cool transition and a new page it’s just a 5 minutes tasks isn’t it?</em></p> <h2>Step 7: Do we agree? Let’s sign off a formal document</h2> <p>Lot of discussions with the client Emails back and forth with the prototype and feedback, but finally we’ve got client and developer on the same page, yahoo!!</p> <p>It’s time to sign off some formal document, to refresh in the future:<em> </em></p> <ul> <li>The client’s mind… whenever he has some brilliant idea. Usually clients change their mind every week… but when they have to pay some additional money once per month ;-). </li> <li>Our developers mind… when we realize something is a bit difficult we are tempted to say… <em>why not implement that in another way</em>, in our case this temptation gets higher and higher the sooner we are to the release date… </li> </ul> <p>Well let’s start this doc from scratch … but wait, Sketchflow can provide us with the barebones structure, let’s see how it works:</p> <p><a href="http://www.silverlightshow.net/shows/Generating-Documentation-resolution-640.aspx" target="_blank">Video Generating Documentation (low)</a> </p> <p><a href="http://www.silverlightshow.net/shows/Generating-Documentation-resolution-1024.aspx" target="_blank">Video Generating Documentation (high)</a></p> <h2>Step 8: From Sketchflow to production</h2> <p>Ok, so finally seems that this time we have got clear requirements, even we have a live prototype!</p> <p>Now comes the one million dollar question… <em>if the prototype that we have created is a Silverlight App, why not take it as a base solution for our real implementation?</em> The answer is NOOOOOOOOOOOOOOOOOO !!! and reasons why:</p> <ul> <li>Prototyping is based on a quick and dirty process, the main goal is to capture client’s requirements, if we want to create a real application we should start from scratch setting up strong pillars. </li> <li>Although we could reuse the XAML layout (sketched styled controls can be changed to normal ones), is not a good idea to do it so, we have created this UI just by dragging and dropping (playing with margin property), this means, the layout itself is weak, no grids, no reposition on resize, inserting new controls will become a dirty work… on the other hand Sketchflow allows us to create complex layouts but then we would loose speed building the prototypes. </li> </ul> <p>More details about this topic in this <a href="http://www.arrangeactassert.com/how-to-convert-a-sketchflow-prototype-into-a-production-application/" target="_blank">link</a>.</p> <p>If any way you want to give a try, you can review this articles / posts:</p> <ul> <li><a href="http://msdn.microsoft.com/en-us/library/ee371158%28Expression.30%29.aspx" target="_blank">Convert a prototype into a production project (WPF and Silverlight)</a> </li> <li><a href="http://www.infosysblogs.com/microsoft/2010/01/sketchflow_to_production.html" target="_blank">Sketchflow to production</a> </li> </ul> <p><em>But… is there something I can reuse?</em> Well… you can:</p> <ul> <li>Place a folder for shared assemblies, styles, behaviors, that you can use in your real project as well. </li> <li>Create assemblies for entities and viewmodels (remember the objectDataSource sample we saw before), for sure this code will need some refactoring in the real app, but it can be a good startup. This approach can be quite useful to create a prototype with real validations. </li> </ul> <h2>Step 9: What about other tools? </h2> <p>Yes, prototyping tools is not something that Microsoft has recently invented, you can find other tools out there in the market:</p> <ul> <li><a href="http://office.microsoft.com/en-us/visio/">Visio:</a> <ul> <li>Very easy to use. </li> <li>Very limited. </li> <li>Just ok for static mocks. </li> <li>Who hasn’t Visio installed in their machines? </li> </ul> </li> <li><a href="http://www.balsamiq.com/">Balsamiq:</a> <ul> <li>High level of usability. </li> <li>Very simple. </li> <li>Multiplatform. </li> <li>Trial version available, commercial version about 79 $. </li> <li>Lack of master page / component concept. </li> <li>Lack of animations / behaviors / interactions (you just generate a PNG). </li> </ul> </li> <li><a href="http://www.axure.com/">Axure</a>: <ul> <li>A bit more complex than balsamiq. </li> <li>Includes the concept of master page. </li> <li>Allow some interaction / custom actions. </li> <li>Generates a HTML prototype. </li> <li>Trial version available, commercial version about 589 $. </li> </ul> </li> <li><a href="http://www.foreui.com/">foreUI</a> <ul> <li>In a similar line as Axure. </li> <li>Trial version available, commercial version about 99 $. </li> </ul> </li> <li><a href="http://www.guimags.com/">GuiMags</a> <ul> <li>Interesting approach sketch your screens using a physical white boards plus GUI mags. </li> </ul> </li> </ul> <p>One common topic that Sketchflow has and these tools not is that Sketchflow is targeted for Silverlight / WPF apps.</p> <p><em>Which one to choose?</em> depends on your prototyping needs, it’s worth to give a try and decide by yourself. In my case I’m a Silverlight geek, and I need to close with the client more than mockups, avoiding nasty surprises one week before going live is a high priority risk I have to mitigate the sooner the better.</p> <h2>Summary</h2> <p>In this article we have learned how important is to build prototypes at early stages of a project life cycle, and what powerful tools offers to us Expression Blend Sketchflow. Let’s summarized what we have learned:</p> <ul> <li>Sketchflow provide us with a quick and dirty way to build a prototype using just hand drawn sketches. </li> <li>We learn How to build a page by using sketched controls and reusable components. </li> <li>How to simulate complex interactions (animations, behaviors…). </li> <li>How to add real data to our prototype. </li> <li>How to integrate custom controls. </li> <li>Which other tools are available in the market and why Sketchflow can be the recommended one for Silverlight / WPF targeted developments. </li> </ul> http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-Part-II-Dev-Stuff.aspx editorial@silverlightshow.net (Braulio Diez ) http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-Part-II-Dev-Stuff.aspx#comments http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-Part-II-Dev-Stuff.aspx Fri, 13 Aug 2010 08:52:00 GMT SketchFlow from a developer point of view - Part I - Basics <div style="padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; padding-top: 5px;border: #dddddd 1px solid;"> <h3>More on this topic..</h3> <ul style="list-style-type: circle; margin: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/shows/SilverlightShow-Webinar-Sketchflow-in-Real-Scenarios-by-Braulio-Diez.aspx">SketchFlow webinar by Braulio Diez</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Sketching-and-Prototyping-with-Blend-3.aspx">Sketching and Prototyping with Blend 3</a> </li> </ul> </div> <p>This article is Part 1 of the series Sketchflow from a developer point of view.</p> <h2>Introduction</h2> <p>Sketchflow is a great tool for prototyping, that’s great for designers, but… for developers? of course !!! </p> <p>In this article we are going to step through Sketchflow functionality from the point of view of a developer.</p> <p>To check how Sketchflow works we will: </p> <ul> <li>Simulate the startup of simple project: a  local community web site, that will hold news / events / members plus and admin area. </li> <li>Insert video snippets in between the article to show how to perform certain operations using Sketchflow. </li> </ul> <h2>Why should I care?</h2> <p>I’m a developer… and I have near zero capacity of being a designer (well I can be a copy ideas from some cool websites), when I watch any webcast about Expression Sketchflow I just see “black T-Shirt guys” drawing and playing around layers, animations, nice bitmaps… what all this has to do with me? Well the answer is… more than you have ever thought.</p> <p>All starts in the requirements gathering stage, somebody just meets with you or with a “vendor” / “commercial guy” / “functional expert whatever”, then the client give you some vague requirements and all the fun begins… you as a developer understand one thing, the client another, and of course client’s mind will change in time, something like:</p> <ul> <li>The client asked for a good cheap car. </li> <li>You started building a family car. </li> <li>The client ends up saying that he wanted an sports cars, is not that a good cheap car? </li> </ul> <p>  Something that we developers have to keep in mind from day zero:</p> <ul> <li>We need a way to clearly show a customer what we have understood, and validate with him the requirements. </li> <li>We need a way to detect a serious change in the app before is too late. </li> <li>This validation / prototyping has to involve us in a fast process (days, weeks), but let the developer and client have a concise idea of the project they are talking. </li> <li>The client becomes a member of the team and has to constantly review new versions of the prototype and provide feedback. </li> </ul> <p>Summarizing we need a tool that will let a client differentiate between an <strong><span style="color: #ff0000;">ISSUE</span></strong> and a <strong><span style="color: #008000;">CHANGE REQUEST</span></strong>:</p> <ul> <li><strong><span style="color: #ff0000;">ISSUE:</span></strong> something you, developer, have misunderstood, <span style="text-decoration: underline;">you will implement it for free and the client will kick your…  :-(</span>. </li> <li><strong><span style="color: #008000;">CHANGE REQUEST:</span> </strong>something that the clients realizes that was not in the original development scope but he wants it, you will add it to the scope and impact it… this means <span style="text-decoration: underline;">is a new feature, you can ask for some additional budget and timeline to develop it :-)</span>. </li> </ul> <p>Sketchflow is the tool that will help you to cope with that areas at early project states.</p> <h2>Sketchflow what does it offer?</h2> <p>Sketchflow provides you a very quick & dirty way to build prototypes, it let’s you validate with the client in days something that could take you weeks or months using a traditional static prototyping stage + development.</p> <p>Main highlights:</p> <ul> <li>Drag & Drop interface. </li> <li>You can directly work with hand drawn sketches, or start dragging and dropping sketch controls. </li> <li>Sketchflow controls are low fidelity, this means users won’t think the project is almost done (<em>nice, can you deliver by next week?</em>) and they will focus on the important things not details like: <em>I want this button red and two pixels up</em>. </li> <li>You can define navigation, animations, behaviors. </li> <li>Add realistic sample data. </li> <li>Under the hood is a Silverlight project with it’s XAML and code behind, this means is highly customizable, for instnace.: Let’s say you want to let the user choose a complex third party control from several vendors, you can just add it to your prototype ! same if you want to code some specific functionality. </li> <li>You can package and send your prototype to your client, he only will need to have the Silverlight plugin to be installed to run it, and what’s best this tool includes a feedback mechanism that allows users the option of directly adding comments / draw some feedback figures and send it to you (even is possible to share it in a SharePoint site). </li> <li>Documentation generation: it can generate a formal document for the sign off of the prototype. </li> </ul> <h2>Step 0: Dear Client</h2> <p>Dear client, from our last project we have learned that: </p> <ul> <li>We didn’t understand well the sitemap you envisioned, the initial comment you make “<em>errr… ummm… no prob, figure out we can refine it later</em>” turn into <em>I want this page to be split into two, hey that’s not clear we need a new window… and we are one week before going live</em>, of course changes had to be done because it was critical for the business. </li> <li>That simple <em>let the user drag a product from the list and drop it into his check out list</em>, turned to be a <em>3D animation including surround effects</em>, I know it’s our fault, for sure you clearly define that at project startup when we were drinking beers in that noisy pub<em>.</em> </li> <li>Per your request we spend the first month of the project placing buttons in the exact right place, with the right color plus gradients, a pity that the product search page finally had a poor usability and we had to change completely the layout. </li> <li><em>(…)</em> </li> </ul> <p>We understand your frustration and apologize for the bad work, we are quite happy that you give us a second opportunity by starting a new project with us, this time we will try a new approach, we will add the following short prototyping stage:</p> <ul> <li>We will have an initial meeting where we are going to sketch how the application will be structured. </li> <li>Based on that sketches we will build a running prototype, then we will ask you to give the ok, and / or enter feedback in our prototyping tool (this feedback will be stored for the sake of traceability). </li> <li>Once you decide which screens need a more detailed design, we will update them, and again send you the prototype so you can evaluate and provide feedback. </li> <li>If you still don’t feel confident about how one of the pages would look in a real scenario, we can feed the page with real data (again, send prototype, validate, feedback, approve). </li> <li>Special animations / gestures / drag & drop operations will be implemented in the prototype, so you will be able to check them and give approval. </li> <li>If you still have doubts in some complex controls, we can just implement / try a third party one in the prototype and let you evaluate it and provide us feedback. </li> <li>Once all this steps are done, we will sign off the final version of the prototype plus a formal prototype document. </li> <li>Of course these requirements are not stone written, if later on you change your mind, no problem, we can estimate the change request, check the impact on budget and timeline. </li> </ul> <p>Below you can find a diagram showing the workflow we have defined:</p> <img width="644" height="375" title="workflow640" style="display: block; float: none; margin-left: auto; margin-right: auto;border: 0px solid;" alt="workflow640" src="http://www.silverlightshow.net/Storage/Users/brauliodiez/workflow640_thumb.png" /> <h2></h2> <h2>Step 1: Is that the navigation / site structure you want?</h2> <p>After the first meeting with our client, we know that he has a tight budget and wants to implement a simple community site, that will hold News, Events, and Members of the community, plus and administration module.Let’s sit down with the client and define the  sitemap and sketch (drawing with a physical paper / white board) each of the screens he wants to build, it could be something like (watch out developer trying to be a designer wannabe!):</p> <p><a href="http://www.silverlightshow.net/Storage/Users/brauliodiez/Screens640_2.png"><img width="644" height="479" title="Screens640" style="display: block; float: none; margin-left: auto; margin-right: auto;border: 0px solid;" alt="Screens640" src="http://www.silverlightshow.net/Storage/Users/brauliodiez/Screens640_thumb.png" /></a> </p> <p>Usually at this moment the client feels quite happy and asks us to start now the implementation of the full application, saying something like <em>in a month or so we will perform a quick review before going live</em>… right now we say… <em>NOOOOOOOOOOOOOOOOOOOOOOO, let me build up a quick prototype, you can play with, if you don’t find anything that need to be changed, that’s ok but remember once this stage has been passed any feedback from your side would mean change request (will cost you money).</em></p> <p>Let’s get started with Sketchflow, first we will create the project and sitemap:</p> <blockquote> <p><span style="color: #ff0000;"><a href="http://www.silverlightshow.net/shows/Creating-a-Sketchflow-project-resolution-640.aspx" target="_blank"><strong>Video Creating Sketchflow Project (low)</strong></a></span></p> <p><span style="color: #ff0000;"><a href="http://www.silverlightshow.net/shows/Creating-a-Sketchflow-project-resolution-1024.aspx" target="_blank"><strong>Video Creating Sketchflow Project (high)</strong></a></span></p> <p><a href="http://www.silverlightshow.net/Storage/Sources/00CreateProject.zip" target="_blank">Sample Project Creating Sketchflow Project</a></p> </blockquote> <p>Now we are going to add the sketched navigation menu into our application:</p> <blockquote> <p><span style="color: #ff0000;"><a href="http://www.silverlightshow.net/shows/Adding-navigation-to-our-Sketchflow-prototype-640-resolution.aspx" target="_blank"><strong>Video Adding Navigation (low)</strong></a></span></p> <p><span style="color: #ff0000;"><a href="http://www.silverlightshow.net/shows/Adding-navigation-to-our-Sketchflow-prototype-1024-resolution.aspx" target="_blank"><strong>Video Adding Navigation (high)</strong></a></span></p> </blockquote><blockquote></blockquote><blockquote> <p><a href="http://www.silverlightshow.net/Storage/Sources/01AddingNavigation.zip" target="_blank">Sample Project Adding Navigation</a></p> </blockquote> <p>And let’s add our sketched screens:</p> <blockquote> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Adding-hand-drawn-sketches-as-content-pages-640-resolution.aspx" target="_blank">Video Adding sketched screens (low)</a></strong></span></p> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Adding-hand-drawn-sketches-as-content-pages-1024-resolution.aspx" target="_blank">Video Adding sketched screens (high)</a></strong></span></p> </blockquote><blockquote></blockquote><blockquote> <p><a href="http://www.silverlightshow.net/Storage/Sources/02AddingSketches.zip" target="_blank">Sample Project Adding sketched screens</a></p> </blockquote> <h2>Step 2: Hold on let me show you how to create visual feedback</h2> <p>Ok, first version of the prototype is ready to be demoed to the client, now how can I deploy it? When you export an Expression app you get two main files:</p> <ul> <li>Main XAP file: contains the application. </li> <li>HTML sample page: host the XAP. </li> </ul> <p>You can choose whether to publish that content in a web site / intranet or whether to send that by mail in a zip file (the user will only have to double click on the HTML page to launch the prototype).</p> <p>Now comes the fun part, the client starts browsing the app and calls you, <em>Hey developer that’s not what we talked I want X,YZ…</em> is this reaction familiar to you? You build or change something and finally that was not exactly what the client was expecting for, or on the other hand one of the stakeholders says <em>I want it red</em> and the other dude says <em>I want it green</em>…. your answer? <em>Sorry, can you use the tool to enter the feedback? Once you are done please:</em></p> <ul> <li><em>Send me the generated feedback file out by mail </em>(you can open it using Sketchflow and check the client’s inputs). </li> <li><em>Send that feedback to a SharePoint site </em>(so feedback from every stake holder is centralized in a site and can be shared), that solve issues like:. Mr. Boss said I want it green, Mr Big Big Boss says I want it red, share thoughts and fight !). </li> </ul> <p>Let’s see how this works in practice:</p> <blockquote> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Tools-in-Sketchflow-navigator-that-let-users-provide-feedback-640-resolution.aspx" target="_blank">Video Deploying and Providing Feedback (low)</a></strong></span></p> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Tools-in-Sketchflow-navigator-that-let-users-provide-feedback-1024-resolution.aspx" target="_blank">Video Deploying and Providing Feedback (high)</a></strong></span><span style="color: #ff0000;"><strong></strong></span></p> <p><a href="http://www.silverlightshow.net/Storage/Sources/03DeployingPlusVisualFeedback.zip" target="_blank">Sample Project Deploying and Providing Feedback</a></p> </blockquote> <h2>Step 3: I need more fidelity</h2> <p>Now our client is thinking… <em>uh, whole day lost in meetings and they can only validate a sitemap with some chunky drawings I need more detail !</em> if you recall on step zero the client was the one that wanted to start implementing just only with the paper sketches, our client has started to think, we are on the right way !</p> <p>One of the things our client didn’t understand well was the sketchy home page, we are going to replace that bitmap content with an Sketchflow controls based layout:</p> <blockquote> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Building-a-layout-using-Sketchflow-styled-controls.-Resolution-640.aspx" target="_blank">Video using sketchflow styled controls (low)</a></strong></span></p> <p><span style="color: #ff0000;"><strong><a href="http://www.silverlightshow.net/shows/Building-a-layout-using-Sketchflow-styled-controls.-Resolution-1024.aspx" target="_blank">Video using sketchflow styled controls (high)</a></strong></span></p> </blockquote><blockquote></blockquote><blockquote> <p><a href="http://www.silverlightshow.net/Storage/Sources/04AddingSketchflowControls.zip" target="_blank">Sample Project using sketchflow styled controls</a></p> </blockquote> <p>Now we send the new prototype to the client, the feedback that we get is that now the home/news page is exactly what he wanted, good job!</p> <h2>Part (II) Coming soon</h2> <p>That’s all for now, in the second part of this article, we will cover the following topics:</p> <ul> <li>Animation & Behaviors. </li> <li>Sample Data Binding + Custom Contros. </li> <li>Specs Sign off. </li> <li>Reusing and Sketchflow application in a real development, a good idea? </li> <li>Comparing Sketchflow with other prototyping tools. </li> </ul> http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-part-I-Basics.aspx editorial@silverlightshow.net (Braulio Diez ) http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-part-I-Basics.aspx#comments http://www.silverlightshow.net/items/Sketchflow-from-a-developer-point-of-view-part-I-Basics.aspx Fri, 30 Jul 2010 02:53:00 GMT Sketching and Prototyping with Blend 3 <h3><strong>1. Introduction</strong></h3> <div style="padding-bottom: 5px; background-color: rgb(243,243,243); margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 10px; padding-top: 5px;border: rgb(221,221,221) 1px solid;"> <h3>More on this topic..</h3> <ul style="list-style-type: circle; margin: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/Search.aspx?q=SketchFlow&adv=true&tg=true&ro=1&t=1,2,3,4,5&r=10&o=1">See more articles on SketchFlow</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/Search.aspx?q=Pencho+Popadiyn&adv=true&tg=true&ro=1&t=1,2,3,4,5&r=10&o=1">All articles by Pencho Popadiyn</a> </li> </ul> </div> <p>Silverlight 3 is already a fact and along with it a new version of Expression Blend has been released. One of the changes in the Expression Blend that makes me a deep impression is that the new Blend has been made more approachable for designers. Beside the behaviors, Photoshop and Illustrator importers, the new Blend 3 makes a huge step in the direction of making better user experience. This step is the SketchFlow. The SketchFlow is a new set of tools for Expression Blend to create sketches and prototypes of interactive content and applications. That gives Blend a new role in the design phases of the development process. It offers you informal, quick and cost effective way to sketch out your ideas for your application. The most important features of the SketchFlow are:</p> <ul> <li>Customers can test the concepts you are prototyping without installing any additional software. </li> <li>Customers may express their thoughts about the prototype in annotated comments which can be viewed directly on the design surface. In that way we can receive quick feedback from the customer. Once you are ready to demonstrate the prototype, you can receive immediate feedback via the SketchFlow player. </li> <li>The SketchFlow allows us to experiment with the flow of an application UI quickly and effectively. We can prototype the individual screens and how the application will transition from one state to another. </li> <li>Powerful Documentation – only with two mouse clicks you can create full and detailed documentation for your prototype (as I will do later in the post). </li> <li>“<em>Sketchy</em>” style controls – the standard UI controls have a nice look. They are good for a real application, and not good for a prototype. The reason: if you show a prototype which uses the standard control, people evaluating the prototype easily focus on the wrong things, it is just a human characteristic. That’s why the "<em>Sketchy</em>" style allows you to keep the client focus on the overall solution rather than keeping it on the detail early in the prototype stage. </li> </ul> <p>So in this post I will show you the most important features of the SketchFlow and will guide you in the creation of a prototype for a real application. In order to be able to create sketches and prototypes you will need the new version of Microsoft Expression Blend 3. You can download it from the download section of the official <a href="http://expression.microsoft.com/en-us/cc136523.aspx">Expression Blend site</a>.</p> <p>You can see the demo <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Demo/TestPage.html" title="Demo" target="_blank">here</a>.</p> <p>Download demo project from <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Source/VodisysSketchFlow.zip" title="Demo Project">here</a>.</p> <h3></h3> <h3><strong>2. SketchFlow Map</strong></h3> <p>As I mention in the introduction section the SketchFlow enables you to experiment with the flow of an application UI, the layout of the screens, how the application will navigate from one screen to another (every prototype is a collection of screens, you can think about the screen as a dialog or window) and how it will transit from one state to another. The SketchFlow map shows you all screens composing the prototype and the connections (navigations) between those screens. When you create a new SketchFlow application with Expression Blend 3 you will probably see that map in the center bottom part of the screen, otherwise you can open it from the <em>Window->SketchFlow Map</em> menu.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowMap1.png" /> </p> <p>The SketchFlow map shows you all screens composing your prototype and the connections between them. At each moment you can add a new screen to your prototype.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowMap2.png" /> </p> <p>And the new screen is automatically added to your solution.</p> <h3><strong>3. Sketch styles for controls</strong></h3> <p>Blend 3 offers you tons of controls for your application (most of them are coming from the Silverlight SDK, or Silverlight Toolkit or other component vendors) which have a nice and polished look. They are good for real applications but not for a prototype. I mentioned the reason in the introduction section – the customer often focuses on the wrong things and also the customer easily tempts into thinking that they are seeing more than there is. That’s why the SketchFlow comes with a built-in sketchy style, which makes controls look as if they were drawn on the white board in the office. Adding to this the various drawing tools and the sticky notes, the designer has a complete set of tools for sketching and prototyping.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchControls.png" /> </p> <p>All sketch controls (styles) may be found in the <em>Assets</em> panel (Windows -> Assets), under the node SketchFlow -> Styles -> SketchStyles.</p> <p>Of course all controls are fully functional, they just have been templated. Also that at any point you may make a standard control to look like a sketchy control – with the right mouse button choose Edit Template.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchControls2.png" /></p> <p style="text-align: center;"> <img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchControls3.png" /></p> <h3><strong>4. Adding navigations</strong></h3> <p>The SketchFlow map shows you all screens, composing your prototype and the connections between those screens. In order your prototype to be complete and to give the customer a full vision about the flow, the customer must be able to navigate (switch) between the different screens. For example you may want to place a “<em>Back</em>” or “<em>Next</em>” button on a specific screen and when the user presses that button to go back on the previous (or the next) screen. You can allow navigations in two ways. First you may use the built in behaviors.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Navigation.png" /> </p> <p>After that in the <em>Properties </em>pane you need to specify the <em>TargetScreen </em>property.</p> <p>The second way is faster. Just select the target control and in the context menu choose <em>Navigate to</em>.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Navigation2.png" /> </p> <p>As you can see all available screens are shown, you need to select the desired one. If you want to see the navigation in action, just open the <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Demo/TestPage.html" title="Demo" target="_blank">demo</a>.</p> <h3></h3> <h3><strong>5. Data binding and sample data</strong></h3> <p>Many of the today applications are data – driven. Making mock up data is sometimes painful, especially if you need to do that for an early prototype. Never more – Blend 3 lets you create meaningful sample data just with a few clicks; you can create working data – bound lists and master – details views just with drag and drop. You can define sample data in the <em>Data </em>pane. </p> <p style="text-align: center;"> <img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SampleData.png" /></p> <p>You may import data from a XML file or you may choose to use the built in data which Blend 3 offers you. Binding to a list control is just a piece of cake. Just select the collection and drag it onto the desired control.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SampleData2.png" /> </p> <h3><strong>6. SketchFlow animation</strong></h3> <p>One of the purposes of the prototype is to quickly and easily express your ideas. There is no better way to do this but to use animations. Since you are using Expression Blend 3, you have a complete set of key frame-based animation tools. Key frame animations are powerful but not effective for prototyping. You simply have to create and manage too many frames, and that will slow down your work. That’s why SketchFlow offers you a special type animation called “<em>SketchFlow Animation</em>” which purpose is to show the customer what happens on that screen step by step. By default the <em>SketchFlow Animation</em> pane is placed on the center top part of the screen (just above the main design surface).</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowAnimation.png" /> </p> <p>You just add a storyboard frame, making your screen look the way you like. Repeat that procedure as many times as you want. It is extremely simple and most important – it is fast. For each storyboard frame you may specify how long to show that frame (<em>Hold Time</em>) and how long to take the transition from the previous frame to the current one (<em>Transition Time</em>). Also the SketchFlow animation allows you to set an easing function for the transition (by default it is <em>Cubic InOut</em>).</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowAnimation2.png" /> </p> <p>You may see a demonstration in the <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Demo/TestPage.html" title="Demo" target="_blank">demo</a>. Navigate to the <em>Main Form</em> and run the animation from the <em>Navigate </em>menu. For more information about the <em>SketchFlow Player </em>see the next section.</p> <h3><strong>7. SketchFlow player</strong></h3> <p>The SketchFlow player is an extremely important part of the prototype. Once you have the prototype ready you may ask yourself how you will interact with the customer. This is what the SketchFlow player is used for. The big advantage is that you don’t need any additional software to run the player (of course you will need the Silverlight plugin installed in your browser). If your prototype is for WPF then the player is an ordinary application. If your prototype is for Silverlight then the player will run in the browser. To see how the player looks like just run the <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Demo/TestPage.html" title="Demo" target="_blank">demo</a>. The player allows anybody who explores the prototype to give an immediate feedback. You can insert comments or use ink to draw directly on the prototype.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowPlayer.png" /> </p> <p>After that you just turn back the prototype to the designer, who can insert it in the Blend art board. Gathering timely feedback from a client is just as important as creating the prototype. That’s why the player is extremely important part. It helps reducing the time lost and costs in the design and development process. It is freely distributed and can be run on a standard browser. Clients review the prototype, make some tests, provide in context feedback and send back the demo to the designer.</p> <p style="text-align: center;"> <img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowPlayer2.png" /></p> <p>On the left part of the <em>SketchFlow player</em> you will find the <em>Navigate</em> pane which shows you all the available windows thet you can navigate to from the current one. Also it shows you all animations associated with the current screen. Just click the animation and it will be run.</p> <p style="text-align: center;"><img alt="" src="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/SketchFlowPlayer3.png" /> </p> <h3><strong>8. Design documentation</strong></h3> <p>Every project needs design documentation. SketchFlow can export your prototype to a Microsoft Word. Just use the <em>File->Export to Microsoft Word </em>command. The document will contain screenshots of the SketchFlow Map, as well as screenshots of every screen you have in the project; table of contents and table of figures.</p> <h3><strong>9. Demo</strong></h3> <p>You can run the SketchFlow demo from <a href="http://www.silverlightshow.net/Storage/Users/ppopadiyn/Sketching%20and%20Prototyping%20with%20Blend%203/Demo/TestPage.html" title="Demo" target="_blank">here</a>. <strong>And don’t forget to drop your feedback; you may do it directly on the prototype</strong>.</p> <h3><strong>10. Conclusion</strong></h3> <p>The new Expression Blend offers you a great flexibility to experiment, evolve and demonstrate your concepts and ideas to the clients in the most effective possible way, to create fully interactive and data driven prototypes. You have a total control from concept to completion. I think the Expression Blend team has made a huge step in the right direction. If you have any further questions, please share them with us. For more information and additional links, see the <em>References </em>section.</p> <h3><strong>11. References</strong></h3> <ul> <li><a href="http://expression.microsoft.com/en-us/ee215229.aspx">http://expression.microsoft.com/en-us/ee215229.aspx</a> </li> <li><a href="http://electricbeach.org/?p=214">http://electricbeach.org/?p=214</a> </li> <li><a href="http://electricbeach.org/?p=145">http://electricbeach.org/?p=145</a> </li> <li><a href="http://videos.visitmix.com/MIX09/C01F">http://videos.visitmix.com/MIX09/C01F</a> </li> <li><a href="http://blogs.msdn.com/expression/archive/2009/03/18/a-look-at-sketchflow.aspx">http://blogs.msdn.com/expression/archive/2009/03/18/a-look-at-sketchflow.aspx</a> </li> <li><a href="http://www.orbifold.net/default/?p=2338">http://www.orbifold.net/default/?p=2338</a> </li> </ul> http://www.silverlightshow.net/items/Sketching-and-Prototyping-with-Blend-3.aspx editorial@silverlightshow.net (Pencho Popadiyn ) http://www.silverlightshow.net/items/Sketching-and-Prototyping-with-Blend-3.aspx#comments http://www.silverlightshow.net/items/Sketching-and-Prototyping-with-Blend-3.aspx Fri, 28 Aug 2009 09:05:00 GMT