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
- Style Editors
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.
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.
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.
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.
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.
There are several properties you can change regarding a shape.
The Fill Color
The Actual Shape & The Outline (color, stroke size, etc.)
Shadow
Geometry 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Open a URL
- Open a File
- Run a Script
- Jumps Elsewhere
- 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.
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!
