“If sketching is about asking questions, prototyping is about suggesting answers. Sketching takes place at the beginning of the development process, prototyping only later.” – Jessie Scanlon reviewing Buxton’s Sketching User Experiences in Business Week
As a designer I find that the most productive parts of a project are the exploration phase, the very early part where your are researching, sketching, exploring ideas and concepts trying to formulate an approach. It has always been really easy to grab my notebook and pen and begin drawing sketches of user experiences or find a whiteboard where you can sketch and erase and snap a picture when you’re done. Showing the initial designs to people, gathering feedback and making annotations. It has always been much more difficult and time consuming to build wireframes, screen flows, conceptual models, etc. There is a certain envy to being able to do low fidelity prototypes with a level of basic interactivity (if only because a number of past clients were not co-located and scanning sketches and providing written context was never enough, however, it might be a lot easier to share and annotate these days using ConceptShare, Octopz, Cozimo or DimDim).
It was tools like DENIM that first showed the power of sketching for web design. It provided a set of tools for creating sketches and adding interactivity to initial designs. DENIM allows users to create site maps, page flows, interaction scenarios and page designs using sketches. It works best with a tablet PC or a Wacom tablet. It works very similar to a paper notebook and can export the pages and links to HTML upon completion. The biggest challenge was that the integration with other tools was not significantly better than paper and pencil.
Today I found Balsamiq Mockups, a tool for creating mockups and designs using predefined sketched controls. No need to move to your tablet machine. No need to connect the Wacom. Just fire up Balsamiq and start laying out user interfaces. While sketched design templates are available for Graffle and Visio (check out Garrett Dimon’s Templates & Stencils; or Graffletopia; or YUI Stencil Kit). Balsamiq Mockups also makes it easy to integrate into a development workflow by allowing designers to export and integrate their designs into Confluence, Jira and TWiki.
I also discovered the Pencil Project. The Pencil Project is an open source tool aimed at diagramming and UI prototyping. It’s less of a tool for sketching and more of a replacement for Photoshop, Illustrator, Visio and Graffle that we’ve all become accustomed to using for creating higher fidelity interface mockups. The Pencil Project is available as a Firefox addon or as a standalone application using XULRunner. Pencil Project includes stencils for GTK controls, XP controls. It’s a great alternative to the existing tools.
Designers are starting to see fantastic new tools like Blend and Thermo and Axure. And there continues to be an evolution of mashup tools like DreamFactory, and javascript frameworks like SproutCore, that make it easier for designers and developers to build next generation web applications. I am curious to see the next generation of design tools for cloud based services (Apatar, Popfly, Pipes, Sprout, etc.).
 |
Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies) by Bill Buxton |