<p>Published on <a href="https://blog.prototypr.io/paper-prototyping-your-step-by-step-guide-4810006e81e8?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Justinmind <img alt="" src="https://cdn-images-1.medium.com/max/1024/0*qLhOB0fkFWtigJgx.png"></p>
<h4>Everything you need to know about paper prototyping and how you should use it in the UX design process</h4>
<p><strong>Paper prototyping</strong> has been around for ages as a fast and inexpensive way of getting feedback on early designs before moving on to code. Just by using simple materials — as simple as pen and paper — designers can visualize concepts and ideas, share them with their team and stakeholders and quickly get everyone on the same page.</p>
<p>Our post explores the art of paper prototyping. We’ll show you how to get started and how to test your paper prototypes, as well as how to create digital, interactive prototypes when needed.</p>
<p>Great ideas are started on paper. So if you want an easy way to bring your designs to life, you’re in the right place. Let’s get prototyping!</p>
<h4>What is paper prototyping?</h4>
<p>Paper prototyping is the process of creating an early sample of your product (in web design, this would be your user interface) in order to test out its design and performance with target users prior to building it out with code.</p>
<p><img alt="paper-prototyping-in-the-ux-design-process" src="https://cdn-images-1.medium.com/max/810/0*pCLyviSfitYBYQqs.png"></p>
<p>As <a href="https://www.linkedin.com/learning/ux-design-6-paper-prototyping/what-is-paper-prototyping">UX consultant Chris Nodder</a> puts it, it is “the first time in the user-centered design process that you put together the elements of your new interface design, in a way that approximates what users will see on screen.”</p>
<p>This minimalist approach to prototyping is what we call low-fidelity prototyping– learn more about prototyping fidelity <a href="https://www.justinmind.com/blog/low-fidelity-vs-high-fidelity-wireframing-is-paper-dead/">here</a>. Depending on your project’s budget and timeline, you may want to create mid to high-fidelity prototypes with tools like <a href="https://www.justinmind.com/justinmind-prototyping-tool-blog?blog-link-post">Justinmind</a>. We’ll take a look at this later on in the post.</p>
<p><a href="https://www.justinmind.com/justinmind-prototyping-tool-blog?blog-banner-post"><strong><em>Turn your paper prototypes into fully-functional prototypes in minutes</em></strong></a></p>
<h4>Paper prototyping in user-centered design</h4>
<p>You can use paper prototyping to mock up any type of interface, such as a mobile app, tablet or website screens. This will help you gather early and essential feedback from users and ensure your project is on the right track from day one.</p>
<p><img alt="paper-prototyping-in-the-ux-design-process-devices" src="https://cdn-images-1.medium.com/max/723/0*6s5QhSpaXtV3bz2y.png">Image credit: CX Partners</p>
<p>As <a href="https://www.nngroup.com/articles/paper-prototyping/">UX guru Jakob Nielsen</a> reminds us, gathering user data as early as possible can have a big impact on the experience you give to the user, as well as save you wasted resources.</p>
<p>Why should communicating concepts to users have to cost you money?</p>
<h4>Materials for your paper prototype</h4>
<p>Paper prototypes come in the form of concept sketches, drawings or storyboards, which represent the skeleton of your user interface. They are usually hand-drawn, with UI screen elements cut out of paper and glued together.</p>
<p><img alt="paper-prototyping-in-the-ux-design-process-1" src="https://cdn-images-1.medium.com/max/810/0*fNarn8oxkXc-w596.png">Image: MOOC</p>
<p>If you’re new to paper prototyping, take a look at this list of the materials needed for creating your first paper prototype.</p>
<p>Items you will need:</p>
<ul>
<li>paper (with a dotted grid)</li>
<li>sticky notes</li>
<li>scissors</li>
<li>markers</li>
<li>cards</li>
<li>glue</li>
<li>pencils</li>
<li>eraser</li>
</ul>
<p>Items that are nice to include:</p>
<ul>
<li>index cards</li>
<li>adhesive tape</li>
<li>highlighter pens</li>
<li>paper correction fluid and tape</li>
<li>whiteboard</li>
</ul>
<p>Whilst it may not be suitable for every stage of the design process, creating prototypes using only paper, scissors and some markers can be extremely practical. Let’s take a look at when you should implement paper prototyping in your UX project.</p>
<h4>When to use paper prototyping</h4>
<h4>Paper prototyping early on in your UX project</h4>
<p>Paper prototyping is primarily used to communicate early design proposals between teams and stakeholders. Let’s see where it fits into the design process.</p>
<p>The first step in your design process involves user research. User research is when you gather and analyze user data (with analytics and by performing usability studies) in order to understand your target audience better. Learn more about user research <a href="https://www.justinmind.com/blog/ship-or-sink-are-we-seeing-the-demise-of-the-user-researcher/">here</a>.</p>
<p><img alt="paper-prototyping-in-the-ux-design-process-mobile" src="https://cdn-images-1.medium.com/max/810/0*GTeYIsqLRe4375Gr.png"></p>
<p>After the user research portion of your UX project, it’s time to get prototyping. The designers who create paper prototypes will sketch out each site or app screen, focusing on layout and essential UI elements, and less on the specific visual details of the interface.</p>
<p>Once everyone involved in the project is up to speed on the overall structure of the site or app, it’s time to test out these prototypes in another round of usability testing to observe how users interact with each touchpoint. From this point, designers may decide to up the fidelity, creating a digital prototype with images and interactions, for a more realistic view of the interface.</p>
<h4>Paper prototyping in design iterations</h4>
<p>Although paper prototypes are often used at the beginning of a UX project, they are actually useful at almost every stage of the design process.</p>
<p>For instance, say you need do a design modification during mid-development or even post-launch. Sketching out the update iterations will help you quickly visualize new ideas and communicate them to your team before spending any longer on an idea that might not thrive.</p>
<p>Check out how we used paper prototyping in our website redesign <a href="https://www.justinmind.com/blog/redesigning-justinminds-website-prototyping-in-a-scrum-environment/">here</a>.</p>
<h4>The downside of paper prototyping</h4>
<p>Paper prototyping can be a great way to create rapid iterations of your designs. However, it’s not always the solution.</p>
<p>For instance, it’s harder to get a real feel for interface functionality without trying it out on the actual device. This means that reactions and responses during usability testing may yield inaccurate feedback.</p>
<p>Additionally, each iteration needs to be built from scratch — <a href="https://www.justinmind.com/blog/5-web-design-templates-you-need-to-have/">web templates</a> can’t help you here! Considering the fact that you’re going to transfer all of your work onto a PC anyway, sometimes starting on paper can actually be hindrance.</p>
<p><img alt="paper-prototyping-in-the-ux-design-process-justinmind" src="https://cdn-images-1.medium.com/max/755/0*f21f773IhKEa0lut.png"></p>
<p>And don’t forget about the environment! Deforestation due to paper production is <a href="https://www.aiche.org/chenected/2016/10/sustainability-challenges-paper-industry">estimated</a> to be responsible for about 12% of greenhouse gas emissions each year! When you can, use recycled printer paper. Learn more about sustainable UI design <a href="https://www.justinmind.com/blog/green-ux-is-your-ui-harming-the-environment/">here</a>.</p>
<p>Next we’ll show you how to do paper prototyping that won’t waste time or resources.</p>
<p><a href="https://www.justinmind.com/justinmind-prototyping-tool-blog?blog-banner-post"><strong><em>When paper prototyping doesn’t quite cut it, design with Justinmind</em></strong></a></p>
<h4>Building your first paper prototype</h4>
<p>There are no hard and fast rules for making paper prototypes. But here’s our advice:</p>
<ul>
<li>Start by cutting a piece of paper into the shape and dimensions of the screen you are designing for. <a href="https://medium.com/@dan.nessler?source=post_header_lockup">Dan Nessler</a> suggests that for smaller devices, such as smaller smartphones and watch faces (e.g. the Apple Watch), you may want to use an oversized piece of paper for readability during the low-fidelity prototyping stage.</li>
<li>If you’re designing for multiple devices, start with mobile. Because of the limited amount of real estate on the viewport, working on mobile first will force you to prioritize the most important content. You’ll be able to create a user experience that can be scaled upwards depending on the size of the additional viewports. Learn more about mobile-first design <a href="https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/">here</a>.</li>
<li>When it comes to designing your UI elements and core device components, such as navigation bars, buttons and background images, use different-colored sticky notes. Use a different color for each different type of content. Dan reminds us to include the different screen states such as selected or unselected checkboxes, radio-buttons etc.</li>
<li>Make sure you have a separate piece of paper for each screen — this will make it easier to replace if an idea changes or you need to iterate specific portions of the design.</li>
</ul>
<p>By following these steps, creating paper prototypes will be an easy and effective way for you to collaborate with your team and bring life to your designs!</p>
<h4>Paper prototyping: the next steps</h4>
<h4>Testing your paper prototype</h4>
<p>Once you’ve completed your first paper prototype, it’s time to test it out. We recommend testing with real users, as they will yield the most accurate feedback — and, as we mentioned before, you can do with all the help you can get to make your paper prototyping testing as accurate as possible.</p>
<p>You don’t need that many test participants. In fact, <a href="http://www.useit.com/alertbox/20000319.html">Jakob Nielsen suggests</a> that with just 5 users, you can identify around 85% of all usability problems.</p>
<p>When you test your paper prototypes, you should be observing how users move around the prototype and be ready to reposition elements and make adjustments according to the feedback you collect from them.</p>
<p>The main different between testing paper and digital prototypes is that with paper prototypes, you’ll need to guide test participants, whereas with digital prototypes, the user flow should be intuitive.</p>
<p>You will need to prime test participants, explaining what you want them to do specifically and where they should focus their attention.</p>
<h4>Creating mid to high-fidelity prototypes</h4>
<p>Once you’ve tested your paper prototypes, you might consider creating digital mid to high-fidelity prototypes of your paper sketches to incorporate user testing feedback into your design.</p>
<p><img alt="paper-prototyping-low-to-high-fidelity" src="https://cdn-images-1.medium.com/max/810/0*VzeXpa3Xobfm9nCM.png"></p>
<p>High fidelity wireframes can help you visualize and test specific UI components and interactions within and between UI screens. In fact, it’s the only way to validate user interaction<strong> </strong>of your interface prior to coding the final product.</p>
<p>Luckily, there are plenty of tools available to help you make the transition between paper and digital prototypes. With <a href="https://www.justinmind.com/justinmind-prototyping-tool-blog?blog-link-post">Justinmind</a>, you can create static prototypes and make them interactive and visually representative of your final design in no time.</p>
<p>Choose from a wide range of device templates, including web, iPhone and Android. Drag and drop <a href="https://www.justinmind.com/widgets">UI widgets</a> to the canvas and combine them with rich web and mobile interactions to create complete screens and prototypes in just a few clicks!</p>
<h4>Conclusion</h4>
<p>Starting with paper is a great way to create rapid design iterations and can help you cement your ideas in order to avoid rework later on. Paper prototypes help you and your team align around your design goals and help you avoid repetition and misunderstandings.</p>
<p>Once you’ve completed the paper prototype stage of your UX project, it’s time to create clickable wireframes. These will help you conduct key user testing to improve your interface’s user experience. <a href="https://www.justinmind.com/justinmind-prototyping-tool-blog?blog-link-post">Download Justinmind now</a> and start your prototyping journey today!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4810006e81e8" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/paper-prototyping-your-step-by-step-guide-4810006e81e8">Paper prototyping: Your step by step guide</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Paper prototyping: Your step by step guide

Everything you need to know about paper prototyping and how you should use it in the UX design process
Read more

Top Stories

Paper prototyping: Your step by step guide

Everything you need to know about paper prototyping and how you should use it in the UX design processRead more

Top Stories

Everything you need to know about paper prototyping and how you should use it in the UX design process
Read more