Use Pen-and-Paper Wireframe Tools to Create Incredible User Experiences

Use Pen-and-Paper Wireframe Tools to Create Incredible User Experiences
Use Pen And Paper Wireframe Tools To Create Incredible User Experiences

Big ideas often start with a simple drawing. Whether it’s a new business idea or the solution to a problem. The same is also true for great User Experiences.

It might be hard to believe that some of the world’s best online experiences started with a sketch.

A sketch!? Yup. Not a project plan or a big requirement document, but an easy to understand drawing that answers the questions of “what do we want to create and how will it help the customer?”.

Why sketched wireframes are useful

‘Wireframes’ are one of the ways we can plan digital experiences – they are illustrated representations of what an online experience (whether its a mobile application or desktop website) will look like, before a single line of code is written.

My favourite way to start wireframes is with a pen and paper. Although tons of software exists to create wireframes, I start with pen and paper because:

  • ■ it’s far quicker to sketch an idea than it is to mock it up using software
  • ■ it’s easy to share and iterate sketched wireframes with a large group
  • ■ you can spread out drawn wireframes on a table, so as to understand the larger context how they all work together

A simple sketched wireframe can look like this:

Using wireframe tools to create great user experience - Simple Wireframe Sketch

‘Wireframe with colour’ by Rob Enslin http://www.flickr.com/photos/doos/4081107160/

And here’s one with a little more going on:

Using wireframe tools to create great user experience - Wireframe 2

‘Wireframesv1’ by Tim Hirt http://www.flickr.com/photos/7910910@N02/5567992388/

4 essential pen-and-paper wireframing tools

Many people I work with have said things to me like “I can’t draw, how can I sketch a wireframe?”.

Everyone can sketch, period. No joke. 99% of people I’ve worked with are genuinely surprised just how much they can do provided they’re willing to give it a go for 10 minutes.

Here are 4 tools I use and recommend to others for wireframes.

1. Blank Sketch Pad and Sharpie Pen

Simple as it may sound, there are few substitutes for a landscape A4 sketch pad (with decent paper) and a Sharpie pen.

Wireframe-A4-Blank-Sketchbook

If you like to free-form your sketches, this is the way to go.

After much hunting in Melbourne, I buy mine from Melbourne Artist’s Supplies and prefer to ones with the ring binder, as I often tear out pages so as to share them.  You’ll be able to pick up a sketch pad from any good art supplier.

2. Sketch Pads

If you prefer to sketch your ideas within a frame of reference, why not try online-specific sketch pads?

These are excellent tools to provide you with a frame to work within.

You can find sketch pads at App Sketchbook and UI Stencils.  Both ship internationally.

3. Print your own wireframe sheets

Now, if you want more variety in your sketch templates, you can also print your own.  This gives you the added flexibility of selecting which template you wish to use for your sketches, so you can switch formats when you have different subjects (whether it be a website, a mobile app, or a tablet app).

Smashing Magazine collated an incredible set of 29 free printable templates for Websites or Smartphones. Also included are other templates for a variety of uses which range from ‘presentations’ to ‘task flows’.

Specky Boy also provides a useful collection of printable wireframes.

4. Stencil kits

Stencil kits are excellent in providing pre-defined forms and patterns for your wireframes.

What’s more, these stencils leverage patterns used commonly by specific devices and their operating systems.


iPhone Stencil from UIStencils.com

UIstencils.com is the best site for these stencils and they provide a whole range to choose from so you can select the stencils you feel most connected with.

And if the stencil doesn’t have the icon you’re looking for, you can draw your own :)

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
I'm a digital strategist and channel manager with 15 years experience in digital, across marketing, e-commerce, online sales, digital and mobile app strategy. Companies I've worked for include Coles, ANZ and GlaxoSmithKline. I'm also a graduate and previous sessional lecturer of Strategic Foresight at Swinburne University.
Simple Share Buttons