Click here to Skip to main content
Click here to Skip to main content

SketchFlow - Tools for Prototyping Interactive Applications

, 18 Sep 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
In order to create a great design, certain great processes help a lot and it is especially very helpful to have ways to effectively explore, communicate and evaluate design ideas fast and efficiently. SketchFlow will help you from the design process from the very first step to final production.

The entire article is based on the awesome SketchFlow video from Mix09 where Christian Schormann presents some really cool things about SketchFlow.

Introduction

It is almost true in today's world that great design is an important factor for great products. Historically the software industry hasn't really put much emphasis on the early stages of the design process.

In order to create a great design, certain great processes help a lot and it is especially very helpful to have ways to effectively explore, communicate and evaluate design ideas fast and efficiently.

Sketching at later stage of the design process and prototyping are wonderful techniques to explore a multitude of ideas. The software industry has become very complicated especially in the sense that it has become highly dynamic. Over the past year, the degree of dynamic interaction of software has grown quite a lot, demands of users have grown and it is very difficult to meaningfully sketch dynamic interactivity with traditional design tools.

Many of the design tools that we are using today have really been conceived for production purposes. Mainly their aim is to create a final asset with polished quality rather than quick informal sketches.

SketchFlow is the product which will help you and guide you from the design process in the very first step to final production. SketchFlow is informal and quick and it enables you to sketch plentiful ideas for dynamic interaction in a cost effective manner. SketchFlow also solves the idea of evolution of rough sketch of your design and to evolve it into a living and breathing prototype that can be as real as it needs to be conveying your idea, your inspiration.

SketchFlow Goals

SketchFlow in Expression Blend is a great tool for creating a dynamic prototype for:

  • Quickly experimenting with dynamic UX fast, plentiful, disposable and inexpensive
  • Bringing hand-drawn sketches or digitally created sketches to life in dynamic prototypes
  • Communicating design intent to other stakeholders in the process
  • Collecting and evaluating stakeholder feedback
  • Creating design specifications documentation
  • Providing immediate business value: Delivering compelling proposals to clients quickly and cost effectively

Communications and feedback gathering is probably quite underappreciated in the whole process of prototyping. Creating prototypes are sketching, interactive, collaborative and group activities. Creating software design is a multidisciplinary activity. So communicating a design idea is very important.

Many of us create designs when we are not really paid at the initial design stage. In a corporate setting, we have a product proposal that has not been approved yet, so it is very important to quickly create a prototype. The prototype should advertise an idea which can make people excited about the idea and advertise what we want to do in an effective manner which brings immediate business value that is important.

So let’s build a simple prototype using SketchFlow!

Setting Up Your Workspace

When you open Expression Blend, the following default screen will appear for the first time. Click on the new project link:

clip_image002

Next, you will be presented with a dialog box that contains a number of options:

clip_image004

Name your project as PrototypeStart and click OK button. SketchFlow allow us to create Silverlight as well as a WPF application. At this point, you will probably have a workspace that looks similar to this:

clip_image006

Let’s go up to the Window menu and select the item in the menu entitled Save as New Workspace… Select a name for the workspace as SketchFlow and save it.

The Artboard

The top portion of the screen is the Artboard. This screen is where you actually import and work with sketches of create elements from scratch using controls and drawing tools available in SketchFlow.

clip_image008

The SketchFlow Map

The next portion of the screen below the Artboard that takes up the most space is the SketchFlow Map:

clip_image010

clip_image012

Mouse over on the blue labelled screen and you should see a panel appear below it. You can create new screens or new screens connected to existing screens. Now, you spend some time with the flow canvas and see if you can get your screens and connectors to look like this:

clip_image014

Adding Content to a Navigation Flow

Let’s go to the Start screen and draw using the sketching tools and also drag out labels to get the screens to look like this:

clip_image016

Let’s go to the welcome screen. Put a title on the left upper corner. Put a background image for the welcome screen:

clip_image018

Blend allows us to access plenty of controls (WPF/Silverlight) to use in a SketchFlow project. To see the list of items, go to the Asset view from the tool menu. In this prototype, we will be using those assets that are available under the SketchFlow category. These assets have a sketch style, but it has the same functionality as any normal control like button, textbox, listbox, etc.

clip_image020

Sharing Your Work and Getting Feedback

Sharing and getting feedback on your work in the early stages of conceptualization is a critical part of design project. SketchFlow makes it extremely easy to share your dynamic prototypes and get feedback on them.

See below for how your application looks in runtime with the SketchFlow player:

clip_image022

Feedback Panel

clip_image024

You can create feedback simply by inking tools, you can also create feedback by typing text. You can save the feedback and send it to the designer. Then the designer can start work on the feedback by simply importing the feedback file into the SketchFlow Project.

clip_image026

Animation

In SketchFlow, you can use animation to demo what different interactions in your app will look like. SketchFlow Animation allows you to quickly create animations that can simulate advanced interactivity quickly.

For example, in Bindings page if the user clicks on the View Cart button, we want to display a Cart List window and clicking on the Live Chat button, we want to open Live chat window.

Animation in SketchFlow is based on a system build into Expression Blend called the Visual State Manager. What we need to do is very simple. We just need to create a state and within that create the frame and associate them with the specific button so that when the user will click on the button, the specific frame should come to the top of the screen with a little bit of animation effect.  

clip_image028

Design Documentation

At any point of time, if you are making a prototype, SketchFlow allows you to create Design Documentation. You can go to the file menu and select Export to Microsoft Word.

clip_image030

After you've selected the appropriate settings, your document is created. The document will create a table of contents, show the flow for the application and provide a collection of figures and runtime annotations that have been embedded in the SketchFlow project.

Summary

In this article, we worked with all the basic feature of SketchFlow and learned how to create dynamic prototypes quickly and interactively.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Somnath Mondal
Technical Lead
India India
No Biography provided

Comments and Discussions

 
GeneralA good overview PinmemberWillemM17-Sep-09 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 18 Sep 2009
Article Copyright 2009 by Somnath Mondal
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid