Sketchify is an open source toolkit for simulating simple drawings with a wide range of inputs in real time. As an example, it allows you to quickly create a functional prototype of a moving car along with the mouse acting as a controller for its direction. Other inputs which Sketchify may apparently hook up to include: motion sensing (with a webcam), speech recognition, face recognition, Wii Remote, web services, Phidgets, and Arduino. All of these of cource can then be tied back to move, hide, and affect various interface elements. Here are a couple additional youtube videos which demonstrate more examples of what is possible with this tool.

From the Sketchify website, in Željko’s own words:

Sketchify (also known as AMICO Sketchpad) is a toolset for sketching of novel classes of user interfaces, originally developed by Željko Obrenović at the Concept Lab of the Eindhoven Technical University. Sketchify extends the concept of paper and pencil sketching to a more generic concept of rapid manipulation of interaction material. Interactive material is any piece of software/hardware that represents or simulates a part of user interactive experiences, such as inputs from sensors, output of audio tools, interaction with Web services, or simple drawings. Through manipulation of interactive materials, designers create “interactive sketches”, which in rough terms illustrate interaction scenario or interaction techniques. Our tool gives a designer freedom to combine elements of traditional freehand sketching and with numerous extensions, such as end-user programming (spreadsheets and scripts), and links to existing software functionality.

Credits: Željko Obrenović

A rather interesting experimental wizard of oz sketching tool has been developed a few years ago by a group at the University of Washington. The setup requires two separate monitors with the user on one and the designer on another. The person evaluating the prototype can then use a standard computer or a pen based input to perform actions on one monitor. While the screen pauses on the user’s monitor, the designer (acting as the wizard) then spontaneously draws up or selects what the user will see as a consequence, and so on.

Today’s popular prototyping tools for the most part rely on a similar approach to handling interactivity, which might be a bit stale. There is a large focus on trying to predict all possible interactions in advance and prerecording event handlers (such as onclicks and mouseovers) ahead of time. I find SketchWizard on the other hand provides a more spontaneous way of playing out interactions with a prototype. While it alleviates the need to have everything thought out before hand, the one catch might be that the user has to occasionally wait a few seconds longer before a new screen comes into view (as the designer is preparing it quietly on the other end). Perhaps it would be interesting to see more prototyping tools take on this approach as well.

There are binary releases and videos available right there on the project page.

Credits: Richard C. Davis, T. Scott Saponas, James A. Landay

In the light of Keynote as a recently popular tool for creating wireframes, here comes another emerging stencil for all to use. As the project name suggests, the template is free, comes with various form elements, modal boxes, and a number of useful header styles. One thing that stands out is the way the stencil is being positioned within github, and the author openly invites others to fork it, tweak it and improve it. Without implying otherwise it would be interesting to see if UX folk will be actually able to push, pull, branch and merge files under git to move the project forward. Or perhaps the technical barrier and the high learning curve behind git commands are just too complicated for the non-developer? Either way, thanks Colin for another cool project.

Grab the files (and collaborate) right here.

In Colin’s own words:

I’m working on some a free wireframing toolkit for creating interactive prototypes with Apple’s Keynote. It’s the best wireframe tool around, and I’ve been using it to build interfaces for web applications.

Credits: Colin Nederkoorn

Here is another experiment in the form of an open source jQuery plugin named onProximityFade. What it does is it fades tagged elements (requiring a CSS class of “fadeBox”) depending on their proximity to the mouse cursor. The idea emerged after a subtle irritation with long lists of repeating links which sometimes feel as they receive too much attention on a page. So the intention is twofold. First, to visually deemphasize repeating and predictable elements throughout a page and thus achieve greater simplicity. Secondly, use gradual feedback to invite users to find actionable elements by using ranged values (the closer you get, the greater visibility). Any thoughts? Would love to hear them.

Have a peek at the demo or fork the code at github.

Credits: Jakub Linowski

Briefs is a little application toolkit for iPhone based prototypes released by Rob Rhyne. The process is as follows. First, you simply use a visual design tool of your choice to export your image files as scenes or actors. You then attach actions (behaviours) to your actors (screen elements) by writing a BriefScript with the provided syntax. Once that’s done, you compile the script into a binary plist with a .brieflist extension on a Mac and copy it to the phone. Sharing the Briefcast (“brief://”) prototype is also possible by placing it on a server.

A cool idea, but there is a small catch. If I understand correctly, the whole thing is still waiting to get approved to the App Store and there is some uncertainty if it will or not get accepted. Either way, the code is also open sourced and should be available on git hub, so at least it should be available for internal development purposes. In Rob’s own words:

The Briefs toolkit was created for rapidly building & iterating design concepts. It allows one to quickly prototype those concepts and run them on iPhone OS devices. These prototypes run directly on the phone, like actual apps, but require much less time and code to produce than a prototype built using only the native APIs. Less code means faster design cycles followed by more a efficient development cycle.

Find out more at giveabrief.com.

GestureWorks has released 20 something gesture icons for their Flash and Flex development environment. Although their multitouch library is geared at developers, the icons still look interesting in their own right. A lot of the interactions supported include two handed, as well as multi finger gestures. The downloadable library comes in various formats (PNG, PDF and EPS). Enjoy.

Also, I just created the gestures tag to keep track of all these related posts.

Credits: GestureWorks

K-Sketch, The Kinetic Sketch Pad is a pretty cool piece of software that came out of the Human-Computer Interaction and Design group from the University of Washington and is lead by Prof. Richard Davis. As the name indicates, the software allows to create quick sketches in time with a pretty simple and lightweight interface. Users can draw free form shapes and then transform those objects in a recording mode. The result is an animation composed of various objects that have their own animating paths.

I still haven’t tried out this tool on a real UI design project, but the concept is definitely inspirational and so I thought to share it. The K-Sketch project opens up the possibility and idea of sketching in the context of a timeline, which I think is quite novel in itself. If the desire of designers to express interactions seamlessly with the use of animation is strong enough (which I think it is), my guess is that we’ll be seeing more and more of functionality such as this in our prototyping tools of the future.

Download it and try it out yourself.

Here is another explanation straight off from their website:

K-Sketch allows ordinary computer users to create informal animations from sketches. Current tools for creating animation are extremely complex. This makes it difficult for designers to prototype animations and nearly impossible for novices to create them at all. Simple animation systems exist but severely restrict the types of motion that can be represented. To guide the design K-Sketch, we have conducted field studies into the needs of professional and novice animators. These studies showed the wide variety of motions that users desire in informal animations and indicate how to prioritize these types of motion. Our design allows the most important types of motion to be defined with pen gestures, and gives visual feedback for coordination of events.

Credits: Prof. Richard Davis

Some time ago, Chris Neale showed off an awesome video of his stop motion animation prototypes. More recently, he has now published a software tool he built in Processing to create such videos. The tool is quite simple and basically allows users to capture screens with a webcam and export them to a folder. The Animationizer also supports a playback feature at 12 frames per second. Chris’ approach is to playback the animations and re-record them with a separate tool such as Screenflow or Silverback. (I also found CamStudio as an open source alternative). The tool is free of charge and comes with a Creative Commons Share Alike license. Thanks Chris! In his own words:

The Animationizer makes stop-frame animations quickly and easily using a webcam. I put it together to help make early prototypes for user experience design projects I’ve been working on. It might also be useful for art projects or science experiments – or maybe just to keep the kids occupied on a rainy afternoon.

For installation, basically you need to install Processing first and then download the code from his website. For those users on Windows, you might also need the WinVDIG for QT driver.

Recently a new version of the Pencil Project has come out which brings forth a set of new features. For those who don’t know the Pencil is an open source and community driven, UI design tool which originated as a Firefox extension (best extension of 2008). This new version however has stepped out of the browser and people can install this as a stand alone application. Other new features include the ability to interlink pages, export to various file formats, as well the creation of a Personal Collection (a library of sorts).

Another pretty cool feature is the Clipart Browser. The Pencil allows you to search the open directory over at clipart.org and insert SVG graphics straight into your mockup. Love it. :) Other than that, one minor area which could use some improvement is the handling of a group of items or reusing them across screens. Quite often UI tools either come with some sort of grouping or master functionality which seems to be missing here.

Give it a spin right here.

Batiste Bieler has just recently released an wireframing tool with both the python source and a demo available publicly. The tool, as its tagline implies, is quite simple and looks like it is just the beginning of a project. For now, users can start of by creating a wireframe by first specifying a grid on which to work on. Further, components can be inserted into the page from a pull down menu. I believe that in the next release Batiste will be opening up an administrative panel to allow users to create new components. Of course all components are dragable, resizable and editable. Excited to see some grassroots projects happening.

Check out the demo.

Credits: Batiste Bieler