There is no quicker way to design a screen than to quickly sketch it on paper. The best way to get started is to get the pen and paper out and to begin drawing what is in your head.
The paper-first approach has many advantages:
It is quicker.
Correcting mistakes is inexpensive.
It is easy to put many sheets of paper on a table to get a complete view.
We can avoid optimizing graphical elements too quickly.
Given these advantages, one might think that every product manager would always begin prototyping by sketching on paper, but sometimes this is not the case. Here are some of the reasons why:
The person thinks they can't draw.
Nobody will pay attention unless it looks good.
You won't get useful feedback unless it looks real.
Here are the reasons why these "reasons" should not stop you.
You are just sketching out some screens for yourself to help develop your thinking about the problem/solution.
You have simplified screens which only have maybe just an image and one button. The time spend drawing is ten seconds, and quality doesn't come into it.
You don't intend to show it to anybody. Or if you do, they'll know that it was just something quickly sketched on paper.
It's also worth mentioning that I can't draw. Look at the screen I have designed below. The quality of the drawing is actually terrible! But it is what I need to figure out the main screen elements, and later, the flow!
Sketching mobile app screens on paper
To begin sketching on paper, you will need:
Some paper
Some pens (aim for at least 3 colors of different thicknesses)
Post-It notes (optional)
Scissors (optional)
By watching the video above, you'll be able to see how I created these screens. Here are some more screens that I created.
Getting Started
It can be a little daunting to create your first prototype. We don't want you staring at that blank piece of paper for too long! Here are some tips for getting started:
Start with the menu. Ask yourself what the main options in the main navigation are.
Think about the main flows. Which is the one most important flow?
Follow the flow. If I must enter date, then time, then pick babysitter, then try designing the screens in that order.
Get satisfaction from the crumple. Yes, it will be necessary to throw away some pieces of paper and start again, but hey, you only lost one minute of time! Enjoy crumpling up that piece of paper.
Draw something. Draw anything. This gets easier with time, so it's better for you to draw the wrong thing than draw nothing!
Using the POP App
The Prototyping on Paper (or POP) app is an extremely lightweight and easy-to-use prototyping tool which is made by a company called Marvel.
The process of creating your first prototype from paper screens is very easy with POP:
Sketch some screens on paper.
Install and open the POP app.
Create a project in POP and add images (take photos of your paper sketches).
Link them together by adding some hotspots.
As we have already sketched our paper screens, all that remains is to open the POP app and add images:
Then we just add a hotspot on each image where we want a create a link between one image/screen and another. For example, if screen 1 has a button called login that links to screen 2, then we add a hotspot (a clickable area) over the button area in screen 1 and tell it the destination is screen 2:
Then you can click the 'Play' option to preview the prototype!
Summary
In this chapter, you have seen how I created a full prototype by designing a few screens on paper and then taking photos and adding hotspots in the POP app.
The best part is that if I make a mistake and have to start over, this isn't a crisis. It will just take me ten more minutes.
This is why we favor paper sketching and paper prototyping as the first prototyping phase. It is so quick to get sketching and make mistakes and correct them.
Additional Resources
Download The mobile phone outline (printable PDF).
Read Thomas Lewis on how paper prototypes lead to Microsoft 8 mobile apps.
