Wireframing is an important part of the development process. If it isn’t something your team does, it should be. Like blueprints for builders, wireframes give your team enough information to understand the product, estimate cost and architect foundations. This kind of information is invaluable in delivering a solid, well designed product on time and within a budget.

There are several approaches to doing wireframing and many tools that can help you wireframe. At Velos, we use Omnigraffle Pro, combined with our custom stencil composed of several freely available resources.

Create a Template

You’ll want a template which provides the background for your wireframes. Here are some simple steps to make your own template:

1. Go to File > New Resource > New Template…
2. Choose a Blank file.
3. Modify the Canvas Size and Canvas Grid inspectors to be the following:

4. Save as “Wireframe” in the Templates directory.

By setting snap to grid and having the major spacing be 10px with 10 steps, we can get pixel accurate wireframes. If you don’t set these, your views won’t fall on pixel boundaries as you nudge them around.

Create a Stencil

You’ll want to gather all your wireframing resources in one place. Perhaps you have a particular style to which you’d like to adhere. We’ve compiled our own Stencil from various sources. Here are some valuable stencil components that you can use to create your own.

• iPad/iPhone wireframe Stencil by David Morford.
• Twitter Bootstrap Stencil by Vigit.
• Glyphish Icons. The vector versions of these icons work great in Omnigraffle to provide placeholder iconography.

Add Flow Graphics

In order to make the flow of your wires obvious, you’ll want to have graphics that make it clear how a user gets from one screen to another. Omnigraffle Pro has quite a few arrow designs. We’ve set up arrows that jump over other arrows for easy visibility and also uses an orthogonal path.

Showing touches is important too. To illustrate a touch, we use circle with a semitransparent, large stroke. The end result looks something like this:

Our Stencil

To get you started, download a simplified version of our stencil. It has some other interesting things in it like vector forms of our branding and typography we commonly use. This allows you to keep a consistent style.

Example Wireframe

Once everything is set up properly, it’s very easy to produce high quality wireframes. I’ve created a simple example out of Mail for iOS. It isn’t complete, but it gives you an idea of what the software is capable of.

⬇ Example.graffle