
{"id":8493,"date":"2023-12-28T07:29:51","date_gmt":"2023-12-28T07:29:51","guid":{"rendered":"https:\/\/www.andacademy.com\/resources\/?p=8493"},"modified":"2026-02-13T11:27:28","modified_gmt":"2026-02-13T11:27:28","slug":"ui-ux-design-glossary","status":"publish","type":"post","link":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/","title":{"rendered":"A Glossary of 50+ UI UX Design Terms You Should Know About"},"content":{"rendered":"\r\n\r\n\r\n<p>If you\u2019re working in UI UX design, or aspiring to do so, it\u2019s important to get to grips with industry terminology. This will deepen your understanding of the field, enable you to participate confidently in design discussions and empower you to collaborate seamlessly with fellow designers and stakeholders. <\/p>\r\n\r\n\r\n\r\n<p>So what are the most important UI UX terms to add to your vocabulary? Let\u2019s find out.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-1-a-b-testing\">1. A\/B testing<\/h2>\r\n\r\n\r\n\r\n<p>A\/B testing is a research method that compares two different versions of a design to see which one performs best. You might A\/B test two versions of your website home page, for example, with a different CTA on each.<\/p>\r\n\r\n\r\n\r\n<p>A\/B tests can help you figure out the best layouts, call-to-action buttons, content, and <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/complete-guide-to-colour-palettes\/\" target=\"_blank\" rel=\"noopener\">color schemes<\/a> for your product or interface by measuring which variations yield the most favorable response from your users.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-2-accessibility\">2. Accessibility<\/h2>\r\n\r\n\r\n\r\n<p>As a <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/how-to-become-a-ui-ux-designer\/\" target=\"_blank\" rel=\"noopener\">UI UX designer<\/a>, it\u2019s essential to prioritize accessibility in your designs. Accessibility is about designing products, services, and experiences that are inclusive of, accessible to, and usable by everybody\u2014including people with visual, auditory, motor, and cognitive impairments.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-3-affordance\">3. Affordance<\/h2>\r\n\r\n\r\n\r\n<p>According to the affordance principle, an element or object\u2019s appearance should clearly convey its functionality. Consider a coffee mug\u2014you know how it functions and how to use it because of its form. The same goes for digital products; you want to make it easy for your users to determine what different elements can do. Buttons can be raised or shadowed to show that they\u2019re clickable, for example.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-4-as-is-journey-maps\">4. As-is journey maps<\/h2>\r\n\r\n\r\n\r\n<p>As-is journey maps visually represent the experience a user currently has with a product or service. They depict the steps a user goes through to complete a specific task within that product or interface\u2014for example, renewing their subscription on a website\u2014showing all the different touchpoints they interact with along the way. Journey maps also outline user pain points, as well as how the user feels at each stage.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-5-call-to-action-cta\">5. Call-to-action (CTA)<\/h2>\r\n\r\n\r\n\r\n<p>A call-to-action is a strategically placed button or prompt that encourages users to take a specific action. In a blog post, you might have a call to action prompting the reader to click through to another article or download a free ebook. On an e-commerce website, you might have a call-to-action button encouraging you to add an item to your basket.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/1-19.webp\" alt=\"An example of a call-to-action button on Miro software\" class=\"wp-image-8495\" title=\"An example of a call-to-action button on Miro software\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>An example of a call-to-action button on <\/em><a href=\"https:\/\/miro.com\/\" target=\"_blank\" rel=\"noopener\"><em>miro.com<\/em><\/a><em>&nbsp;<\/em><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-6-card-sorting\">6. Card sorting<\/h2>\r\n\r\n\r\n\r\n<p>Card sorting is a user research method that helps you understand how your users categorize information. This is useful when designing the information architecture of a digital product\u2014that is, deciding where different pieces of information should reside and how they should be labeled. <\/p>\r\n\r\n\r\n\r\n<p>During a card sorting exercise, participants are asked to group random content items into categories. This gives you insight into your users\u2019 mental models, allowing you to organize and classify content in a way that aligns with their expectations. If you\u2019re not familiar with mental models, check out number 26 in our UI UX glossary.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-7-cognitive-load\">7. Cognitive load\u00a0<\/h2>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/cognitive-load\/\" target=\"_blank\" rel=\"noopener\">Cognitive load<\/a> refers to the mental effort required to process information. In UX UI design, you want to keep the cognitive load to a minimum to make it as easy as possible for the user to interact with your product.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>You can reduce cognitive load by avoiding or removing unnecessary elements, using common design patterns that feel familiar to the user, presenting information clearly and concisely, and limiting the number of options a user has when completing a certain task.<\/p>\r\n\r\n\r\n\r\n<a class=\"circle_anch pop_show my_pop_show1\" href=\"#consultcourseadvisors\"><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/07\/image2-2.gif\" class=\"wp-image-8500\"\/><\/figure><\/a>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-8-colour-contrast\">8. Color contrast<\/h2>\r\n\r\n\r\n\r\n<p>Color contrast is the difference in color between two elements\u2014for example, text and the background it\u2019s placed on. Color contrast is a crucial factor in accessible design; you need sufficient contrast to ensure that all text is legible. When designing apps and websites, use a <a href=\"https:\/\/accessibleweb.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\">free color contrast checker<\/a> to make sure that your color choices are compliant with Web Content Accessibility Guidelines.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-9-colour-theory\">9. Color theory<\/h2>\r\n\r\n\r\n\r\n<p>Color has an important role to play in <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-ui-ux-design-the-complete-guide\/\" target=\"_blank\" rel=\"noopener\">UI UX design<\/a>. It shapes the brand identity, evokes certain emotions in the target audience, and impacts accessibility and usability. As such, UX UI designers must choose their color palettes carefully.<\/p>\r\n\r\n\r\n\r\n<p>Color theory provides a practical framework for using color and choosing appropriate color schemes. It explores how different hues combine and interact to achieve different visual effects, considering things like contrast, harmony, and color psychology.<\/p>\r\n\r\n\r\n\r\n<p>Learn more in our <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/\" target=\"_blank\" rel=\"noopener\">ultimate guide to color theory<\/a>.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/3-14.webp\" alt=\"Colour wheels\" class=\"wp-image-8498\" title=\"Colour wheels\"\/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-10-contextual-inquiry\">10. Contextual inquiry<\/h2>\r\n\r\n\r\n\r\n<p>Contextual inquiry is a user research method that involves observing and interviewing users in their natural environment. This provides valuable insight into user behaviors, motivations, needs, and challenges within a certain context\u2014for example, visiting the dentist or shopping for groceries. When conducting a contextual inquiry, you\u2019ll observe your participants and ask questions to better understand how and why they take certain actions.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-11-design-system\">11. Design system\u00a0<\/h2>\r\n\r\n\r\n\r\n<p>A design system is a comprehensive collection of reusable components, patterns, and guidelines that ensure consistency in design and development across a product or organization. It promotes efficiency, maintainability, and a cohesive user experience. Google\u2019s <a href=\"https:\/\/m3.material.io\/\" target=\"_blank\" rel=\"noopener\">Material Design<\/a>, <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/\" target=\"_blank\" rel=\"noopener\">Apple\u2019s Human Interface Guidelines<\/a>, and <a href=\"https:\/\/spectrum.adobe.com\/\" target=\"_blank\" rel=\"noopener\">Adobe Spectrum<\/a> are all examples of design systems.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-12-design-thinking\">12. Design Thinking<\/h2>\r\n\r\n\r\n\r\n<p>Design Thinking is a problem-solving approach that emphasizes empathy, ideation, and iteration. It involves understanding users&#8217; needs, brainstorming creative solutions, and incorporating user feedback to iterate on designs. Design Thinking is especially useful for solving complex or \u2018wicked\u2019 problems that are difficult to define and articulate.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Learn more: <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-design-thinking\/\" target=\"_blank\" rel=\"noopener\">What is Design Thinking? Everything You Need To Know<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-13-d-v-f-desirable-viable-feasible-model\">13. D-V-F (Desirable, viable, feasible) model<\/h2>\r\n\r\n\r\n\r\n<p>The D-V-F model is a framework used in product design and development to evaluate the desirability for users, the viability of the business, and feasibility in terms of technology and resources.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>If a product is desirable, it means that there\u2019s a real need for it among the target user group. If it\u2019s viable, it means that the product will contribute to the achievement of business goals\u2014such as driving revenue or retaining loyal customers. If it\u2019s feasible, it means that you have the necessary technology and expertise to build it.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The D-V-F model helps to ensure that product ideas align with user needs, business goals, and technical capabilities.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-14-empathy-map\">14. Empathy map<\/h2>\r\n\r\n\r\n\r\n<p>An <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/empathy-maps\/\" target=\"_blank\" rel=\"noopener\">empathy map<\/a> is a visual tool used in <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-ux-design\/\" target=\"_blank\" rel=\"noopener\">UX design<\/a> to help teams understand and empathize with their target users. To create an empathy map, divide a piece of paper (or whiteboard space) into four quadrants labeled \u201cSays\u201d, \u201cThinks\u201d, \u201cDoes\u201d, and \u201cFeels\u201d. Based on what you learn during the user research phase, you can fill in your empathy map to create a clear visual summary of your users\u2019 perspective.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/4-14.webp\" alt=\"An empathy map template from Figma\" class=\"wp-image-8499\" title=\"An empathy map template from Figma\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>An empathy map template from Figma<\/em><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-15-eye-tracking\">15. Eye tracking<\/h2>\r\n\r\n\r\n\r\n<p>Eye tracking is a research method that involves monitoring and recording the movements of users&#8217; eyes as they interact with a website or app. This provides insights into where users focus their attention, helping designers optimize the product\u2019s layout and information architecture.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-16-fitts-s-law\">16. Fitts&#8217;s law<\/h2>\r\n\r\n\r\n\r\n<p>Fitts&#8217;s Law is a model that predicts the time it takes for a user to move to a target based on the target&#8217;s size and distance. It is often used to inform the design of interactive elements, such as buttons, in order to optimize usability and efficiency.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-17-gamification\">17. Gamification<\/h2>\r\n\r\n\r\n\r\n<p>Gamification involves integrating game elements and principles into non-game contexts to engage and motivate users. This can include elements such as points, badges, leaderboards, and challenges to enhance user participation and satisfaction.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Language-learning app <a href=\"https:\/\/blog.duolingo.com\/gamification-design\/\" target=\"_blank\" rel=\"noopener\">Duolingo<\/a> is a great example of gamification in the UX design space. Duolingo uses game elements such as streaks, league tables, points, and progress bars to motivate users and encourage them to engage with the app every day.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-18-gestalt-principles\">18. Gestalt principles<\/h2>\r\n\r\n\r\n\r\n<p>Gestalt principles are psychological principles that describe how people tend to organize visual elements into groups or wholes based on certain principles such as proximity, similarity, and closure. These principles guide UI UX designers in the creation of user-friendly interfaces. You can learn all about <a href=\"https:\/\/www.usertesting.com\/resources\/topics\/gestalt-principles\" target=\"_blank\" rel=\"noopener\">the Gestalt principles in this guide<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-19-golden-ratio\">19. Golden Ratio<\/h2>\r\n\r\n\r\n\r\n<p>The Golden Ratio is a mathematical ratio between two numbers of approximately 1.618, often found in nature and used in design for its aesthetic appeal. It\u2019s used to create visually harmonious proportions and layouts. Flower petals, pine cones, and tree branches are all naturally occurring examples of the Golden Ratio.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-20-hamburger-menu\">20. Hamburger menu<\/h2>\r\n\r\n\r\n\r\n<p>A hamburger menu is a navigation icon consisting of three horizontal lines, resembling a hamburger. When clicked or tapped, it typically reveals a menu with additional navigation options. It is commonly used in responsive design to save space on the screen.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/8-7.webp\" alt=\"An example of a hamburger menu in the Gmail web app\r\n\" class=\"wp-image-8501\" title=\"An example of a hamburger menu in the Gmail web app\r\n\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>An example of a hamburger menu in the Gmail web app<\/em><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-21-heatmap\">21. Heatmap<\/h2>\r\n\r\n\r\n\r\n<p>A heatmap is a visual map where values are depicted by colors. In UX UI design, heatmaps are often used to show areas of a web page or app that receive more user attention or interaction. They help designers identify patterns and optimize page layouts. You can generate heatmaps with analytics tools like <a href=\"https:\/\/www.hotjar.com\/\" target=\"_blank\" rel=\"noopener\">Hotjar<\/a> and <a href=\"https:\/\/www.fullstory.com\/\" target=\"_blank\" rel=\"noopener\">FullStory<\/a>.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-22-heuristic-evaluation\">22. Heuristic evaluation<\/h2>\r\n\r\n\r\n\r\n<p>Designers and researchers conduct heuristic evaluations to assess the usability of a product interface and identify any issues. During a heuristic evaluation, the interface is evaluated against a set of usability heuristics. These are general principles of user-friendly design, covering things like user control and freedom, consistency and standards, and error prevention. You can learn more about <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noopener\">Jakob Nielsen\u2019s 10 usability heuristics for interface design here<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-23-information-architecture-ia\">23. Information architecture (IA)<\/h2>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/information-architecture\/\" target=\"_blank\" rel=\"noopener\">Information architecture (IA)<\/a> is the process of organizing, structuring, and labeling content in a system, website, or app. The goal of information architecture is to organize content in a way that aligns with the end users\u2019 expectations. This helps to create digital products that are intuitive and easy to use.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-24-interaction-design-ixd\">24. Interaction design (IxD)<\/h2>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-interaction-design\/\" target=\"_blank\" rel=\"noopener\">Interaction design (IxD)<\/a> is a design discipline focused on creating meaningful, effective, and seamless interactions between end users (i.e. people) and digital products. It involves defining the behavior and functionality of interactive elements to ensure a positive user experience. Clicking, scrolling, swiping, and dragging-and-dropping are all examples of interaction design in action.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-25-jobs-to-be-done-jtbd\">25. Jobs-to-be-done (JTBD)<\/h2>\r\n\r\n\r\n\r\n<p>Jobs-to-be-done is a UX framework that seeks to understand what goals a user wants to accomplish when they use a product or service. The JTBD framework is based on the \u201cJobs\u201d theory developed by Clayton M. Christensen, which suggests that people buy products and services to get a job done. If you understand what job your users want done, you can create useful, effective solutions.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/5-7.webp\" alt=\"A jobs-to-be-done template from the Figma community\" class=\"wp-image-8497\" title=\"A jobs-to-be-done template from the Figma community\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>A jobs-to-be-done template from the <\/em><a href=\"https:\/\/www.figma.com\/community\/file\/1212353254278980655\" target=\"_blank\" rel=\"noopener\"><em>Figma community<\/em><\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-26-mental-model\">26. Mental model\u00a0<\/h2>\r\n\r\n\r\n\r\n<p>A mental model is a cognitive framework that a user builds up based on their prior knowledge and experiences. It informs their understanding or expectation of how a system or interface should work. For example, based on previous experiences with online shopping, our mental models might tell us that the shopping cart icon will show us items we\u2019ve added to our basket. It\u2019s important to design with mental models in mind as this will help you to create intuitive user experiences.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-27-microcopy\">27. Microcopy<\/h2>\r\n\r\n\r\n\r\n<p>Microcopy is the text that guides a user around a digital interface. It includes things like button labels, error messages, and form fields. The purpose of microcopy is to guide, inform, reassure, and provide feedback\u2014helping the user to achieve their goals. The art of writing microcopy is a dedicated design discipline of its own, known as UX writing or content design.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/6-6.webp\" alt=\"An example of microcopy from the Mailchimp website\" class=\"wp-image-8494\" title=\"An example of microcopy from the Mailchimp website\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>An example of a microcopy from the Mailchimp website&nbsp;<\/em><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-28-microinteractions\">28. Microinteractions<\/h2>\r\n\r\n\r\n\r\n<p>Microinteractions are subtle, often brief, and focused moments of interaction between a user and a digital interface. These interactions provide feedback, acknowledgment, or guidance in response to user actions, contributing to a more engaging and responsive user experience. When you click the heart icon on a social media platform to \u201clike\u201d something, this might trigger a brief animation. That\u2019s an example of a micro-interaction!&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-29-modal-window\">29. Modal window<\/h2>\r\n\r\n\r\n\r\n<p>A modal window is a window or box that pops up while you\u2019re using a website or app. It typically overlays the main content, requiring the user to interact with it in order to return to the original screen or page they were viewing. When reading a blog article, for example, you might get a modal window asking you to subscribe to the company newsletter. You\u2019ll need to either subscribe or click the \u201cX\u201d to get rid of the modal window.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-30-mobile-first-design\">30. Mobile-first design<\/h2>\r\n\r\n\r\n\r\n<p>Mobile-first design is an approach to web and app design that prioritizes designing for mobile devices before considering larger screens. It involves creating a responsive design that adapts and scales up to accommodate larger devices. Mobile accounts for <a href=\"https:\/\/www.mobiloud.com\/blog\/what-percentage-of-internet-traffic-is-mobile\" target=\"_blank\" rel=\"noopener\">57.8% of global Internet traffic<\/a>, so mobile-first design is increasingly important.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Want to know what a mobile-first design looks like? Here\u2019s a <a href=\"https:\/\/www.behance.net\/gallery\/172736935\/UIUX-case-study-Smart-parenting-assistant\" target=\"_blank\" rel=\"noopener\">project by a learner at AND&#8217;s UI UX Design program<\/a> to give you some insight.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-31-navigation-bar\">31. Navigation bar<\/h2>\r\n\r\n\r\n\r\n<p>A navigation bar, or navbar, is a UI element that contains links or buttons to help users navigate a website or app. It\u2019s typically positioned at the top of the page and provides a clear structure for accessing different sections or pages. The navigation bar will usually include links such as \u201cHome\u201d, \u201cAbout Us\u201d, \u201cServices\u201d, and \u201cContact\u201d.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/7-7.webp\" alt=\"The navigation bar at the top of the AND Academy home page\" class=\"wp-image-8496\" title=\"The navigation bar at the top of the AND Academy home page\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>The navigation bar at the top of the <\/em><a href=\"https:\/\/www.andacademy.com\/\" target=\"_blank\" rel=\"noopener\"><em>AND Academy home page<\/em><\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-32-parallax-scrolling\">32. Parallax scrolling<\/h2>\r\n\r\n\r\n\r\n<p>Parallax scrolling is a design technique where background images move at a different speed than the foreground content as the user scrolls down a webpage. This creates the illusion of depth and adds a dynamic and visually engaging effect. For an example of parallax scrolling in action, check out the <a href=\"https:\/\/www.supernaturalkitchen.com\/\" target=\"_blank\" rel=\"noopener\">Supernatural website<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-33-persona\">33. Persona<\/h2>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/how-to-create-a-user-persona\/\" target=\"_blank\" rel=\"noopener\">Personas<\/a> are fictional characters created based on insights and data gathered through user research. Personas represent different user types or audience segments, and they embody the characteristics, behaviors, and goals of the people you want to appeal to when designing products.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>If you\u2019re designing a fitness app, for example, you might have personas such as \u201cFreelance fitness enthusiast Emily\u201d who wants detailed workout plans, or \u201cBusy corporate employee Finn\u201d who needs quick and efficient exercise routines.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-34-problem-statement\">34. Problem statement<\/h2>\r\n\r\n\r\n\r\n<p>A problem statement succinctly articulates a specific issue or challenge that a design team aims to address. It serves as a clear and focused description of the problem, guiding the design process toward effective solutions. An example of a problem statement could be &#8220;Users frequently abandon their shopping cart before completing the checkout process due to a complex and confusing payment page.&#8221;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-35-progressive-disclosure\">35. Progressive disclosure<\/h2>\r\n\r\n\r\n\r\n<p>Progressive disclosure is a design strategy where information is revealed gradually to users based on their actions or needs. It helps prevent information overload and guides users through a step-by-step process, revealing details as necessary. When filling out an online form, for example, you might see only essential fields first. Then, based on your answers, the form might progressively reveal advanced options or further questions.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-36-prototyping\">36. Prototyping<\/h2>\r\n\r\n\r\n\r\n<p>A <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/design-thinking-prototype\/\" target=\"_blank\" rel=\"noopener\">prototype<\/a> is a visual, interactive representation of how a product will look and function once it\u2019s been built. Prototyping is a key step in the <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-the-ux-design-process\/\" target=\"_blank\" rel=\"noopener\">UI UX design process<\/a> as it enables designers to test and evaluate ideas before getting the product developed. With working prototypes, designers can identify usability issues and design flaws early on.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-37-readability\">37. Readability<\/h2>\r\n\r\n\r\n\r\n<p>Readability refers to how easy it is for users to read and understand the text within your product interface. Readability is influenced by factors such as font choice, size, line spacing, and contrast. Designing with readability in mind ensures that users can access and consume key information\u2014and enjoy a smooth user experience.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-38-responsive-design\">38. Responsive design<\/h2>\r\n\r\n\r\n\r\n<p>Responsive design is an approach to web design that ensures a seamless user experience across various devices and screen sizes. The layout adapts to accommodate different screen resolutions, ensuring consistency and usability no matter what device is being used.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-39-scrolling-patterns\">39. Scrolling patterns<\/h2>\r\n\r\n\r\n\r\n<p>Scrolling patterns refer to the ways in which users navigate content by scrolling on a webpage. Different scrolling patterns impact the user experience and determine how information is presented. Scrolling patterns include continuous scrolling, paginated scrolling, and parallax scrolling (see number 32 in our glossary). A news website, for example, might use infinite scrolling, allowing the user to view and load an endless number of articles as they scroll down the page.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-40-skeleton-screen\">40. Skeleton screen<\/h2>\r\n\r\n\r\n\r\n<p>A skeleton screen is a visual placeholder or loading state displayed on a screen while content is loading. It typically consists of simplified outlines and structural elements, providing users with a sense of the page&#8217;s layout before the actual content appears. When you open the LinkedIn app on your phone, for example, you often see a grayscale outline of where the content will appear before it loads.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-41-storyboarding\">41. Storyboarding<\/h2>\r\n\r\n\r\n\r\n<p>Storyboarding involves creating a sequence of visual sketches or illustrations to outline the flow of a user&#8217;s interaction with a product or interface. It helps designers plan and visualize user journeys, identifying key touchpoints, interactions, and pain points along the way.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-42-task-flow\">42. Task flow<\/h2>\r\n\r\n\r\n\r\n<p>A task flow is a series of steps or interactions that users take to complete a specific task within a digital product. It maps out the user&#8217;s journey from start to finish, emphasizing the sequence of actions required to achieve a goal. If you wanted to create a task flow for the process of making a purchase via an e-commerce app, you might map out the following steps: open the app \u2192 log in \u2192 browse through product categories\u2026and so on.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-43-typography\">43. Typography<\/h2>\r\n\r\n\r\n\r\n<p>Typography is the art of designing, styling, and arranging letters and text. It considers how each letter looks, as well as the spacing between letters, words, and entire lines of text. Typography is an essential pillar of UX UI design as it shapes the brand identity, communicates key information to the user, and impacts readability and accessibility.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Learn more: <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-typography\/\" target=\"_blank\" rel=\"noopener\">What Is Typography? Everything You Need To Know<\/a>.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-44-user-centred-design-ucd\">44. User-centered design (UCD)<\/h2>\r\n\r\n\r\n\r\n<p>User-centered design (UCD) is an iterative design process that prioritizes the needs, preferences, and behaviors of users. It actively involves users throughout the design and development phases to create products that meet their expectations and provide a positive user experience.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-45-user-experience-ux\">45. User experience (UX)<\/h2>\r\n\r\n\r\n\r\n<p>User experience, or UX, refers to the overall experience a user has when interacting with a product, system, or service. It\u2019s influenced by how usable and intuitive the experience is, how accessible it is, and how it makes the user feel. UX is the sum of all the parts: the user\u2019s overall satisfaction with the experience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Learn more: <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-ux-design\/\" target=\"_blank\" rel=\"noopener\">What Is UX Design?&nbsp;<\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-46-user-interface-ui\">46. User interface (UI)<\/h2>\r\n\r\n\r\n\r\n<p>A user interface is the point of interaction between a user and a digital product. It comprises all the screens, pages, buttons, icons, and other visual elements that the user encounters and interacts with when they navigate an app, website, or software. User interface (UI) design is the discipline focused on designing user interfaces so that they\u2019re aesthetically pleasing, intuitive, accessible, and user-friendly.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Learn more: <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-ui-design\/\" target=\"_blank\" rel=\"noopener\">Everything You Need to Know About User Interface (UI) Design<\/a>.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-47-user-research\">47. User research<\/h2>\r\n\r\n\r\n\r\n<p>User research is the very foundation of great design! It involves the systematic study of users\u2019 behaviors, needs, and preferences in order to cultivate empathy for the target audience and understand what problems your product, service, or interface needs to solve. Popular user research methods include interviews, surveys, contextual inquiries (refer back to number 10 in our glossary), and card sorting (number 6 on our list).&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-48-usability\">48. Usability<\/h2>\r\n\r\n\r\n\r\n<p>Usability refers to how easy it is for a user to interact with a specific product. It considers how learnable, memorable, and intuitive the system is\u2014in other words, how self-explanatory it is\u2014and how efficiently it enables the user to accomplish their goals. Products that score high on usability provide a great user experience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-49-usability-testing\">49. Usability testing<\/h2>\r\n\r\n\r\n\r\n<p>Usability testing is a technique used to evaluate a product\u2019s usability\u2014that is, how easy it is to use and navigate. Usability testing involves putting a product (or product prototype) in front of real people and observing them as they interact with it. This is crucial for identifying usability issues, gathering user feedback, and making continuous improvements to the user experience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-50-ux-ui-patterns\">50. UX UI patterns<\/h2>\r\n\r\n\r\n\r\n<p>UX UI patterns, or design patterns, are recurring solutions to common design problems. They provide proven and effective solutions that address specific user interface challenges, promoting consistency and familiarity in design. Examples include the navigation bar that we\u2019re accustomed to finding at the top of a webpage, image carousels, modal windows, and progress bars\u2014to name just a few.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-51-white-space\">51. White space<\/h2>\r\n\r\n\r\n\r\n<p>White space, also known as negative space, is the empty or unused space between design elements. It helps improve visual clarity and readability and creates a balanced and clutter-free aesthetic.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-52-wireframe\">52. Wireframe<\/h2>\r\n\r\n\r\n\r\n<p>A <a href=\"http:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/guide-to-wireframe-design\/\" target=\"_blank\" rel=\"noopener\">wireframe<\/a> is a simplified visual representation of a webpage or interface that outlines the structure and layout without including detailed design elements. It serves as a blueprint for the overall design and content placement. Wireframes are usually created early on in the design process, before prototyping and visual design.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-learn-more-about-ux-and-ui-design\">Learn more about UX and UI design<\/h2>\r\n\r\n\r\n\r\n<p>We hope you enjoyed our UI UX Design glossary and are now feeling much more confident with industry terminology. For further UI UX Design insights, check out these guides:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/fundamental-ux-design-principles-and-how-to-apply-them\/\" target=\"_blank\" rel=\"noopener\">Fundamental UX Design Principles and How To Apply Them<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/top-ui-ux-design-skills\/\" target=\"_blank\" rel=\"noopener\">How to Create a Standout UI UX Design Portfolio (Step-by-Step)<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/top-ui-ux-design-skills\/\" target=\"_blank\" rel=\"noopener\">15 Must-Have UI UX Design Skills (And How to Develop Them)<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>If you&#8217;re seeking further help and resources, we&#8217;ve got some fantastic options to offer:<\/p>\r\n\r\n\r\n\r\n<p>Here are some of our resources that will help you make up your mind:<\/p>\r\n\r\n\r\n\r\n<ol class=\"disc wp-block-list\">\r\n<li>Watch this <a href=\"https:\/\/www.youtube.com\/watch?v=Ae6wIrq2DhY\" target=\"_blank\" rel=\"noopener\">session<\/a> by Shiva Viswanathan, Design Head of Ogilvy Pennywise, and Naman Singh, Product Experience Designer at RED.<\/li>\r\n\r\n\r\n\r\n<li>Talk to a <a class=\"circle_anch pop_show my_pop_show1\" href=\"#consultcourseadvisors\"> course advisor<\/a> to discuss how you can transform your career with one of our courses.<\/li>\r\n\r\n\r\n\r\n<li>Pursue our <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/ux-ui-courses\/\" target=\"_blank\" rel=\"noopener\">UI UX Design courses <\/a>&#8211; all courses are taught through live, interactive classes by industry experts, and some even offer a Job Guarantee.<\/li>\r\n\r\n\r\n\r\n<li>Take advantage of the <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/ui-ux-design-courses\/#:~:text=ui%20ux%20design%20course%20fee%20&amp;%20funding\" target=\"_blank\" rel=\"noopener\"> scholarship and funding options that come with our courses <\/a> to overcome any financial hurdle on the path of your career transformation.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p><em>Note: All information and\/or data from external sources is believed to be accurate as of the date of publication.<\/em><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re working in UI UX design, or aspiring to do so, it\u2019s important to get to grips with industry terminology. This will deepen your understanding of the field, enable you to participate confidently in design discussions and empower you to collaborate seamlessly with fellow designers and stakeholders. So what are the most important UI [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":9906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[31],"class_list":["post-8493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux-design","tag-emily-stevens"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UI UX Design Glossary - 50+ Terms with Examples | AND Academy<\/title>\n<meta name=\"description\" content=\"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI UX Design Glossary- 50+ Terms with Examples | AND Academy\" \/>\n<meta property=\"og:description\" content=\"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/\" \/>\n<meta property=\"og:site_name\" content=\"AND Academy\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-28T07:29:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-13T11:27:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/12\/image9.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1999\" \/>\n\t<meta property=\"og:image:height\" content=\"1333\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Emily Stevens\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"UI UX Design Glossary- 50+ Terms with Examples | AND Academy\" \/>\n<meta name=\"twitter:description\" content=\"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/12\/image9.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Stevens\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/\"},\"author\":{\"name\":\"Emily Stevens\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/af0fd06e2364bbc12f94772edb7e4108\"},\"headline\":\"A Glossary of 50+ UI UX Design Terms You Should Know About\",\"datePublished\":\"2023-12-28T07:29:51+00:00\",\"dateModified\":\"2026-02-13T11:27:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/\"},\"wordCount\":3745,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/feature-19.webp\",\"keywords\":[\"Emily Stevens\"],\"articleSection\":[\"UI UX Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/\",\"name\":\"UI UX Design Glossary - 50+ Terms with Examples | AND Academy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/feature-19.webp\",\"datePublished\":\"2023-12-28T07:29:51+00:00\",\"dateModified\":\"2026-02-13T11:27:28+00:00\",\"description\":\"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\\\/B testing to wireframing and everything else in between.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/feature-19.webp\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/feature-19.webp\",\"width\":780,\"height\":410,\"caption\":\"Designers collaborating on a whiteboard with sticky notes and sketches related to UI UX design concepts.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/ui-ux-design\\\/ui-ux-design-glossary\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Glossary of 50+ UI UX Design Terms You Should Know About\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"name\":\"AND Academy\",\"description\":\"Design Courses with Placement Guarantee | AND Academy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"alternateName\":\"AND Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\",\"name\":\"AND Academy\",\"alternateName\":\"AND Academy\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"width\":2560,\"height\":2560,\"caption\":\"AND Academy\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/af0fd06e2364bbc12f94772edb7e4108\",\"name\":\"Emily Stevens\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"caption\":\"Emily Stevens\"},\"sameAs\":[\"http:\\\/\\\/andacademy.com\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/emily-stevens-8bab706a\\\/\"],\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/author\\\/emily-stevens\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UI UX Design Glossary - 50+ Terms with Examples | AND Academy","description":"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.","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:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/","og_locale":"en_US","og_type":"article","og_title":"UI UX Design Glossary- 50+ Terms with Examples | AND Academy","og_description":"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.","og_url":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/","og_site_name":"AND Academy","article_published_time":"2023-12-28T07:29:51+00:00","article_modified_time":"2026-02-13T11:27:28+00:00","og_image":[{"width":1999,"height":1333,"url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/12\/image9.jpg","type":"image\/jpeg"}],"author":"Emily Stevens","twitter_card":"summary_large_image","twitter_title":"UI UX Design Glossary- 50+ Terms with Examples | AND Academy","twitter_description":"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.","twitter_image":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/12\/image9.jpg","twitter_misc":{"Written by":"Emily Stevens","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#article","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/"},"author":{"name":"Emily Stevens","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/af0fd06e2364bbc12f94772edb7e4108"},"headline":"A Glossary of 50+ UI UX Design Terms You Should Know About","datePublished":"2023-12-28T07:29:51+00:00","dateModified":"2026-02-13T11:27:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/"},"wordCount":3745,"commentCount":0,"publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/feature-19.webp","keywords":["Emily Stevens"],"articleSection":["UI UX Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/","url":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/","name":"UI UX Design Glossary - 50+ Terms with Examples | AND Academy","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#primaryimage"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/feature-19.webp","datePublished":"2023-12-28T07:29:51+00:00","dateModified":"2026-02-13T11:27:28+00:00","description":"Learn all the important design terminology with our UI UX design glossary of over 50 terms\u2014from A\/B testing to wireframing and everything else in between.","breadcrumb":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#primaryimage","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/feature-19.webp","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/02\/feature-19.webp","width":780,"height":410,"caption":"Designers collaborating on a whiteboard with sticky notes and sketches related to UI UX design concepts."},{"@type":"BreadcrumbList","@id":"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/ui-ux-design-glossary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andacademy.com\/resources\/"},{"@type":"ListItem","position":2,"name":"A Glossary of 50+ UI UX Design Terms You Should Know About"}]},{"@type":"WebSite","@id":"https:\/\/www.andacademy.com\/resources\/#website","url":"https:\/\/www.andacademy.com\/resources\/","name":"AND Academy","description":"Design Courses with Placement Guarantee | AND Academy","publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"alternateName":"AND Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andacademy.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.andacademy.com\/resources\/#organization","name":"AND Academy","alternateName":"AND Academy","url":"https:\/\/www.andacademy.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","width":2560,"height":2560,"caption":"AND Academy"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/af0fd06e2364bbc12f94772edb7e4108","name":"Emily Stevens","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","caption":"Emily Stevens"},"sameAs":["http:\/\/andacademy.com","https:\/\/www.linkedin.com\/in\/emily-stevens-8bab706a\/"],"url":"https:\/\/www.andacademy.com\/resources\/author\/emily-stevens\/"}]}},"_links":{"self":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/8493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/comments?post=8493"}],"version-history":[{"count":17,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/8493\/revisions"}],"predecessor-version":[{"id":21935,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/8493\/revisions\/21935"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media\/9906"}],"wp:attachment":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media?parent=8493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/categories?post=8493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/tags?post=8493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}