Wireframing With OmniGraffle, Part 1: Setting up your file

I started using OmniGraffle to produce wireframes over a year ago and haven’t looked back. I went from spending weeks creating greybox-style, perfect wireframe in Fireworks to being able to knock out 55 pages of wireframes in two days with a UX-heavy client.

Disclaimer: This is my current wireframing process for desktop-only sites. We, and everybody else, are still figuring the best scalable approach for responsive wireframing, although I believe that OmniGraffle can easily serve that purpose as well.

I once used Adobe Fireworks to produce wireframes and design comps, but found my creativity stifled when I duplicated my wireframe document to produce the comps. Although it saved me some time, I inherited too many of the design decisions from the wireframes; the end design would feel too boxy and, well, wireframey.

So, I decided to modify my process to infuse more creativity into my design comps. I always start on paper, roughly sketching out all of our design template pages. I keep these as fast and loose as possible to allow for quick iteration without overcommitting to a particular layout. Then, I move into Omnigraffle once the sketches are at a more solid place.

If you’ve never used OmniGraffle before, the interface is not intuitive and can be a bit intimidating. I learned OmniGraffle through trial and error (or, more accurately, error and error, with some trial sprinkled on the side), but you don’t have to experience my pain.

You can get a free 14-day trial here, so give yourself some time to poke around before reading much further. I also recommend skimming these resources to familiarize yourself with the basics:

To get started, I create a new OmniGraffle document in which to recreate my paper wireframe. There are a number of pre-built templates available, but I start with a “blank” document.

OmniGraffle has a number of strange defaults for a new document, so the first thing I do is uncheck boxes in the “Canvas: Size” palette (accessible from the Inspectors menu).

  1. Uncheck “Size is multiple of printer sheets”
  2. Uncheck “Auto-adjust the canvas size”
  3. Set “Ruler Units” to “pixels (px)”
  4. Manually enter page dimensions (I usually choose 1,200 px for the width, and change the height as needed)

These settings prevent my document from resizing when I drag objects around and set the ruler units to pixels, since I’m designing for the screen. You’ll also want to uncheck “Page Breaks” under the View menu. I like to drag guides from the rulers (⌘R if they’re not visible) to 100 px and 1,100 px to mark my content boundaries. This gives me 100 pixels of padding on either side of my content area.

And now you’re ready to get started!

Have you worked with OmniGraffle? Do you have any tips or follow a different process? Share your thoughts in the comments!

Download our Chapter Three Wireframing Template for OmniGraffle here.

In Part 2, I’ll talk about wireframing tips and how to leverage stencils to improve the fidelity of your wireframes, save time, and reduce headaches.

Next article

Attach files: 

Chapter Three Wireframing Template.zip

Original Article: