{"id":77722,"date":"2021-09-30T10:49:44","date_gmt":"2021-09-30T10:49:44","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=77722"},"modified":"2025-12-28T15:31:26","modified_gmt":"2025-12-28T13:31:26","slug":"ux-vs-ui","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/ux-vs-ui\/","title":{"rendered":"UX vs. UI Design: What\u2019s the Difference?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"77722\" class=\"elementor elementor-77722\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-beb60ae elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"beb60ae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-78e26d7\" data-id=\"78e26d7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6934ff5 elementor-widget elementor-widget-text-editor\" data-id=\"6934ff5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX vs. UI design. Where do I start?\u00a0<\/p><p>Well, for starters, you can\u2019t build a website without either. The feel of the user experience is just as important as the look of the user interface.\u00a0<\/p><p>So, really, all of us that work as web designers use both UI design and UX design when creating websites. That said, if we\u2019re talking about the <em>formal<\/em> disciplines of UI and UX, that\u2019s a different beast altogether. And, if you\u2019re here, you might be wondering if one of these careers is right for you.\u00a0<\/p><p>As for choosing which one to go into, there\u2019s no easy answer for that. Anyone who\u2019s considering becoming a web designer needs to figure that out for themselves. So that\u2019s what the following guide is for.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-768a835 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"768a835\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d5df62\" data-id=\"7d5df62\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f7f3903 read-more-link elementor-widget elementor-widget-heading\" data-id=\"f7f3903\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/website-usability-testing\/\">How To Avoid UX Pitfalls and Boost Conversions<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b9fd0f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b9fd0f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c70b75d\" data-id=\"c70b75d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-851abcc blog-toc elementor-widget elementor-widget-heading\" data-id=\"851abcc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cf1f97 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"5cf1f97\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#ux-vs-ui\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">UI vs. UX Design: What\u2019s the Difference?\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-does-a-ux-designer-do\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Does a UX Designer Do?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-does-a-ui-designer-do\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Does a UI Designer Do?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-do-ux-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How Do UX Design and UI Design Work Together?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-get-started\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Get Started As a UI or UX Designer<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#which-career-path\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Which Career Path Should You Choose?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c87b216 elementor-widget elementor-widget-menu-anchor\" data-id=\"c87b216\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"ux-vs-ui\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6369edd elementor-widget elementor-widget-heading\" data-id=\"6369edd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">UX vs. UI Design: What\u2019s the Difference?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-425e76b elementor-widget elementor-widget-text-editor\" data-id=\"425e76b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s start with the basic differences between the two design principles:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-632d6c8 elementor-widget elementor-widget-heading\" data-id=\"632d6c8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What Is User Experience (UX) Design?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cf8285 elementor-widget elementor-widget-text-editor\" data-id=\"0cf8285\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>User experience design is concerned with how well a website works:\u00a0<\/p><ul><li>How do users feel about the website?\u00a0<\/li><li>How seamless is the users&#8217; flow throughout the site?<\/li><li>How easy is it for users to accomplish their goals?<\/li><\/ul><p>UX design is a human-first approach to web design. Because of this, UX designers depend heavily on research and testing in order to find out what their audience needs, what they value and what pains them \u2014 and then to design an ideal solution around it.\u00a0<\/p><p>The end goal is to create a website that the user finds to be usable, useful and valuable.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76597e3 elementor-widget elementor-widget-heading\" data-id=\"76597e3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What Is User Interface (UI) Design?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49d4226 elementor-widget elementor-widget-text-editor\" data-id=\"49d4226\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>User interface design is concerned with the aesthetics of the website:\u00a0<\/p><ul><li>Do users find it attractive?\u00a0<\/li><li>Are the interactive elements intuitive?<\/li><li>Does the design feel natural and provoke a positive response?<\/li><\/ul><p>UI design is the visual side of web design. It\u2019s the UI designer\u2019s job to perfect the tiniest of details on a website: color palettes, font pairings, images, forms, menus, hover-triggered animations, buttons, and more.\u00a0<\/p><p>UI designers rely on design research and trends, industry analysis, and web design principles in order to create an interface and interactions that users are comfortable and confident with using.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22860a4 elementor-widget elementor-widget-menu-anchor\" data-id=\"22860a4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-does-a-ux-designer-do\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de8563c elementor-widget elementor-widget-heading\" data-id=\"de8563c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Does a UX Designer Do?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d3501b elementor-widget elementor-widget-text-editor\" data-id=\"4d3501b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you want to build a website that attracts the right kinds of visitors and gets them to do what you want them to, then it has to be built specifically for them.\u00a0<\/p><p>Obviously, the brand\u2019s objectives need to be met as well. However, those goals won\u2019t ever be reached if the website is incapable of converting visitors. This is why UX designers are an invaluable part of the web design process.\u00a0<\/p><p>They improve a brand\u2019s chances for success by designing from the perspective of the user.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00358f2 elementor-widget elementor-widget-heading\" data-id=\"00358f2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Goals<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f35320 elementor-widget elementor-widget-text-editor\" data-id=\"4f35320\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX designers have a two-pronged goal:\u00a0<\/p><ul><li>Design friction-free, user-first website experiences<\/li><li>Help their clients achieve their business objectives through the website<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4205eec elementor-widget elementor-widget-heading\" data-id=\"4205eec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Key Responsibilities\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47baa98 elementor-widget elementor-widget-text-editor\" data-id=\"47baa98\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It might be more accurate to refer to UX designers as UX <em>specialists<\/em>. While they have a hand in designing wireframes and low-fidelity prototypes for a website, the majority of what they do involves research, testing, and validation.\u00a0<\/p><p>Let\u2019s take a look at their responsibilities:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-444fa1f elementor-widget elementor-widget-heading\" data-id=\"444fa1f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Research<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bcdb63 elementor-widget elementor-widget-text-editor\" data-id=\"1bcdb63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are a number of ways UX designers will go about collecting data in order to form working hypotheses for the website.\u00a0<\/p><p><strong>Competitor analysis<\/strong> is one part of it and is especially useful if you\u2019re building a website for a new brand with little to no customer data to draw from.\u00a0<\/p><p><strong>Industry statistics<\/strong> is another useful metric in the research phase. UX designers use this data to learn more about the audience, identify industry trends, and more.\u00a0<\/p><p>Depending on the size of the website, some UX designers will also conduct <strong>field research<\/strong>. Through user surveys and interviews, designers will learn first-hand about who the target users are, their pains, and their motivations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9686e39 elementor-widget elementor-widget-heading\" data-id=\"9686e39\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">User Personas\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76e3a3f elementor-widget elementor-widget-text-editor\" data-id=\"76e3a3f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A user persona is a fictional user that UX researchers come up with. They take what they\u2019ve learned about their client\u2019s target audience and they use those characteristics to build out a user persona (or personas, if they have numerous user segments).<\/p><p>Here\u2019s an example from <a href=\"https:\/\/personagenerator.com\/\" target=\"_blank\" rel=\"noopener\">PersonaGenerator<\/a> of what a user persona might look like:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1119bde elementor-widget elementor-widget-image\" data-id=\"1119bde\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/09\/1-personagenerator-template.png\" class=\"attachment-large size-large wp-image-77755\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/09\/1-personagenerator-template.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/1-personagenerator-template-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e75dc1 elementor-widget elementor-widget-text-editor\" data-id=\"6e75dc1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>All kinds of details need to be sorted out. For example:\u00a0<\/p><ul><li>Demographics<\/li><li>Needs (with relation to the website being built)<\/li><li>Wants<\/li><li>Values<\/li><li>Fears<\/li><li>Tech profile<\/li><li>Quotes that summarize how they feel and what they sound like<\/li><\/ul><p>The purpose is to create a realistic representation of the user so the designer can more effectively market and sell to them.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3150ce9 elementor-widget elementor-widget-heading\" data-id=\"3150ce9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Information Architecture\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-945ec19 elementor-widget elementor-widget-text-editor\" data-id=\"945ec19\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX designers take a carefully measured and incremental approach to designing a website. So, once the research is complete, the information architecture will get planned out.\u00a0<\/p><p>While you could simply write this off as site map planning, it\u2019s much more than that.\u00a0<\/p><p>UX designers use something called card sorting to come up with the ideal structure, workflows and content organization for the website. This part of UX design requires direct input from users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e19b50 elementor-widget elementor-widget-heading\" data-id=\"4e19b50\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Wireframes<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9390116 elementor-widget elementor-widget-text-editor\" data-id=\"9390116\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Wireframes are low-fidelity prototypes of a website. They allow UX designers to perfect the website\u2019s structure, layout and user flows without getting caught up in the details.\u00a0<\/p><p>Here\u2019s an example of what a wireframe vs. a mockup looks like:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3efaa1 elementor-widget elementor-widget-image\" data-id=\"f3efaa1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"750\" height=\"480\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=750,h=480\/blog\/wp-content\/uploads\/2020\/06\/low-fidelity-vs-high-fidelity-wireframes-just-in-mind.png\" class=\"attachment-large size-large wp-image-39716\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=750\/blog\/wp-content\/uploads\/2020\/06\/low-fidelity-vs-high-fidelity-wireframes-just-in-mind.png 750w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/06\/low-fidelity-vs-high-fidelity-wireframes-just-in-mind-300x192.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3fdd661 elementor-widget elementor-widget-text-editor\" data-id=\"3fdd661\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Wireframes are typically just skin-and-bones. In other words, you see the layout as well as the placeholders for where images, copy and other elements go on the page. And that\u2019s it. By sketching out the foundation of the page, it\u2019s much easier to focus on making strategic and creative design choices in the mockup phase.<\/p><p>Wireframes can be sketched by hand, done using wireframing software or you can <a href=\"https:\/\/elementor.com\/blog\/wireframe-website\/\" target=\"_blank\" rel=\"noopener\">build your wireframes right within Elementor<\/a>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb0557 elementor-widget elementor-widget-heading\" data-id=\"dbb0557\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Analysis, Usability Testing and Iteration\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-451a970 elementor-widget elementor-widget-text-editor\" data-id=\"451a970\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX designers work in a closed-loop. So they don\u2019t just come up with hypotheses about what will work on the website. They actually put them to the test.\u00a0<\/p><p>There are a variety of ways in which UX designers conduct <a href=\"https:\/\/elementor.com\/blog\/website-usability-testing\/\" target=\"_blank\" rel=\"noopener\">usability testing<\/a>:\u00a0<\/p><ul><li>Face-to-face interviews<\/li><li>Surveys<\/li><li>Website feedback forms<\/li><li>Heatmaps<\/li><li>Session recordings<\/li><\/ul><p>As they gather real user feedback and study the live website\u2019s analytics, they adjust the website accordingly. UX design is an iterative process \u2014 one that aims to always improve the user experience and to help the brand exceed its goals over time.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79b61c4 elementor-widget elementor-widget-heading\" data-id=\"79b61c4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">UX Design Tools\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb396cd elementor-widget elementor-widget-text-editor\" data-id=\"eb396cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here are some of the common tools a UX designer will use:\u00a0<\/p><ul><li>Competitive research tools like <a href=\"https:\/\/www.semrush.com\" target=\"_blank\" rel=\"noopener\">SEMrush<\/a><\/li><li>Industry research tools like <a href=\"https:\/\/www.similarweb.com\/\" target=\"_blank\" rel=\"noopener\">SimilarWeb<\/a><\/li><li>User research and tester recruitment tools like <a href=\"https:\/\/www.userinterviews.com\/\" target=\"_blank\" rel=\"noopener\">User Interviews<\/a><\/li><li>Wireframing and prototyping tools like <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a><\/li><li>Website testing tools like <a href=\"https:\/\/www.hotjar.com\/\" target=\"_blank\" rel=\"noopener\">Hotjar<\/a><\/li><li>Usability testing tools like <a href=\"https:\/\/www.userzoom.com\/\" target=\"_blank\" rel=\"noopener\">UserZoom<\/a><\/li><li>Website analysis tools like <a href=\"https:\/\/www.kissmetrics.io\/\" target=\"_blank\" rel=\"noopener\">Kissmetrics<\/a><\/li><\/ul><p>As you can imagine with such a lengthy and intensive process, UX designers can\u2019t do this all on their own. Or at least it wouldn\u2019t be efficient to do so. Having a UX toolkit can be a real game-changer in this line of work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45b752d elementor-widget elementor-widget-menu-anchor\" data-id=\"45b752d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-does-a-ui-designer-do\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d1dd19 elementor-widget elementor-widget-heading\" data-id=\"5d1dd19\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Does a UI Designer Do?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e35ef1f elementor-widget elementor-widget-text-editor\" data-id=\"e35ef1f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There\u2019s no doubt that the usability and helpfulness of a website are important for your users. But it\u2019s not just the experience of navigating around or using a website that has an impact on the site\u2019s conversion and abandonment rates.\u00a0<\/p><p>The way it looks also figures in.\u00a0<\/p><p>This is proven by a web design principle called the <a href=\"https:\/\/www.nngroup.com\/articles\/aesthetic-usability-effect\/\" target=\"_blank\" rel=\"noopener\">Aesthetic-Usability Effect<\/a>. Basically, users believe that attractive interfaces work better than those that don\u2019t.\u00a0<\/p><p>So, UI design plays an important role in solidifying that first impression <em>and<\/em> getting users into the actual experience the UX designer worked so tirelessly to create.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b74be65 elementor-widget elementor-widget-heading\" data-id=\"b74be65\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Goals<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1c1b70 elementor-widget elementor-widget-text-editor\" data-id=\"d1c1b70\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI designers have a number of goals:\u00a0<\/p><ul><li>Create interfaces that accurately capture the brand\u2019s personality, voice, and values<\/li><li>Create aesthetically pleasing interfaces that elicit a positive response from the user<\/li><li>Design interfaces and interactions that maximize conversions<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d33c05c elementor-widget elementor-widget-heading\" data-id=\"d33c05c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Key Responsibilities\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-baf00d8 elementor-widget elementor-widget-text-editor\" data-id=\"baf00d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI designers are focused on what the visitor sees on a website \u2014 down to the tiniest of details. They\u2019re also responsible for designing the interactions that keep them engaged with the content and effortlessly flowing from page to page.\u00a0<\/p><p>Let\u2019s take a look at their responsibilities:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f3dab1 elementor-widget elementor-widget-heading\" data-id=\"9f3dab1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Research<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81cacd4 elementor-widget elementor-widget-text-editor\" data-id=\"81cacd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI designers begin with a robust round of research. While some of it involves user analysis (if the client has an existing website, that is), there\u2019s other research involved.\u00a0<\/p><p>UI designers conduct <strong>competitive research<\/strong> to find out what leading companies in the space are doing with their websites as well as to see what they look like and how they work.\u00a0<\/p><p>They also do <strong>design research<\/strong>. While originality and memorability are important in UI design, so too is the users\u2019 confidence with the interface. And straying too far from the norms can be hugely problematic for many websites.\u00a0<\/p><p>A lot of this they\u2019ll know off the top of their heads, like what the <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">latest trends in web design<\/a> are and what current web standards dictate for things like responsive design, accessibility, and coding standards. But they may also need to brush up on what\u2019s trending within their industry or niche.<\/p><p>Psychology also factors heavily in UI design, so UI designers will need to brush up on <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\">the principles of website design<\/a> as well as <strong>user psychology<\/strong> to ensure their designs push the right emotional buttons.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a852f73 elementor-widget elementor-widget-heading\" data-id=\"a852f73\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Brand Identity\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d663eea elementor-widget elementor-widget-text-editor\" data-id=\"d663eea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Brand identity development isn\u2019t just about <a href=\"https:\/\/elementor.com\/blog\/how-to-design-logo\/\" target=\"_blank\" rel=\"noopener\">logo design<\/a>, though UI designers may also need to help clients with this, too.\u00a0<\/p><p>The process of developing a brand\u2019s visual identity is all about strategizing how a website\u2019s branding will look and ensuring that it sends the right signals to its target audience.\u00a0<\/p><p>So, UI designers will first need to figure out what the brand\u2019s personality and visual style are. They\u2019ll then sort out the <a href=\"https:\/\/elementor.com\/blog\/brand-imagery\/\" target=\"_blank\" rel=\"noopener\">brand imagery<\/a> that goes along with them: elements like the color palette, typography, imagery, iconography, patterns, and more.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57ef8ce elementor-widget elementor-widget-heading\" data-id=\"57ef8ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Style Guides\/Design Systems\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40c8ce2 elementor-widget elementor-widget-text-editor\" data-id=\"40c8ce2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once the visual identity has been sorted out, UI designers create a <a href=\"https:\/\/elementor.com\/blog\/style-guide-examples\/\" target=\"_blank\" rel=\"noopener\">style guide<\/a> and\/or <a href=\"https:\/\/elementor.com\/blog\/design-system\/\" target=\"_blank\" rel=\"noopener\">design system<\/a> to document the strategy.\u00a0<\/p><p>A style guide is a must regardless of what type of website you build. A design system, on the other hand, is best for larger websites and ones that require ongoing maintenance and updates.\u00a0<\/p><p>It doesn\u2019t matter if you\u2019re working as a solo UX\/UI designer. A style guide is useful for a number of reasons:\u00a0<\/p><ul><li>It\u2019s a documented plan of attack that\u2019ll help you stay on track with the website you\u2019re building\u00a0<\/li><li>It can be shared with other contributors to ensure that they\u2019re consistent with the styles you\u2019ve established<\/li><li>It\u2019ll make future website updates or redesigns go more smoothly as you won\u2019t have to recreate the wheel<\/li><\/ul><p>Here\u2019s an example of what a style guide looks like:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74bb4a6 elementor-widget elementor-widget-image\" data-id=\"74bb4a6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=451\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide-1024x577.png\" class=\"attachment-large size-large wp-image-45431\" alt=\"spotify-style-guide\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide-1024x577.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide-1536x865.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1918\/blog\/wp-content\/uploads\/2020\/12\/spotify-style-guide.png 1918w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Spotify's style guide<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-491f271 elementor-widget elementor-widget-text-editor\" data-id=\"491f271\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A design system will take things further. Within your design system, a UI designer will define all those styles, but they\u2019ll also save their components to a library \u2014 again, which cuts down on future design\/re-design time. Design systems also summarize the project\u2019s goals, the brand\u2019s values, and how the website will carry them out.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-243c1505 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"243c1505\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37a6b1b1\" data-id=\"37a6b1b1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2984c111 elementor-align-center elementor-widget__width-auto elementor-widget elementor-widget-button\" data-id=\"2984c111\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/web-design-style-guide\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-download\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Your Free Style Guide Template Here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-74ceab0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"74ceab0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-906b1e7\" data-id=\"906b1e7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7252132 elementor-widget elementor-widget-heading\" data-id=\"7252132\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Mockups<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30023fa elementor-widget elementor-widget-text-editor\" data-id=\"30023fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The UI designer will take all of their research and planning and combine it with the groundwork the UX designer laid down.\u00a0<\/p><p>The website mockups will be full-scale, full-color, and complete depictions of what each web page will look like in the finished product.\u00a0<\/p><p>UI designers aren&#8217;t just filling in the visual details though. They also need to deal with things like:\u00a0<\/p><ul><li><a href=\"https:\/\/elementor.com\/blog\/white-space-web-design\/\" target=\"_blank\" rel=\"noopener\"><strong>White space<\/strong><\/a> and how they&#8217;re going to use it to improve usability and legibility<\/li><li><a href=\"https:\/\/elementor.com\/blog\/website-layout-design\/\" target=\"_blank\" rel=\"noopener\"><strong>Hierarchy<\/strong><\/a> so they can create obvious areas of focus while effectively guiding visitors through the content<\/li><li><a href=\"https:\/\/elementor.com\/blog\/responsive-web-design-challenges\/\" target=\"_blank\" rel=\"noopener\"><strong>Responsive design<\/strong><\/a> and how the web pages will look across devices and browsers<\/li><li><a href=\"https:\/\/elementor.com\/blog\/introducing-motion-effects\/\" target=\"_blank\" rel=\"noopener\"><strong>Interactions and animations<\/strong><\/a> at critical areas of each web page<\/li><li><a href=\"https:\/\/elementor.com\/blog\/web-accessibility-design-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>Accessibility<\/strong><\/a> so that every visitor can view and access the content without issue<\/li><\/ul><p>UI designers have a choice as to how they design these mockups.\u00a0<\/p><p>They can build them out using design or mockup software the way UX designers do with wireframes. Or they can design their mockups directly in Elementor, which will be easy to do if the wireframes are already in there. It&#8217;ll also make development go more smoothly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34a4b6e elementor-widget elementor-widget-heading\" data-id=\"34a4b6e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">A\/B Testing\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41c6e08 elementor-widget elementor-widget-text-editor\" data-id=\"41c6e08\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Just as a UX designer\u2019s work is never done, the same holds true for UI designers.\u00a0<\/p><p>Once the website goes live, UI designers need to keep an eye on the website\u2019s traffic analytics to see if there\u2019s potential friction holding visitors back from converting. They can also collaborate with UX designers to run heatmaps and session recordings on the site to see if they can spot UI stumbling blocks in real time.\u00a0<\/p><p>But rather than implement a permanent fix based on these observations. A UI designer will form a hypothesis about the issue \u2014 like \u201cthe CTA button is too far down the page\u201d \u2014 and then run an A (control) and B (variable) test to see if an alternate design performs better.\u00a0<\/p><p>Realistically, the UI designer could <a href=\"https:\/\/elementor.com\/blog\/a-b-testing\/\" target=\"_blank\" rel=\"noopener\">run A\/B tests<\/a> over the entire life of a website. They\u2019re not just useful for ironing out visual design issues but also for improving the overall look and feel of the website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd94d19 elementor-widget elementor-widget-heading\" data-id=\"bd94d19\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">UI Design Tools\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a34184b elementor-widget elementor-widget-text-editor\" data-id=\"a34184b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here are some of the common tools a UI designer will use:\u00a0<\/p><ul><li>Web design organization resources like the <a href=\"https:\/\/www.nngroup.com\/articles\/\" target=\"_blank\" rel=\"noopener\">Nielsen Norman Group blog<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/standards\/webdesign\/\" target=\"_blank\" rel=\"noopener\">World Wide Web Consortium<\/a> for the latest web standards, tech, and trends<\/li><li>Brand guideline development tools like <a href=\"https:\/\/www.frontify.com\/\" target=\"_blank\" rel=\"noopener\">Frontify<\/a><\/li><li>UI kits like the ones found on <a href=\"https:\/\/ui8.net\/\" target=\"_blank\" rel=\"noopener\">UI8<\/a><\/li><li>Mockup templates like the ones in the <a href=\"https:\/\/elementor.com\/library\/\" target=\"_blank\" rel=\"noopener\">Elementor template library<\/a><\/li><li>Design software like <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a><\/li><li>A content management system like <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a><\/li><li>Analytics tools like <a href=\"https:\/\/analytics.google.com\/analytics\/web\/\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a><\/li><\/ul><p>UI designers are hands-on when it comes to design, so the majority of their toolbox needs to consist of design tools they know well and trust.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c77249 elementor-widget elementor-widget-menu-anchor\" data-id=\"7c77249\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-do-ux-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1e161f elementor-widget elementor-widget-heading\" data-id=\"f1e161f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How Do UX Design and UI Design Work Together?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74b14bb elementor-widget elementor-widget-text-editor\" data-id=\"74b14bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Looking at the differences between UI and UX, you might think that there isn&#8217;t much overlap between the two roles. But there are.\u00a0<\/p><p>UX designers can&#8217;t just work in isolation and then hand off their sitemaps and wireframes to the UI designer or developer when they&#8217;re done. Or vice versa.\u00a0<\/p><p>Even if each role \u2014 UX designer, UI designer, and even <a href=\"https:\/\/elementor.com\/blog\/web-designer-vs-web-developer\/\" target=\"_blank\" rel=\"noopener\">the web developer<\/a> \u2014 work on different things and at different stages of the project, there needs to be collaboration throughout.\u00a0<\/p><p>For starters, <strong>this ensures consistency<\/strong> in how the website is designed, the content is written, and ultimately how it&#8217;s all executed in the end.\u00a0<\/p><p>There&#8217;s also the matter of <strong>information gathering<\/strong>. What the UX designer learns about the users, competition and industry shouldn&#8217;t remain a trade secret. The same goes for what the UI designer understands about web design trends and standards. Or, for that matter, what the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-does-a-web-developer-do\/\"   title=\"web developer\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4222\">web developer<\/a> knows about coding capabilities.\u00a0<\/p><p>What one designer has in mind for the website, might not align with tried-and-true web design principles or the developer may not be able to flawlessly execute what they envisioned. Close collaboration will ensure that things never have to get sent back to the drawing board.<\/p><p>You also have to <strong>consider the handoff<\/strong>.\u00a0<\/p><p>Usually, the UX designer hands off their research and work to the UI designer and web developer. And the UI designer hands off their mockups to the web developer. All three of these pros work in different tools and use a different design \u201clanguage\u201d.\u00a0<\/p><p>Without close collaboration, good communication, and a solid handoff system, things could get rocky as the website changes hands.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f34c2f9 elementor-widget elementor-widget-menu-anchor\" data-id=\"f34c2f9\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-get-started\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1fc82b elementor-widget elementor-widget-heading\" data-id=\"d1fc82b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Get Started As a UI or UX Designer\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2542360 elementor-widget elementor-widget-text-editor\" data-id=\"2542360\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here\u2019s what you need to know to get started as a UI vs. UX designer:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41e9756 elementor-widget elementor-widget-heading\" data-id=\"41e9756\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Skills <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5180a66 elementor-widget elementor-widget-text-editor\" data-id=\"5180a66\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There\u2019s going to be some overlap between UI and UX designers when it comes to soft skills. Things like:<\/p><ul><li>Creativity<\/li><li>Organization<\/li><li>Collaboration<\/li><li>Problem-solving<\/li><li>Adaptability\u00a0<\/li><\/ul><p>However, because of the different tasks they do and the goals they work towards, UI and UX designers will mostly need to have different skill sets.\u00a0<\/p><table><tbody><tr><td><p><b>UX Designers<\/b><\/p><\/td><td><p><b>UI Designers<\/b><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Critical thinking<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Creative thinking<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">User, industry and competitive research<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Web design principles and standards<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Project coordination<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Human psychology<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Analysis<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Visual design<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Strategy and planning<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Responsive design<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Wireframing<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Branding<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Information architecture<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">Interaction design<\/span><\/p><\/td><\/tr><tr><td><p><span style=\"font-weight: 400\">Testing and iteration<\/span><\/p><\/td><td><p><span style=\"font-weight: 400\">HTML5 and CSS3<\/span><\/p><\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f925fe9 elementor-widget elementor-widget-heading\" data-id=\"f925fe9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Education<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19cd6b7 elementor-widget elementor-widget-text-editor\" data-id=\"19cd6b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A formal education in design is not required in order to become a UX designer or a UI designer. That said, because these are highly specialized niches of web design and you\u2019re likely going to get paid more money than someone who brands themselves as a \u201cweb designer\u201d, it\u2019s a good idea to get certified.\u00a0<\/p><p>The good news is that there are tons of online resources where you can do your certified (and non-certified) UX or UI training:\u00a0<\/p><p><a href=\"https:\/\/www.interaction-design.org\/courses\" target=\"_blank\" rel=\"noopener\">Interaction Design Foundation<\/a> is a good resource to start with. We can also recommend this list of the\u00a0<a class=\"c-link\" href=\"https:\/\/blog.uxtweak.com\/best-ux-resources\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/blog.uxtweak.com\/best-ux-resources\/\" data-sk=\"tooltip_parent\" data-remove-tab-index=\"true\">Best UX resources<\/a>\u00a0to learn more about the topic.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-583d937 elementor-widget elementor-widget-image\" data-id=\"583d937\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/09\/4-interaction-design-foundation-courses.png\" class=\"attachment-large size-large wp-image-77756\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/09\/4-interaction-design-foundation-courses.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/4-interaction-design-foundation-courses-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f33261 elementor-widget elementor-widget-text-editor\" data-id=\"4f33261\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although they brand their courses as \u201cUser Experience Courses\u201d, they cover a wide range of topics. Gestalt psychology and interaction design, for instance, are good choices for UI designers in training.<\/p><p><a href=\"https:\/\/www.coursera.org\/specializations\/ui-ux-design\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> is another great training resource. Unlike IDF, you can take courses and get certified by a bunch of different providers. Like Google:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11946c0 elementor-widget elementor-widget-image\" data-id=\"11946c0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/09\/5-coursera-google-uxdesign-course.png\" class=\"attachment-large size-large wp-image-77757\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/09\/5-coursera-google-uxdesign-course.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/5-coursera-google-uxdesign-course-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a71511 elementor-widget elementor-widget-text-editor\" data-id=\"4a71511\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.nngroup.com\/ux-certification\/\" target=\"_blank\" rel=\"noopener\">Nielsen Norman Group<\/a> and <a href=\"https:\/\/www.springboard.com\/courses\/ux-career-track\/\" target=\"_blank\" rel=\"noopener\">Springboard<\/a> also offer UX design certification programs. And <a href=\"https:\/\/careerfoundry.com\/en\/courses\/become-a-ui-designer\/\" target=\"_blank\" rel=\"noopener\">CareerFoundry<\/a> and <a href=\"https:\/\/generalassemb.ly\/education\/visual-design-remote-online\" target=\"_blank\" rel=\"noopener\">General Assembly<\/a> both offer UI design certification programs.\u00a0<\/p><p>Not only will you walk away from these programs with a certificate in hand, but you\u2019ll also have hands-on training plus some amazing examples to fill your professional portfolio with. It won\u2019t be long before you start to <a href=\"https:\/\/elementor.com\/blog\/get-web-design-clients\/\">get web design clients<\/a> begging to work with you.\u00a0<\/p><p>Just remember to keep up on your design education \u2014 both within your specialty as well as beyond it. <a href=\"https:\/\/elementor.com\/blog\/best-web-design-books\/\" target=\"_blank\" rel=\"noopener\">Web design books<\/a> and <a href=\"https:\/\/elementor.com\/blog\/best-online-web-design-courses\/\" target=\"_blank\" rel=\"noopener\">online courses<\/a> (free and paid) will help you keep your skills fresh and competitive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6d8551 elementor-widget elementor-widget-heading\" data-id=\"d6d8551\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Jobs Outlook\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e08e12e elementor-widget elementor-widget-text-editor\" data-id=\"e08e12e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI and UX designers are in top demand.\u00a0<\/p><p>According to <a href=\"https:\/\/www.invisionapp.com\/hiring-report\" target=\"_blank\" rel=\"noopener\">InVision\u2019s 2019 Product Design Hiring Report<\/a>:<\/p><p>\u201cThere\u2019s no doubt about it: product designers are hotter than ever right now, with UI\/UX designer rated as the most in-demand product design title. In fact, four in five (81%) product designers are contacted by recruiters on at least a monthly basis, while one in three (34%) are contacted by recruiters weekly.\u201d<\/p><p>The report also reveals that these are the most in-demand jobs in the UI and UX fields. Focus on the \u201cProduct Designers\u201d column:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b467251 elementor-widget elementor-widget-image\" data-id=\"b467251\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"569\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=569\/blog\/wp-content\/uploads\/2021\/09\/6-ui-vs-ux-designer-roles-in-demand.png\" class=\"attachment-large size-large wp-image-77758\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/09\/6-ui-vs-ux-designer-roles-in-demand.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/6-ui-vs-ux-designer-roles-in-demand-300x237.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dceab11 elementor-widget elementor-widget-text-editor\" data-id=\"dceab11\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see, UI and UX designers of all experience levels and in varying types of specialties are needed.\u00a0<\/p><p>One thing to keep in mind, however, is that the growing demand for UI and UX specialists has led to a major boom in terms of students and job candidates. According to Colman Walsh, the CEO of <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-after-covid-19-what-can-we-expect\/\" target=\"_blank\" rel=\"noopener\">the UX Design Institute<\/a>:\u00a0<\/p><p>\u201cThe UX Design Institute has seen a 220% increase in student numbers from April 2019 to April 2020, indicative of the wider growth of the UX industry.\u201d<\/p><p>The good news is that there\u2019s a growing need for digital designers as more and more organizations commit to a 100% digital or hybrid model in the wake of the pandemic.\u00a0<\/p><p>However, the competition is going to be stiff with new UX and UI designers entering the field every day. So, it\u2019s absolutely critical that you find a way to differentiate yourself.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d9267e elementor-widget elementor-widget-heading\" data-id=\"9d9267e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Salary Expectations\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd5109f elementor-widget elementor-widget-text-editor\" data-id=\"bd5109f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Regardless of which <a href=\"https:\/\/elementor.com\/blog\/web-design-niche\/\" target=\"_blank\" rel=\"noopener\">web design niche<\/a> you choose \u2014 UI, UX, or a hybrid role \u2014 the potential to earn more than non-specialist web designers is huge. While <a href=\"https:\/\/elementor.com\/blog\/web-designer-salary\/\" target=\"_blank\" rel=\"noopener\">average web designer salaries<\/a> are around $24\/hour or $51,564\/year, specialists tend to earn more:\u00a0<\/p><p>Here are what leading jobs sources report as the average earnings for UI designers, UX designers, and senior UX designers in the United States:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0174704 elementor-widget elementor-widget-image\" data-id=\"0174704\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"772\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=772\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-1024x988.png\" class=\"attachment-large size-large wp-image-77766\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-1024x988.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-300x289.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-768x741.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-1536x1482.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/Shani-08-2048x1976.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91c1f25 elementor-widget elementor-widget-text-editor\" data-id=\"91c1f25\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These salary benchmarks are not a guarantee of what your earnings will be as a UI or UX designer. There are a lot of factors that can affect your annual income:\u00a0<\/p><ul><li>Your area of design expertise<\/li><li>Your industry\/niche<\/li><li>Where you live<\/li><li>How long you\u2019ve been working as a designer<\/li><li>Who your employer or clients are\u00a0<\/li><li>The size and complexity of websites you build<\/li><\/ul><p>Again, the design field is growing ever more competitive thanks to the influx of talent over the past couple of years. If you want your earnings to be on the higher range of these estimates, certification and ongoing training and education are a must.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-607108d elementor-widget elementor-widget-menu-anchor\" data-id=\"607108d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"which-career-path\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31656a4 elementor-widget elementor-widget-heading\" data-id=\"31656a4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Which Career Path Should You Choose?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9076658 elementor-widget elementor-widget-text-editor\" data-id=\"9076658\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You now have a decision to make. Do you want to become a:\u00a0<\/p><ul><li>UX designer?\u00a0<\/li><li>UI designer?\u00a0<\/li><li>UX\/UI designer?\u00a0<\/li><\/ul><p>That\u2019s right. You don\u2019t have to pick one over the other if you don\u2019t want to. There are lots of employers these days who want designers who can do it all. Just do a search on a job board like <a href=\"https:\/\/www.indeed.com\/\" target=\"_blank\" rel=\"noopener\">Indeed<\/a> for \u201cUI designer\u201d or \u201cUX designer\u201d and you\u2019ll see what I mean:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e659668 elementor-widget elementor-widget-image\" data-id=\"e659668\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/09\/7-indeed-ui-ux-jobs.png\" class=\"attachment-large size-large wp-image-77760\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/09\/7-indeed-ui-ux-jobs.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/7-indeed-ui-ux-jobs-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-787f4a1 elementor-widget elementor-widget-text-editor\" data-id=\"787f4a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>But job popularity isn\u2019t the only thing to think about when choosing your specialty. A good rule of thumb is to find something that sits in your sweet spot:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdf4a6c elementor-widget elementor-widget-image\" data-id=\"fdf4a6c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"445\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=445\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-1024x569.png\" class=\"attachment-large size-large wp-image-77765\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-1024x569.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-300x167.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-768x427.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-1536x854.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/Shani-09-2048x1138.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7fee45f elementor-widget elementor-widget-text-editor\" data-id=\"7fee45f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you\u2019re not totally sure which area you\u2019re the most skilled in or passionate about yet, that\u2019s okay. That\u2019s what online courses and tutorials are for. Try your hand at some UX and UI tasks and see which feels more natural and rewarding.\u00a0<\/p><p>You can also take a step back and consider how you approach the web as a consumer. What do you notice first? How good a website looks\u2026 or how easy it is to use? That might be a good indicator of what excites you most about web design and what you\u2019ll excel at most.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Interested in becoming a web design specialist? In this article we&#8217;ll look at UX vs UI design, examine the differences between the two disciplines and give some tips on how to choose the right specialty.<\/p>\n","protected":false},"author":168447,"featured_media":77733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[167,32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-77722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-team-writes","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX vs. UI Design: What\u2019s the Difference?<\/title>\n<meta name=\"description\" content=\"Looking to become a web design specialist? Learn about the differences between UX vs UI design &amp; gain tips to help choose the right specialty for yourself.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX vs. UI Design: What\u2019s the Difference?\" \/>\n<meta property=\"og:description\" content=\"Looking to become a web design specialist? Learn about the differences between UX vs UI design &amp; gain tips to help choose the right specialty for yourself.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-30T10:49:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-28T13:31:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/Shani-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"5000\" \/>\n\t<meta property=\"og:image:height\" content=\"2617\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Maayan Nuna Lazarovich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maayan Nuna Lazarovich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\"},\"author\":{\"name\":\"Maayan Nuna Lazarovich\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/1edde2ea9c526578c5de2262881d50c2\"},\"headline\":\"UX vs. UI Design: What\u2019s the Difference?\",\"datePublished\":\"2021-09-30T10:49:44+00:00\",\"dateModified\":\"2025-12-28T13:31:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\"},\"wordCount\":3688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Elementor Team Writes\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\",\"url\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\",\"name\":\"UX vs. UI Design: What\u2019s the Difference?\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png\",\"datePublished\":\"2021-09-30T10:49:44+00:00\",\"dateModified\":\"2025-12-28T13:31:26+00:00\",\"description\":\"Looking to become a web design specialist? Learn about the differences between UX vs UI design & gain tips to help choose the right specialty for yourself.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/ux-vs-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png\",\"width\":5001,\"height\":2626},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/ux-vs-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UX vs. UI Design: What\u2019s the Difference?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/1edde2ea9c526578c5de2262881d50c2\",\"name\":\"Maayan Nuna Lazarovich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/57ba56e5aa7b3f185dfab027260e74805c68a83e6375c8a2772d968cf4c6da62?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/57ba56e5aa7b3f185dfab027260e74805c68a83e6375c8a2772d968cf4c6da62?s=96&d=mm&r=g\",\"caption\":\"Maayan Nuna Lazarovich\"},\"description\":\"Maayan is the Kits Library Team Leader at Elementor, with an impressive track record in UI and UX design. Maayan is a cat lover and a foodie and she would never miss a chance to eat at a cool restaurant!\",\"url\":\"https:\/\/elementor.com\/blog\/author\/lazarovich\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX vs. UI Design: What\u2019s the Difference?","description":"Looking to become a web design specialist? Learn about the differences between UX vs UI design & gain tips to help choose the right specialty for yourself.","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:\/\/elementor.com\/blog\/ux-vs-ui\/","og_locale":"en_US","og_type":"article","og_title":"UX vs. UI Design: What\u2019s the Difference?","og_description":"Looking to become a web design specialist? Learn about the differences between UX vs UI design & gain tips to help choose the right specialty for yourself.","og_url":"https:\/\/elementor.com\/blog\/ux-vs-ui\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-09-30T10:49:44+00:00","article_modified_time":"2025-12-28T13:31:26+00:00","og_image":[{"width":5000,"height":2617,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/Shani-01.png","type":"image\/png"}],"author":"Maayan Nuna Lazarovich","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Maayan Nuna Lazarovich","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/"},"author":{"name":"Maayan Nuna Lazarovich","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/1edde2ea9c526578c5de2262881d50c2"},"headline":"UX vs. UI Design: What\u2019s the Difference?","datePublished":"2021-09-30T10:49:44+00:00","dateModified":"2025-12-28T13:31:26+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/"},"wordCount":3688,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png","keywords":["Build"],"articleSection":["Elementor Team Writes","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/ux-vs-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/","url":"https:\/\/elementor.com\/blog\/ux-vs-ui\/","name":"UX vs. UI Design: What\u2019s the Difference?","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png","datePublished":"2021-09-30T10:49:44+00:00","dateModified":"2025-12-28T13:31:26+00:00","description":"Looking to become a web design specialist? Learn about the differences between UX vs UI design & gain tips to help choose the right specialty for yourself.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/ux-vs-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/UX-vs-UI-whats-the-difference.png","width":5001,"height":2626},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/ux-vs-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"UX vs. UI Design: What\u2019s the Difference?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/1edde2ea9c526578c5de2262881d50c2","name":"Maayan Nuna Lazarovich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/57ba56e5aa7b3f185dfab027260e74805c68a83e6375c8a2772d968cf4c6da62?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/57ba56e5aa7b3f185dfab027260e74805c68a83e6375c8a2772d968cf4c6da62?s=96&d=mm&r=g","caption":"Maayan Nuna Lazarovich"},"description":"Maayan is the Kits Library Team Leader at Elementor, with an impressive track record in UI and UX design. Maayan is a cat lover and a foodie and she would never miss a chance to eat at a cool restaurant!","url":"https:\/\/elementor.com\/blog\/author\/lazarovich\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/168447"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=77722"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77722\/revisions"}],"predecessor-version":[{"id":149056,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77722\/revisions\/149056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/77733"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=77722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=77722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=77722"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=77722"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=77722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}