Choose Your Destination, Let Us Help You There.

Website Design - Rapid Prototyping Using Sketchflow


    Back in the mid 90s rapid prototyping was considered a bad idea. The primary reason for this belief was that prototyping tools were so complex back then that they needed to be operated by developers. Therefore, the design process tended to be influenced by all design work had to be interpreted through the eyes of what a prototyper could actually achieve.

    In 2010 there’s been a rethinking of prototyping. A lot of new prototyping tools have appeared over the past few years and they’re quickly being adopted by interaction designers.

    Two things have changed to bring prototyping tools back into favor: The task they’re being used to accomplish and the tools themselves.

    • The prototyping tools of today are much more designer friendly. The adoption of user interface markup languages, such as MXML, XAML, and HTML, have made our ability to build and run more sophisticated software today has made it easier to create design tools that work for designers, as opposed to developers.

    • During this same time, the nature of what is being designed has changed. As we move away from designs that are a series of relatively static pages or screens, to designing applications that use fewer dynamic pages, it becomes harder to prototype these experiences using the traditional tools of diagramming applications and paper prototyping.

    So we have perfect conditions for a new wave of prototyping tools: Increasing capability and rising demand.

    Microsoft’s Contribution: Expression Blend SketchFlow

    Among the new breed of prototyping tools there is Microsoft’s Expression Blend SketchFlow. SketchFlow takes a rather unique approach to prototyping.

    Expression Studio

    SketchFlow is part of Microsoft’s Expression Studio range of design tools. Following a rather lackluster history with design tools, Microsoft finally seems to be getting their act together with Expression Studio. Expression Studio is on its third release and comprises 4 or 5 products depending on how you count them:

    • Expression Blend: For building user interfaces for Surface, Windows, and Silverlight.

    • Expression Blend: SketchFlow; For prototyping user interfaces.

    • Expression Web: For building user interfaces for web standards.

    • Expression Design: For creating graphic assets for Surface, Windows, Silverlight and the Web.

    • Expression Encoder: For preparing video assets for Surface, Windows, Silverlight, and the Web.

    Once you have the idea of the screen flow, you may want to go through and add descriptions of what will be on each one. You can then run the prototype and get a feel for how the application works, even though there’s no user interface yet.

    Normally when you are prototyping a user interface, you want to avoid suggesting the final graphical treatment until you have the interaction model and information architecture model correct. As a result, you should build a wire frame user interface that is minimally graphic and just show how users will interact and navigate with the application. For this reason, SketchFlow provides a set of sketch styles, which contain all of the usual controls that have been restyled to have a sketch like appearance.

    What’s interesting about these sketch styles is that they’re full controls that have been reskinned. This has two important consequences:

    • You can access all the capabilities of the native control.

    • You can change the styles of the controls as your prototype evolves.

    Sketching Up Your Portfolio User Interface

    The next step is to draw up the screens of our prototype. It’s basically a case of selecting the right Sketch Style controls and placing them in the screens on the Artboard.

    For example, I used the following for the main portfolio screen:

    • A Sketch Button

    • A hand drawn Back arrow

    • A Sketch Title

    • A Sketch Subtitle

    • A Sketch Listbox

    • Another Sketch Subtitle

    • A Sketch Textblock

    • A normal image element

    • Another Sketch Button

    Wiring up the Navigation

    All you need to do is right click on the elements that will serve as navigation between screens, select Navigate to, and then select the screen the element should link to. You can also select Forward or Back.

    Running the Prototype

    To try out the prototype, simply press F5. The project builds, a test web server is spun up, and our prototype launches in a browser. The SketchFlow prototype includes your functional screens, as well as navigation and other tools on the left side. These tools help you navigate your prototype, as well as allowing the users to provide feedback. So as it turns out it wasn’t really necessary to set up the navigation in the beginning. For each screen of your prototype, the Navigation panel shows which screens that screen leads to, based on the connections you made in the SketchFlow Map. You simply move through your screens using the list on the left. You’re simply importing a set of paper sketches for your prototype. For example, you’d probably just start with this option, and add in your functional navigation later.

    The SketchFlow Killer Feature: Feedback

    • Sketchflow handles feedback exceptionally. Regardless if you’re working in WPF or Silverlight, you can package up your prototype and distribute it for review by users, project members, and stakeholders. With Silverlight, SketchFlow creates a Silverlight website that you can host or distribute yourself, in which case you can just send a link to the reviewers.

    • When viewing your prototype, the reviewers are able to draw on individual screens with their mouse, in addition to typing in comments. The reviewers then simply export their feedback into a file they send back to you. You then load the files back into Expression Blend and review the feedback, overlaid on top of your original screens. In addition you’re able to give the reviewers access to the annotations that you’ve made within the screens as you built the prototype.

    Feedback is one of the best features of SketchFlow. As well as for stakeholder reviews, you can also use it for internal reviews with your colleagues. When you conduct walk throughs of the prototypes, you can annotate the screens with changes that you wish to make. This becomes a live to do list, which can then be loaded back into Blend. Screens with feedback are marked with a light bulb icon in the SketchFlow Map.

    After you’ve prototyped the functions of the user interface, you can also use your SketchFlow prototype for usability testing. SketchFlow permits you to run the prototype with the Feedback and Navigation panels hidden.

    Another SketchFlow feature that needs to be highlighted is the component screens. These screens are the way that Sketchflow provides a prototyping feature that is essential: Permitting components in common to be defined once and reused across multiple screens.

    Using SketchFlow, you can select any group of elements, right click them and select Make into Component Screen. Component screens are then shown separately on the SketchFlow Map, and they can be dragged onto any other screen.

    One frequent use for component screens is to make navigation controls that are common to many screens. In the case of this example, the relatively simple navigation controls have been made into a component screen. That way the same navigation on every screen of my portfolio is included. One of the great features of component screens is that they don’t simply contain layout information, they can also embody behavior. Therefore, you can set the action of your navigation buttons once in the component screen, and know that the navigation will work on every screen that you include it in.

    Alternate States

    Another powerful feature in Expression Blend is visual states. Visual states allow you to define alternate states for individual elements, such as component screens, or your whole screen. The powerful part of this is that you can define different sets of states for the one element. So, for example, a button could have 3 different state groups: One for not focused and focused, one for non mouseover and mouseover, and one for disabled and enabled. That way you can combine the states that are necessary to create some powerful effects.

    In this portfolio example, there are 3 visual states for my Navigation component screen:

    • BackOnly

    • BackOff

    • PortfolioOff

    For each of the navigation’s 3 visual states, the visibility of the navigation items have been changed accordingly. All you need now is a way for each screen to tell its navigation component screen which visual state it should use. For that you’ll need behaviors.


    Behaviors were introduced with Blend 3. They provide an easy way to add the basic interactive features to screens without having to code them. Like any other element, these behaviors are added to screens by selecting them from the Assets panel. You can use behavior to change the appearance of your Navigation component screen for each screen on the prototype. The behavior you need to use is named GoToStateAction. On each screen, drag GoToStateAction onto the Navigation control. The behavior will then appear in the Objects and Timeline panel nested under the Navigation control. You can then choose the behavior and set the trigger to the component’s loaded event and then select the desired visual state.

    Prototyping Power with SketchFlow

    SketchFlow is a particularly powerful tool. Because it’s built on Expression Blend and .NET, it gives you access to a wide range of functionality, allowing you to take your prototype much closer to production, if you wish. It also means that you can go a long way before you hit the limits of what the tool is able to do.

    Of course, all those features mean that SketchFlow can be a bit overwhelming at first. Fortunately there’s more help available on the Web, in the form of articles, tutorials, blogs, and videos, so starting off is easier now than it was when Blend first appeared.

'; } else if (stripos($_SERVER['REQUEST_URI'], "portfolio")){ echo ' '; } ?>