BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Article: Using SketchFlow to Create Better Prototypes

Article: Using SketchFlow to Create Better Prototypes

Bookmarks

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
Style

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.

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

Community comments

  • Is this free ?

    by zqu dlyba,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    as in beer ?

  • Re: Is this free ?

    by Ben Meadowcroft,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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 napkinlaf.sourceforge.net/ for more info.

  • Release Date

    by Stephen Skehan,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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??

    TIA!

  • Balsamiq Mockup

    by Rainer Eschen,

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

    www.balsamiq.com/

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

  • WireframeSketcher

    by Peter Severin,

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

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

  • Re: Is this free ?

    by Aries McRae,

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

  • Re: WireframeSketcher

    by Praveen Mittal,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I have used wireframeskecher and it is great

  • design a UI not develop it...

    by Duncan Brown,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Good advice, i will follow it up

  • Re: Is this free ?

    by Slava Vassiliev,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Yes, for students and other academic people - www.dreamspark.com

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

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

BT