UI (User Interface) Glossary: 85 Terms You Should Know

User Interface (UI) design has its own set of concepts and specialized vocabulary. This comprehensive glossary explains more than 80 key UI terms clearly and concisely.

It covers fundamental concepts to make UI terminology easy to understand and apply. Whether you are new to UI design or need a quick reference, this guide will come in handy.

In just a few minutes, you will have a solid grasp of key terms to communicate effectively with stakeholders and team members.

A

• Accessible Design: Creating designs that are usable by people with a wide range of abilities and disabilities.
  
• Adaptive: In UI design, adaptive refers to interfaces that adjust and optimize for different devices and screen sizes without changing the content.
• Affordance: The design aspect of an object that suggests how it is supposed to be used. In UI, buttons should look clickable, and links should be distinguishable.
• Affinity Diagram: A tool used to organize data and ideas into groups based on their natural relationships, aiding in the brainstorming process and decision-making in UI design.
• Alignment: The arrangement of elements to create a visual connection between them, often leading to a more organized and aesthetically pleasing design.
• Ascenders: The parts of lowercase letters that extend above the main body of the letter, such as in “b,” “d,” and “h”.

B

• Boilerplate: Reusable code or templates used for common design patterns or functionalities, speeding up the development process.
• Brand Guidelines: A set of rules that explains how your brand works, including typography, color palettes, and logo usage, ensuring consistency across all user interfaces.
• Breadcrumb: A navigation aid that shows the user’s location in a website or application hierarchy and allows them to easily navigate back to previous levels.
• Breakpoints: Specific screen sizes or media query dimensions where a website or application’s layout changes to accommodate different screen sizes or orientations.

C

• Call to Action (CTA): A button or link designed to prompt an immediate response or encourage an immediate sale, such as “Sign Up” or “Download Now.”
• Card Design: A design pattern where pieces of content are presented in rectangular containers. Cards are widely used in responsive designs to display information compactly and clearly.
• Chunking: Organizing content into manageable units or chunks to improve readability and comprehension.
• Component Library: A collection of reusable components or UI elements that can be used to maintain consistency across a digital product.

D

• Descenders: The parts of lowercase letters that extend below the baseline of the text, as seen in “g,” “j,” and “p”.
• Design Thinking: A problem-solving approach that involves empathizing with users, defining problems, ideating solutions, prototyping, and testing.
• Design Tokens: The visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
• Döner Menu Icon: Not a standard term in UI design; possibly a creative or mistaken reference to an icon design.
• Drag and Drop: A gesture that allows users to select a virtual object by “grabbing” it and dragging it to a different location or onto another object.
• Duotone: A digital image effect used in UI design, characterized by a grayscale image that replaces the dark and light tones with two different colors, adding visual interest and brand identity.

E

• Entry Field: Areas in a UI where users can input text responses within a form or application, such as text boxes, password fields, or search queries.
• Element Collage: A deliverable consisting of a collection of visual elements, such as buttons, icons, and typographic treatments, used to explore and define the visual style of a website or application.
• Emboss: A design effect that gives the illusion that an element is raised above or pressed into the surface, adding depth and texture to the interface.
• Easing: The process of making animations appear more natural by adjusting the speed of an animation over its duration.

F

• Flat Design: A minimalist UI design style that uses simple, two-dimensional elements and bright colors. It emphasizes cleanliness and open space, with a focus on usability.
• Fluid UI: A design approach that allows layouts to adapt fluidly across different screen sizes and orientations without fixed breakpoints.
• Focus State: A visual indication that an element, such as a button or form field, is ready to receive input from the user, typically highlighted through borders, color changes, or other effects.
• Friction: Any element of a UI that disrupts the user experience, often causing frustration or confusion. Reducing friction is key to enhancing usability.

G

• GUI (Graphical User Interface): A type of user interface that allows users to interact with electronic devices using graphical icons and visual indicators, as opposed to text-based interfaces.
• Gutters: The spaces between columns in a grid layout that help to separate content visually.
• Ghost Button: A minimal button design that consists only of a border and text, with no solid fill. Ghost buttons are often used for less important actions.

H

• Hamburger Menu: An icon consisting of three horizontal lines that open up into a side menu or navigation drawer, used to save space on the user interface, especially on mobile devices.
• Heat Map: A heat map is a data visualization tool that shows the most interacted parts of a webpage using colors to represent different levels of activity, helping understand user behavior.
• High-Fidelity Prototype: A prototype that closely resembles the final product with detailed visuals and interactions, used for user testing and stakeholder reviews.
• Hotspot: An interactive area on a screen that can be clicked or tapped to trigger an action or navigation. Hotspots are often used in prototypes to simulate interactivity.

I

• Icon: A small graphical representation used to signify actions, objects, or concepts within an interface.
• Input Field: A UI element that allows users to enter text responses into a form or interface.
• Intuitive Design: Design that is easy to use and understand, requiring little to no explanation. Intuitive interfaces align with users’ expectations and experiences, making navigation and interaction seamless.

J

• Justification: The alignment of text within a layout. Options typically include left, right, center, and justified, affecting readability and the overall aesthetic of the text.

K

• Kebab Menu: An icon represented by three vertical dots that opens a menu of additional options.

L

• Landing Page: A standalone web page created specifically for a marketing or advertising campaign, where visitors “land” after clicking on a link in an email or ads from Google, Bing, YouTube, Facebook, Instagram, Twitter, or similar.
• Layout: The arrangement of visual elements on a page. It involves organizing content and navigation in an intuitive and aesthetically pleasing way, guiding users through the interface.
• Liquid Layout: A web design approach where the layout of a webpage expands or contracts to fit the size of the user’s screen, ensuring content remains readable and accessible on any device.
• Loader: A visual indication that content or data is being loaded, often used to improve user experience during wait times.

M

• Modal Window: A pop-up window that appears on top of the main application window, requiring users to interact with it before they can return to the app.
• Mood Board: A visual presentation consisting of images, text, and samples in a composition used to evoke or project a particular style or concept for the UI design.
• Material Design: A design language developed by Google, emphasizing tactile materials, bold graphic design, and meaningful animations to create hierarchy, meaning, and focus.
• Margin: The space around elements, separating them from other elements or the edge of the screen, is crucial for creating breathing space and visually grouping items in a layout.
• Meatball Menu: An icon represented by three horizontal dots used to indicate a menu of additional options, similar to the kebab menu but oriented horizontally.
• Monochrome: A color scheme based on variations of a single hue, often used in UI design to create a cohesive and harmonious look while focusing attention on key elements.

O

• Overlay: A UI element that appears on top of the current content, often used for modal dialogs, alerts, or more detailed content, without taking the user away from the current context.
• Orphan: A single word or short line at the beginning or end of a paragraph that’s separated from the rest of the text, affecting readability and aesthetic harmony in text-heavy UIs.
• Optical Alignment: The adjustment of elements to appear visually aligned based on the human eye’s perception, rather than strictly following geometric alignment, to improve the overall balance and aesthetics.
• Off-Canvas Navigation: A design pattern where the navigation menu is hidden off-screen and only slides into view on demand, commonly used in mobile interfaces to maximize screen space.

P

• Palette: A set of colors chosen to create a cohesive and harmonious visual theme in a user interface, often reflecting brand identity.
• Padding: The space inside an element between the content and its border, affecting the element’s size and the layout’s overall feel.
• Pixel: The smallest unit of a digital image or graphic that can be displayed and edited on a digital display. Pixels are fundamental to screen design and resolution.
• Popover: A non-modal dialog that appears on the screen when a user clicks on an element. It is used to display more information about the element or to provide the user with additional controls and options.
• Progress Bar: A visual indicator of a user’s progress through a set of steps or the loading state of content.

Q

• Quaternary Navigation: A less common level of navigation that’s used for accessing information or features that are not critical to the core user journey but still accessible within the UI.

R

• Radio Buttons: UI elements that allow users to select one option from a set of mutually exclusive options.
• Rollover: A UI interaction where an element (usually a button or link) changes appearance when the mouse pointer hovers over it, providing visual feedback.
• Readability: The ease with which text can be read and understood. In UI, it involves choosing the right font, size, spacing, and color contrast.
• Reusability: The practice of designing UI components and patterns to be used across multiple parts of an application or even across different projects, enhancing consistency and reducing development time.

S

• Scanning Patterns: The predictable paths eyes follow when scanning content, such as the F-pattern or Z-pattern in web design.
• Snackbar: A brief message that appears at the bottom of the screen to provide feedback about an operation, disappearing automatically after a short duration.
• Stepper: A component that guides users through a sequential process, often used in forms or multi-step tasks.
• Style Guide: A set of standards for the design and writing for an organization, covering everything from typography and color to logos and imagery, ensuring consistency across all user interfaces.
• State: The status of a UI element at a specific point in time, such as “hovered,” “focused,” “active,” or “disabled,” each requiring distinct visual representation.

T

• Toggle: A UI element that allows the user to switch between two or more choices, often represented as a switch for turning options on or off.
• Thumb Reachability: Design consideration for the ease of use of mobile interfaces with one hand, focusing on how easily a thumb can reach areas of the screen.

U

• UI (User Interface): The point of interaction between the user and a digital device or product, encompassing everything from screens and touchscreens to keyboards, sounds, and even gestures.
• Usability: The ease of use and learnability of a human-made object. In UI, it refers to how intuitively and efficiently a user can navigate and interact with the interface.
• User Flow: The path taken by a prototypical user on a website or app to complete a task, including a series of steps a user takes from the entry point through to a final interaction.
• UI Kit: A collection of reusable assets, guidelines, and components designed to ensure consistency across a digital product’s interface.
• UI Pattern: A reusable solution to a common design problem, such as navigation, data input, or information display, helping create a consistent user experience.
• UX Design: User Experience Design, which focuses on optimizing the user’s interaction with and experience of a product or service.

V

• Viewport: The user’s visible area of a web page, which varies depending on the device used to access the site.
• Visual Hierarchy: The arrangement or presentation of elements in a way that implies importance, guiding the user’s attention to different parts of the UI based on their significance.
• Visual Weight: The perceived ‘weight’ of a visual element, influenced by its size, color, and density, used to draw attention and improve readability and hierarchy in UI design.

W

• Widget: A small, standalone application or component in a UI that performs a specific function and is often reusable, such as a calendar or weather display.
• Whitespace: Also known as ‘negative space’, the empty space around and between design elements, crucial for a clean, uncluttered UI that improves readability and focus.
• Wayfinding: The information systems that guide people through a physical environment and enhance their understanding and experience of the space; in UI, it refers to guiding users through an interface.
• Web-safe Fonts: Fonts that are widely available across many operating systems and devices, ensuring that text appears consistently in web design.

X

• X-height: The height of the lowercase letters in a typeface, typically exemplified by the letter “x,” which directly impacts readability.