Wireframing the Digital Way With Pen and Paper

By February 24, 2015 No Comments

Prototyping or wireframing is an essential step in the creative process. We do it all the time to sketch out website concepts and mobile app screens to get a feel for how the user might move through the site or application. It’s the first step in moving ideas from your brain into something more concrete so you can start to manipulate and improve your original concepts. It’s also a crucial step along the way to your minimum viable product.

There are lots of wireframing tools to choose from, but one of the simplest is good old pen and paper. It’s hard to beat pen and paper in terms of speed and convenience, and it even works offline! There are advantages to digital files, however, such as being able to easily manipulate and share something once it’s been created. There is a way to combine the two worlds, through an app called POP.

Pen + Paper = Digital?

I recently tried out an app/service called POP, which attempts to blend the pen and paper world with some of the advantages of the digital world. In a nutshell, you sketch your ideas on plain old paper, then take a photo of them with your smartphone, and the POP app helps you stitch them together into a coherent flow. It does this by giving you tools to “link” different sections of your drawing to other drawings, similar to how links work on the web, except these are graphical regions. It sounds simple, and it is, but it does give you a pretty good feel for how a user might move through your website or mobile application.

Turn Your Sketches into a Mobile Wireframe

Let’s walk through an example for a “ToDo List” mobile application. First, we’ll need some paper.

Step 1: Download and Print the Templates

You can use any paper, but the POP guys have provided some nice PDF templates for mobile applications that I have found convenient, so that’s what we’ll use.

Step 2: Draw Your Concepts with Pen and Paper

Here is my simple wireframe for a ToDo List application:

digital pen and paper wireframe

Step 3: Take Photos of Your Drawings

Use the mobile app to take photos of your drawings

digital paper wireframe

Step 4: Link Your Screens Together to Create an Experience

In the mobile app, tap to define “hotspots” that can link to your other screens

interactive paper wireframe

Step 5: Share Your Creation

Your project will be automatically available inside the POP web application, but you can also share a link to it from the mobile app. Here’s a link to the example ToDo List wireframe:

Happy Wireframing!

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Leave a Reply