OmniGraffle Wireframe Palette


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.


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 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.

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.

Updated the wireframe stencil with a few icons some friends have asked for. Download here (WireframeShapesAngeles.gstencil.tar.gz).

This update adds a few icons that have been requested and makes the icons transparent so they can be laid over colored backgrounds. The line weights will also scale appropriately when enlarged.

Got 2 requests to create a tree stencil. I've not included that into my set, but you can find one in John Dial's Windows Gui set.

The wireframe stencils are now being maintained at Konigi. Please download them there.

OG 4.x palette last modified 25 October 2007. This version of the stencil set is no longer being maintained.

This is my set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle (Mac OS X). The image at right shows the stencil in action. It consists of a basic set of shapes including: browser chrome, title and footer block, icons, form elements, a greeked text block, text headings, some boxes, label and note blocks, navigation elements, and some icons created entirely in graffle.

Purchase OmniGraffle Pro
You can purchase Omnigraffle Professional 4.0 from Amazon. I highly recommend the Pro version over the standard -- the Pro version allows you to create documents using slide masters.