{"id":14798,"date":"2020-07-08T20:58:13","date_gmt":"2020-07-09T03:58:13","guid":{"rendered":"https:\/\/www.springboard.com\/?p=14798"},"modified":"2023-08-18T07:43:02","modified_gmt":"2023-08-18T14:43:02","slug":"ui-vs-ux-vs-interaction-vs-visual-design","status":"publish","type":"post","link":"https:\/\/www.springboard.com\/blog\/design\/ui-vs-ux-vs-interaction-vs-visual-design\/","title":{"rendered":"UI Design vs. UX Design vs. Interaction Design vs. Visual Design: How Do They Differ?"},"content":{"rendered":"\n<p>Are you thinking of working in web design? A quick look at job descriptions in the industry shows that there are plenty of options to choose from. This is hardly a surprise\u2014as the world gets more connected to the internet, the demand for web designers is on the rise. UX, UI, interaction design, and visual design have all dramatically grown over the last few years, along with the average salary for web designers. \u200c<\/p>\n\n\n\n<p>Design is an umbrella term that describes a lot of different concepts. We break it down in this guide.<\/p>\n\n\n\n<p>\u200cThere are a lot of different concepts and terminology that fall under the umbrella of web design. So let\u2019s take a look at UX design, UI design, interaction design, and visual design, what separates them, and which one could be the right fit for you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cWhat Is UI Design? \u200c<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.springboard.com\/library\/static\/78992eba8180c203d470a092770f11f9\/d9546\/what-is-ui-design.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/library\/static\/78992eba8180c203d470a092770f11f9\/4b190\/what-is-ui-design.jpg\" alt=\"what is UI design\" title=\"what is UI design\"\/><\/a><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.springboard.com\/blog\/design\/golden-rules-of-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">User Interface<\/a> (UI) design is the process of creating the visual elements of an application. A UI designer is concerned with making sure that all the features a user sees are easy to access, understand, and use on various devices. They also have to make sure that the interface is aesthetically pleasing to end-users and that the layouts are easy to navigate.<\/p>\n\n\n\n<p>\u200cSome interface elements include input fields, navigational elements, and communication components. UI can be divided into two categories: the interface&#8217;s look and style\u2014aka visual design\u2014and how the elements are organized on the interface\u2014aka interaction design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cWhat Is Interaction Design?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.springboard.com\/library\/static\/1f2ce7c75722e501da149362c346862a\/a2510\/what-is-interaction-design.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/library\/static\/1f2ce7c75722e501da149362c346862a\/4b190\/what-is-interaction-design.jpg\" alt=\"what is interaction design\" title=\"what is interaction design\"\/><\/a><\/figure>\n\n\n\n<p>\u200cInteraction design (IxD) refers to how a system behaves when a user engages with it. John Kolko, the author of <a href=\"https:\/\/www.amazon.com\/Thoughts-Interaction-Design-Jon-Kolko\/dp\/0123809304\" target=\"_blank\" rel=\"noreferrer noopener\">Thoughts on Interaction Design<\/a>, defines IxD as the dialogue\u2014physical and\/or emotional\u2014between a person and a product or service.<\/p>\n\n\n\n<p>\u200cInteraction designers ensure that a user gets the desired experience at every touchpoint. Whether through aesthetics, motion, sound, animation, or other interactions, an IxD designer&#8217;s job is to make these interactions pleasant and meaningful.<\/p>\n\n\n\n<p>\u200cGood interaction design is easy to learn, gives users clues on what to do during the journey, and corrects errors early. The designer often has to do some user research to identify the users&#8217; goals and to <a href=\"https:\/\/www.springboard.com\/blog\/design\/how-to-create-a-wireframe\/\" target=\"_blank\" rel=\"noreferrer noopener\">create wireframes<\/a> and <a href=\"https:\/\/www.sciencedirect.com\/topics\/computer-science\/interactive-prototype\" target=\"_blank\" rel=\"noreferrer noopener\">interactive prototypes<\/a> for the product or service.<\/p>\n\n\n\n<p><em>Related Read: <a href=\"https:\/\/www.springboard.com\/blog\/design\/what-is-wireframe\/\" target=\"_blank\" rel=\"noreferrer noopener\">What Is a Wireframe?<\/a><\/em><\/p>\n\n\n\n<p>\u200cThere\u2019s a lot of overlap between interaction design and other design fields like UI and user experience (UX) design and usability, all of which contribute to good interaction design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cWhat Is Visual Design?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.springboard.com\/library\/static\/466b7341b8df6d789e0aa4f9da5e5c7e\/8b619\/what-is-visual-design.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/library\/static\/466b7341b8df6d789e0aa4f9da5e5c7e\/4b190\/what-is-visual-design.jpg\" alt=\"what is visual design\" title=\"what is visual design\"\/><\/a><\/figure>\n\n\n\n<p>\u200cVisual design centers on how a product looks. Colors, fonts, images, illustrations, icons, and other graphics are some of the building blocks of visual design. Good visual design enhances a user&#8217;s experience, keeping its users engaged while they navigate and use the product. It also builds a positive and consistent brand image and communicates the right information to its users.\u200c<\/p>\n\n\n\n<p>\u200c<a href=\"https:\/\/www.usability.gov\/what-and-why\/visual-design.html\" target=\"_blank\" rel=\"noreferrer noopener\">Usability.gov outlines<\/a> the basic visual design elements as including lines, shapes, white space, texture, color palettes, typography, and forms. A visual designer creates the visual language of a brand and is often responsible for how the brand looks across all touchpoints.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cWhat Is UX Design?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.springboard.com\/library\/static\/a9d3edadc9178cfc0496951ddb39b92f\/e6b01\/what-is-ux-design.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/library\/static\/a9d3edadc9178cfc0496951ddb39b92f\/4b190\/what-is-ux-design.jpg\" alt=\"what is ux design\" title=\"what is ux design\"\/><\/a><\/figure>\n\n\n\n<p>\u200cThe term &#8220;user experience design\u201d was first coined by <a href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">Don Norman<\/a> in the 1990s and has greatly evolved since then. <a href=\"https:\/\/www.springboard.com\/blog\/design\/what-is-ux-design\/\" target=\"_blank\" data-type=\"post\" rel=\"noreferrer noopener\">UX design<\/a> focuses on a user&#8217;s interaction with a product. A UX designer&#8217;s job is to make sure the interface is well organized and functions accordingly. The UX design process is very broad, incorporating usability, UI design, interaction design, visual design, information architecture, and many more under its umbrella.<\/p>\n\n\n\n<p>\u200c<a href=\"https:\/\/www.springboard.com\/blog\/design\/what-does-a-ux-designer-do\/\" data-type=\"post\" data-id=\"5182\" target=\"_blank\" rel=\"noreferrer noopener\">UX designers<\/a> are customer-oriented. They have to do plenty of user research to build products specifically for the target users\u2019 needs. They also have to perform a good deal of user surveys to determine whether these needs have been adequately met.<\/p>\n\n\n\n<p>\u200cGood UX design is not only accessible and usable but also efficient and enjoyable to the user. It caters to a customer&#8217;s needs whenever they are needed; hence UX design runs across the user&#8217;s entire journey with the product.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cUI Design vs. UX Design vs. Interaction Design vs. Visual Design: Key Differences<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.springboard.com\/library\/static\/caf4cbbefb0ec5f39dcab4aaaeac05aa\/0227d\/shutterstock_581499238.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/library\/static\/caf4cbbefb0ec5f39dcab4aaaeac05aa\/4b190\/shutterstock_581499238.jpg\" alt=\"Key design differences\" title=\"Key design differences\"\/><\/a><\/figure>\n\n\n\n<p>\u200cUI design, visual design, and interaction design are all subsets of UX design. Both a UI designer and a visual designer deal with how a product looks, and an interaction designer deals with how a user engages with a product. All of these are part of user experience design\u2014UX accounts for all interaction points between the user and a system or product. Unlike UI, IxD, and visual design, which only deal with an interface, UX design includes interfaces as well as products and services.<\/p>\n\n\n\n<p>\u200cInteraction design deals with interactions at a specific moment, while UX design focuses on all user interactions with the product or system. For example, an interaction designer might be concerned with what happens when the user clicks on a button, scrolls, or selects a menu item. In contrast, a UX designer may be concerned with the interactions between the user and the overall product or system.<\/p>\n\n\n\n<p>\u200cInteraction design is concerned with how a system and a user interact, while visual design focuses on how a system looks. Most visual designers do little work in determining how a product works. Instead, their primary aim is to make sure the system looks appealing, leaving the job of ensuring everything works from a user&#8217;s perspective to the interaction designer.<\/p>\n\n\n\n<p><em>Related Read: <a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-vs-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX vs. UI: The Difference Between UX and UI Design(ers)<\/a><\/em><\/p>\n\n\n<div class=\"bg-leaf-50 p-4 my-3\"><h4 class=\"fw-bold text-center\">Get To Know Other\tDesign Students<\/h4><div class=\"row row-cols-1 row-cols-lg-3\"><div class=\"col\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/josh-abenojar\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1671828193\/Student%20Success\/Josh_abenojar.jpg\" alt=\"Josh Abenojar\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Josh Abenojar<\/p><p class=\"text-muted lh-1\">Senior Consultant, User Experience Design at Booz Allen Hamilton at Booz Allen Hamilton<\/p><\/div><div class=\"w-100 d-block d-md-none mt-3\"><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/josh-abenojar\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/janessa-poole\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1638213299\/Student%20Success\/Janessa_Poole_125x125.png\" alt=\"Janessa Poole\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Janessa Poole<\/p><p class=\"text-muted lh-1\">Content Designer at Reforge<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/janessa-poole\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/micole-simpson\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1667935909\/Student%20Success\/Micole_Simpson.jpg\" alt=\"Micole Simpson\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Micole Simpson<\/p><p class=\"text-muted lh-1\">UX Designer at Skipify<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/micole-simpson\">Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u200cWhich Design Field Is the Right Choice?<\/h2>\n\n\n\n<p>\u200cVisual designers need to have mastered the basics of graphic design, branding, and visual communication. This is because they have to translate a brand&#8217;s style and voice into a beautiful design. Interface designers also have to be well versed in branding and graphic design as well as prototyping and interactive design. UX designers need to know how to do UX research, prototyping, and wireframing.<\/p>\n\n\n\n<p>\u200cHowever, there are no limits to what you can do in the web design field. As long as you&#8217;ve got an interest in design and the capacity to learn the <a href=\"https:\/\/www.springboard.com\/blog\/design\/4-reasons-why-ui-skills-are-critical-to-a-ux-designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">required skills<\/a>, you can be any type of designer you want. As all web design fields are closely related, you may also easily find yourself working in a combination of design roles\u2014for example, a UI\/UX designer. You can even become a <a href=\"https:\/\/www.springboard.com\/blog\/design\/becoming-a-full-stack-designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">full-stack designer<\/a> and tackle everything from UI to front-end development.\u200c<\/p>\n\n\n\n<p>\u200cWeb designers are currently in demand, meaning that open positions are available everywhere, and salaries are also growing. This means your interest in web design is definitely not misplaced. Just find the design field that interests you the most and you\u2019ll be on your way to a successful career.<\/p>\n\n\n\n<p class=\"rm has-background\" style=\"background-color:#efeff6\"><strong>Since you&#8217;re here&#8230;<br><\/strong>If you\u2019re looking to move into design, having strong UX <em>and<\/em> UI skills is a major edge. Our <a href=\"https:\/\/www.springboard.com\/courses\/ui-ux-design-career-track\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI\/UX Design Bootcamp <\/a>has earned graduates jobs with the most competitive organizations on earth, and 99.5% of our students are fully employed within 12 months of graduation. Check out <a href=\"https:\/\/www.springboard.com\/reviews\/\" target=\"_blank\" rel=\"noreferrer noopener\">our student reviews<\/a> for good feels, and If you\u2019re totally new to the field, try our <a href=\"https:\/\/courses.springboard.com\/p\/getting-started-with-user-experience-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">free intro course<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you thinking of working in web design? A quick look at job descriptions in the industry shows that there are plenty of options to choose from. This is hardly a surprise\u2014as the world gets more connected to the internet, the demand for web designers is on the rise. UX, UI, interaction design, and visual [&hellip;]<\/p>\n","protected":false},"author":100,"featured_media":18693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_eb_data_table":"","footnotes":""},"categories":[123],"tags":[],"marketing_tags":[1466],"class_list":{"0":"post-14798","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/14798"}],"collection":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/comments?post=14798"}],"version-history":[{"count":4,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/14798\/revisions"}],"predecessor-version":[{"id":43277,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/14798\/revisions\/43277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media\/18693"}],"wp:attachment":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media?parent=14798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/categories?post=14798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/tags?post=14798"},{"taxonomy":"marketing_tags","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/marketing_tags?post=14798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}