{"id":4299,"date":"2017-09-14T09:53:36","date_gmt":"2017-09-14T08:53:36","guid":{"rendered":"https:\/\/da-manager.com\/blog\/?p=4299"},"modified":"2022-11-28T16:24:49","modified_gmt":"2022-11-28T15:24:49","slug":"difference-ux-ui-design","status":"publish","type":"post","link":"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/","title":{"rendered":"The Difference Between UX and UI Design"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#Understanding_UX_User_Experience_Design\" >Understanding UX (User Experience) Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#Knowing_the_Responsibilities_of_a_UX_Designer\" >Knowing the Responsibilities of a UX Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#Confusing_UX_Design_with_Market_Research_is_a_Complete_%E2%80%98No-No\" >Confusing UX Design with Market Research is a Complete \u2018No-No\u2019<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#Now_lets_get_to_know_about_User_Interface_Design\" >Now, let\u2019s get to know about User Interface Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#Knowing_the_Responsibilities_of_a_UI_User_Interface_Designer\" >Knowing the Responsibilities of a UI (User Interface) Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#But_let_us_not_forget_the_Similarities_Between_UX_and_UI\" >But let us not forget the Similarities Between UX and UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/da-manager.com\/blog\/difference-ux-ui-design\/#UX_and_UI-_Which_one_is_More_Important\" >UX and UI- Which one is More Important?<\/a><\/li><\/ul><\/nav><\/div>\n<p>How many times have we heard the statement that \u2018web design is dead?\u2019 While catchy, it stems from the fact that the profession that was once referred to as \u2018web design\u2019 nowadays doesn\u2019t consist of a single skill (design) but actually encompasses a number of skills \u2013 so many skills that it is practically impossible and not feasible to employ a single person to do the entire job. Not just this. A web design professional would need to understand the needs of the industry sectors they are working in \u2013 be it the printing industry, a technology firm or the manufacturing sector. Considering the recent influx of technology-oriented companies focusing on creation of great user interfaces for mobile screens, it has become imperative to realize what your role as a \u2018web designer\u2019 entails.<\/p>\n<div class=\"TS4Jpt9M\">In this scenario we no longer find job opportunities for a \u2018web designer\u2019 but rather one would find job profiles requiring the services of a UX or UI designer. Unfortunately (and this is where the problems start), these terms are very often used interchangeably, adding to the confusion of prospective job applicants.<\/div>\n<div><\/div>\n<div class=\"TS4Jpt9M\">Learning the key differences between the terms User Interface (UI) and User Experience (UX) is beneficial in settling down for the right job role. This is exactly what I will be discussing in this article. I will first be discussing UX and UI separately, thus allowing you to grab a better understanding of the two \u2018web design\u2019 terms. Now, get into your learning shoes and read on!<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Understanding_UX_User_Experience_Design\"><\/span>Understanding UX (User Experience) Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>User Experience, abbreviated as UX is the area of web design wherein the professional works on <a title=\"How Difficult Is It to Design User Experience?\" href=\"http:\/\/usabilitygeek.com\/how-difficult-is-it-to-design-user-experience\/\" target=\"_blank\" rel=\"noopener\">enhancing the whole experience<\/a> that a user has with a company, its products or services. Speaking in terms of a website, this essentially means that UX includes aspects such as the website\u2019s content, the systems that support it, its structure, and its design (yes that also means but is not limited to, the User Interface). A good user experience would translates to customer satisfaction and loyalty by taking measures for improving the site\u2019s ease of use, usability and interaction between product and end user.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Knowing_the_Responsibilities_of_a_UX_Designer\"><\/span>Knowing the Responsibilities of a UX Designer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Popular as \u201c<a title=\"Personality in Design\" href=\"http:\/\/alistapart.com\/article\/personality-in-design\" target=\"_blank\" rel=\"noopener\">Designing for Emotion<\/a>\u201d UX (User Experience) is something that cannot be ignored. It isn\u2019t surprising to know that people tend to get emotional about a particular design. Thus, the user experience designer would be concerned with understanding the site\u2019s users (and potential users), creating persona, <a title=\"How Storytelling Makes your Brand a Big Boy\" href=\"http:\/\/usabilitygeek.com\/storytelling-makes-brand-big-boy\/\" target=\"_blank\" rel=\"noopener\">determining user stories<\/a>, <a title=\"When To Prototype, When To Wireframe \u2013 How Much Fidelity Can You Afford?\" href=\"http:\/\/usabilitygeek.com\/when-to-prototype-when-to-wireframe-fidelity\/\" target=\"_blank\" rel=\"noopener\">developing prototypes<\/a> and carrying out <a title=\"An Introduction To Website Usability Testing\" href=\"http:\/\/usabilitygeek.com\/an-introduction-to-website-usability-testing\/\" target=\"_blank\" rel=\"noopener\">user testing<\/a>.<\/p>\n<p>For instance, if you navigate across the product pages of the popular emailing marketing solution company MailChimp, you will find yourself in a whole new world that comprises of step by step guides which will walk you through everything that the company has in store for you. You can find examples and handy tips on improving the forms or forms behaviour after you\u2019ve started using the MailChimp service. With eye-catchy reminders popping up on your monitor, you will never forget anything crucial that needs to be done in order to promote products\/services via email marketing. This is just one example of how a company did not just offer a properly-functioning product with a good user interface, but topped it up with great experiences through the interactions that the user would have with the product and the company behind it.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Confusing_UX_Design_with_Market_Research_is_a_Complete_%E2%80%98No-No\"><\/span>Confusing UX Design with Market Research is a Complete \u2018No-No\u2019<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although as a UX designer you are expected to achieve a specific goal, you should not confuse your job profile with that of a market researcher. The job description of a UX designer basically includes the process of exploring multiple approaches that must be followed for solving a specific problem faced by a majority of targeted users. As a further elaboration, the UX designer needs to ensure that there is a logical flow for the product. One popular method that a UX designer uses for this is conducting face-to-face tests to observe how the users behave for the product that the client is intending to offer via his\/her website. The UX designer refines and iterates both, verbal as well as non-verbal blocks in order to create a truly amazing user experience. Apart from this, the UX designer is also engaged in developing and maintaining mockups, wire frames and specifications that can result into creation of the desired website.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Now_lets_get_to_know_about_User_Interface_Design\"><\/span>Now, let\u2019s get to know about User Interface Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Despite being considered as a \u2018conventional\u2019 web design practice, User Interface design has witnessed numerous misinterpretations. Well, User Interface design basically focuses on improving the overall presentation, look, feel and interactivity of the product. Thus, the term \u2018User Interface\u2019 (abbreviated as UI) refers to the means by which a user and a product (for example a website) interact with one another (but do not confuse it with Human Computer Interaction, with which UI simply overlaps).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Knowing_the_Responsibilities_of_a_UI_User_Interface_Designer\"><\/span>Knowing the Responsibilities of a UI (User Interface) Designer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As a UI designer, your role is primarily related to graphic \/ visual front-end design. Your main attention is on improving the overall feel of the product and the way it is being laid out over the website \/ web application. Talking about the job description, you are mainly involved in designing the pages which will be used by the end user for interacting with the product. In addition to this, you would also be in charge of ensuring that the created UI is competent in visually communicating the path that has been designed to guide the visitors.<\/p>\n<p>Some of the most talked about responsibilities of a UI designer include: UI prototyping, implementation with the developer, design research, branding and graphic development, documentation and user guides. Ultimately, the UI designer produces something tangible that can be tested and shipped. Whether it\u2019s about creation of a cohesive style guide or maintaining complete consistency in different visual elements; a UI designer has to take care of everything that falls under the purview of a website\u2019s user interface.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"But_let_us_not_forget_the_Similarities_Between_UX_and_UI\"><\/span>But let us not forget the Similarities Between UX and UI<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As with this article (so far) it is very easy to get immersed in pinpointing the differences between UX and UI to a point that you forget that UI overlaps with UX. In fact they do share similarities, namely that both UX and UI:<\/p>\n<ul>\n<li>Have a primary objective of improving customer satisfaction<\/li>\n<li>Focus on the user and his\/her interaction with a product\/service<\/li>\n<li>Can be applied to any product<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"UX_and_UI-_Which_one_is_More_Important\"><\/span>UX and UI- Which one is More Important?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s a popular saying by renowned designer and expert <a title=\"The Gap between UI and UX Design \u2013 Know the Difference\" href=\"http:\/\/www.onextrapixel.com\/2014\/04\/24\/the-gap-between-ui-and-ux-design-know-the-difference\/\" target=\"_blank\" rel=\"noopener\">Helga Moreno<\/a>:<\/p>\n<blockquote><p>Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.<\/p><\/blockquote>\n<p>By now it should be clear that both UX and UI are crucial for the success of a product (or a website if we stick to the web design example). While both roles are still misinterpreted and erroneously sought after, if you\u2019re looking into any of the two, your decision should definitely not be based on which one is more important than the other.<\/p>\n<p>When it comes to learning the skills, there are several institutions which offer interactive class-style and boot-camp programs which allow you to understand all the nuts and bolts of UX and UI design. And not to forget, there are also some great, free online resources too. For those who prefer a more academic, structured approach to learning, they can head over to popular online platforms like Udemy, Udacity and Tuts+ for digging deep into designing a website using the concepts of UX (User Experience) and UI (User Interface).<\/p>\n<p>If, on the other hand you would like to know what \u2018making it\u2019 in the field of UX design entails, be sure to read Leah Ryz\u2019 article \u201c<a title=\"From UX-ling To UX Swan \u2013 How To Make It In UX With No Experience\" href=\"http:\/\/usabilitygeek.com\/ux-ling-ux-swan-make-ux-experience\/\" target=\"_blank\" rel=\"noopener\">From UX-ling To UX Swan \u2013 How To Make It In UX With No Experience<\/a>\u201c. Another recommended article is Nadim Farah\u2019s 5-part account of his experience as a UI designer who wanted to transition to a UX designer. <a title=\"UX Diary Part 1 \u2013 On The Front Line\" href=\"http:\/\/usabilitygeek.com\/ux-diary-part-1-front-line\/\" target=\"_blank\" rel=\"noopener\">Part 1 can be found here<\/a>.<\/p>\n<p>Remember that UX is not UI and while the two disciplines share (very few) common traits, they do have very recognizable differences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How many times have we heard the statement that \u2018web design is dead?\u2019 While catchy,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[147],"tags":[201,174,175],"class_list":["post-4299","post","type-post","status-publish","format-standard","has-post-thumbnail","category-general","tag-difference","tag-ui","tag-ux"],"modified_by":null,"_links":{"self":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/4299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/comments?post=4299"}],"version-history":[{"count":0,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/4299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media\/4305"}],"wp:attachment":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media?parent=4299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/categories?post=4299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/tags?post=4299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}