{"id":20988,"date":"2021-01-21T11:36:56","date_gmt":"2021-01-21T11:36:56","guid":{"rendered":"https:\/\/www.marvelapp.net\/blog\/?p=20988"},"modified":"2021-02-15T05:59:31","modified_gmt":"2021-02-15T05:59:31","slug":"creating-paper-prototypes-with-marvel","status":"publish","type":"post","link":"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/","title":{"rendered":"How to use Paper Prototyping within your design process"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We're big advocates of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">paper prototyping<\/strong>. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The beauty of starting on paper are the limitations forced on you by the medium. This often helps focus on what matters, not just for you, but for any stakeholder or tester viewing your designs or prototypes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">By using simple shapes for things like text and images, you can draw attention to core functionality and reduce distractions. Plus, it's quick, easy, cheap and extremely accessible, meaning paper prototypes are ideal for using at the ideation stage of your process or in workshops with designers and non-designers alike.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Beautiful visuals are necessary only after you\u2019ve solved the problem\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Over the years we've seen our own paper prototyping apps and tools gain a huge amount of traction in helping get projects off the ground, either through the usual sketch-to-high-fidelity process, but also in helping facilitate idea generation in workshops and other collaborative sessions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We've put together our favourite uses of paper prototyping to hopefully inspire your next project.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><b class=\"fontWeight-5\">Paper prototyping early in the design process<\/b><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Incorporating paper prototyping early on in the design stage helps to identify problems before investing time and energy into fleshing out high-fidelity designs. Simple sketches of your screens can easily be created for stakeholders to make decisions, developers to give feedback and customers.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you usually jump straight into pixels or you've never sketched before, it can take a little bit of time to fully embrace the process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You may find yourself inching further and further into more detail, but remind yourself to stick to words and shapes. No drop shadows, pretty corners or doodles! Eventually, it becomes liberating.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The beauty of this step is that any team member regardless of design experience, can get involved in sketching and by incorporating non-designers you\u2019ll gain insights that might have been missed. This will also help in nurturing a design-led culture within an organisation, which brings <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/benefits-of-becoming-design-led\/\">growth and performance benefits of its own<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All you need to do is grab a pen, sketchbook or our printable <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/sketchpad\">wireframe templates<\/a> and our app. There\u2019s no need for a computer or design software.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/sketching-techniques-improve-design-process\/\">Sketching techniques to add to your design process<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/pens-process-product%E2%80%8A-%E2%80%8Asketching-ux\/\">Pens, Process, Product\u200a\u2014\u200aSketching for UX<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/sketching-will-make-smarter-designer\/\">How Sketching Will Make You a Smarter Designer<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/stop-designing-start-drawing\/\">Stop Designing and Start Drawing<\/a><\/li>\n<\/ul>\n<div id='gallery-1' class='gallery galleryid-20988 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1367\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-scaled.jpg\" class=\"attachment-full size-full\" alt=\"Paper prototype\" aria-describedby=\"gallery-1-21001\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-scaled.jpg 2048w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-600x400.jpg 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-1500x1001.jpg 1500w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-768x512.jpg 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-986711642-1536x1025.jpg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-21001'>\n\t\t\t\tCrop shot from above of coworking people drawing sketch of future website design on papers sitting at table\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Paper prototyping in Design Sprints or design thinking Workshops <\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of our favourite use-cases for paper prototyping is within brainstorms, design thinking workshops, hackathons and design sprints. It works especially well in these environments often because they are often cross-functional, including team members with no technical or design skills, but invaluable input.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whilst there are several flavours of these kinds of sessions, paper prototyping tends to be used in the same way throughout, which is to be scrappy and get an idea out in the open to test as quickly as possible.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Thinking workshops<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/run-first-design-thinking-workshop-prototypes\/\">Design Thinking workshops<\/a> are a great way to incorporate a framework for solving customer problems through design. When used correctly, it can encourage teams to develop solutions that are human-centred. That means always anchoring any ideas back to the initial users' problems and day-to-day need, resulting in ideas that a super honed in on what users really need.\u00a0 The workshops are designed so teams can work together to generate multiple ideas within a session.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If we look at the different stages in the process, you can see how prototyping plays a part:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Empathy:<\/b> Getting to know your user. What\u2019s their current workflow and what challenges to they face?<\/li>\n<li><b class=\"fontWeight-5\">Define the problem:<\/b> What issue can you solve for the user? What impact would it have?<\/li>\n<li><b class=\"fontWeight-5\">Ideate:<\/b> Brainstorming ideas within a team that would help solve the problem<\/li>\n<li><b class=\"fontWeight-5\">Prototype: <\/b>Creating a mockup of your idea using paper prototypes (this is where Marvel comes in)<\/li>\n<li><b class=\"fontWeight-5\">Test: <\/b>Gaining insights when sharing your prototypes with your target users (<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.marvelapp.net/__sub/www\/usertesting\">You can also use Marvel here too<\/a>)<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Paper prototyping is ideal in these workshops as they can help to map out multiple ideas generated within a session before moving on to test with users. They\u2019re also quick and can be created by anyone in the team making the session inclusive.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Give everyone some paper and pens, then ask them to sketch their apps, website or features (<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/sketchpad\">we have some great templates for this<\/a>).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Marvel\u2019s iOS and Android apps help turn those sketches into a clickable prototype in minutes. All you need to do is take photos of your sketches through the app and upload them to your project. Then link them together with a few taps to form your sharable prototype that can be tested.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Further reading:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.marvelapp.net\/workshops\">The Design Thinking Workshop Kit<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/how-to-run-a-remote-design-thinking-workshop\/\">How to Run a Remote Design Thinking Workshop<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/apply-design-thinking-hcd-ux-creative-process-scratch\/\">How to apply design thinking, HCD, UX or any creative process from scratch<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/blurring-design-thinking-agile\/\">The Blurring Between Design Thinking and Agile<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Sprints<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another example of moving at pace is design sprints. Design sprints see designers go from idea to build and test within a few days. By concentrating the design process into such a short space of time, you can efficiently solve a problem together as a team and test solutions with customers as quickly as possible.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The breakdown of a design sprint:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Map<\/b> the current user experience to understand the user problem<\/li>\n<li><b class=\"fontWeight-5\">Sketch<\/b> multiple ideas for a solution individually<\/li>\n<li><b class=\"fontWeight-5\">Decide<\/b> between the team which ideas should be tested and storyboard the ones selected<\/li>\n<li><b class=\"fontWeight-5\">Prototype<\/b> your screens using paper prototypes<\/li>\n<li><b class=\"fontWeight-5\">Test<\/b> with users to help create iterations with feedback<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Due to the simplicity of paper prototyping it\u2019s perfect within design sprints when moving quickly or when bringing in non-designers to contribute. The key is to include only what\u2019s essential to test, especially when short on time. Gaps can also be left in the prototype in order to ask the customer what they think should happen next or even give them a few different prototype options.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Further reading:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/google-design-sprint-gone-wrong-taught\/\">A Google Design Sprint Gone Wrong (And What It Taught Me)<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/basics-design-sprints-jargon\/\">The basics of design sprints and other jargon<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/making-case-design-sprints\/\">Making the Case for Design Sprints<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/ceos-care-design-sprints\/\">CEOs Should Care About Design Sprints Too<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Code-free hackathons<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hackathons see teams compete against the clock to develop a product or feature that would usually take weeks or months to create. Usually, a fun event that can be organised internally or as a means to network with people within the industry, being efficient with time is key.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Participants will go from deciding on a product or feature, to design and build, often within a day. Here paper prototyping can help teams brainstorm ideas, align on decisions and make quick changes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">At the end of a hackathon teams will typically pitch their work in front of a panel of judges. Showing how the team has considered the user journey and storyboarded the interface through prototyping demonstrates that they\u2019ve worked with the user in mind, strengthening their pitch.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">How to use Marvel to paper prototype<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once you\u2019ve made your sketches, you can create a clickable version in minutes using Marvel on your desktop or phone.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Desktop<\/h3>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Create a <a class=\"link link--blue fontWeight-4\"title=\"free Marvel account\" href=\"http:\/\/https:\/\/www.marvelapp.net\/signup\">free Marvel account<\/a><\/li>\n<li>Go to your <a class=\"link link--blue fontWeight-4\"title=\"Dashboard\" href=\"http:\/\/(https:\/\/www.marvelapp.net\/projects\/my)\">Dashboard<\/a><\/li>\n<li>Click Create project<\/li>\n<li>Select Prototype and enter your project name and select a device<\/li>\n<li>Select Create project<\/li>\n<li>Click Upload or create designs, then select Upload from computer. Alternatively, you can drag and drop your designs straight into the browser window to upload them to your project.<\/li>\n<li>Hover over any image that you've uploaded and click Prototype to enter the editor<\/li>\n<li>Once in the editor, click and drag over any area of the design to draw a hotspot<\/li>\n<li>Select the target image for the hotspot<\/li>\n<li>Click Play to interact with your prototype<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/di1olg6xc9.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><span class=\"wistia_embed wistia_async_di1olg6xc9 popover=true popoverAnimateThumbnail=true\" style=\"display: inline-block; height: 399px; position: relative; width: 710px;\">\u00a0<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">iOS<\/h3>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Draw your screens on paper<\/li>\n<li>Open Marvel's iOS app (or <a class=\"link link--blue fontWeight-4\"title=\"download it here!\" href=\"http:\/\/https:\/\/apps.apple.com\/gb\/app\/marvel-design-and-prototype\/id765801658\">download it here!<\/a>)<\/li>\n<li>Tap the green + button to create a project<\/li>\n<li>Name your project and select your device<\/li>\n<li>Tap the green + button and select Camera<\/li>\n<li>Take photos of the screens you sketched on paper<\/li>\n<li>Repeat until you've taken pictures of all your sketches<\/li>\n<li>Once you've finished, tap your first screen then Add link to connect your screens together<\/li>\n<li>Once you've connected all your screens, tap the play button to see your new prototype!<\/li>\n<\/ol>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Android<\/h3>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Draw your screens on paper<\/li>\n<li>Download the Marvel for Android app from the<a class=\"link link--blue fontWeight-4\"title=\" Google Play Store\" href=\"http:\/\/https:\/\/play.google.com\/store\/apps\/details?id=com.marvelapp&amp;hl=en_GB\"> Google Play Store<\/a><\/li>\n<li>Open the app and tap the Create your project button<\/li>\n<li>Click the + button<\/li>\n<li>Tap Camera<\/li>\n<li>Aim the camera and take photos of the screens you sketched on paper<\/li>\n<li>Tap the Check icon when finished<\/li>\n<li>Resize and crop any screen that is misaligned and tap the check icon to confirm<\/li>\n<li>Once you've added all the screens, tap on the first screen and then tap the place on the image where you'll like to add your hotspot<\/li>\n<li>Once you've connected all your screens, tap the play icon to see your new prototype!<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I hope we\u2019ve given you a few ideas on how you can include paper prototyping into your design processes. Get started with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/sketchpad\">sketchpad templates<\/a> and see how you can create a clickable <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net/__sub/help\/hc\/en-us\/articles\/360003241797-How-to-upload-photos-of-sketches-in-the-iOS-app-for-paper-prototyping\">paper prototype in Marvel<\/a>. And don\u2019t forget, paper prototypes also work with our awesome <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.marvelapp.net\/usertesting\">user testing tools<\/a>.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\">Stop Talking and Start Sketching: A Guide to Paper Prototyping<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/the-magic-of-paper-prototyping\/\">The Magic of Paper Prototyping<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/how-to-run-a-remote-design-thinking-workshop\/\">How to Run a Remote Design Thinking Workshop<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/introducing-design-thinking-workshop-kit\/\">Introducing The Design Thinking Workshop Kit<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net\/blog\/run-first-design-thinking-workshop-prototypes\/\">How to Run Your First Design Thinking Workshop Using Marvel<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration. The beauty of starting on paper are the limitations forced on you by the medium. This often helps focus on what matters, not just for you, but for&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":282,"featured_media":21000,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429],"tags":[],"class_list":["post-20988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-tips-and-tricks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"We&#039;re big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Paper Prototyping within your design process | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"We&#039;re big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-21T11:36:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-15T05:59:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-1179029770-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1368\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.marvelapp.net\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2021\/01\/iStock-1179029770-scaled.jpg\",\"width\":2048,\"height\":1368,\"caption\":\"UX website design wireframe. Sketch, prototype, framework, layout future design project. UI\/UX - user interface, user experience designer. Creative concept for web design studio. Website development\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#webpage\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/\",\"name\":\"How to use Paper Prototyping within your design process | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#primaryimage\"},\"datePublished\":\"2021-01-21T11:36:56+00:00\",\"dateModified\":\"2021-02-15T05:59:31+00:00\",\"description\":\"We're big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/bd72a934b7ff68bc81675996b1c9d959\"},\"headline\":\"How to use Paper Prototyping within your design process\",\"datePublished\":\"2021-01-21T11:36:56+00:00\",\"dateModified\":\"2021-02-15T05:59:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#primaryimage\"},\"articleSection\":\"Product Tips &amp; Tricks\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/creating-paper-prototypes-with-marvel\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/bd72a934b7ff68bc81675996b1c9d959\",\"name\":\"Charlotte Hall\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1115801ad57ca66f17e8fd5f9fd46010228d348a4bb2aab51fa38c187df7a3a1?s=96&d=mm&r=g\",\"caption\":\"Charlotte Hall\"},\"description\":\"Product Marketer at Marvel. Part-time true crime connoisseur. @ch_hall\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/20988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/users\/282"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/comments?post=20988"}],"version-history":[{"count":0,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/20988\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media\/21000"}],"wp:attachment":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media?parent=20988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/categories?post=20988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/tags?post=20988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}