Love em or hate em, we still annotate our work be it for ourselves or others during a design process. Jason has just released some quick tips on how to setup annotations in Omnigraffle as to make them optionally disappear when exporting to an interactive prototype. The use case being, at times it makes sense to have annotations visible (documentation), whereas at other times it makes sense to hide them (prototype). The technique involves the creation of a few canvases and layers as well as running of an AppleScript. An example graffle file with the working script is also offered. I haven’t actually tried this one, but I hope it’s useful to some of you knowing that there are quite a few Omnigraffle users out there in the UX community. Thanks Jason! Enjoy.

Credits: Jason Kunesh of Fuzzy Math

Ron has recently initiated a project with the intention of creating a visual language for representing gesture based user actions. He shares the belief of “gain[ing] common grounds when discussing interactions” and has just released the Gesturcon Touch Pack under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. The zipped file contains EPS, PNG and Illustrator files for your use. His approach supports such interactions as taps, holds, double taps, flicks and is achieved with circular shapes. @vitorious also threw the idea of combining this with my own notation. Hmm, pretty cool.

Credits: Ron George

Here is a vector based wireframing template freebie released by Janko:

The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects. You are not allowed redistribute it.

Credits: Janko Jovanovi

Another sketchy library has been recently released. This time by Kevin Wick for the Axure Prototyping software. This is version 2 and comes with support for the following widgets: lightbox, scrollbars, konveyor, shapes, hyperlinks, and improved button highlighting. Here is the demo and the download.

Credits: Kevin Wick

After being inspired by people’s UI sketches for almost a year now, only naturally, my own approach to drawn user interactions with pen and paper began emerging. This personal compilation of the various techniques which I find relevant, is being published as the so called Interactive Sketching Notation. The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner. This of course, as the version number implies, is an emerging visual language for sketching interactions which I hope to continue to evolve and improve well into the future. Thanks again to all those who made this possible and please let me know if you find it helpful or have any recommendations. If this inspires your own approach to sketching, I would also love to see some samples of how people use this. .

Download the PDF directly.

Credits: Jakub Linowski

Although I recently made a reference to the EightShapes Unify framework, I think it deserves a separate mention in the templates category. Their approach to UX documentation is a powerful one which emphasizes scalability and reuse. The extensive framework rests on Adobe InDesign templates and supports documents like wirefames, components, flows, page types and library assets. Download the templates straight from their web site.

I’ll be honest however. I’m trying Unify currently at work, and I have to say that InDesign lacks proper sharable objects (or symbols) that can be easily updated. I really miss the symbols which Fireworks is equipped with that allows to edit a group of elements all in one place, and have the remaining instances auto update. Other than that, if you can get used to externalizing reusable page objects as components, then the need for this feature diminishes.

Credits: Nathan Curtis – EightShapes

Axure is quite the popular prototyping tool for which a ton of widgets and libraries have started emerging. These downloadable and reusable pattern libraries can often speed up the prototyping process. Here is a quick compilation of the latest I recently found:

1. Official Libraries & Widgets from Axure
2. Layout grids for Axure and Pencil (from Userfocus) – a 960-grid system template
3. AXLIB – a robust design library of usable interaction patterns
4. Ari’s OS X Axure RP Widget Library – a comprehensive library of OS X widgets
5. Free Axure Design Patterns (from William) – a couple popular UI patterns
6. Conetree Axure Patterns – hand gesture icons & clear input field
7. Total Wireframe – a few patterns (with a small price tag)
8. A Clean Design – Better Defaults
9. A Clean Design – Axure Design Pattern Library v2.0
10. A Clean Design – Social Widget Library for Axure
11. Konigi Icons for Axure

Did I miss anything? If so, please add to comments.

Recently, quite a few representation about human activity have been merging in with the wireframe. Similarly, here is a template which contains various possible gestures on a touchscreen. Elaine came up with interesting ways to represent: taps, double taps, drags, flicks and pinching. Unflattened PNG can be grabbed from here (Elaine says: “I’m okay with people using the images for wireframes, presentations and educational purposes, but no modifications please”).

On the same note, Dan also posted another gestural icon set over here.

Credits: Elaine Chen