The 30 Minute Wireframe

by Caryn Humphreys on February 20, 2014

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 needs gathering, user flow and any other research necessary.

Wireframe elements

Before we get started, let’s go over some basic wireframe elements.  If you’d like to skip going over the elements, click here to jump straight to creating your first full panel.

images

images: a box or rectangle with an x

 
text

text: a single line or groups of lines

 
icon: circle (with or without label)

icon: a small circle (with or without label)

 
button: a rectangle filled in

button: a rectangle filled in

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

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

 
toggle: a rectangle split in half, with lines as 'labels', one side shaded in

state toggle: a rectangle split in half, with lines as ‘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.

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

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. Normally I suggest drawing your panel with one color and labeling your elements with another color (see below).

Labeling a panel

Label your panels with a different color for easier readability

Labeling panels

Referencing your research and your user flow, and using your basic elements, you’re ready to sketch out a basic wireframe. If you’d like to skip the label descriptions, click here to see the finished 30 minute wireframe.

full flow

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.

Sign in

sign in panel

The sign in panel

As you can tell, these elements don’t need to be perfect in order to understand what is going on. We have a logo, email and password fields, and a button. I like putting microcopy in quotes. Find a method you like to keep track of your microcopy, but as with all things: keep it consistent.

Landing page

the landing page

The landing page panel

Here we start to use a few different elements. In the header we have a logo, and two small nav icons for Report and Manage. We also have a user icon and a line representing some type of action drop-down menu for the user logged in. In the body we have two calls to action: Create Project represented by large text and a button, and Track Time also represented by large text and a button.

Create project

create project

Create project panel

On this panel, the user sets the clientprojectinvoicingbudget and then presses the button Select Tasks & People. The way each of these is selected (text field, dropdown, etc.)

Tasks & People

tasks and people

Tasks and people panel

Here our user will select the task to be timed, and the people assigned to the project. You can see I’ve labeled the large heading as Tasks, and each of the tasks in the list has an “x” icon which will later function as deleting the task, with a button below the task list for Add Task.  Similarly, I’ve labeled the People section, and have laid out the people in the same way as the tasks with an “x” icon for removing people.  Additionally, I’ve included a checkbox for identifying the Project Manager for the task.

Manage projects

manage projects

Manage projects panel

In this panel, you can see how I lay out long lines of elements. To save space for labeling, I will again use the quotes to identify microcopy (Edit for the first button, Archive *and Duplicate* for the second group of buttons), and a simple identifier for the text on the line: Project Name.

Track time

track time

track time panel

On the last panel we’re labeling the actual time tracking part of the application.  On panels with a lot of elements, you’ll start to see how handy the lines pointing to the elements become.  I probably should have labeled things in some kind of order, but we’re doing this in 30 minutes, so quick-and-dirty is the name of the game. As long as it’s readable later, don’t worry about this being a portfolio piece or anything. Here you can see I’ve labeled the main heading as Track Time in quotes to signify microcopy. I’ve got a Manual Entry button and a state toggle with Day and Week as the states. On the next line we have days of the week with the first day selected. On the line below the weekdays, we’ve got the Task, Time Count and a button that says Start.

The 30 minute wireframe

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. Join the conversation!

The following two tabs change content below.

Caryn Humphreys

UX Designer
Caryn is a Product Designer. She likes writing about CSS tricks she's discovered, Best UX Practices, living and working in a startup community, and fostering a badass team culture.

Latest posts by Caryn Humphreys (see all)