I remember teaching user interface design courses back in the mid-nineties. In those courses there was a slide entitled “rapid prototype,” and on that slide were all the reasons why rapid prototyping was a bad idea. Most of the reasoning centered around prototyping tools being so complex back then, they needed to be operated by developers; subsequently, the design process tended to be influenced by all design work needing to be interpreted through the lens of what a prototyper could actually achieve.
Fast forward to 2010 and there’s been a rethinking on prototyping. A slew of new prototyping tools have appeared over the past few years and they’re rapidly being adopted by interaction designers. I guess the creators of these tools never attended one of my courses!
What Changed?
In fact, two things changed to bring prototyping tools back into favor: the tools themselves and the task they’re being used to accomplish.
Prototyping tools today are much more designer-friendly. The adoption of user interface markup languages (like HTML, XAML, and MXML) our ability to build and run more sophisticated software today has made it easier to create design tools that work for designers, rather than developers.
At the same time, the nature of what we’re designing is changing. As we move away from designs that are a series of relatively static pages or screens, to designing applications that use fewer, more dynamic pages, it becomes harder to prototype these experiences using the traditional tools of paper prototyping and diagramming applications.
So we have perfect conditions for a new wave of prototyping tools: rising demand and increasing capability.
Microsoft’s Contribution: Expression Blend SketchFlow
Among this new breed of prototyping tools we find Microsoft Expression Blend SketchFlow (for the purposes of this tutorial, I’ll be referring to it as simply SketchFlow). While maintaining the Microsoft tradition of remarkably long product names, SketchFlow takes a fairly unique approach to prototyping.
Expression StudioFirst, I’d like to point out that SketchFlow is part of Microsoft’s Expression Studio range of design tools. After a lackluster history with design tools, Microsoft seems to be finally getting their act together with Expression Studio (disclaimer: I’ve previously worked at Microsoft). Expression Studio is up to its third release and comprises four or five products depending on how you count them:
Expression Blend: For building user interfaces for Silverlight, Windows, and Surface.
Expression Blend SketchFlow (part of Blend): For prototyping user interfaces.
Expression Web: For building user interfaces for web standards.
Expression Design: For creating graphic assets for the Web or Silverlight, Windows, and Surface.
Expression Encoder: For preparing video assets for the Web or Silverlight, Windows, and Surface.
You can check out the SitePoint article by Raena Jackson Armitage for more information on Expression Web. There will also be later articles in this series, which will cover Expression Blend and Expression Web in more detail.
SketchFlow and Expression BlendIt’s important to note the relationship between SketchFlow and Expression Blend. Expression Blend is the production tool for Silverlight, Windows (Windows Presentation Foundation), and Surface, whereas SketchFlow is a prototyping tool built on top of Expression Blend.
The fact that the prototyping tool is built on top of the production tool raises some interesting possibilities—which you may see as positive or negative, depending on your disposition:
The positive is that you have access to all the production tool’s features, Continue reading →
