The 30 Minute Wireframe

Wireframing is the part of the UX process where you begin to visualize the landscape of the interface you’ll be designing. Don’t worry if you aren’t an artist; you don’t need to be. All you need is graph paper and a pen. If you use a pencil you’ll be tempted to erase mistakes. Using a pen gets you used to how disposable these are.

You will go through a lot of versions of your wireframes. It’s okay — that’s expected! The whole idea of the 30 Minute Wireframe is to get you comfortable with throwing it away and making a new one.

Think you can’t draw? You can. I’ll go through the basic shapes I use for all my wireframes (this is where the graph paper comes in handy). This tutorial assumes you’ve already done your initial client ramp-up meeting, needs gathering, user flow, and any other research necessary.

Wireframe elements

Before we get started, let’s go over some basic wireframe elements.

Pictures: denoted by an ‘x’ drawn through the box

Text: a single line or group of lines

Icon: a small circle (with or without label)

Button: a rectangle filled in or labeled

Form fields: a line or circle followed by a long rectangle

State toggle: a rectangle split in half, with labels, one state shaded in

The key is to keep your elements consistent once you settle on a style you like. With these basic shapes you can start to see how easy it is to come up with your own common elements for your wireframes. The key is to keep your elements consistent once you settle on a style you like. This helps others on your team read through your wireframes quickly and helps when revisiting your wireframes later on.

Single panel

Now that we’ve got some basics shapes down, we’re going to start our 30 minute wireframe. We’re going to be designing a time tracking web application, with influences from better, more robust time trackers.

Single panel wireframe process (clockwise from top left)

You may be familiar with what a panel is if you’re a fan of comics like I am. In my wireframes, a panel is comprised of a single page view. As you can see from the walkthrough above, you can create a simple sign in panel in seconds with a few of our basic shapes.

A basic wireframe with no labels (clockwise from top left)

Normally I’ll label my panels as I go, but for the sake of seeing the wireframe with and without labels, I’ve separated the panels from the labels.

we’re doing this in 30 minutes, so quick-and-dirty is the name of the game At this level of abstraction, you’re able to focus on primary goals without getting bogged down by minor details. Let’s take a closer look at each of these panels with their labels.

Annotating

I prefer to draw my panels with one color and labeling my elements with another easily-differentiated color.

Here we have a logo, email and password fields, and a button. I like putting microcopy in quotes. No matter what you decide, try to find a method you like to keep track of your microcopy and keep it consistent.

On panels with a lot of elements, you’ll start to see how handy the lines pointing to the elements become.

The 30 minute wireframe

The finished 30 minute wireframe

Here’s what the finished wireframe ends up looking like. As you can see, it’s not the prettiest document, and isn’t going to win you any awards, but for the sake of mapping out your ideas in an efficient way, these kinds of low-fidelity sketches are great.

Originally published at transmission.vehikl.com on February 20, 2014.