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.

Quick product update. Last month ForeUI 2.0 has been released and came out with a set of new features. The prototyping tool now supports the sharing of resources on a hosted web site from which users could download or publish custom elements. Other new features include the ability to change themes (Windows 7 style has been added), hierarchical page management, and full customization of all draggable elements being displayed on the left hand navigation.

Visit: www.foreui.com

InPreso Screens is another web based wireframing application in the making to keep an eye out for. The company offers a hosted app as well as a downloadable stand alone version. One interesting feature which is being highlighted on their site includes the ability to embed inPreso files into other project collaboration tools such as Basecamp or Confluence. Being hosted, the web player tool also allows users to share their projects as a link and have the readers preview the work on a page by page basis. Heading in the direction of sharing, inPreso only naturally allows for multi user commenting and feedback features. As it stands today, the hosted application comes at around $79 per year. Have a look.

Try out the online version.

It’s probably nothing new that the sketch has been gaining quite some attention lately as a powerful design tool. Some UI designers have began to precede wireframing and prototyping with free-form pen and paper approaches that afford exploration and support a wider diversity of ideas. For over a year now, in my design process I’ve started doing just the same right after I picked up a set of markers and sketch pads. Looking back, sketching has been wonderful at giving rise to design representations that naturally act as conversation starters and therefore make sketching more so compatible with agile philosophies. However, traditional pen and paper has a few limitations which over the last few months became noticeable. As a reaction to this, I grabbed an Intuos 3 from Wacom, installed Adobe Illustrator and began sketching electronically using a pen and tablet. Finding the new approach superior, I have doubts I’ll ever go back to paper and wanted to share some of the reasons why.

Scaling

Like it or not, design ideas need to scale over time and good tools provide room for such growth. One thing that I love about Illustrator (which paper lacks of course) is that the art board or workspace can be stretched as needed whenever concepts need the extra room. The flexibility to resize the canvas is a really great feature especially during early ideation when multiple screens need to be shown together to tell a meaningful story. On the same note, another way Illustrator excels is in terms of a scalable fidelity. Whereas early on in a project the amount of detail might be small, over time however, the fidelity of an electronic sketch has the potential to develop. In a vector environment it is super easy to take a small UI sketch, stretch it to a larger size, and inject more detail inside of it.

Ease of Editing

Yes, in the real world we have pencils, erasers and the ability to redraw or correct our sketches to some degree. We can however only correct our paper sketches somewhat before they becomes unreadable. This isn’t the case with anything electronic or digital where cutting, deleting, undoing, redoing, erasing is second nature. A very common scenario is to draw different screens and only learn eventually that it makes sense for the two or three screens to be placed together – something that is very easily done by reorganizing or repositioning on the computer. Another superb thing about Illustrator is the ability to select a line and just redraw it, causing it the take on the new form. This of course can be done an unlimited amount of times in an electronic tool.

Legibility

Although this might not be the case for everyone out there, I personally find that my hand writing is very hard to read. Unless I spent extra care and time to write legibly, I find that on the computer it is way easier and quicker to type out text that can be read by others.

Carelessness

When I am about to sketch on paper, knowingly that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark. This slow down or inefficiency can be easily overcome in the electronic world with a tablet pen. When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. This careless quality of electronic sketching brings forth immense value by affording greater exploration to occur more freely.

Reuse

Illustrator allows to create symbols of artwork very easily which in turn speeds up exploration ever more. Let’s say you have the same screen or component which you want to use a number of times across your work. Dragging the selection into the symbols palette allows you to reuse or instantiate that artwork and still have the ability to edit it in one location with it updating throughout. This is simply a superiority that paper cannot compete with.

The above are the reasons why I moved in the direction of electronic sketching. Perhaps the use of paper can still be justified in collaborative sketching sessions when there are more than one designer at the table and the design activity happens simultaneously in real time. For the remaining times, I find that the electronic sketch offers advantages over paper that are just too good to pass.

Credits: Jakub Linowski

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.

Pidoco, is an online prototyping tool tool which supports a wide range of design activities. Users of this software can for example insert common wireframe elements onto multiple pages. If you drag and drop the freehand box, you can also sketch out line drawings more flexibly (although this still feels a bit jagged). Pidoco also supports a collaborative environment where multiple designers can work together on the same prototype, and allows you to keep track of a version history. On the same note, Pidoco documents can also be reviewed by others and annotated with notes. One interesting way of handling reusable elements is with the global layers feature. The visibility of layers basically can be toggled across any page which allows more flexibility. Of course, like any other similar tool, Pidoco also allows to export the work into interactive prototypes that can be bound with links.

One area where Pidoco truly differentiates itself from the rest of the competition is with the ability to run remote usability tests with the prototypes it generates. Designers can send out a link and invite users to participate in a usability test which the software also records and stores for future reference. I wasn’t able try this feature out, but it definitely looks pretty useful. Nice job!

Sign up for the 30 day free trial.

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

Clickframes is an open source software requirements tool which takes an XML notation as a source and generates a clickable document. First the requirements are written in the form of an appspec, are then fed into an interpreting tool (such as the hosted CLIPr), which in turn generates interactive documentation. Now don’t get me wrong, the generated documentation looks nothing like traditional wireframes. Clickframes are requirement abstractions which do not contain any structural information about various UI elements’ position or size (typical wireframe meat). Clickframes do however indicate the input elements which reside on each page as well as the paths of actions and the resulting outcomes that users can take. I find this interesting as this tool takes a stronger stand on the element of time as represented through such interactions. Hence, this tool visualizes cause and effect of user interactions explicitly, as opposed to having to be discovered.

Another definite Clickframe analogy which comes to mind is that of an interactive and auto-generated page description diagram. What both page description diagrams and clickframes in my opinion lack is the concreteness of elements in a given space which have been traded off for abstraction. For this, I assume there would be designers who start of projects by sketching and designers who begin by writing requirements. Perhaps Clickframes also resonate with what Ryan Singer of 37signals was speaking of when he mentioned that before the pen is laid to paper, a UI model should exist.

Credits: Jonathan Abbett & William Crawford of Beacon16

Plumb is an open source tool (GitHub source) for drawing out placeholders on top of the Blueprint framework. You can simply draw out the boxes and it will automatically create the HTML for you. So what’s in it for me you ask? I noticed in the past that there is a community of HTML prototypers out there who like to do their interactive wireframes with grid systems in their most native form. With that, I thought this tool might be interesting to some. Enjoy.

Oh, and if you haven’t noticed already, I have a thing for open source software. Hence a separate opensource tag just appeared in the right navigation bar to separate out these types of projects. Cheers!

Credits: Michael Daines

Easy Front-end Framework is another interesting compilation for speeding up the process of building HTML web sites or prototypes. The framework brings together and combines pieces of HTML, CSS and Javascript in order to ease development. For example users can easily set up a simple grid layout by means of equal width percentages or fixed widths. Furthermore, a number of interactive elements are also available which make it possible to inject such common prototype interactions as: popups, tooltips, navigation, jump to scrolling, and standard form validation. These interactions, although heavily based on jQuery, could still be very much useful for HTML based prototyping.

Have a look at the demo page to get a sense of what’s possible.

Credits: Alen Grakalic