{"id":10106,"date":"2019-11-25T11:26:58","date_gmt":"2019-11-25T16:26:58","guid":{"rendered":"https:\/\/blog.brainstation.io\/?p=10106"},"modified":"2020-12-14T21:54:24","modified_gmt":"2020-12-15T02:54:24","slug":"ux-design-versus-ui-design","status":"publish","type":"post","link":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design","title":{"rendered":"UX Design vs. UI Design"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">UX design and UI design sound similar \u2014 and there\u2019s definitely some overlap \u2014 but these are also two distinct fields that really boost a team\u2019s ability to create products that look good and work well for end-users.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cUX design is a little more analytical and UI is a little more visual and more closely related to something like graphic design,\u201d says <\/span><span style=\"font-weight: 400;\">Digital Designer and Web Developer Jesse Showalter<\/span><span style=\"font-weight: 400;\">. \u201cThough the two are similar in some ways, they are also very, very different.\u201d<\/span>\n<\/p>\n\n\n\n<div class=\"lead-grid-container\">\n<div class=\"lead__card\">\n<div class=\"lead__image\"><figure><img decoding=\"async\" class=\"hide--mobile\" src=\"https:\/\/brainstation.io\/blog\/wp-content\/uploads\/2020\/03\/Design3.jpg\" alt=\"Icon\"><\/figure><\/div>\n<div class=\"lead__content\">\n<p id=\"lead__heading\" class=\"heading--4\">Become a UX Designer in just 12 weeks!<\/p>\n<p class=\"lead__description\">BrainStation&#8217;s <a href=\"https:\/\/brainstation.io\/course\/online\/remote-user-experience-design-bootcamp?utm_source=Blog&amp;utm_medium=BlogPost&amp;utm_campaign=blogLead\" target=\"_blank\" rel=\"noopener noreferrer\">User Experience Diploma Program<\/a> is a full-time, 12-week program that equips professionals with the skills and experience to start a new career in design. <\/p>\n<p id=\"lead__button--margin\"><a id=\"lead__button--hover\" class=\"lead__button\" href=\"https:\/\/brainstation.io\/book-call\/remote-user-experience-design-bootcamp?utm_source=Blog&amp;utm_medium=BlogPost&amp;utm_campaign=blogLead\" target=\"_blank\" rel=\"noopener noreferrer\">Speak to a Learning Advisor<\/a><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/RtPnVtXw6HU\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Often people in these roles are working in tandem on the same team \u2014 or, at times, it\u2019s one person wearing both hats.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cBut they do use different tools, different skills, and approach the problem in a different way,\u201d Showalter explains.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Before getting into the nitty-gritty of the two roles, let\u2019s start with the basics.&nbsp;<\/span><\/p>\n\n\n\n<h2><b>What is UX Design?&nbsp;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">UX is referring to user experience design. It\u2019s the process of boosting someone\u2019s satisfaction while they\u2019re using a particular product \u2014 be it a website or an app \u2014 by researching, analyzing, testing, and ultimately refining the design and features.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cFor example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant,\u201d <\/span><span style=\"font-weight: 400;\">explains Jacob Gube<\/span><span style=\"font-weight: 400;\"> in Smashing Magazine.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Designers working in this space are looking at the bigger picture of how all the moving pieces in a product work together and how users interact with it. In short, it\u2019s not just about how a product looks, but how someone feels while using it.&nbsp;<\/span><\/p>\n\n\n\n<p><em><span style=\"font-weight: 400;\">Find out more about BrainStation\u2019s <a href=\"https:\/\/brainstation.io\/course\/online\/user-experience-design#utm_source=BSTNblog&amp;utm_medium=blog&amp;utm_campaign=Blog_UXDesignvsUIDesign\" target=\"_blank\" rel=\"noopener noreferrer\">UX Design courses<\/a>.&nbsp;<\/span><\/em><\/p>\n\n\n\n<h2><b>What is UI Design?&nbsp;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">UI stands for user interface design, and it\u2019s a field with a narrower focus than UX. It\u2019s also closer to traditional graphic design, though the day-to-day challenges can be more complex.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cUnlike UX designers who are concerned with the overall feel of the product, user interface designers are particular about how the product is laid out,\u201d <\/span><span style=\"font-weight: 400;\">explains Lo Min Ming<\/span><span style=\"font-weight: 400;\"> in Fast Company.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Typically, they\u2019re in charge of designing each screen or page that users interact with \u2014 and making sure it all works together and creates the experience a UX designer is aiming for.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cFor example, a UI designer creating an analytics dashboard might front-load the most important content at the top, or decide whether a slider or a control knob makes the most intuitive sense to adjust a graph,\u201d Ming continues.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Other aspects of the role could include creating a cohesive style guide, maintaining visual consistency, and working alongside graphic designers and copywriters who are creating content for the product.<\/span><\/p>\n\n\n\n<p><em><span style=\"font-weight: 400;\">Find out more about BrainStation\u2019s <a href=\"https:\/\/brainstation.io\/course\/online\/user-interface-design#utm_source=BSTNblog&amp;utm_medium=blog&amp;utm_campaign=Blog_UXDesignvsUIDesign\" target=\"_blank\" rel=\"noopener noreferrer\">UI Design courses<\/a>.&nbsp;<\/span><\/em><\/p>\n\n\n\n<h2><b>UX Design Versus UI Design&nbsp;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">In every company, there\u2019s no question these roles are often working closely together while serving distinct purposes.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Showalter puts it this way: UI without UX is like a painter \u201cthrowing paint randomly at a canvas,\u201d hoping it looks good. UX is like a \u201csculpture without a frame,\u201d with <\/span><\/p>\n\n\n\n\n\n<p>\nnothing to give the piece purpose.&nbsp;\n<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In other words, it\u2019s not enough to approach a project with just a UI point-of-view \u2014 like picking out colors and layouts for different website pages without any research or testing to show how users actually move through the site, and how they feel about its usability.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Similarly, UX designers need UI designers to actually make their vision and research come to life through a tangible, beautiful product that people can actually use.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Because the roles are so interconnected, you really can\u2019t have one without the other.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201cThe boundary between UI and UX designers is fairly blurred and it is not uncommon for companies to opt to combine these roles,\u201d Ming notes. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics. <\/p>\n","protected":false},"author":7,"featured_media":10107,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1066,290,158],"tags":[111,322,190,122],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX Design vs. UI Design | BrainStation\u00ae Blog<\/title>\n<meta name=\"description\" content=\"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Design vs. UI Design | BrainStation\u00ae Blog\" \/>\n<meta property=\"og:description\" content=\"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design\" \/>\n<meta property=\"og:site_name\" content=\"BrainStation\u00ae Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-25T16:26:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-15T02:54:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2110\" \/>\n\t<meta property=\"og:image:height\" content=\"1251\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BrainStation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brainstation.io\/blog\/#website\",\"url\":\"https:\/\/brainstation.io\/blog\/\",\"name\":\"BrainStation\u00ae Blog\",\"description\":\"The Digital Learning Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brainstation.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#primaryimage\",\"url\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg\",\"contentUrl\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg\",\"width\":2110,\"height\":1251,\"caption\":\"UX Design vs UI Design\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#webpage\",\"url\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design\",\"name\":\"UX Design vs. UI Design | BrainStation\u00ae Blog\",\"isPartOf\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#primaryimage\"},\"datePublished\":\"2019-11-25T16:26:58+00:00\",\"dateModified\":\"2020-12-15T02:54:24+00:00\",\"author\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\"},\"description\":\"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.\",\"breadcrumb\":{\"@id\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/brainstation.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Design vs. UI Design\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\",\"name\":\"BrainStation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"caption\":\"BrainStation\"},\"description\":\"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.\",\"url\":\"https:\/\/brainstation.io\/blog\/author\/brainstation\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Design vs. UI Design | BrainStation\u00ae Blog","description":"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.","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:\/\/brainstation.io\/blog\/ux-design-versus-ui-design","og_locale":"en_US","og_type":"article","og_title":"UX Design vs. UI Design | BrainStation\u00ae Blog","og_description":"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.","og_url":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design","og_site_name":"BrainStation\u00ae Blog","article_published_time":"2019-11-25T16:26:58+00:00","article_modified_time":"2020-12-15T02:54:24+00:00","og_image":[{"width":2110,"height":1251,"url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"BrainStation","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/brainstation.io\/blog\/#website","url":"https:\/\/brainstation.io\/blog\/","name":"BrainStation\u00ae Blog","description":"The Digital Learning Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brainstation.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#primaryimage","url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg","contentUrl":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/11\/GettyImages-1169087529-e1574699191562.jpg","width":2110,"height":1251,"caption":"UX Design vs UI Design"},{"@type":"WebPage","@id":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#webpage","url":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design","name":"UX Design vs. UI Design | BrainStation\u00ae Blog","isPartOf":{"@id":"https:\/\/brainstation.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#primaryimage"},"datePublished":"2019-11-25T16:26:58+00:00","dateModified":"2020-12-15T02:54:24+00:00","author":{"@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11"},"description":"UX design and UI design sound similar but are two distinct functions. What are the differences between these fast-rising fields? Here are the basics.","breadcrumb":{"@id":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brainstation.io\/blog\/ux-design-versus-ui-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brainstation.io\/blog"},{"@type":"ListItem","position":2,"name":"UX Design vs. UI Design"}]},{"@type":"Person","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11","name":"BrainStation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","caption":"BrainStation"},"description":"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.","url":"https:\/\/brainstation.io\/blog\/author\/brainstation"}]}},"_links":{"self":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10106"}],"collection":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/comments?post=10106"}],"version-history":[{"count":7,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10106\/revisions"}],"predecessor-version":[{"id":12354,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/10106\/revisions\/12354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media\/10107"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media?parent=10106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/categories?post=10106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/tags?post=10106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}