The ZURBlog is where we discuss interaction design and strategy.

We use OmniGraffle to bust out fast, high quality wireframes here at ZURB. To help us crank those bad boys out, we rely on a few core features of OmniGraffle that allow us to stay focused on what really matters—the wireframing.

As is the case with all our deliverables, we do our best to maintain presentation and context with every deliverable (sketches, wireframes, mockups, etc) as they'll typically be emailed around without the original message. To keep as much context as possible, we put our logo, project name, document name, and task in the headers of our files like so:

Here's the Problem...

We're all human here. After a good jam session creating those wireframes, we sometimes forget to update that header information. We solved a big problem here by using shared layers in our documents, but needed to take it one extra step to help us out here.

In OmniGraffle, we typically have several canvases per document, meaning we have a lot of repeated information. To keep us sane and that information the same across canvases, we've used these sweet variables across shared layers. Here's how we wireframe faster by using OmniGraffle variables.

Inserting Variables

Inserting variables is easy. First, add some text to your wireframe. Next, while editing your text, open the Edit menu and select Insert Variable. You'll see a list of variables that come built into OmniGraffle including canvas name, layer name, dates, and more. Choose Canvas Name and you'll see your text field updated with the new variable.

Now, to make this work, you'll have to name your canvas as we have with our own wireframes. Be sure to keep the canvas names accurate while working to ensure your headers are always presentable and correctly identifiable. By having those descriptive canvas names, you also force yourself to consider the presentation more and keep your documents laid out well.

Ta-da!

And that's it! Coupled with shared layers, you can quickly and easily create a worry-free working template for all your wireframes. It'll save you time, keep you focused on the wireframing at hand, and does away with the worry of outdated document names.