Mockplus - Design Faster. Collaborate Better.

Blog > Design and Prototyping tools > A Beginner's Guide to Paper Prototyping

A Beginner's Guide to Paper Prototyping

May 18, 2021

Nowadays, paper prototypes - prototypes made with pen and paper - are less common than digital prototypes, but that doesn’t take away their benefits when designing a website or app. 

Paper prototypes still play a key role in helping many designers and product managers visualize and test their products at an early stage and at low cost, before they move to the next design stage to create a digital prototype using a professional prototyping tool.

If you’re just getting started as a designer and aren’t too familiar with paper prototyping, this article is just for you. We’ll be going through all the basics, advantages and disadvantages as well as when to use and how to use paper prototypes.

Tables of Contents: 

  • What is paper prototyping

  • Advantages and disadvantages

  • When to use paper prototypes 

  • How to make paper prototypes 

  • Best design tips and principles

What is paper prototyping?

Paper prototyping is the process where designers, product managers, developers or product teams create low-fidelity, hand-sketched design outlines using pen and paper. This process is used to brainstorm ideas and to test early versions of designs. Prototypes on paper help designers iterate and test concepts with brief overviews of the app’s functions, structures, layouts, interactions, user flows and other details - such as labeling a color or drawing a few key components or presenting a specific user interaction journey.

Let's first take a look at a paper prototype example:

Paper prototype example

Paper prototypes are widely-used by designers early on to collect feedback from key stakeholders, clients and users about the concept or general structure of the app at an early stage of the project.

Advantages and disadvantages

Before spending hours working on in-depth mockups, many designers, developers, product managers and design teams start their projects with paper. Paper prototyping becomes the first step to help form tangible interfaces from ideas and create something stakeholders can do initial usability tests before moving into development.

However, not every designer uses paper prototypes. It's a double-edged sword in terms of using paper prototypes, below are the advantages and disadvantages for you to weigh up:

Let's start with the advantages:

  • Fast interaction Paper prototyping allows you to quickly draw out all your ideas on paper. Without having to focus on details, it sometimes takes only minutes to iterate all your ideas several times in a row.

  • More flexible and creative Sketching everything on paper allows you to focus on your ideas. No digital tools will limit you anymore. When working on a paper prototype with your team, it is also a good opportunity to communicate with each other to boost creativity.

  • Low cost One of the biggest benefits of paper prototyping is its low cost. All you need is only paper, pens, markers, rulers and so on. They are really common and cheap for us all.

  • Low-learning curve Everyone that knows how to sketch can make a paper prototype. There are no any design or coding skills required. So, all your team members, including marketers, developers, stakeholders and clients, can participate early on.

  • Easy to document and back up Because paper prototypes are physical mockups of your app or website, you can easily store them for safekeeping. There is no need to download anything or use any portable devices for backup as you do with a digital tool anymore.

  • A great team-building activity Sketching and iterating together is great to get everyone on board for a design, everyone gets an input on ideas and is happy with the design concept. It provides a good opportunity to raise team unity and spirit.

Then, let's talk about the disadvantages:

  • Hard to present all details Paper prototypes are low-fidelity and only show part of the large interface details.

  • Hard to present interactions vividly Because paper prototypes are static, interactions have to be imagined when going through the user flow. 

  • Hard to collect feedback accurately With limited buttons, interactions, and other details presented, the feedback you've collected is also inaccurate.

  • Some designers or teams even skip the paper prototyping process Many teams now start wireframing digitally and skip the paper prototyping process - but everyone’s creative process is different.

In the world of digital design, paper prototyping is not essential anymore. But, paper prototypes do have a role in some designers' creative process and can help designers streamline their workflow to create a better product from an early stage. So, choosing to use paper prototypes or not depends on if it suits you.

When to use paper prototypes?

Paper prototypes present very low-fidelity screenshots, interfaces and other app details, making it perfect to be used when brainstorming and at the early stages of first creating the outline of a design such as:

  • User research stage

  • Brainstorming stage

  • Light concept iterating and testing stage

How to make a paper prototype?

Here are 6 steps to make a paper prototype:

Step1. Prepare materials and tools

There is a list of materials and tools that you should prepare:

  • Paper and cards

  • Pens and highlighters

  • Scissors, rulers and markers

  • Others

Almost all things you need to make paper prototypes can be found at home or in your office.

Prepare Paper Prototyping Tools

Step2. Know your thoughts and expectations

Before you start sketching, you should know what you are trying to design, what its purpose is and have a general idea of how to design your app. If you don’t know the answers to these questions yet, do some research first to figure them out.

There are two ways that can help you:

  • Conduct user and market research

User and marketing research lets you better understand the audience and your competitors, allowing you to figure out your expectations and goals.

  • Search and browse similar app design examples

Search online and find some examples of app interfaces and features you like. This helps understand what is already useful in the market and what new ideas you can bring to the table.

Never underestimate this step because it gives the start of your project a structure and launch pad.

Step3. Sketch out the main pages and structures

Have some ideas about your app and want to get started sketching? Great! Get out your pen and paper and start to draw them all out. Start from your main pages and structure and work out from there.

If you get a creative idea of a section, feature or user flow when sketching the main pages and structures, do not hesitate to draw it out directly. Any hesitation can make you miss out on that great idea.

Sketch Out Your Ideas

Step4. Fill all details

Then it's time to fill in the interface. After building the main structure and layout take your time to fill in details such as a submit button, titles and subtitles, icons and images and more. Don’t worry about all the details, pay more attention to the fidelity of the app, and how these details impact the app navigation.

Step5. Make simple interactions

Paper prototypes are great tools to help you demonstrate some simple app interactions. These interactions are static and you have to physically work your way through your app but it's useful as a conceptual exercise.

You can use your pens and markers to create popups, extra pages, error states, tiles or button states. Then you can manually go through the app flow.

Make Simple Interactions

Use cards and color pens to make some simple popup windows, button states or others.

Step6. Collect feedback

Gather all related people together, present your paper prototypes and hear their ideas. Or without any gathering or meeting, you can try to pass the paper prototype to them one by one and let them leave the feedback directly on the paper by using different colored markers.

Their ideas would help you create a much better product.

Step 7. Keep testing

And then, iterate your paper prototype according to the feedback. You don't have to follow all suggestions or corrections. Also do not forget to keep testing whenever you've created a new version.

If all these steps are not helpful, watch the below videos:

How to make a game paper prototype

How to make a paper prototype for user testing

How to make a mobile paper prototype with printed content

Best design tips and principles for paper prototyping

To make a paper prototype that really helps streamline your design workflow, you should also keep these tips and principles in mind:

1.Make a plan in advance

To ensure you complete your paper prototypes from start to finish, create a plan in advance.

This includes: what important elements to include, how many people will participate in this design stage, when to start rough sketching, when to introduce details and when to polish those details. Keep a plan and schedule these well in advance. A checklist would also help.

2.Draw one sketch per screen

Drawing one sketch per screen helps you present your ideas clearly and in a similar fashion to the final product but leaves plenty of space to make changes later.

Paper prototype

3. Draw out whatever pops up in your mind

Designers get great new ideas when they draw out ideas on paper. Never question your ideas when they pop up, just draw them out and see if they can be iterated upon.

4.Use colors wisely

Don’t spend too much time coloring in your paper prototypes. Use different colors wisely only to highlight key parts. For example, use red colors to highlight an alert or blue colors for interactive elements.

5.Translate your paper prototype into digital prototypes

A paper prototype is ideal for teams in the same office or company to communicate ideas quickly. However, with remote working, paper prototyping isn’t that useful because you can’t share your ideas to colleagues or clients who work remotely. A digital prototype is a better choice.

To translate your ideas into digital prototypes, try this handy prototyping tool: Mockplus. It helps you get your ideas down onto a page quickly and with a massive ready-made component, icon and template library built in. You can create any type of prototype in minutes. 

Better yet, you can co-edit on your designs with your team in real time, truly speeding up your design process. When you finish, send a simple link and that’s all you need to share, preview and iterate together. 

Snow Hu

In-house writer, who loves reading and is enthusiastic about web design. She is always cheerful and never gives up.

What's Mockplus?
Mockplus Cloud

A design handoff and collaboration platform to streamline your entire product design workflow.

Mockplus RP

A fast and free online prototyping tool that makes your ideas fly.

Mockplus DT

A vector-based UI design tool enables you design in the way you want to.

Mockplus DS

Your single source of truth to build, maintain and evolve design assets in one place.

Free prototyping, design handoff and collaboration

Join millions of Mockplus users to create the world’s best product

Sign Up For Free