{"id":6231,"date":"2017-02-16T15:40:43","date_gmt":"2017-02-16T15:40:43","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=6231"},"modified":"2020-11-20T17:34:57","modified_gmt":"2020-11-20T17:34:57","slug":"stop-talking-start-sketching-guide-paper-prototyping","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/","title":{"rendered":"Stop Talking and Start Sketching: A Guide to Paper Prototyping"},"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\">Turning your app idea into a real product isn\u2019t as far from reality as you might think. It can so often <em>just<\/em> come down to getting started\u2014 and to do so, \u201c<em>all you need is paper, pens, scissors and your imagination<\/em>\u201d (<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/alistapart.com\/article\/paperprototyping\">Shawn Medero, Alistapart<\/a>).<\/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\">\u201cAll you need is paper, pens, scissors, and your imagination.\u201d<\/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\">For example, when Jack Dorsey had the idea for Twitter, <em>this<\/em> is how he began- a very basic <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/the-magic-of-paper-prototyping\/\">paper prototype<\/a>.\u00a0Paper sketches enabled Dorsey to express his early visions of Twitter, showing us that no matter how big an idea, a simple sketch can be a great way to start:<\/p>\n<div id='gallery-1' class='gallery galleryid-6231 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline.png'><img loading=\"lazy\" decoding=\"async\" width=\"1840\" height=\"591\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline.png\" class=\"attachment-full size-full\" alt=\"Early Twitter Paper Prototypes\" aria-describedby=\"gallery-1-6256\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline.png 1840w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline-600x193.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline-768x247.png 768w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/twittertimeline-1500x482.png 1500w\" sizes=\"auto, (max-width: 1840px) 100vw, 1840px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-6256'>\n\t\t\t\tTwitter timeline &#8211; going from paper to a product \n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"class=\"graf graf--p\">Taking this as inspiration, in this article, we\u2019ll look at when and why to prototype with paper, and how you can take ideas from paper sketches through to something more interactive. Here's a list of what we'll cover - feel free to jump to the bits you're interested in:<\/p>\n<section class=\"long-post-content\">\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"c-silver lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">Section 1: Why Paper Prototoype: <\/a><\/strong>Reasons why paper prototyping is useful - from lowering the barriers to entry into design, to collaboration and communication.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part2\">Section 2: When to Paper Prototoype: <\/a><\/strong>Paper prototyping is most effective when done earlier on in the design process, and here we'll look at why that is.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part3\">Section 3: Tricks for Productive Paper Prototyping: <\/a><\/strong> An exploration into tools, techniques and templates for creating more effective paper prototypes.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part4\">Section 4: The Future of Paper Prototyping: <\/a><\/strong>How paper is being used to prototype VR environments, and a couple more templates to help you get started.<\/li>\n<\/ul>\n<\/section>\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<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\"><a class=\"link link--blue fontWeight-4\"id=\"part1\"><\/a>Section 1: Why Paper Prototype?<\/h2>\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 prototypes, in their most simple form, are drawings of the user interfaces (or screens) you plan to have in your app. Here\u2019s some reasons they can be so effective:<\/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\">You don\u2019t need to be a design expert:<\/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\">\"Design snobs\" can put you off prototyping with all their jargon, best practices, and opinions on tools you should or shouldn't use. However, starting with paper removes a lot of those technical barriers (e.g. complicated vector tools like Sketch), as it's just about getting your ideas out early on. It doesn't matter how good your prototypes <em>look<\/em> either- as long as they help communicate your ideas, which is the main purpose.<\/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 can ignore any design details such as colour and fonts, and therefore any of those snobs you may come across - illustrated perfectly by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/pablostanley\">Pablo Stanley<\/a> in his article '<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/thedesignteam.io\/the-type-snob-f221969a884b#.p2ofef39c\">The Type Snob<\/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\"><\/p>\n<div id=\"attachment_6285\" style=\"width: 335px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-eANEPe4tR-8Mt8Uf.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6285\" class=\"wp-image-6285\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-eANEPe4tR-8Mt8Uf.png\" alt=\"Design Snob Illustration, by Pablo Stanley\" width=\"325\" height=\"340\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-eANEPe4tR-8Mt8Uf.png 380w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-eANEPe4tR-8Mt8Uf-32x32.png 32w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><p id=\"caption-attachment-6285\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/thedesignteam.io\/the-type-snob-f221969a884b#.p2ofef39c\">Type Snob<\/a>, by Pablo Stanley<\/p><\/div>\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<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/thedesignteam.io\/the-type-snob-f221969a884b#.p2ofef39c\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">The Type Snob - Pablo Stanley<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">The more I learned about the nuances of the craft, though, the more I found myself behaving like a Jerky McJerkface; correcting people on unnecessarily long lines, their improper use of em dashes, and the important difference between fonts and typefaces.<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overall, anybody can get involved - I\u2019ve seen paper prototyping on paper (\"POP\" as it's sometimes abbreviated to) used as a tool to bring ideas from <em>everyone<\/em> into the prototyping process, no matter their role or seniority in a company. Doing so can get more buy-in from leadership too if they\u2019ve had input on the designs, and also brings new perspectives to explore.<\/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\">The analogue can inspire the digital:<\/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 lot of what we do seems to revolve around screens, so it\u2019s great to start with the physical stuff, which is also more natural to us as humans. Who knows, the physical world can sometimes even inspire what will build in the digital.<\/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\">\u201cA lot of what we do seems to revolve around screens, so it\u2019s great to start with the physical\u00a0stuff\u201d<\/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\">One example is how Google approached the creation of \u2018<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.io\/guidelines\/\">material design<\/a>\u2019\u2014 layering paper and card on top of each other brought them to experiment more with the Z-axis of an interface. They applied the depth and shadows of the real world to screens when creating \u2018material design\u2019 for digital interfaces:<\/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<div id=\"attachment_6297\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-6297\" class=\" wp-image-6297\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67.png\" alt=\"Google Material Design - inspiration from physical\" width=\"500\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67.png 1153w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67-461x600.png 461w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67-768x1000.png 768w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-rhyRiMqohlpgkO67-1152x1500.png 1152w\" sizes=\"(max-width: 1153px) 100vw, 1153px\" \/><\/a><p id=\"caption-attachment-6297\" class=\"wp-caption-text\">Google Material Design - inspiration from paper<\/p><\/div>\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 to this example, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.opera.com\/\">Opera<\/a> went as far as bringing in balls and cutting out circle pieces of card when creating their <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=Cqyv1Fh5bCs\">experimental Neon browser<\/a>. They said it gave inspiration in making their product more tangible, as people were most engaged when the interface was more like a real thing.<\/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\">Less unproductive meetings (or more effective communication):<\/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\">Prototyping with paper can help <em>anyone<\/em> quickly and effectively make choices on their app, and communicate their ideas. I\u2019ve always found it easier to explain ideas through a drawing than it is by talking\u2014 as the saying at IDEO goes (according to John Maeda):<br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-15-at-19.52.37.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6451 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-15-at-19.52.37.png\" alt=\"Quote; &quot;...a prototype is worth a 1000 meetings&quot;\" width=\"1220\" height=\"562\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-15-at-19.52.37.png 1220w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-15-at-19.52.37-600x276.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-15-at-19.52.37-768x354.png 768w\" sizes=\"auto, (max-width: 1220px) 100vw, 1220px\" \/><\/a><br \/>\nJust imagine, if paper can bring anyone into the prototyping process, it can lead to less meetings - \u00a0and therefore\u00a0<em>more effective<\/em> meetings when they do take place.<\/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\">\u201cIf a picture is worth 1000 words, a prototype is worth 1000 meetings.\u201d<\/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\">On another note, in the case of a startup looking for funding, <em>showing<\/em> your idea rather than simply telling can also give you greater leverage when pitching to venture capitalists.<\/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\">Put egos into check (or it\u2019s more inclusive): <\/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\">During design workshops in business environments, I've noticed that getting people active with paper prototyping can help bring them out of their \u2018<em>business persona<\/em>\u2019 more than other \u2018design thinking\u2019 activities. Experimentation takes over, and it's noticeable for the noise levels to drop as people are no longer just talking, but <em>actually <\/em>making things.<\/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\">Bringing \u2018<em>non-designers<\/em>\u2019 into the prototyping process in this way can also help reduce any \u2018<em>us vs them<\/em>\u2019 mentality that sometimes manifests in product teams. This is highlighted well by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/ux_john\">John Morgan<\/a>, a Design Lead at IBM, in his article titled \"Four Principles That Help Design Teams Go from Good to Great\":<\/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\"><span class=\"long-quote\">\u201cEgo manifests itself in many ways in designers, for example, the ego can manifest as an \u2018us and them\u2019 mentality.\u201d<\/span><\/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\">Morgan goes on to explain how communication and collaboration can be key in designing and creating a great product, and how getting everyone involved can enable us to draw upon different skillets, making the final product worth more than the sum of the team\u2019s input.<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvel7077.wpengine.com\/four-principles-help-design-teams-go-good-great\/\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Four Principles That Help Design Teams Go from Good to Great - John Morgan<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Some designers marry their ideas and stunt the creative development of the product. They become useless to the team, unable to move on into new creative spaces or view the problem from new perspectives.<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now we have reasons to give paper prototyping a go, let\u2019s look at the best time and purposes to do it.<\/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<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\"><a class=\"link link--blue fontWeight-4\"id=\"part2\"><\/a>Section 2: When to paper prototype<\/h2>\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 have some initial ideas, paper prototyping is one of the best tools to explore them. It\u2019s most effective when used early on in your process\u2014 ideally once you\u2019ve spent time understanding your user and market, so you know the problem you\u2019re solving is real. The purpose isn\u2019t to create something pretty, but to learn quickly. Take this quote from <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Rich_Dad_Poor_Dad\">Robert Kiyosaki<\/a> for inspiration:<\/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\">\u201cIt\u2019s not what you know anymore that counts, it\u2019s how fast you\u00a0learn\u201d<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Start early, so you can learn faster: <\/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\">The beauty of using paper is that it\u2019s much easier than using higher fidelity tools (such as Sketch or code), meaning you can try out lots of ideas <em>faster<\/em>. This is shown in the graph below, which maps out different fidelities of prototyping tools against time. Paper prototyping sits in the bottom left, taking the least time and also the lowest level of effort:<\/p>\n<div id=\"attachment_6366\" style=\"width: 973px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-9QR7NfRtWu7xTSH1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6366\" class=\"wp-image-6366 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-9QR7NfRtWu7xTSH1.png\" alt=\"0-9qr7nfrtwu7xtsh1\" width=\"963\" height=\"670\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-9QR7NfRtWu7xTSH1.png 963w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-9QR7NfRtWu7xTSH1-600x417.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-9QR7NfRtWu7xTSH1-768x534.png 768w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/a><p id=\"caption-attachment-6366\" class=\"wp-caption-text\">Fidelity vs Time<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Essentially, using paper lets you learn more about your design in a shorter space of time. You can easily make changes, stick post-it notes over things, or just throw it away and start over without getting upset.<\/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\">Use paper to get high-level feedback: <\/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\">The purpose of low-fidelity paper prototyping is not to impress users with beautiful drawings and designs, but to gain insight and direction for your product, quickly. Therefore, it\u2019s best used to get feedback on high-level concepts, such as the layout and flow of your app. Therefore, don't spend too much time perfecting your wireframes until you know you\u2019re going in the right direction. For more detail, refer to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/laurabusche\">Laura Busche's<\/a> article for Smashing Magazine:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.smashingmagazine.com\/2014\/10\/the-skeptics-guide-to-low-fidelity-prototyping\/\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">The Skeptic\u2019s Guide To Low-Fidelity Prototyping<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Throughout this article, we will look at some of the features that make low-fidelity prototyping a unique tool to radically improve your work and to build an environment in which users\u2019 needs can be truly realized.<\/span><\/span><\/span><\/a><\/section>\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 the overlying structure is determined, higher quality versions can be made to gain insight on later decisions such as colours, or even animations and transitions.<\/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\">\u201cThe purpose of prototyping isn't to impress users, but to gain insight and direction for your product\u201d<\/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\">Now we\u2019ve covered why and when to prototype with paper, let\u2019s jump in with some tricks for getting started.<\/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<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\"><a class=\"link link--blue fontWeight-4\"id=\"part3\"><\/a>Section 3: Tricks for Productive Paper Prototyping<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Getting started is easy, you can just sketch out whatever comes to your mind. But to create more useful prototypes, consider some of the following tips:<\/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\">1. Begin with the user ????<\/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\">By starting with your user in mind, you can ensure your product helps them with the goals they want to achieve. Here are a few things you can consider:<\/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>How does each screen of your app fit in with the tasks your user wants to do?<\/li>\n<li>In what context will your app be used? Will the user be driving? Will they be running?<\/li>\n<li>Does your user need to sign in? Will there be a news feed? Starting with your user goals can also help you have initial thoughts about an information architecture.<\/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\">Once you have some ideas, just sketch them out. Heres some great templates to get you started:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/static\/site\/downloads\/devices.pdf\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Free Marvel paper prototype paper templates - grab it here.<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Paper prototype templates for iOS, Android, Apple Watch, and the web.<\/span><\/span><\/span><\/a><\/section>\n<div id=\"attachment_6461\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/sketchpaper.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-6461\" class=\"size-full wp-image-6461\" style=\"display: inherit; margin: 0 auto;\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/sketchpaper.png\" alt=\"Prototype Templates, by Maxime De Greve \u2708 for Marvel \" width=\"560\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/sketchpaper.png 800w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/sketchpaper-600x450.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/sketchpaper-768x576.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-6461\" class=\"wp-caption-text\">Prototype Templates, by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/1824207-Apple-Watch-iPhone-iPad-Android-sketch-paper-FREE?list=following&amp;offset=0\">Maxime De Greve<\/a> \u2708 for Marvel<\/p><\/div>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"http:\/\/sneakpeekit.com\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">SneakPeekit printable grids for design wireframing - get it here.<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process.<\/span><\/span><\/span><\/a><\/section>\n<div id=\"attachment_6377\" style=\"width: 629px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-tnokrGipk1-uBefB.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6377\" class=\"wp-image-6377\" style=\"display: inherit; margin: 0 auto;\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-tnokrGipk1-uBefB.png\" alt=\"0-tnokrgipk1-ubefb\" width=\"619\" height=\"293\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-tnokrGipk1-uBefB.png 1381w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-tnokrGipk1-uBefB-600x284.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-tnokrGipk1-uBefB-768x364.png 768w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><\/a><p id=\"caption-attachment-6377\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/sneakpeekit.com\/\">Sneakpeekit<\/a> prototype templates<\/p><\/div>\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\">2. Vary the fidelity to gain appropriate insights ????<\/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\">Make sure the fidelity of your prototype matches the type of insight you want to gain.<\/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>By keeping it very low-fi, and excluding colours, fonts and interactions, it can ensure the feedback you receive stays high level, and allows you answer questions about the layout and structure of your app.<br \/>\nYou don\u2019t want to be hearing \u201c<em>that would look better in Helvetica<\/em>\u201d or \u201c<em>what if you changed that button to red?<\/em>\u201d<\/li>\n<li>As you get more certain about your designs, you can begin to take more time on them, as the type of feedback you want to receive changes.<\/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\">When it comes to increasing your prototype fidelity, you can even go as far as making them interactive. You can do that with the Marvel mobile app, to turn your static <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/getting-started-wireframes\/\">wireframes<\/a> into clickable 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\"><\/p>\n<div id=\"attachment_6390\" style=\"width: 630px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-4qrkNqYYrBKDvf6V.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6390\" class=\" wp-image-6390\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-4qrkNqYYrBKDvf6V.gif\" alt=\"Make your paper prototypes interactive\" width=\"620\" height=\"344\" \/><\/a><p id=\"caption-attachment-6390\" class=\"wp-caption-text\">Make your paper prototypes interactive<\/p><\/div>\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<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Try it now - get our free <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/pop\">prototyping app for iOS or Android<\/a>. <\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Prototyping on Paper! Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app protot<\/span><\/span><\/span><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">ypes.<\/span><\/span><\/span><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is one of the fastest ways to progress from a paper prototype into a digital one of higher fidelity. Just take pictures of your screens and add hotspots to make your paper prototypes interactive. It's as easy as shooting stuff with your phone- cue Matthew McConaughey:<\/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\"><span class=\"long-quote\">\u201cYou want to be a writer? Start writing. You want to be a filmmaker? Start shooting stuff on your phone right\u00a0now.\u201d<\/span><\/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\">I guess <em>almost<\/em> the same thing can be applied to prototyping with Marvel - it even gives you the ability to put your paper prototypes into <em>anyone\u2019s<\/em> hands, no matter where they are in the world.<\/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\">3. Exploration exercise: think across devices \ud83d\udcf1\ud83d\udda5<\/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\">When paper prototyping, we\u2019re not always sure what screen size our designs will end up on, so it\u2019s great to start by thinking about <em>all<\/em> screen sizes. A simple \u2018paper folding\u2019 exercise can help you do this:<\/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>???? Take one A4 sheet\u2014 that\u2019s your desktop screen\u2014 how would you design for that?<\/li>\n<li>???? Fold it in half, that\u2019s your tablet or small laptop\u2014 now you\u2019ve got less space.<\/li>\n<li>???? Fold it in half again and that\u2019s your phablet<\/li>\n<li>\u231a\ufe0f Followed by your phone and watch<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-UL4Wv2-xKHuDkMJo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6404\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-UL4Wv2-xKHuDkMJo.png\" alt=\"0-ul4wv2-xkhudkmjo\" width=\"521\" height=\"377\" \/><\/a><\/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\">\"Once you have some initial ideas, paper prototyping is one of the best tools to explore them.\"<\/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\">Whilst this is nice to help you prioritise content and features, sometimes you already know your app is only going to be used on mobile devices- maybe it\u2019s a sports app to be used when running. Or maybe you\u2019re creating something specifically for a large screen\u2014 an office stats board for example, or something for old-school office workers who only have 15\u201d box monitors.<\/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\">Therefore a lot depends on context, but this exercise can help you think from different angles nevertheless.<\/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\">4. Human-robot testing \ud83e\udd16<\/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\">When testing and presenting your prototypes to people, you may want to keep it straight up paper (if you don\u2019t have a phone handy to use Marvel). In this case, you can always use a human to play the role of a computer:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-7-Qt_yvYayaPVFo1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6402\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-7-Qt_yvYayaPVFo1.gif\" alt=\"0-7-qt_yvyayapvfo1\" width=\"251\" height=\"364\" \/><\/a><img class=\"size-full\" title=\"\" alt=\"\" \/>Well not like <em>that<\/em> \ud83d\udc83 exactly. The aim is to see how a user would respond to your app. Here\u2019s a very quick overview of the testing process:<\/p>\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>Assign some roles:\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><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\ud83d\ude4d\ud83c\udffb\u200d\u2642\ufe0f <\/strong>The user\u2014 the participant for the test (the more the merrier)<\/li>\n<li>\ud83d\udd75\ud83c\udffd\u200d\u2642\ufe0f The facilitator\u2014 to arrange and document the test<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\ud83d\udc69\ud83c\udffc\u200d\ud83d\udcbb <\/strong>The human computer\u2014 to move the paper in reaction to the user\u2019s interactions.<\/li>\n<\/ul>\n<\/li>\n<li>Set the scene for the user\u2014 tell them their role and set them a goal to achieve (e.g. navigate to image gallery and upload a picture of your cat)<\/li>\n<li>As the user interacts with the paper prototypes (pretending they are real screens), the \u2018human computer\u2019 moves the paper around as feedback, without saying anything. Just like a computer. Like this:<\/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\"><\/p>\n<div style=\"width: 626px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-v59LPnwiTsv8mONo.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6410\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-v59LPnwiTsv8mONo.gif\" alt=\"0-v59lpnwitsv8mono\" width=\"616\" height=\"346\" \/><\/a><p class=\"wp-caption-text\">Paper prototyping via <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.olivia-brown.com\/\">Olivia Brown<\/a><\/p><\/div>\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 more thorough guide to usability testing with paper can be seen here:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"http:\/\/blogs.atlassian.com\/2011\/11\/usability-testing-with-paper-prototyping\/\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Usability Testing with Paper Prototyping - Atlassian Blogs<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Executing a paper prototype test is having one or more test subjects (end-users) sit down in front of the paper GUI, and having them interact with it. The end-user is given a specific task...<\/span><\/span><\/span><\/a><\/section>\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<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\"><a class=\"link link--blue fontWeight-4\"id=\"part4\"><\/a>Section 4: The Future of Paper Prototyping<\/h2>\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\u2019ve only really visited designing for screens in this article, but what about applying paper prototyping to other mediums such as Virtual Reality? Let's finish with a brief look at how some designers are approaching VR prototyping with paper:<\/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:\/\/medium.com\/@jmdenis?source=post_header_lockup\">Jean-Marc Denis<\/a> of Facebook (formerly Google) wrote that paper is the first tool he uses in VR, even before Sketch. He says that you just can\u2019t beat it because of it\u2019s cheapness and speed.<\/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\">\u201cIn VR, the cost of moving from wireframes to hi-fi is higher than 2D.\u201d<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/K_V_113\">Volodymyr Kurbatov<\/a> takes this a step further with a full walkthrough for sketching VR apps in his article, \"<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/virtualrealitypop.com\/vr-sketches-56599f99b357#.msy05guu6\">Draw sketches for virtual reality like pro<\/a>\". He starts by sharing some useful templates for sketching VR scenes, and explains how you can use a 360 photo viewer to see your Sketches in VR. Check out the video:<\/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\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/www.youtube.com\/embed\/BmMh6-jPWOc\" width=\"560\" height=\"415\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nFree templates are available in his article:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/virtualrealitypop.com\/vr-sketches-56599f99b357#.l0het57om\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5 c-slate\">Draw sketches for virtual reality like pro<br \/>\n<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\"> Virtual reality is a brand new frontier, but there are already tools that cover almost all the steps of creating a new experience (thank you, game industry). But sketching is so ancient...<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In addition to paper prototyping templates for VR, we\u2019ve also started to see Sketch templates popping up. Whilst not paper, it\u2019s interesting to see how we can approach VR in 2D environments. Maybe we apply lessons from Sketch templates to paper too. Here\u2019s an example from <a>Kickpush<\/a>, who are doing amazing work in the VR prototyping field:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-T0AYYoC5bii1nsxQ.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6441\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-T0AYYoC5bii1nsxQ.gif\" alt=\"0-t0ayyoc5bii1nsxq\" width=\"600\" \/><\/a><\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/blog.kickpush.co\/beyond-reality-first-steps-into-the-unknown-cbb19f039e51#.4meus91c8\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Virtual reality: Templates for UI design in VR - Kickpush<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">We\u2019re on a mission to bridge the gap between traditional UI design and virtual \/ augmented reality...<\/span><\/span><\/span><\/a><\/section>\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\">Limitations of paper<\/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\">Whilst paper prototyping is awesome, there are of course some limitations to it. For instance, it needs a lot of imagination from the user which can make it less accurate. Furthermore, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/library.gv.com\/paper-prototyping-is-a-waste-of-time-353076395187#.va2yotmxb\">Jake Knapp of Google Ventures<\/a> argues that whilst paper prototyping is great for starting things off, they\u2019re not ideal for user testing. This could be true to a certain extent, but it can be argued that apps such as the mobile version of Marvel (which let us make our paper prototypes more useful and interactive) can make user testing with paper much more viable. You can send your prototypes across the world and even record how people use them, without watching over them.<\/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<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Get Started, and Get Everyone Involved<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overall, paper prototyping a great way to get people involved and explore early ideas. Since it's so useful in those early stages, it\u2019s also the perfect opportunity to get the rest of your team on board and engaged with the design process. Then, as you move forward to higher fidelity designs, your team is more likely to stay involved. For example, in our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/r\/?url=https%3A%2F%2Fmarvel7077.wpengine.com%2Fspotlight-huddle%2F\">spotlight with Huddle<\/a>, we found that Marvel prototyping tools are used not only by designers, but by product managers, quality assurance teams, developers <em>and<\/em> commercial teams. So getting them in early, can keep them in sync throughout.<\/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\">Good luck!<\/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\">Anyway, I\u2019ve found that talking alone will get you nowhere. Stop telling people what you\u2019re going to, and show them by building a basic paper prototype. Get going\u2014 don\u2019t listen to me, listen to Walt Disney:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/0-egCJpaIp37Ck83_U.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6480 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/0-egCJpaIp37Ck83_U.png\" alt=\"Walt Disney Quote\" width=\"500\" height=\"529\" \/><\/a><\/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 class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/the-magic-of-paper-prototyping\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Magic of Paper Prototyping<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/how-to-run-a-design-club-mini-project-from-home\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Run a Design Thinking Workshop for your Kids from Home<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/resources-for-running-remote-design-sprint\/\" target=\"_blank\" rel=\"noopener noreferrer\">The best resources for running a remote design sprint<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-vr-beginners-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">Designing for VR: A Beginners Guide<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Ultimate Guide to Prototyping<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Turning your app idea into a real product isn\u2019t as far from reality as you might think. It can so often just come down to getting started\u2014 and to do so, \u201call you need is paper, pens, scissors and your imagination\u201d (Shawn Medero, Alistapart). \u201cAll you need is paper, pens, scissors, and your imagination.\u201d For example, when Jack Dorsey had&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":76,"featured_media":6617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-6231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping-design-thoughts"],"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=\"Paper, pens, scissors, and your imagination are all you need to get started drawing screens &amp; creating simple prototypes of your ideas\" \/>\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.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to Paper Prototyping (POP) - Create Basic Prototypes on Paper\" \/>\n<meta property=\"og:description\" content=\"Paper, pens, scissors, and your imagination are all you need to get started drawing screens &amp; creating simple prototypes of your ideas\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\" \/>\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=\"2017-02-16T15:40:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T17:34:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/paper-clouds.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2768\" \/>\n\t<meta property=\"og:image:height\" content=\"1728\" \/>\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=\"12 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/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.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/02\/paper-clouds.png\",\"width\":2768,\"height\":1728},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\",\"name\":\"A Guide to Paper Prototyping (POP) - Create Basic Prototypes on Paper\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#primaryimage\"},\"datePublished\":\"2017-02-16T15:40:43+00:00\",\"dateModified\":\"2020-11-20T17:34:57+00:00\",\"description\":\"Paper, pens, scissors, and your imagination are all you need to get started drawing screens & creating simple prototypes of your ideas\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\"},\"headline\":\"Stop Talking and Start Sketching: A Guide to Paper Prototyping\",\"datePublished\":\"2017-02-16T15:40:43+00:00\",\"dateModified\":\"2020-11-20T17:34:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#primaryimage\"},\"articleSection\":\"Design &amp; Prototyping\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\",\"name\":\"Graeme Fulton\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4a29443acaa7dc0b9b9c6698f976168024ca960660df55b8b5661fc52fbb3c92?s=96&d=mm&r=g\",\"caption\":\"Graeme Fulton\"},\"description\":\"Designer, Writer and Developer at Marvel! Say hello on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/6231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=6231"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/6231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/6617"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=6231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=6231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=6231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}