All drawn in OmniGraffle. No bitmaps. I'll release a stencil for these soon, to accompany the Wireframe Shapes stencil.

My OmniGraffle Web Design Template has been updated. The master canvases now use the file name to populate the document title and the canvas name to populate the canvas title. This eliminate the need to manually edit these page elements in the master canvases.

To make this work, title your files without extensions and format exactly as you want it to appear in the document, e.g. save as "X Project v. 1.0" rather than "X_Project_v1-0.graffle". Mac OS X should understand the file name and association, but you may have issues around these file naming schemes depending on the file server environment you're working with.

Missing Christina's Widgetopia, I've decided to dump my screenshots of examples of user interface and interaction into a flickr group rather than keeping in the vacuum of my own experience. So now you can view screenshots I'm grabbing at the Design Pattern flickr group and feel free to add your own. The example below is from Daylife.

Design patterns are generally repeatable solutions to a commonly occurring problems.

This group was created to post examples of web design solutions seen in the wild to help people compare different solutions, and to find existing and emerging patterns to design problems.

Tagging consistency will certainly help make this useful, but it is likely that people will use different tags to describe problems, e.g. will you use "sign in", "log in", or "login" to tag a sign in interface? Consistency will allow you do things like search for stuff like Design Patterns: clustering.

A few months ago a few colleagues asked me if I could turn a design document into a low-fi clickable prototype to demonstrate interaction design on an application we were developing. I also talked to an IA recently who had the same need to demonstrate interaction, but lamented over the tools at our disposal.

I've used Visio and Axure Pro in the past to do quick and dirty demos of interaction. With Visio, it's been easy to link sheets together. But I've been spending my time primarily in OmniGraffle Pro lately, so I wanted to demonstrate to the other Mac-using IA's and IxD's out there how you can do the same thing.

With this simple process you can create working prototypes with exported PDFs or HTML with clickable images/image maps. The next step to get this to be a richer tool would be to have working form fields in the prototype, but not sure yet how you would do that natively. The hack would be to absolutely position divs for form elements over the OG image.

I made some minor modifications to the wireframe stencil/palette adding some new label markers, cursors including a hand pointer with tool tip, an AJAX spinner, a drop-down/selection menu with options showing, and a sizable window element.

Download the new version from the Wireframe page.