Compartir a través de

From SketchFlow to Production

  • Artículo

During yesterday’s MSDN Mid-Atlantic Roadshow stop in Baltimore, MD, a question came up about how one moves from a prototype built in SketchFlow to the final application.

My answer, that you could repurpose some of the parts of a SketchFlow prototype, was not as complete as I’d have liked. So I did a little experimenting this morning and confirmed that you can take a SketchFlow screen essentially* as-is and bring it into a Silverlight 3 project and use it for building the final version of the application. SketchFlow screens are implemented as a Silverlight UserControl class, and all of the UI elements are just XAML.

I also updated the completed version of my Silverlight 3 / Expression Blend 3 demo project to include an example of a hand-drawn sketch repurposed from a SketchFlow screen. You can download the updated version of the demo, along with my slide deck, here.

So in addition to the advantages of rapid prototyping and super-simple communication and collaboration between the design team and project stakeholders, the ability to easily repurpose content created as part of a SketchFlow prototype is a compelling reason to take a look at this cool tool.

* – I say “essentially” because I did find one little issue with just grabbing the .xaml and codebehind files, which is that you will need to modify the x:Class attribute on the UserControl element to match the namespace of the target project when you copy it into the target project. Otherwise you will get a compilation error when you try to build the project, "InitializeComponent is not declared" If you see that error, check your namespace…it’s often the cause of this error.

Comments

  • Anonymous
    August 27, 2009
    I only post this because I know folks will misunderstand the purpose of Sketchflow and take it to a difficult and often unworkable conclusion. The purpose of Sketchflow is to allow you to make a number of very low investment prototypes to try out ideas. You don't want to think about structure or proper refactoring, or even naming during prototyping. It's all about working out the details with the users. You can move the prototype forward about as far as you want, given the flexibility of the tool. That means you can start with black and white wireframes, and if needed, later add some design assets for branding or to try out key ideas. However, when it comes to to create a real application, you'll want to start a new project from scratch. You may be able to repurpose some of the sketchflow design assets (they are xaml after all), but you'll want to be very careful about what you move over. The prototype may not show a liquid layout, for example, and you need that. That means different sizing and different panels. The prototype probably didn't think about reuse and proper control encapsulation, so you'll want to change that. And certainly the prototype didn't incorporate ViewModel and similar patterns. So repurpose all you want, as long as the prototyping phase isn't taking on a burden. If you find yourself annoyed about the project structure of the prototype, or names of screens or other details, you're investing way too much dev stuff into the prototype. This is not a deficiency in the product, this is how it's intended to function. Pete

  • Anonymous
    August 27, 2009
    Pete, I could not agree more with your assessment, and appreciate you chiming in, since you're definitely a strong voice of experience in this area. I hope that I did not come across as suggesting that folks should use a SketchFlow prototype in its entirety as the basis for a production application. That certainly wasn't my intent, nor would that be a very good idea...in fact, it would be a pretty bad idea for most apps. Whether or not a particular asset or set of assets is a good candidate for reuse in the final application will depend a lot on how the prototype itself is put together, as well as a number of other factors. But it is nonetheless pretty cool, IMO, that it's even possible to have this level of reuse possible, rather than the surety of throwing away everything from the prototype stage. It's up to the user to make wise use of this ability, as with any tool.