Wireframes


Sketches are often better tools for communicating designs than high fidelity illustrations or schematics. The purpose of the sketch style wireframe is to prevent the intended audience from thinking about visual design and focus on the functionality and behavior you are proposing.

I'm happy to announce the release of this set of sketch stencils for OmniGraffle, based on the Wireframe Stencil. This set of user interface sketch stencils is designed for OmniGraffle 5.x. OG4 users are able to use the stencils by changing the .gstencil extensions to .graffle. The sketch kit contains all of the UI elements you'll find in the free Wireframe Stencils we provide at Konigi, plus additional shapes and elements to make it easier for you to adjust to this style of wireframing.

As usual, I'm sticking to the goal of keeping the tools on this site inexpensive or free. Your $10 purchase of this stencil set entitles you to free upgrades forever.


The Konigi Wireframe Icons have been updated. PNG versions and contact sheet has been added for all icons. New icons including User (silhouette from front), Groups, Microphone, Clock, Phone, Printer, Power, TV Widescreen, Remote controls, Volume, alternate versions of Cart and Image, and much more have been added. Additionally, some icons have been modified for stylistic consistency.


This is a set of grayscale cursors and icons that come in handy when designing wireframes, aka user interface schematics. The product includes a standard set of cursors, and many of the icons you need for the design of web-based user interfaces.


This is a major revision to the OmniGraffle Wireframe Shapes that I've been providing at urlgreyhot since OG version 1.x. The new version adds new elements and is formatted for OG 5.x. Get it here.


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.

screenshot

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.