{"id":6356,"date":"2015-03-18T14:18:52","date_gmt":"2015-03-18T21:18:52","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6356"},"modified":"2020-04-22T06:38:39","modified_gmt":"2020-04-22T13:38:39","slug":"new-pocket-guide-web-ui-design-process-visual-power-mockups","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/","title":{"rendered":"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)"},"content":{"rendered":"<p>Designed as a quick read, our <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\" target=\"_blank\" rel=\"noopener noreferrer\">first pocket guide<\/a>&nbsp;explores different approaches to creating mockups in the design process.<\/p>\n<p>Some are traditional, others are unorthodox. All are practical. Get a sneak peek!<\/p>\n<h2>What&#8217;s inside the e-book<\/h2>\n<p>The pocket guide is designed as a hyper-focused version of our much more robust e-books.<\/p>\n<p>In this case, we dive into the role of mockups in the UX design process (which we first described in <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-mockups\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Guide to Mockups<\/a>).&nbsp;<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6358\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/Screen-Shot-2015-03-18-at-2.00.43-PM.png\" alt=\"Web Design UI Process ebook\" width=\"700\" height=\"509\"><\/a><\/p>\n<p>This pocket guide&nbsp;will help you:&nbsp;<\/p>\n<ul>\n<li>Understand how to use mockups compared to low-fidelity wireframes and UX prototypes&nbsp;<\/li>\n<li>Explore traditional UX&nbsp;design processes, and more efficient hybrid processes adapted for Agile<\/li>\n<li>See the full range of fidelity in the UX design process<\/li>\n<\/ul>\n<p>So go ahead and check it out, and feel free to share with anyone who might find it useful.<\/p>\n<p style=\"margin-bottom: 35px;\"><span style=\"background: #3ca7dd; padding: 15px; font-weight: bold; border-radius: 4px; border: 1px solid #3ca7dd; border-bottom: 1px solid #2f97cb;\"><a style=\"color: #ffffff; text-decoration: none; font-size: 18px;\" href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\">Download&nbsp;the free pocket guide<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn traditional and unorthodox ways of mastering mockups in the design process. A focused &#038; quick read. <\/p>\n","protected":false},"author":9,"featured_media":6360,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8,6,7],"tags":[],"class_list":["post-6356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping","category-ux-design","category-web-design"],"yoast_title":"Free Guide: Web UI Design Process (The Power of Mockups)","yoast_metadesc":"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Free Guide: Web UI Design Process (The Power of Mockups)<\/title>\n<meta name=\"description\" content=\"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!\" \/>\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\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)\" \/>\n<meta property=\"og:description\" content=\"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-18T21:18:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)\",\"datePublished\":\"2015-03-18T21:18:52+00:00\",\"dateModified\":\"2020-04-22T13:38:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/\"},\"wordCount\":161,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book2.png\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/\",\"name\":\"Free Guide: Web UI Design Process (The Power of Mockups)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book2.png\",\"datePublished\":\"2015-03-18T21:18:52+00:00\",\"dateModified\":\"2020-04-22T13:38:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book2.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book2.png\",\"width\":720,\"height\":330,\"caption\":\"blog book2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-pocket-guide-web-ui-design-process-visual-power-mockups\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)\"}]},{\"@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\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Free Guide: Web UI Design Process (The Power of Mockups)","description":"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!","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\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/","og_locale":"en_US","og_type":"article","og_title":"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)","og_description":"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/","og_site_name":"Studio by UXPin","article_published_time":"2015-03-18T21:18:52+00:00","article_modified_time":"2020-04-22T13:38:39+00:00","og_image":[{"width":720,"height":330,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)","datePublished":"2015-03-18T21:18:52+00:00","dateModified":"2020-04-22T13:38:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/"},"wordCount":161,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png","articleSection":["Blog","Process","Prototyping","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/","name":"Free Guide: Web UI Design Process (The Power of Mockups)","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png","datePublished":"2015-03-18T21:18:52+00:00","dateModified":"2020-04-22T13:38:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Learn traditional and unorthodox ways of mastering UI mockups in the design process. A focused and quick read from top designers at UXPin!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book2.png","width":720,"height":330,"caption":"blog book2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-pocket-guide-web-ui-design-process-visual-power-mockups\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"New Pocket Guide: Web UI Design Process (The Visual Power of Mockups)"}]},{"@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\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6356","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=6356"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/6360"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=6356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=6356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=6356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}