Article: Using SketchFlow to Create Better Prototypes

| by Simon Guest Follow 0 Followers on Apr 29, 2009. Estimated reading time: 1 minute |

At the MIX09 conference in March 2009, Microsoft announced a new tool called Sketchflow, that aims to improve the prototyping experience for developers and designers. In this article, Simon Guest from Microsoft covers the importance of prototyping for today's applications, and takes the reader on a walkthrough of using Sketchflow to create a prototype of an online store.

Topics covered include: Importance of prototyping, application flow, navigation, composition screens, feedback, states and transitions, sample data, and documentation. Guest introduces the article with the observation:

All good developers and designers that I’ve run into do some kind of prototyping. For me, prototyping is about creating a communication channel with customers, sharing ideas with stakeholders, and receiving feedback so that changes can be made early on in the development lifecycle.

In this article we’ll be exploring the functionality within SketchFlow, covering how it works in a soon-to-be-released preview edition, and looking at how such a tool could make your prototypes more usable and effective.

If you’ve heard of the Expression Blend family of products, you’ll likely know that the Expression Blend tool is marketed toward the designer community. While interaction designers will likely make up the majority of the users of Blend, I believe that the SketchFlow functionality also makes for an attractive proposition for many developers – many of whom have been prototyping for some time, using whiteboards through to creating mockups of screens in Visual Basic or other tools.

Continue reading "Using SketchFlow to Create Better Prototypes"

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Is this free ? by zqu dlyba

as in beer ?

Re: Is this free ? by Ben Meadowcroft

as in beer ?

I don't think so, Expression Blend is a paid for product so if it's part of that then I guess not.

If you work with Java then the "Napkin" look and feel for swing could help you produce screens with your normal GUI builder but provide the mockup look and feel. See for more info.

Release Date by Stephen Skehan

This looks like a great product. I have been following it keenly since seeing it demostrated at MIX 09. Any ideas at all about a CTP or beta release date??


Balsamiq Mockup by Rainer Eschen

If you only need the design part for the interface design have a look at balsamiq mockup:

The desktop variant is written in AIR. Fast, easy, efficient. Found nothing better.

WireframeSketcher by Peter Severin

Take a look at WireframeSketcher. It's an Eclipse plugin for creating quick screen mockups and UI prototypes:

Being an Eclipse plugin it's also cross-platform and not limited to Windows.

Re: Is this free ? by Aries McRae

Try gliffy. It's free.
It allows you to create user interface wireframes online for free.

Re: WireframeSketcher by Praveen Mittal

I have used wireframeskecher and it is great

design a UI not develop it... by Duncan Brown

As a UI designer I have tried computer based UI layout apps (inc. Balsamiq, DENIM etc.) and I have always found having to set up configurations/behaviours for the UI components gets in the way.

My solution? a Pen and some A3 paper...

Work out the design and then produce an interactive prototype if needed...

It's v. quick and easy to revise. I'm not a Luddite I just find it easier for my particular situation. We use Ajax/JavaScript/Canvas not Adobe Air or Silverlight.

I spent ages getting Fireworks to output 'sketchy style' screen designs, then realised how silly it was - why not just draw them!

I use a more finished 'computer sketch' for presentation to clients, but don't do the initial design using this.

I can see the attraction of using the same 'base' for wireframing interactions and then 'flicking a switch' and the finished UI is generated, but for me the computer gets in the way of the early initial design work, although I do sometimes get:

"...different interpretations between the designer and developer, especially around some of the subtleties within the design..."

I just need to offer tighter UI designs for the development team.

Experiment/sketch/design/rapid/prototype then use the computer to work out the details and flesh out the interactions - don't start the design on the computer. I always follow this rule whatever I'm designing from a UI design or a new corporate image.

Re: design a UI not develop it... by Alain Mereaux

Good advice, i will follow it up

Re: Is this free ? by Slava Vassiliev

Yes, for students and other academic people -

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

10 Discuss