I'm pleased to announce the first of a series of products that I'm producing for creatives involved in design for the screen. The first 2 products are graph paper notepads formatted for user interface design and design of time-related sequences.

The Wireframe Graph Paper Notepad is made for visual designers, interaction designers, and information architects designing for the screen. The notepad has 50 sheets at 8 1/2 x 11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan) so that the grid lines and any sketch lines made in non-photo blue pencil can be knocked out when scanned and processed in graphics software.

The Storyboard Notepad is made for creatives who think about interactions over time, whether doing user interface or interaction design or planning video, film, and animation sequences. The notepad has 50 sheets at 8 1/2×11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan).

You can find out more about these products at http://konigi.com/store. Due to several large advanced orders supplies are limited.

I welcome your feedback!

I updated the OmniGraffle Web Design Template.

This web design template for OmniGraffle Professional provides the basic layout for a design deliverable including the following master canvases: document title, section title, wireframe (portrait and landscape), storyboard, and blank. The wireframes were created at 950px wide with guides following the Blueprint CSS Grid system. Wireframes also have 2 small hairline marks around the 600px point to mark the approximate fold. Go grab it here.

In the past wireframe stencil I haphazardly tacked on icons that I found useful to the shapes, but not necessary. I'm splitting those off to keep the wireframe stencil pure, but plan to release different libraries of stencils for other purposes. These stencils give an idea of the kinds of things that I'm separating from my current wireframe stencil.

Sometimes you gotta make wireframes look real. This is a graphic for positioning in a page about Soap Operas.

Update to OG Wireframe Palette. Added the following:

• Aquafied buttons
• Video player controls
• Hot icon
• Folder icons

I know the Aqua buttons are hi-fi, but they're useful when you're mimicking OS windows occasionally, e.g. pop up browser windows, JavaScript alert windows, etc.

Download from the wireframe palette page.

I've updated the OmniGraffle Wireframe stencils. In this release the following elements have been added or updated:

* New callout styles added
* New forms elements added: contextual help, captcha
* Tabs and controls added
* Some commonly used icons have been added

I think I will have more of the icons to come, and may eventually separate the icons from the wireframe stencil if there ends up being too many. Since the set is small for now, I'm keeping it in this document.

Download the updated stencil now.

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.