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.
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.
Palette last modified 25 October 2007.
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.
Installing the palette
1) Download the file WireframeShapesAngeles.gstencil.tar.gz
2) Move it to your ~/Library/Application Support/OmniGraffle/Stencils directory. The ~ represents your user "home" folder. Palettes installed here will be visible only to you.
You're done.
Using the palette
When you open the stencil, drag the shapes onto your canvas. Be aware that you need to click and drag to select some of the elements that exist as multiple ungrouped objects, e.g. the form elements. I left these ungrouped so you can scale the text boxes without having the up/down arrows and the AJAX spinner scale disproportionately.
The title and footer elements use variables, so once you insert them into your master canvases, they will display the document title, page number, creator name, for the document/page that is being displayed.
To help you get started, I've also published a simple Web Design Template and a Greeking Stencil that work nicely with the Wireframe Stencil.
Purchase OmniGraffle Pro
You can purchase Omnigraffle Professional 4.0
To be notified of updates to this stencil, you can track this RSS feed.