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:
Step 3: Take Photos of Your Drawings
Use the mobile app to take photos of your drawings
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
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: https://popapp.in/w/projects/54eb6134ce4dca1b14812ed0/preview
Happy Wireframing!