Featured Image
July 20, 2011
 · 
3 min read

7 Reasons to Love OmniGraffle for UX Design

Having a reliable and usable application that allows me to be productive and output quality documentation is essential.

Over the years I've used an array of different applications from Fireworks, Illustrator, Visio and Axure, but I've started using OmniGraffle Pro as my primary tool a few years ago and haven't really looked back!

Context

Now what tool you use for creating IA/UX documentation will very much be down to the type of document you are trying to create. If you are going for info graphics maybe Illustrator will be more suitable. If you want a functional HTML prototype, then Axure or Fireworks might be more up your street. Visio on the other hand is suitable for #@!! Well we won't open that old debate!

For me, when creating wireframes, sitemaps and other common UX deliverables and outputting those documents for either electronic distribution as a PDF or for printing, OmniGraffle Pro wins hands down.

Here's a quick list of some of the things we like and the way in which they help me create beautiful looking documentation in a productive and efficient way.

Shared layers

Shared layers are a sure-fire way of ensuring your document is easy to update and maintain. Shared layers are especially useful for repeated elements like page headers and footers as well as a place to store your page variables such as page title, number etc.

Copy as PDF (OmniGraffle smart objects)

Another handy feature which works in a similar way to PhotoShop smart objects is Copy as PDF. This allows you to create a master file for a particular page component and then use it as a reusable object across your document. If you subsequently have to amend the component then those changes will be replicated across your entire document. This is useful if you have a repeated module (but not necessarily on every page) such as a carousel, or log in form.

Template variables

Template variables are very useful for automating page attributes such as Canvas name, page and version number etc. Insert them into a shared layer and they will be replicated across the entire document.

Customisable stencils

One thing that sets OmniGraffle apart from Visio and most of its rivals are the huge set of quality stencils available at Graffletopia (an online stencil repository). Not only that, but you can search for new stencils on the site within OmniGraffle itself. Having a common set of design patterns at your finger tips speeds up wireframe development and ensures your document retains a consistent look and feel.

Duplicate Canvas

Something that I've always found overly complicated to do in Visio was to simply duplicate a page. In OmniGraffle it is as simple as right or CTRL + click and you're there! Handy if you are creating different states of the same page.

Export to PDF

My primary delivery method for my wireframes to clients is as a PDF document (whether printed or on screen). OmniGraffle exports seamlessly to PDF (and a variety of other formats) and the results are outstanding.

Table of contents (via AppleScript)

Not necessarily a built-in feature (but very handy all the same) is the ability to create a table of contents. Courtesy of unitid comes the table of contents AppleScript which inserts a table of contents page into your Graffle document (best saved until after you've done all your wireframes).

Other handy features

  1. Grouping objects
  2. Locking layers
  3. Drag and drop between documents

Things I'd like to see in OmniGraffle 6.0

  1. Native support for table of contents
  2. Faster interface loading (if you have a lot of stencils OmniGraffle can get sluggish)
  3. Consolidation of inspectors
  4. Proper HTML export for functional prototypes

Summary

No application is perfect, and as I mentioned previously, the software you use will very much depend on your goals and context. For me OmniGraffle most fits the bill for the creation of static wireframes. If you do more prototype development then it might be worth checking out Axure. Let me know what you think!

Other Blog Articles

Featured Image
A Sketch App tutorial showing how you can create UX mockups in 7 simple steps using Sketch, the Data Populator …
March 2, 2020
 · 
4 min read
Featured Image
A step-by-step account of how I created a design system for my own website using Sketch App and Zero Height.
February 23, 2019
 · 
7 min read
Featured Image
12 tips to consider when designing an online gym class booking experience. A personal story of bad UX and frustration …
October 21, 2018
 · 
7 min read
Featured Image
Here I share the design tools I use on a daily basis to help others going through the same predicament …
July 2, 2018
 · 
8 min read