OmniGraffle UX Template

Made for UI design

OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs, e.g. title page, wireframes, storyboards. Grid with guides keeps your layout tight. Sized to work in 100% at 1:1 ratio in terms of pixels—the wireframe is 950px wide 30px cols. To print, export to PDF and scale to fit. In presentation mode, you'll be showing true pixel dimensions.

Installation

1. Download the template.
2. Unzip it and move it to your ~/Library/Application Support/OmniGraffle/Templates directory. The ~ represents your user "home" folder.
3. Download the diagram style
4. Move it to your ~/Library/Application Support/OmniGraffle/Diagram Styles directory.

Download

Download Version 2.5.1 (11/28/11)
Download Diagram Style for Sitemaps
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.











Frequently Asked Questions

Q: What's the deal with the huge pages?

A: I use Page setup to control canvas size. The 22"x34" template was scaled to fit comfortably when printed in 11"x17". I scale up so that I can work in 1:1 ratio for presenting on screen in PDF.

There are options in the Canvas inspector that allow you to print one canvas per sheet rather than scaling to fit across sheets if your page setup is smaller than your canvas.

Q: How do I print these large documents?

A: When printing, do this in your print dialog:

1) select the Paper Handling options from the drop down menu
2) check "Scale to fit paper size"
3) check "Scale down only"

Your document should now print at the right scale for whatever paper size you use. Keep in mind that that template is made ideally for projecting on screen and for printing on 11x17 paper.

Q: I can't open this file in OmniGraffle 4.x!

A: This file was saved in OmniGraffle 5, but you should be able to open in OG 4 by renaming the extension from .gtemplate to .graffle.

Q: What are the numbers above the wireframes about?

A: The numbers above the wireframes are column numbers for a 24 column grid. If you turn guides on, you'll see guide lines for each of the columns. If you want to hide them from your exported document, just hide the column number shared layer.

Q: How do you use these?

A: I have occasionally posted example OmniGraffle documents to articles I write in the Notebook section of Konigi. There's a sample deliverable here.


Version Information

View version notes.

2.5.1 (11/28/11)
Fixed grid settings on all pages. (Thanks to Jayson Elliot for the heads up.)

2.5 (8/15/11)
Added iPad Templates.

2.4 (4/27/09)
Added Sitemap, Persona, and Mental Model examples. Sitemap requires Konigi diagramming style.

2.3
Maintenance release

2.2 (3/23/09)

iPhone template recreated using OmniGraffle drawing tools rather than imported PNGs to shrink file size. Template converted to flat XML format rather than bundle. Guides cleaned up on all pages.

2.1 (1/15/09)
Major alignment, grid, and layout changes. Added 24 column guides with vertical and horizontal gutters on wireframes. Added appropriate grids to all templates that necessitated alignment guides. Added small wireframe and iPhone templates.
2.1.1 (1/16/09)
Moved column headings from layer to shared layer on Wireframe 2 Up.

2.0 (8/26/08)
Updates to version support OG 5.x. Removed example persona and use case templates.

1.x
Original urlgreyhot OmniGraffle Web Design Template, formatted for OmniGraffle 4.x and 5.x (Original is available urlgreyhot).

Usability Test Data Logger for Excel

User Focus’ Todd Zazelenchuk provides an excellent Microsoft Excel tool with macros that turn the document into an application for collecting usability test data.

“This spreadsheet allows you to measure task completion rates, analyse questionnaire data, and summarise participant comments. It even includes a timer so you can measure time-on-task. The spreadsheet is highly customisable.”

Download the Excel document and documentation for free.

http://www.userfocus.co.uk/resources/datalogger.html

960 Grid System

The 960 Grid System is a CSS Framework based on 960px width and can be used with 12 or 16 column grid. 12 column grid uses 60 px wide columns and 16 column grid is used with 40 px columns. Each has 10px gutters on either side or 20px combined between columns.

960 px was chosen as a base number because it is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. Seems like fairly flexible system, although I find the classes in use on Blueprint, particularly when nesting, to be a little simpler.

http://960.gs

Balsamiq Mockups: Prototyping Software

Balsamiq Mockups is an incredible application for creating user interface mockups. The application allows you layout interface sketches using the 50 interface controls included. Controls are added to the canvas or notebook by dragging and dropping or by using an insert input with auto-completion suggestions. As with Visio, many controls may be easily customized by editing values in the properties panel, and may be modified to show state, e.g. selected, disabled, etc.

This looks like a very interesting application for sharing wireframes and mockups via one of the CMSes that provide support for it. It does not have typical drawing tools, so you cannot customize the stencils at this point, but this should serve very well for many people’s needs around communicating interface ideas.

The application is built on Flex and is available as a client plugin for systems including Confluence and Twiki, and may also be run as a standalone Adobe AIR application. It allows export to XML for importing into new mockups, or to PNG.

http://www.balsamiq.com/

Grid Calculator

Matthew Pennel’s Grid Calculator is a tool to calcuate a grid based on easy to use slider controls and forms.

[A]llows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you haven’t gone over that magic 1024px!

If you’re not bothered about the column and gutter widths having an exact proportional relationship to the font size, you can edit the values directly (they are plain text input boxes). The total width will reflect changes as you type.

http://www.29digital.net/grid/

GridMaker Script for PhotoShop

Andrew Ingram’s GridMaker is a brilliant script for Photoshop that can be used to automatically generate guides in your PSD.

The script allows you to enter the series of columns that should be laid out both horizontally and vertically. Then you set the maximum dimensions for the canvas. To generate a Blueprint grid, for instance, you’d enter “30,10” to create a PSD with a series of repeating columns of alternating 30 pixel units and 10 pixel gutters. You can set any number of columns in the series.

The script is saved into your Photoshop “Preset / Scripts” directory and is summoned by selecting “File $gt; Scripts.”

http://www.andrewingram.net/articles/introducing_gridmaker/

Pencil Project: Open Source Drawing and Prototyping Software

Duong Thanh An has begun work on Pencil, an open source diagramming tool to free users from commercial products such as Visio and OmniGraffle. Pencil is an application that runs on the Mozilla Gecko engine and can be run as a Firefox 3 tool, or in standalone mode (Windows and Linux only for now).

The first version looks very promising and provides the basic functionalities needed to create diagrams and page schematics. What looks most impressive to me presently are the features of the Windows UI stencils that I’ve missed since moving away from Visio. UI objects in the Windows XP Widgets stencil provide properties for changing the state of a control, e.g. right click a form checkbox to select disabled or selected, and the control takes on that new state. Right click a combo box and select disabled or focussed. This is one of the functionalities in Visio that just never made it into OmniGraffle.

Pencil also provides canvas masters using the background page model Visio introduced, which I find to be pretty well implemented. There are still a lot of features that need to be implemented for me to consider using Pencil as a replacement tool, however. Basic shape and line drawing tools are absent, for instance. And while PNG exporting is good, I would need support for better export options. PDF or even SWF of entire documents would be ideal. For a first release, this looks very promising.

http://www.evolus.vn/Pencil/Home.html