Creative ways to make paper prototypes
There are a lot of fun and creative ways to make paper wireframes and prototypes. So far, you’ve learned about the most common way: drawing wireframes and prototypes on a plain piece of paper. If you’re feeling imaginative or want to try something new, explore the methods that are introduced in this reading.
Preprinted templates
Preprinted templates are a great timesaver for drawing wireframes and prototypes. Squares or outlines of the device you’re designing for are preprinted on the page, so there’s no need to draw them. In addition, the 8 ½” x 11” space of the paper allows you to include multiple screens of your design on one piece of paper, which is helpful when drawing a flow or a sequence of actions that you want to review side-by-side.
Download and print these free PDF templates to draw your own paper wireframes and prototypes:
- Mobile phone outline for wireframes and prototypes
- Rectangle outline for wireframes and prototypes (standard mobile phone screen size)
- Rectangle outline for wireframes and prototypes (long screen for scrolling)
Here’s an example of how a Google UX designer, Kaiwei, used a preprinted template to create wireframes for their app design.
Index cards
Instead of sketching all of your ideas on one piece of paper, try drawing them on a bunch of different index cards. Each index card can represent a mobile phone screen. Use tape or push pins to stick the index cards to a whiteboard or wall, or arrange the index cards in order on a table.
Here’s an example of wireframes on index cards being used by a Google UX designer, Dane, and his teammate.
One advantage to using individual index cards to create each screen of your design is that you can easily remove a drawing you don’t like without having to erase or cross anything out, like you would when drawing multiple ideas on a piece of paper. Simply recycle the index card that you no longer need!
Designing on index cards is especially useful for brainstorming sessions because you can easily add, reorder, or remove index cards from the user flow. Members of your team can each create their own index cards with unique designs, which can be combined into one user flow through the app or website you’re creating. In addition, you can quickly rearrange individual screens, or index cards, and put them in any order to follow the user flow through your app.
Sticky notes
Sticky notes are another way to explore creating paper wireframes and prototypes. As a UX designer, it’s a good idea to always have sticky notes readily available so you can jot down a single idea on each.
Try using sticky notes of different sizes and colors to represent different parts of your design idea. Or use colored sticky notes to call out important parts of your wireframes and prototypes.
Stencils
Pre-made stencils (for purchase) can be super helpful during the paper wireframing and prototyping process, especially if you’re new to drawing or intimidated by it. Stencils often include a built-in ruler, symbols, and icons that are common in UX designs. Using a stencil like this one can help your drawings look neater and more realistic.
Demo device
A demo device is a piece of paper or other material cut out in the shape of a mobile phone. You can place your sketches inside of the demo device to simulate a more realistic user experience with your product. Remember the demo device from the video with Karen that you just watched?
Some demo devices are even fancier, like a pre-made, laser-cut holder in the shape of different types of mobile phones that you can insert an index card into to simulate a screen. Using a demo device allows you to see how your design will look at scale on a mobile phone. Mobile phones come in all different sizes, so just because a design works for an iPhone, for example, doesn’t mean that it will appear the same way on an Android. Demo devices can help keep these differences in perspective and are made at scale for different devices.
It’s up to you
One method for creating paper wireframes and prototypes isn’t always better than another. It’s just a matter of your particular preferences and needs. Do you need to know how your design will look on a specific type of mobile device? Try a demo device cutout. Are you in a meeting with a stakeholder and want to show them your wireframe ideas? Draw them on a template or index cards. Get creative and find what works best for you!
Sources: Google UX Design Professional Certificate
Coursera | Build Wireframes and Low Fidelity Prototypes
