{"id":7964,"date":"2015-09-15T09:46:29","date_gmt":"2015-09-15T09:46:29","guid":{"rendered":"http:\/\/52.8.83.85\/?post_type=ebooks&#038;p=7964"},"modified":"2024-05-15T01:56:56","modified_gmt":"2024-05-15T08:56:56","slug":"mockups-ux-design-process","status":"publish","type":"ebooks","link":"https:\/\/www.uxpin.com\/studio\/ko\/ebooks\/mockups-ux-design-process\/","title":{"rendered":"Web UI Design Process"},"content":{"rendered":"<h1>Web UI Design Process: The Visual Power of Mockups<\/h1>\n<p>Are you:<\/p>\n<ul>\n<li>A UX\/UI designer?<\/li>\n<li>A product designer?<\/li>\n<li>In a UX or product position?<\/li>\n<li>A project manager?<\/li>\n<\/ul>\n<p>If so, you&#8217;ll find lots of information here that can help streamline your UI design process.<\/p>\n<p>But before we delve right in, do you know how to get your mockups to work for you? Our experts, Jerry Cao, Matt Ellis, and Kamil Zieba will show you what they are \u2013 and what they aren&#8217;t.<\/p>\n<p>Mockups are sometimes confused with wireframes and prototypes. Each of these are an integral part of the UI process, but each is distinctly different.<\/p>\n<h2>What the Web UI Design Process Guide Will Teach You<\/h2>\n<p>Our pocket guide to the UI design process explains the following:<\/p>\n<ul>\n<li><strong>Section 1<\/strong> &#8211; Mockups vs. Wireframes vs. Prototypes &#8211; The difference between mockups, wireframes, and prototypes, and how each stage lets the UI design team test appearance, structure, and functionality prior to release.<\/li>\n<li><strong>Section 2<\/strong> &#8211; Why Mockups Matter \u2013 Why mockups are necessary in the UI design process.<\/li>\n<li><strong>Section 3<\/strong> &#8211; Best Practices for the Mockups Process \u2013 How this transitional function varies in importance and implementation.<\/li>\n<li><strong>Section 4<\/strong> &#8211; A Final Note: It&#8217;s all about context &#8211; How it all ties together.<\/li>\n<\/ul>\n<h2>Other Resources Related to the Web UI Design Process Guide<\/h2>\n<p>While mockups are basically just a deliverable from the design team, they&#8217;re still an integral part of the entire UI design process. If you&#8217;re interested in further UI design information, you might like these other UXPin resources:<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/design-systems-why-build-one\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why Build a Design System?<\/a><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/prototyping-process-fidelity-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Guide to Prototyping Process &amp; Fidelity<\/a><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/real-life-ux-process\/\" target=\"_blank\" rel=\"noopener noreferrer\">Real-Life UX Design Processes \u2013 How successful companies design their products<\/a><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/futureproof-responsive-web-design-ebook-bundle\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Future-proof Responsive Web Design Bundle<\/a><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-uxpin\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creating a Design System Quickly with UXPin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web UI Design Process: The Visual Power of Mockups Are you: A UX\/UI designer? A product designer? In a UX or product position? A project manager? If so, you&#8217;ll find lots of information here that can help streamline your UI design process. But before we delve right in, do you know how to get your<\/p>\n","protected":false},"featured_media":7965,"template":"","class_list":["post-7964","ebooks","type-ebooks","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Web UI Design Process: The Visual Power of Mockups | UXPin<\/title>\n<meta name=\"description\" content=\"Discover the visual power of mockups and why they&#039;re so important to your final product.\" \/>\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\/ebooks\/mockups-ux-design-process\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web UI Design Process: The Visual Power of Mockups\" \/>\n<meta property=\"og:description\" content=\"A pocket guide explaining the purpose, context, and best practices for mockups.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-15T08:56:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"262\" \/>\n\t<meta property=\"og:image:height\" content=\"375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Web UI Design Process: The Visual Power of Mockups\" \/>\n<meta name=\"twitter:description\" content=\"A pocket guide explaining the purpose, context, and best practices for mockups.\" \/>\n<meta name=\"twitter:label1\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\",\"url\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\",\"name\":\"Web UI Design Process: The Visual Power of Mockups | UXPin\",\"isPartOf\":{\"@id\":\"https:\/\/www.uxpin.com\/studio\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png\",\"datePublished\":\"2015-09-15T09:46:29+00:00\",\"dateModified\":\"2024-05-15T08:56:56+00:00\",\"description\":\"Discover the visual power of mockups and why they're so important to your final product.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage\",\"url\":\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png\",\"contentUrl\":\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png\",\"width\":262,\"height\":375,\"caption\":\"Web UI Design Process The Visual Power of Mockups\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.uxpin.com\/studio\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ebooks\",\"item\":\"https:\/\/www.uxpin.com\/studio\/ebooks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web UI Design Process\"}]},{\"@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\":\"ko-KR\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web UI Design Process: The Visual Power of Mockups | UXPin","description":"Discover the visual power of mockups and why they're so important to your final product.","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\/ebooks\/mockups-ux-design-process\/","og_locale":"ko_KR","og_type":"article","og_title":"Web UI Design Process: The Visual Power of Mockups","og_description":"A pocket guide explaining the purpose, context, and best practices for mockups.","og_url":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/","og_site_name":"Studio by UXPin","article_modified_time":"2024-05-15T08:56:56+00:00","og_image":[{"width":262,"height":375,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Web UI Design Process: The Visual Power of Mockups","twitter_description":"A pocket guide explaining the purpose, context, and best practices for mockups.","twitter_misc":{"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"2\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/","url":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/","name":"Web UI Design Process: The Visual Power of Mockups | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png","datePublished":"2015-09-15T09:46:29+00:00","dateModified":"2024-05-15T08:56:56+00:00","description":"Discover the visual power of mockups and why they're so important to your final product.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Process-The-Visual-Power-of-Mockups-.png","width":262,"height":375,"caption":"Web UI Design Process The Visual Power of Mockups"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/ebooks\/mockups-ux-design-process\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Ebooks","item":"https:\/\/www.uxpin.com\/studio\/ebooks\/"},{"@type":"ListItem","position":3,"name":"Web UI Design Process"}]},{"@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":"ko-KR"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/ebooks\/7964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/ebooks"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/types\/ebooks"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/media\/7965"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/media?parent=7964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}