You have an idea; now, how do you express it? Working visually helps your mind break down creative barriers. Paper prototypes are sketches of the user interface you plan for your app idea. With paper prototypes, you can sketch out your ideas to see what works and what doesn’t before you get too far ahead in the design process. Not a design expert? That’s completely fine; paper sketches are simply to get your thoughts out there for you and your colleagues to explore. Low-fidelity paper prototypes help you and your team communicate and collaborate.

Photo by Karolina Grabowska on Pexels.com

You can’t start too early with paper sketches since they’re great for getting feedback at every stage of the design process. In addition, they’re perfect for feedback on high-level concepts like layout and flow for the app. They often make team members more proactive with the design process by breaking down creative inhibitions. With paper prototypes, you can take time to flesh out ideas and ensure your design is headed in the right direction before you transition to high-fidelity wireframes.

When are paper prototypes useful?

Paper prototypes are appropriate at any stage of the design process. It’s much easier and faster to express design ideas visually than explain verbally and communicate feedback or design changes instantly. Also, without advanced software for high-fidelity designs, there are no technical hindrances to slow design changes during the project.

Paper prototypes are perfect for:

Thinking through initial ideas for the project.
Outlining the steps in a user flow.
Exploring various layout options.
Expressing the app’s basic framework.

Low-fidelity versus High-fidelity

Low-fidelity sketches are simple paper prototypes used for brainstorming and team discussions. There is no need for these basic sketches to look a certain way, as they are used for communicating initial design ideas and implementing design changes before you create high-fidelity sketches.

Once you’ve worked out your design ideas through paper sketches, high-fidelity prototypes add design elements and details. Often created with digital software, high-fidelity prototypes incorporate detailed sketches, button colors and shapes, images, and other design elements. These are generally used for presentations, client discussions, and user testing.

How Do You Create a Paper Prototype?

Decide what screens will be necessary for your mobile app design. User flows can influence these to show how users will move from screen to screen. The user’s journey shows what steps must be made throughout the design experience. It can be helpful to sketch out individual screens on cards or paper cutouts before adding more detail.

Then, determine how users should interact with your screens and the elements they contain. For example, what happens when a user taps on a button or swipes the screen? Next, plan how these elements will respond to certain actions by organizing the screens in a complementary way. This can sometimes be different to replicate on paper but adding interactivity to your paper prototypes benefits the final prototype design.

Tips for Interactive Elements

Scrolling and sliding

Cut openings across the top and bottom of your prototype device to thread long strips of your paper sketches through to represent scrolling motions. For horizontal scrolling, you can also cut out small openings on the sides of the prototype device.

Menus

You can add menus to your paper prototype by creating an opening on either side of the prototype device to slide the menu into the viewport or use sticky notes to tack them in place while still being able to remove them.

Messages and Popups

Sticky notes are perfect for adding messages and popups to your paper prototypes since they can be quickly tacked on the viewport and removed.

Tabs

Cards are handy for creating page tabs, or you can cut them out on paper. To switch to another tab, move the desired tab card to the top of your deck.

Accordions

Using a long strip of paper or card, draw all the content as it should be seen when the accordion is fully extended. Then, you can fold the accordion so only the main pages are seen and smaller tabs are hidden.

Select Boxes, Checkboxes, and Radio Buttons

Sticky notes are also good for adding selections and checkboxes so they can be easily added or removed from the viewport. These could also be drawn onto a copied prototype so you can add the checked version over the unchecked prototype.

iOS and Android Native Elements

You can copy and print native design elements from the anticipatory mobile device rather than spend time sketching them out.

Tips for Leveling-Up Your Prototypes

Drawing Tips

With paper prototypes, you must draw the necessary elements of your app design. However, these only need enough detail to adequately communicate the content you want in the design. Nonetheless, you can also use this opportunity to sketch out specific content you want in the final design. Unlike wireframing, where communication is limited to short labels, paper sketches offer you the creative freedom to add visual elements that will benefit the overall design.

Explore Elevations and Shadows

Adding a realistic view to your paper prototypes helps you communicate the design elevations and shadows. For example, you might want a shadow around a popup shopping cart box in the final design, so adding an elevated paper sketch helps express a more realistic view of the prototype. This also helps you show perspective with user testing or client presentations.

Photograph Paper Sketches to Create a Digital Prototype

Digital prototypes help you exhibit app interaction differently than your paper prototypes for certain elements. For elements like splash screen timers, onboarding, adding layers for dropdowns, and affixed headers and footers, digital prototypes can give you a more structured exhibition of the app design.

Use Marker Size and Color to Section Content

You can progressively add detail with darker markers starting with a light marker. These also help you section certain pieces of content and highlight more important elements. As ideas are added to the paper, you can use darker colors to emphasize the content. You can also use theme colors for your app or colored paper for consistency.