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.
You’ll want a template which provides the background for your wireframes. Here are some simple steps to make your own template:
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.
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.
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:
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.
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.
Questions? Comments? Email us at 'feedback' at this domain.
Posted on Jul 30th, 2012
development design , omnigraffle , wireframes
I often feel jealous of my iOS colleagues. How nice it must be, I think, to have a mere two set of screen resolutions to...
Velos Mobile • Entries (RSS)