Advertisement
UX

A Beginner's Guide to Wireframing in Omnigraffle

by

Omnigraffle is a tool that can be use for many purposes, but today we'll explore how to use it for wireframing. I've used all kinds of applications for wireframing and, while it's not perfect, Omnigraffle has the best combination of capabilities and efficiency for my workflow.

The biggest thing it doesn't have is great interactivity for prototyping. You can produce clickable prototypes but that's about as far as it can go. You can do things like show/hide layers, but those really only work within Omnigraffle.

The other downside is it is Mac only.

However, despite its few shortcomings, it's a fantastic wireframing tool. Let's run through the program, examine how powerful Omnigraffle is and how we can use it to put together stellar wireframes.


The Interface

The following elements are the ones we'll look at in this tutorial. If you have questions or other elements you want further information about then leave a comment and I'll do my best to provide that information.

  • Canvas and Layers sidebar
  • Stencils Window
  • The Inspector
    • Style Editors
      • Fill
      • Outline
      • Shadow
      • Image
      • Text
    • Alignment/Properties
    • Interactivity

Canvases and Layers

The Canvas and Layers sidebars are used to see the organization of your full document and its content. They show both what the content is and its hierarchical structure to help you manage and organize very easily.

Canvas & Layer Sidebars

Canvases are how you set up your pages. They can house any sort of content you need. I usually start with a cover page, some flow diagrams, and some information about the users and problem I'm trying to solve. Then I begin my actual wireframes.

Canvas Sidebar

Layers are used to organize within a canvas. If you are familiar with Photoshop or Illustrator then it works the same way in Omnigraffle. Within layers you can organize and move around individual elements. Shifting layers up and down will help create a manageable page structure that displays the way you need it to.

Layers Sidebar

Do you have something like a navigation bar, background, or footer that spans multiple pages without changing? Then use a shared layer. This allows you to easily reuse a layer across multiple canvases. It also allows you to easily change that layer and have those changes cascade across all the canvases in which the shared layer is used.

Keep in mind, though, that it needs to retain the same position across all canvases. If that's a problem then use Shared Objects that are described later in the article.

Shared Layers

Shapes and Text

Shapes

Shapes are your most crucial tool when creating wireframes. I typically keep mine pretty basic with rectangles, circles, and triangles. Creating a page layout in basic shapes can help you get a decent idea of how the page will feel and flow. Other than iconography you rarely need anything outside of basic shapes and text for your wireframes.

Shape

There are several properties you can change regarding a shape.

The Fill Color

Shape Fill

The Actual Shape & The Outline (color, stroke size, etc.)

Shape Outline

Shadow

Shadow

Geometry Properties

Shape Properties

You can also add shapes to your favorite shapes. This comes in handy when you have a shape that has particular properties which you use over and over. Just select the shape you want and then select Add Current Selection to Favorite Styles from the Shapes menu.

Favorite Shape

Text

You can add text within a shape and align it within a shape. That text then acts as a property of the shape and moves in tandem with that shape.

Text within shape

You can also have stand-alone text. Besides your standard use, this also comes in handy for shapes when you need multiple bits of text positioned within the shape.

Text outside shape

There's also plenty of the typical tools to get your text in shape. Since Omnigraffle is a design tool, it also makes things like leading, kerning, and margins very easy to handle as well.

Text Edit

Stencils and Templates

Stencils and Templates are great tools for elements that you'll reuse. Templates allow you to have a document already set up and ready for you to fill in. I have a specific template I use for my work, but Omnigraffle comes with some pre-loaded ones as well. Of course, it's easy to set up your own. Stencils are pre-styled elements such as buttons, text, icons, and other individual elements for your wireframes.

Templates

You can also edit Stencils and Templates. For Stencils you just click the Stencil and then go to the menu at the top and click Edit Stencil. That brings up the stencil and you can edit just like any other Omnigraffle document. The same goes for Templates, in that you can edit them just like any other Omnigraffle document.

Edit Stencil

You can create your own Stencils or there are several sets already out there on the internet for you to download. I use some from Graffletopia.com. I usually use those for specific things like stick figures or mobile elements. My main sets for most common elements are:

These will get you building fantastic looking wireframes very quickly.

Stencils

Shared Objects

Now for some weirdness

For a long time I thought the lack of having shared objects was a big downside to Omnigraffle, but Omnigraffle actually does have shared objects. The problem is that the way you create and edit them is not salient whatsoever. Most of the time Shared Layers are adequate, though sometimes you need the object to be the same but in a different position on another page. That doesn't work on Shared Layers. Let's walk through the steps you need to create Shared Objects.

First create your object. It can be as complicated as you need it to be. Group all the elements together to create one object. Select the object and then select Copy as PDF from the Edit menu.

Copy as PDF

Now for some weirdness. Delete the original and paste that new copy. You then need to double click into it to edit it. It will then open it as a new Omnigraffle document. Don't worry, just edit and save it. You can then close that document and go back to your original. All the changes will show up across all instances that you paste into the document.


Alignment and Doc Properties

There are also a few things that aren't crucial to your wireframing, but being aware of them will definitely make your life easier. These include alignment, spacing, and canvas properties.

Alignment is something I use all the time. All you need to do is click the side, corner, or center you want to align and then click either the vertical or horizontal align button. That then aligns the selected objects. The first selected object is going to serve as the anchor for the alignment, so be aware of that.

Alignment

Spacing elements is also important. You can set specific spacing distances and then space the selected elements that way. However, what I more commonly do is just use the quick even space buttons. These take all the selected elements and space them evenly between the first and last selected element. So, just set your two furthest elements where you want them, select all the elements you need and click the button. Bingo! Your elements are nice and evenly spaced.

The default setting I've usually seen has the canvas properties set to measure in inches. In digital, that's not very common so switching to pixels is much more helpful. The best way to set this up is within your template. Select all canvases and then switch the Ruler Units from inches to pixels. There are several other options as well if you do need to work in different units of measurement.

Canvas Properties

Interaction

If you need some basic interactivity with your wireframes then Omnigraffle has you covered. All you need to do is select the element that will be interactive and open up the Actions menu in the Inspector. You can then have the element perform the following actions upon click:

  1. Open a URL
  2. Open a File
  3. Run a Script
  4. Jumps Elsewhere
  5. Show/Hide Layer(s)

I've only ever used the URL and Jumps Elsewhere options. Jumps Elsewhere is the most useful as it makes the wireframes a clickable prototype that moves from canvas to canvas.

Actions

Warning: I've never had the Show/Hide Layer(s) option work within a PDF. It only works within Interactive mode within Omnigraffle (holding down B).


Conclusion

Omnigraffle is a great tool that many UXers use on a daily basis. It creates superb wireframes and provides ways to create them relatively quickly.

If you're into UX or are just looking for a great tool to put together some wireframes then give Omnigraffle a try. Again, let me know in the comments if you have questions and I'll do my best to respond. Good luck wireframing!

Related Posts
  • Design & Illustration
    Photoshop
    Create a 3D, Fruit-Textured, Text EffectOrange text preview 400x277
    Use a combination of Modo, Photoshop, and Illustrator to create a text effect made of oranges.Read More…
  • Computer Skills
    Office
    Getting Started with Pages for iCloudPages icloud icon
    Apple's Pages for iCloud web app is a full-featured word processor that works much like its desktop counterpart. In this tutorial, you'll learn how to use all of Pages' online features and how to use it to craft beautiful documents.Read More…
  • Design & Illustration
    UX
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Design & Illustration
    Tools & Tips
    10 Ways to Create Professional and Organized PSD FilesTop10 organize preview retina
    No matter what type of work you do in Photoshop, keeping organized PSD files is an extremely important task. This is especially important if you work with a team of designers, developers, or artists that need to use your Photoshop files later down the line. In this tutorial, I will share 10 useful tips and techniques that you can use to help create professional and organized PSD files. Let's get started!Read More…
  • Design & Illustration
    Designing
    Create a Colorful Geometric Pattern in PhotoshopCreate a geometric pattern in photoshop 400x400px
    Patterns are a great way to add additional texture and depth to your designs. Some can appear to be fairly complex, and the thought of making one can be overwhelming. You may find, however, that many aren't as difficult to create as they look. In this tutorial, I will show you an easy way to create colorful, and complex-looking geometric patterns in Photoshop.Read More…
  • Code
    JavaScript & AJAX
    Getting Into Ember.js: Part 5Getting into ember
    Editor's Note: The Ember.js team has shifted to an expedited release schedule and as of this publication date are on version 1.2.0. This tutorial was written pre-v1.0 but many of the concepts are still applicable. We do our best to commission timely content and these situations happen from time-to-time. We'll work to update this in the future. In part 3 of my Ember series, I showed you how you can interact with data using Ember's Ember.Object main base class to create objects that define the methods and properties that act as a wrapper for your data. Here's an example:Read More…