Managing Wireframes More Effectively in OmniGraffle
I’ve been using OmniGraffle as my primary tool for wireframing (and most everything else) for about 3 years. In that time I feel like I’ve gotten pretty good at using it efficiently, but I do try to keep an eye out for new tips and tricks. Recently, I’ve been following along as the documentation geniuses at EightShapes have developed and released their InDesign-based documentation system called Unify. I was intrigued by one idea in particular: keeping wireframes and wireframe documents as separate files.
Since I started at Viget I’ve always developed my wireframes directly in our OmniGraffle template, and have frequently found myself struggling with pages that don’t nicely fit inside the frame we created for the design. Inspired by Unify, I realized that I didn’t have to do it this way. I could create the wireframe as a separate document, then embed it within the documentation template once the wireframe was ready to be delivered.
Demo Video
Rather than break the process down into detailed steps, I recorded a short video that demonstrates how this works in practice. I’ve provided a summary of the video below.
More Effective Wireframes in OmniGraffle from Viget Labs on Vimeo.
Creating the Wireframe
I’ve created a OmniGraffle document template that’s 512px wide, with the scaling set to 1pt = 2px, for an effective width of 1024px. This keeps the document to a reasonable size, but you do need to keep the scaling in mind as you work. However, there’s no reason a 1:1 scaling wouldn’t work as well, especially since you can then put the Konigi UI stencils to good use.
This document is my wireframing canvas, where I now do the bulk of my design work. Once I’ve complete the wireframe, I export the finished design to JPG or PNG at a reasonable resolution.
Creating the Document
Next, I open up the document template. This template has a rectangular shape set aside the wireframe. Now all I have to do is drag the image file I exported into this frame. I can adjust the zoom level to make sure that the entire wireframe is visible, or drag the image within the frame to position it. It’s easy duplicate the page, and show the top half of the wireframe in one, and the bottom half in the other. No need to actually split the wireframe in half.
Once I’ve embedded the image of the wireframe, I add my annotations as a new layer. If I make changes to the wireframe, replacing it in the doc is as easy as dragging the new image into the frame. Once everything is in place, I export the document to PDF for the client. A secondary benefit of this technique is that I can now deliver two versions of the wireframe: the annotated PDF, and a set of 1:1 scaled images.
No More Fear of Heights
Working outside the confines of the documentation template has made working with odd sized pages significantly easier, and I feel like the wireframes I’m producing are more more realistic (in a good way). Thanks to EightShapes for the inspiration, and I hope you find this approach as helpful as I have.
