{"id":2778,"date":"2020-04-10T14:21:37","date_gmt":"2020-04-10T14:21:37","guid":{"rendered":"https:\/\/blog.uxdesigninstitute.com\/?p=2778"},"modified":"2025-05-01T12:13:36","modified_gmt":"2025-05-01T12:13:36","slug":"whats-the-difference-between-ui-and-ux-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/whats-the-difference-between-ui-and-ux-design\/","title":{"rendered":"What&#8217;s the difference between UI and UX design?"},"content":{"rendered":"<p>UX and UI are often viewed as a single entity.<\/p>\n<p>While related, they have very different focuses and require different skill sets. To make a truly great product, you need them both.<\/p>\n<p>This article highlights their different functions in the overall UX design process.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2>UX and UI in the design process<\/h2>\n<p>Vitruvius (an ancient Roman engineer, architect and author) can teach us a lot about the relationship between UX and UI.<\/p>\n<p>His book <em>De Architectura<\/em> includes three pillars of good design. He states that built structures should be <em>firmitas<\/em> (<strong>strong<\/strong>), <em>utilitas<\/em> (<strong>functional<\/strong>) and <em>venustas<\/em> (beautiful or <strong>aesthetic<\/strong>). Different roles have emerged from this timeless theory, each with different responsibilities.<\/p>\n<ul>\n<li>An architect is responsible for making sure that a building is <strong>functional<\/strong>.<\/li>\n<li>Interior designers look after the\u00a0<strong>aesthetics<\/strong>\u00a0to make the space even more delightful.<\/li>\n<li>The engineer builds the architect\u2019s vision and makes it structurally <strong>strong<\/strong> and safe.<\/li>\n<\/ul>\n<blockquote><p>Working together, they can deliver a structurally sound, visually pleasing and functional building.<\/p><\/blockquote>\n<p>Vitruvius\u2019 theory can also be applied to website or app design and it can help demonstrate the difference between UX and UI design.<\/p>\n<p>In this video, Colman Walsh (CEO, UX Design Institute) continues the construction analogy to clearly explain the differences between UX and UI design.<\/p>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"What&#039;s the difference between UX &amp; UI design?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/05d1EpN-PV0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h2>What is UX design?<\/h2>\n<p>The UX designer, like the architect, makes sure a website or app is <strong>functional<\/strong>.<\/p>\n<blockquote><p>UX is a research-based discipline, aiming to understand users, solve their problems and give them a positive product experience.<\/p><\/blockquote>\n<p>UX design is not just about creating products that work, it&#8217;s also about making people feel good when they use those products. In services like the music streaming platform Spotify, the UX designer relies heavily on user research to improve its current features and trial\u00a0new ones.<\/p>\n<p>An architect&#8217;s designs are also heavily influenced by their clients needs. Whether they\u2019re designing a university or a family home, an architect will need to consider the following:<\/p>\n<ul>\n<li>What are we building?<\/li>\n<li>Why are we building it?<\/li>\n<li>Who are we building it for?<\/li>\n<li>What\u2019s it going to look like when it\u2019s finished?<\/li>\n<\/ul>\n<p>Some architects may also take on interior design responsibilities or they might work directly with interior designers.<\/p>\n<p>Similarly, UX designers may also have visual design (UI) responsibilities, but this work is generally allocated to a UI designer.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2>What is UI design?<\/h2>\n<p>The UI designer is like the interior designer. They enhance a website or app\u2019s <strong>aesthetic<\/strong> or visual appearance.<\/p>\n<blockquote><p>UI (user interface) is concerned with defining the aesthetics, and bringing the product\u2019s personality to life. It\u2019s considered to be a specialism within UX design, just like user research or content design.<\/p><\/blockquote>\n<p>Since it\u2019s a specialism, UI or visual designers should have an understanding of the UX design process. They take the UX designer&#8217;s prototypes and wireframes and turn them into an easy to use interface. They encourage users to take action through considered design decisions.<\/p>\n<p>Aside from making the product look visually appealing, they must be able to design within brand guidelines, building brand recognition and inspiring brand affinity.<\/p>\n<p>UI designers are also involved in making sure the user interface is accessible.<\/p>\n<p>Think of an interior designer who\u2019s working with an architect on a new luxury hotel. While the hotel needs to meet the desired aesthetic, they also need to ensure that the hotel\u2019s facilities are accessible for everyone. Design considerations like ample space for wheelchair users and prams, lower sinks in bathroom facilities, good lighting and electric doors permit more people to enjoy it.<\/p>\n<p>Spotify\u2019s UI achieves this balance between aesthetics and accessibility. While it\u2019s visually pleasing, it includes inclusive design features like big buttons and high colour contrasts so that people with visual impairments can use it too.<\/p>\n<p>After the user interface is designed, it will be handed over to software developers to build.<\/p>\n<p>It\u2019s sometimes assumed that UX and UI involve coding, but the software developer is responsible for this. Just like the engineer on a building site, the software developer makes sure the product is resilient and secure (<strong>strong<\/strong>) for people to use.<\/p>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"What does a UI Designer do?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/mvB7ZZsiFvw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h2>Moving from UX design to UI design<\/h2>\n<p>While UX and UI designers have different focuses, they should have a shared understanding of their users to deliver a product experience that\u2019s robust, delightful and functional.<\/p>\n<p>Vitruvius\u2019 pillar of beauty is one of the most challenging pillars to satisfy. Notions of beautiful and delightful design are subjective and change with time.<\/p>\n<p>UI\u2019s place within the entire UX design process shouldn\u2019t be undervalued. UI designers also face the challenge of designing for users first and aesthetics second. Their skills are essential for building an outstanding product.<\/p>\n<blockquote><p>UX professionals who feel they can use their strong design sensibilities to help users can find a very rewarding career in UI.<\/p><\/blockquote>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4837 size-large\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-1024x513.png\" alt=\"do ux designers need ui skills\" width=\"1024\" height=\"513\" title=\"\" srcset=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-1024x513.png 1024w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-300x150.png 300w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-768x385.png 768w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-1600x801.png 1600w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-1000x501.png 1000w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-800x401.png 800w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-600x301.png 600w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2020\/04\/Do-UX-designers-need-UI-skills-400x200.png 400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><br \/>\n<a href=\"https:\/\/www.linkedin.com\/feed\/update\/urn:li:activity:6721805484430557184\" target=\"_blank\" rel=\"noopener\"><em>Here&#8217;s what our community thinks<\/em><\/a><\/p>\n<h3>Do you want to upskill in UI design?<\/h3>\n<p>We help UX designers to build their skills in visual design. <a href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design\">Learn more<\/a> about our Professional Certificate in Visual and UI Design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX and UI are often viewed as a single entity. While related, they have very different focuses and require different skill sets. To make a truly great product, you need them both. This article highlights their different functions in the overall UX design process. UX and UI in the design process Vitruvius (an ancient Roman [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":5702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[279],"tags":[287,300,296],"class_list":["post-2778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-explained","tag-new-to-ux","tag-ui-design","tag-what-is-ux"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/2778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=2778"}],"version-history":[{"count":60,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions"}],"predecessor-version":[{"id":12008,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions\/12008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/5702"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=2778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=2778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=2778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}