{"id":11979,"date":"2016-02-04T16:33:22","date_gmt":"2016-02-05T00:33:22","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=11979"},"modified":"2020-04-22T06:37:11","modified_gmt":"2020-04-22T13:37:11","slug":"a-practical-overview-of-interactive-wireframes","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/","title":{"rendered":"A Practical Overview of Interactive Wireframes"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">As this becomes more common knowledge, user research practices like prototyping also evolve. This thinking yielded the extremely helpful technique of rapid prototyping, which increased the amount of testing and therefore the amount of feedback and user data. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11993\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image013.png\" alt=\"image01\" width=\"720\" height=\"629\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image013.png 755w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image013-343x300.png 343w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><i><span style=\"font-weight: 400;\">Photo credit: \u201c<\/span><\/i><a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/3978302604\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\">PT001: Figure 2.1<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.\u201d Rosenfeld Media. <\/span><\/i><a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/legalcode\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\">Creative Commons<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">. <\/span><\/i><\/p>\n<p>But as time goes on, even this practice can, itself evolve. We\u2019re now at a cusp of a more efficient form of rapid prototyping, where prototypes can be made even faster, and with less waste.<\/p>\n<p>The reason is interactive wireframes, and they\u2019re making an already good method of design even better.<\/p>\n<h2><span style=\"font-weight: 400;\">The Overall Process <\/span><\/h2>\n<p>The practice of rapid prototyping was championed greatly by the Lean UX movement, which recognized early on the importance of talking directly with customers, solving problems through user research, and creating faster cycles between iterations.<\/p>\n<p><span style=\"font-weight: 400;\">Rapid prototyping garnered a large and devoted following, thanks to its effectiveness. The main benefit, which justifies doing it alone, is that <\/span><b>designs decisions are based on continual, quantifiable data instead of guesswork<\/b><span style=\"font-weight: 400;\">. This is a concept familiar in <\/span><a href=\"http:\/\/designthinking.ideo.com\/?p=51\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Design Thinking<\/span><\/a><span style=\"font-weight: 400;\">; designers have the ability to test multiple options (divergence) and select the best based on analysis and data (convergence).<\/span><\/p>\n<p>In addition, some secondary benefits include:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Safeguard against poor choices \u2014 <\/b><span style=\"font-weight: 400;\">The frequent validation of decision choices checks for problem areas regularly, ensuring you stay on the right track.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Earlier testing \u2014<\/b><span style=\"font-weight: 400;\"> Testing prototypes early lets you fix big-picture problems like information architecture before they become too difficult to change. The process can even be modified to test product concepts in the earliest brainstorming meetings.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Justifications for stakeholders \u2014<\/b><span style=\"font-weight: 400;\"> Collecting data more frequently gives the designer firmer ground to stand on if their decisions are challenged by stakeholders.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11994 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image022.jpg\" alt=\"image02\" width=\"500\" height=\"379\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image022.jpg 500w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image022-396x300.jpg 396w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Photo credit:<\/span><\/i><a href=\"https:\/\/www.smashingmagazine.com\/2010\/06\/design-better-faster-with-rapid-prototyping\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\"> \u201cDesign Better and Faster with Rapid Prototyping.\u201d Lyndon Cerejo. Smashing Magazine<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">The rapid prototyping process, <\/span><a href=\"https:\/\/www.smashingmagazine.com\/2010\/06\/design-better-faster-with-rapid-prototyping\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">as outlined by Lyndon Cerejo in his 2010 article for Smashing Magazine<\/span><\/a><span style=\"font-weight: 400;\">, can be reduced to a cycle of three repeating steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><b>Prototype \u2014<\/b><span style=\"font-weight: 400;\"> Build a prototype that incorporates previous data and educated projections.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Review \u2014<\/b><span style=\"font-weight: 400;\"> Test the prototype with users and evaluate its performance.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Refine \u2014<\/b><span style=\"font-weight: 400;\"> Isolate problematic areas and design solutions.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u2026 and then start the cycle over. This is repeated until all the faults are hammered away and the testing yields the desirable results. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If this process seems vague, it\u2019s for good reason. Rapid prototyping is highly flexible, and prototypes can be anything from pixel-perfect, fully interactive demos, to paper prototypes sketched on napkins. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Interactive Wireframes: Beyond a Dead-End Document<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Another consequence of the popularity of Agile and Lean ideologies is calling into question the worth of wireframes. As processes are looking to trim the fat anywhere they can, wireframes seem more like just another unnecessary, throwaway deliverable. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The thing is, in a way they\u2019re right. <\/span><a href=\"http:\/\/www.creativebloq.com\/netmag\/why-wireframes-should-be-left-die-31411165\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Static wireframe critics make some good points<\/span><\/a><span style=\"font-weight: 400;\">, namely that wireframes slow down the rapid prototyping process with an extra step before designers create a functioning system. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you create an interactive wireframe, however, you connect two stages of the design process together. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How Interactive Wireframes Improve Rapid Prototyping<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">So what we have now are the ability to create lo-fi prototypes quickly, easily, and with few resources. <\/span><\/p>\n<p>Interactive wireframes allow testing early, almost right from the start. Whereas later stage prototypes tested more complete, near-final product versions, interactive wireframes open up testing to crucial early elements.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11997\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/aviato-screenshot.png\" alt=\"aviato-screenshot\" width=\"720\" height=\"534\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/aviato-screenshot.png 974w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/aviato-screenshot-404x300.png 404w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Photo credit: <\/span><\/i><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\">UXPin<\/span><\/i><\/a><\/p>\n<p>Aspects like navigation, information architecture, and general layouts can be tested almost immediately, with the feedback integrated before moving on to higher fidelities. Making base-level IA modifications are easy at the beginning, but sometimes require entire upheavals at the end, not to mention wasted work on graphics.<\/p>\n<p>True, lo-fi prototypes don\u2019t examine the details like visuals, gut responses, call-to-action success, or advanced usability. But in the early stages, these factors aren\u2019t as important as the fundamentals. Besides these elements aren\u2019t neglected; they are still tested with later, hi-fi prototypes.<\/p>\n<p>With the addition of interactive wireframes, the rapid prototyping process looks something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11999\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/Brainstorm-to-code-flow-diagram-1.png\" alt=\"Brainstorm-to-code-flow-diagram-1\" width=\"600\" height=\"388\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/Brainstorm-to-code-flow-diagram-1.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/Brainstorm-to-code-flow-diagram-1-464x300.png 464w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>So, in short, the advantage of interactive wireframe is that they enhance the same benefits of rapid prototyping, opening up user feedback earlier, and the capacity to hone early stage elements before they become more difficult to change later.<\/p>\n<h2><span style=\"font-weight: 400;\">Best Practices for Interactive Wireframes<\/span><\/h2>\n<p>Because interactive wireframes are relatively new on the scene, keep these best practices in mind:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Test multiple lo-fi prototypes at once \u2014 <\/b><span style=\"font-weight: 400;\">Use their simplicity to your advantage. Because they\u2019re so easy to make, you can build and test prototypes for different ideas if you\u2019re undecided about a direction. This also provides more room to experiment with new ideas.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><b>Know when to stop \u2014 <\/b><span style=\"font-weight: 400;\">You could, conceivably, test interactive wireframes endlessly, continually refining until every last piece is perfect. This would be a waste of time, though \u2014 lo-fi prototypes are only a portion of the entire process. Test until the major concerns are satisfied, and then move on to higher-fidelity testing for the fine points. <\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12001\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/this-is-a-clickable-wireframe.png\" alt=\"this-is-a-clickable-wireframe\" width=\"720\" height=\"324\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/this-is-a-clickable-wireframe.png 1364w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/this-is-a-clickable-wireframe-668x300.png 668w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/this-is-a-clickable-wireframe-1024x460.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Photo credit: <\/span><\/i><a href=\"https:\/\/www.uxpin.com\/\"><i><span style=\"font-weight: 400;\">UXPin<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Collaborate before testing \u2014<\/b><span style=\"font-weight: 400;\"> As with all user testing, involve other departments in the process. Take the time beforehand to ask their input \u2014 answering their questions in the testing as well as your own will make the product fuller and more capable of fulfilling all its goals.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Takeaway<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The concepts this article touches on are explored more thoroughly in our free ebook <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-interactive-wireframing\/\"><span style=\"font-weight: 400;\">The Guide to Interactive Wireframes<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Written by Professor Tom Green of the Humber Institute of Technology and Advanced Learning, this guide runs through the process of creating interactive wireframes step-by-step, illustrating concepts through screenshots and explaining how they can fit into design processes.<\/span><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-interactive-wireframing\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11991 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/blog-book.png\" alt=\"blog-book\" width=\"720\" height=\"330\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/blog-book.png 720w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/blog-book-655x300.png 655w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An overview of interactive wireframing with some practical tips and techniques. <\/p>\n","protected":false},"author":20,"featured_media":10007,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8,6],"tags":[],"class_list":["post-11979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping","category-ux-design"],"yoast_title":"","yoast_metadesc":"An overview of interactive wireframing with some practical tips and techniques.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Practical Overview of Interactive Wireframes | UXPin<\/title>\n<meta name=\"description\" content=\"An overview of interactive wireframing with some practical tips and techniques.\" \/>\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.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Practical Overview of Interactive Wireframes\" \/>\n<meta property=\"og:description\" content=\"An overview of interactive wireframing with some practical tips and techniques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-05T00:33:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:37:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"771\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ryan Riddle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Riddle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/\"},\"author\":{\"name\":\"Ryan Riddle\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/133da71f4094affa0b21499f1792c70a\"},\"headline\":\"A Practical Overview of Interactive Wireframes\",\"datePublished\":\"2016-02-05T00:33:22+00:00\",\"dateModified\":\"2020-04-22T13:37:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/\"},\"wordCount\":934,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/\",\"name\":\"A Practical Overview of Interactive Wireframes | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png\",\"datePublished\":\"2016-02-05T00:33:22+00:00\",\"dateModified\":\"2020-04-22T13:37:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/133da71f4094affa0b21499f1792c70a\"},\"description\":\"An overview of interactive wireframing with some practical tips and techniques.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/11\\\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png\",\"width\":771,\"height\":480,\"caption\":\"Screen Shot 2015 11 20 at 6.28.40 PM1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-practical-overview-of-interactive-wireframes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Practical Overview of Interactive Wireframes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/133da71f4094affa0b21499f1792c70a\",\"name\":\"Ryan Riddle\",\"description\":\"Ryan Thomas Riddle is the Head of Marketing at UXPin. He is an award-winning writer for his work as a mild-mannered reporter for the Bay Area newspaper, The Daily Post. His previous work has appeared in the San Francisco Bay Guardian. Formerly, he worked for ZURB, a digital product design company, as their Lead Editor. You can read all about his adventures through time and space on Twitter, @ryantriddle.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/ryanriddle\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Practical Overview of Interactive Wireframes | UXPin","description":"An overview of interactive wireframing with some practical tips and techniques.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/","og_locale":"en_US","og_type":"article","og_title":"A Practical Overview of Interactive Wireframes","og_description":"An overview of interactive wireframing with some practical tips and techniques.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/","og_site_name":"Studio by UXPin","article_published_time":"2016-02-05T00:33:22+00:00","article_modified_time":"2020-04-22T13:37:11+00:00","og_image":[{"width":771,"height":480,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png","type":"image\/png"}],"author":"Ryan Riddle","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ryan Riddle","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/"},"author":{"name":"Ryan Riddle","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/133da71f4094affa0b21499f1792c70a"},"headline":"A Practical Overview of Interactive Wireframes","datePublished":"2016-02-05T00:33:22+00:00","dateModified":"2020-04-22T13:37:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/"},"wordCount":934,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png","articleSection":["Blog","Process","Prototyping","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/","name":"A Practical Overview of Interactive Wireframes | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png","datePublished":"2016-02-05T00:33:22+00:00","dateModified":"2020-04-22T13:37:11+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/133da71f4094affa0b21499f1792c70a"},"description":"An overview of interactive wireframing with some practical tips and techniques.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-20-at-6.28.40-PM1.png","width":771,"height":480,"caption":"Screen Shot 2015 11 20 at 6.28.40 PM1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"A Practical Overview of Interactive Wireframes"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/133da71f4094affa0b21499f1792c70a","name":"Ryan Riddle","description":"Ryan Thomas Riddle is the Head of Marketing at UXPin. He is an award-winning writer for his work as a mild-mannered reporter for the Bay Area newspaper, The Daily Post. His previous work has appeared in the San Francisco Bay Guardian. Formerly, he worked for ZURB, a digital product design company, as their Lead Editor. You can read all about his adventures through time and space on Twitter, @ryantriddle.","url":"https:\/\/www.uxpin.com\/studio\/author\/ryanriddle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/11979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=11979"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/11979\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/10007"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=11979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=11979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=11979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}