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
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 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.
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:
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.
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.
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
Light concept iterating and testing stage
Here are 6 steps to make a paper prototype:
There is a list of materials and tools that you should prepare:
Paper and cards
Pens and highlighters
Scissors, rulers and markers
Almost all things you need to make paper prototypes can be found at home or in your office.
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.
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.
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.
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.
Use cards and color pens to make some simple popup windows, button states or others.
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.
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:
To make a paper prototype that really helps streamline your design workflow, you should also keep these tips and principles in mind:
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.
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.
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.
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.
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.
In-house writer, who loves reading and is enthusiastic about web design. She is always cheerful and never gives up.
A design handoff and collaboration platform to streamline your entire product design workflow.
A fast and free online prototyping tool that makes your ideas fly.
A vector-based UI design tool enables you design in the way you want to.
Your single source of truth to build, maintain and evolve design assets in one place.