In this Expression Blend SketchFlow series of posts I will be addressing different aspects of creating interactive prototypes and move to a production project.
The idea to do a blog post on this subject came after discussing with some folks at a Silverlight training and events we held in Belgium in October and November 2009. It was not the first time the questions arose around how one can move prototype elements to a production environment. I think there are several elements that can be reused but a lot depends on the extent of the prototype, the amount of reusable elements implemented and so forth.
Different ideas of what to address in the post came also after my tweet on the subject, so my thanks to @LBugnion, @martharotter, @RichGee for giving some feedback on the idea. A few things came out of these tweets:
- Most people tend to do a prototype and start over fresh for a production application
- As @RichGee mentioned, many prototypes lead to a POC, not all POCs lead to a production project
- Moving from prototype to Proof of Concept (POC) to production (or not)
- What to reuse from a prototype
- If you’re using the SketchStyles you will probably not reuse styles (but there is no technical blocker)
- Reusing styles – not if you have been creating custom styling for a SketchFlow project
- Reusing the full prototype – removing the standalone SketchFlow player.
- @LBugnion notes that are a lot of questions around the whole reuse thing, and what about round tripping, i.e. how to efficiently update the prototype during the development
This, as well as the in person discussions I had with folks at different events led me start working on some posts. One discussion for example was around a case in which SketchFlow is used in a enterprise environment in order to create views very quickly, discuss these with the business and then re-use quite a lot in the actual screens. At this stage I’m thinking about these sorts of posts in the coming weeks:
- Overview of SketchFlow functionality (this post)
- Anatomy of a SketchFlow project
- Moving to production: removing the SketchFlow player
- Keeping a prototype up to date with a production project
- Reusing styles from a prototype
- Working with Views from a SketchFlow project in a MVVM approach
- Others? … Your input is welcome!
Overview of SketchFlow functionality
If you want one resource to get started I would suggest the PDC session Christian Schormann did ‘SkechtFlow to the rescue’. You can watch the session online or download it to watch offline.
Another good session is Arturo Toledo’s ‘Prototyping UX with SketchFlow’ session from Belgium’s REMIX event.
You might also want to take a look at this series of 3 minute videos I did some time back:
- 3’ on Blend 3 – SketchFlow Introduction
- 3’ on Blend 3 – SketchFlow Adding content
- 3’ on Blend 3 – SketchFlow Player
- 3’ on Blend 3 – SketchFlow – Getting feedback into Blend
- 3’ on Blend 3 – SketchFlow Composition Screens
- 3’ on Blend 3 – SketchFlow Composition Screens, adding Navigation
- 3’ on Blend 3 – SketchFlow States
In order to write this post I also did some research on the web around what is available as to experiences from other people or guidance. Here are a set of great resources:
- Christian Schormann’s postings
- Christian Schormann’s session at PDC on SketchFlow and extensibility: SkechtFlow to the rescue
- Starter kit tutorial on Expression community (videos and full training material)
- Silverlight blog – SketchFlow helps deliver an ambitious new auction tool – meeting tight time and budget constraints
Disclaimer: I do not work for the Expression Blend product team so although I work for Microsoft I’m not directly involved with the evolution of the product. So, these are my views, experiences and ideas on how to (re)use SketchFlow prototypes. Not an official guidance from the product team.