{"id":5897,"date":"2019-01-17T14:43:17","date_gmt":"2019-01-17T11:43:17","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5897"},"modified":"2026-04-09T15:57:12","modified_gmt":"2026-04-09T12:57:12","slug":"ui-vs-ux-intertwine","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/ui-vs-ux-intertwine\/","title":{"rendered":"UI vs UX (and how they intertwine)"},"content":{"rendered":"<p>The differences between UI and UX have been underlined in many articles, however, their interdependence has not been enough put to the forefront. <\/p>\n<p>Long story short:<br \/>\nUI stands for User Interface, and it deals with visual, graphic and front-end design.<br \/>\nUX stands for User Experience, and it deals with the well-running functionalities of a website, and its interactivity with the end user. <\/p>\n<p>Short story long:<\/p>\n<h5>User Interface Design<\/h5>\n<p>UI (User Interface) involves the aesthetic appearance of a website, and how the content elements are presented to users of that website.<br \/>\nAll basic elements that make up website&#8217;s pages fall under the incidence of UI design.<br \/>\nThese are:<\/p>\n<ul>\n<li>Text<\/li>\n<li>Images<\/li>\n<li>Background images<\/li>\n<li>Hero images<\/li>\n<li>Links<\/li>\n<li>Videos<\/li>\n<li>Video thumbnails<\/li>\n<li>Lists<\/li>\n<li>Photo galleries, etc.<\/li>\n<\/ul>\n<p>They are organized so as to form a guided tour for visitors who come and see the pages of a website. Users expect to be taken from a place they land on the website to a new section of a page and a new part of the message, and so on. They&#8217;ll infer the meaning of the overall message by connecting the dots among different parts of the message, spread all throughout the website pages, under the form of text, links, images, and videos. That organization of elements within website pages belongs to user interface design.<br \/>\nIt requires graphic skills, an eye for aesthetics and an ability to combine elements according to pre-existent design guidelines.<br \/>\nThen, where aesthetics meets practical purposes, UX comes in. <\/p>\n<h5>User Experience Design<\/h5>\n<p>As the arrangement of elements in web pages needs to meet practical purposes and users&#8217; expectations, User Interface design is part of UX.<\/p>\n<p>UI is created within a larger frame of User Experience design and best practices.<\/p>\n<p>In addition to basic aesthetics, UX involves research, hence, it approaches to market research through the skills needed to perform such tasks.<br \/>\nSo, the following will be added to the process of building a website, as necessary parts of good design:<\/p>\n<ul>\n<li>Research<\/li>\n<li>Creating <a href=\"https:\/\/colibriwp.com\/blog\/website-mockup-tools-templates\/\" rel=\"noopener\" target=\"_blank\">mockups<\/a> and prototypes<\/li>\n<li>Testing<\/li>\n<li>Improving user interactions with the website<\/li>\n<li>Optimization for better user experience on the website pages<\/li>\n<li>Findability &#8211; testing and optimization, etc.<\/li>\n<\/ul>\n<p>Here are some stats regarding the impact of good UX design on a website (translated in profit figures):<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UIvsUX.png\" alt=\"UI vs UX\" width=\"627\" height=\"252\" class=\"aligncenter size-full wp-image-5901\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UIvsUX.png 627w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UIvsUX-300x121.png 300w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><a href=\"https:\/\/www.impactplus.com\/learning-center\" rel=\"noopener\" target=\"_blank\">Source ><\/a><\/p>\n<p>Improvements can go a long way, including all minor and major aspects of user experience, like in the case below:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UI-vs-UX-mobile.png\" alt=\"UI vs UX mobile\" width=\"1034\" height=\"583\" class=\"aligncenter size-full wp-image-5902\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UI-vs-UX-mobile.png 1034w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UI-vs-UX-mobile-300x169.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UI-vs-UX-mobile-768x433.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/01\/UI-vs-UX-mobile-1024x577.png 1024w\" sizes=\"auto, (max-width: 1034px) 100vw, 1034px\" \/><\/p>\n<p>I.e. For WordPress users, plenty of plugins help create better user interactions with a website. So, there are plugins such as Shortcoder, which generates shortcodes a designer integrates into a website to add functionalities such as contact forms, galleries, videos, etc. Shortcodes are small pieces of code marked by brackets, that perform a certain function on the website.<br \/>\nShortcoder helps you avoid writing code by yourself and prevent creating long lines of code that are both a headache and a non-feasible task for those who are not developers. <\/p>\n<h5>Terms you should be familiar with as a UX designer<\/h5>\n<p>Once you dive into learning UX skills, tips and tricks, you will come across some specific terms you should get familiar with:<\/p>\n<p>Code refactoring:<br \/>\nThe term refers to restructuring code behind a website, without changing its functionalities. It helps to make a cleaner code, reduce the code complexity and improve the code readability. <\/p>\n<p>Minimal viable product:<br \/>\nThis term refers to creating a product (website, in this case), with sufficient features so that it can be welcomed by early adopters. This first version of the website should contain the most valuable features that will make it stand out from the crowd. <\/p>\n<p>Unit testing:<br \/>\nUnit testing refers to the first level of tests that&#8217;ll be run in the process of building a website. It refers to testing individual units (features) of the website and seeing that every item is in place, up and running. <\/p>\n<p>Retrospective UX:<br \/>\nThis is a technique of looking back at one iteration, with the intention to use the findings for optimization of next iterations in User Experience design. <\/p>\n<p>Software development kit:<br \/>\nThis term refers to software or a set of software development tools that UX designers use for building a new website. <\/p>\n<p>A\/B testing:<br \/>\nThis term is akin to the one used for conversion rate optimization in marketing. It refers to testing two different versions of a website in order to see which one provides a more valuable user experience for visitors on that website. <\/p>\n<h5>Skills needed for good UI and UX<\/h5>\n<p>Whether as a <a href=\"https:\/\/www.toptal.com\/designers\/ui#hiring-guide\" rel=\"noopener\" target=\"_blank\">UI or UX designer<\/a>, you should master skills such as:<br \/>\nHTML, CSS, and JavaScript \u2013 these are the basic elements you should start from. Thus, you&#8217;ll be able to code for yourself and make modifications to the front-end design, by changing lines of code in the backend.<br \/>\nDatabases \u2013 these skills teach how relational logic works and can give insights into the design process of building websites the right way.<br \/>\nAlgorithms \u2013 with a conceptual understanding of what algorithms can do, you&#8217;ll increase your chances to become a good UX designer.<\/p>\n<p>To wrap up:<\/p>\n<p>By learning the skills above, you&#8217;ll see clearly the meaning of all terms that are UI and UX design-related. With a solid theoretical understanding of UI and UX design, you&#8217;ll get involved into building more efficient, successful websites that both look good and are welcome by visitors in their experience with the website pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The differences between UI and UX have been underlined in many articles, however, their interdependence has not been enough put to the forefront. Long story short: UI stands for &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":5899,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,1],"tags":[33,32],"class_list":["post-5897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-uncategorized","tag-all-posts","tag-ui-designer"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=5897"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5897\/revisions"}],"predecessor-version":[{"id":15393,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5897\/revisions\/15393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5899"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}