UI-UX Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Vector Graphic

A Vector Graphic is a digital image created using mathematical formulas—plotting points, lines, curves, and polygons on a 2D coordinate system—rather than a grid of static, colored pixels (which is how raster images like JPEGs and PNGs are built). Because they are driven by math, vector graphics can be scaled infinitely without any loss of resolution or quality.

RGB Color (Red, Green, Blue)

RGB (Red, Green, Blue) is an additive color model used exclusively for digital screens, monitors, and device displays. Unlike CMYK (Cyan, Magenta, Yellow, Key/Black), which is used for physical printing and relies on ink to absorb light, RGB combines different intensities of red, green, and blue light to create a broad spectrum of colors. When all three are mixed at their highest intensity, they create pure white light.

Negative Space (White Space)

Negative Space (often interchangeably called White Space) is the empty area around, between, and inside the subjects of an image, layout, or UI component. It is not necessarily "white"—it simply refers to any space free of text, images, or interactive elements. It is the breathing room that gives a web design structure and balance.

User Research

User Research is the systematic, investigative process of understanding the behaviors, needs, pain points, and motivations of your target audience through observation techniques, task analysis, and feedback methodologies. It relies on both quantitative data (what users are doing, gathered via analytics) and qualitative data (why users are doing it, gathered via interviews and surveys).

User-Centered Design (UCD)

User-Centered Design (UCD) is an iterative design philosophy and process in which the needs, wants, and limitations of the end-user are placed at the absolute center of every phase of the design process. Rather than forcing the user to adapt to the software's limitations or the company's internal goals, the software is engineered to adapt to the user's natural psychology and workflows.

UI Kit (User Interface Kit)

A UI Kit (User Interface Kit) is a comprehensive, pre-designed collection of graphic files and resources—typically built in a tool like Figma—that contains all the structural UI elements needed to design a website or application. It includes standardized buttons, input fields, navigation bars, dropdown menus, checkboxes, typography scales, and color palettes.

Pagination

Pagination is the process of dividing a large dataset or document into discrete, sequential pages. On the web, it is most commonly seen at the bottom of blog archives, e-commerce categories, or search results as a row of numbers (e.g., "Previous | 1 | 2 | 3 | Next"). It allows browsers to load a manageable chunk of content at a time rather than crashing while trying to load 500 items at once.

Omnichannel

Omnichannel refers to a multichannel sales, marketing, and customer support strategy that provides a completely seamless, unified, and integrated user experience. Unlike "multichannel" (where a company might have a website, an app, and an email list that operate in silos), omnichannel ensures that the customer's data, preferences, and brand experience update in real-time across every single touchpoint.

Material Design

Material Design is a comprehensive, open-source design system and visual language created by Google. It relies on the metaphor of physical materials—specifically paper and ink—combined with the magic of digital technology. It dictates strict rules for layout grids, typography, color usage, animations, and the use of "Z-Index" (depth) to create realistic shadows that mimic how light behaves in the real world.

Masonry Layout

A Masonry Layout is a grid-based design style popularized by Pinterest, where items of unequal heights are placed in columns without strict, uniform horizontal rows. Instead of forcing every Card UI or image to be the exact same height, the layout dynamically positions the elements to fill vertical gaps, creating an interlocking, "brick-wall" aesthetic.

Information Design

Information Design is the specialized practice of presenting complex data, text, and statistics in a way that fosters efficient and effective understanding. It sits at the intersection of graphic design, user experience (UX), and data visualization. Its primary goal is not just to make things look "pretty," but to make complex information accessible, scannable, and actionable.

Infinite Scroll

Infinite Scroll is a web interaction technique where new content continuously loads at the bottom of the page as the user scrolls down, completely eliminating the need for traditional "Page 1, 2, 3" Pagination clicks. It is the core interaction model popularized by social media feeds like LinkedIn, Twitter, and Instagram.

GUI (Graphical User Interface)

A GUI (Graphical User Interface) is a visual way for users to interact with computers, software, and websites. Instead of typing complex, text-based commands into a terminal, users interact with a GUI using visual indicators like windows, icons, menus, buttons, and a pointing device (like a mouse or a touchscreen).

Font Weight

Font Weight refers to the thickness or boldness of the strokes that make up a character in a specific font. In web development, font weights are defined by a numerical scale ranging from 100 (Ultra-Light or Hairline) to 900 (Ultra-Black or Heavy), with 400 typically representing "Normal" or "Regular" text and 700 representing standard "Bold."

External Link (Outbound Link)

An External Link (also known as an outbound link) is a hyperlink on your website that points to a completely different domain. For example, if the Flowtrix website links to a case study hosted on Webflow.com, that is an external link. Conversely, if Webflow.com links to Flowtrix, that is an Inbound Link (or Backlink).

Error 404 (Page Not Found)

An Error 404 is a standard HTTP status code indicating that the server could not find the specific webpage requested by the user. This typically happens when a user clicks a broken link, mistypes a URL, or tries to access a page that has been deleted or moved without a proper Redirect in place.

Element Spacing

Element Spacing refers to the intentional use of empty areas—often called White Space or Negative Space—between and around individual UI components (like buttons, paragraphs, images, and sections) on a webpage. In CSS, this is controlled mathematically using Margin (space outside an element) and Padding (space inside an element).

Card UI (Card-Based Design)

Card UI (User Interface) is a design pattern where information is organized into small, rectangular containers that resemble physical playing cards or business cards. Each card typically groups related pieces of information about a single subject—such as an image, a title, a short summary, and a Call to Action (CTA)—making the content easy to digest at a glance.

Zero UI (Invisible User Interface)

Zero UI (Invisible UI) is a design concept where the traditional graphical user interface (screens, buttons, menus) recedes entirely, allowing the user to interact with the software through more natural, human methods such as voice commands, gestures, haptics, or predictive AI automation. It is the transition from users having to learn the software, to the software learning the user.

X-Axis (Horizontal Scrolling)

The X-Axis is the horizontal plane of a webpage (left to right). While standard web browsing relies almost entirely on vertical scrolling (the Y-Axis), the X-Axis is frequently utilized for specific interactive UI components, such as swipeable Carousels, Kanban boards, or horizontal pricing matrices, particularly on touch-enabled mobile devices.

WYSIWYG Editor

WYSIWYG (an acronym for "What You See Is What You Get") refers to a user interface that allows a user to edit text, images, and content in a format that looks exactly like the final output. In web development, it is the standard rich-text editor used inside a CMS (like the Webflow Editor or Google Docs) where bolding a word actually makes it bold on the screen, rather than requiring the user to type HTML tags like <strong>word</strong>.

Z-Index

While the X-Axis is width and the Y-Axis is height, the Z-Index is a CSS property that controls the Z-Axis—the "depth" or stacking order of overlapping elements on a webpage. If two elements overlap, the element with the higher Z-Index value will appear "in front" of or "on top" of the element with the lower Z-Index value.

Y-Axis (Vertical Scrolling)

In web design, the Y-Axis represents the vertical plane of a webpage—the dimension that users navigate by scrolling up or down. Because screen widths (the X-Axis) are physically constrained by the user's device (especially on mobile phones), the Y-Axis is theoretically infinite, serving as the primary canvas for digital storytelling and Information Architecture.

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) are a highly detailed set of technical rules published by the WAI that explain exactly how to make web content accessible to people with disabilities. The guidelines are organized into four core principles—content must be Perceivable, Operable, Understandable, and Robust (POUR)—and are graded on three levels of strictness: A (Minimum), AA (Standard), and AAA (Exceptional).

User Interface (UI)

The User Interface (UI) encompasses the tangible, visual, and interactive elements of a digital product that a human being actually interacts with. It includes the screens, pages, buttons, typography, color schemes, forms, icons, and animations. If UX (User Experience) is the underlying logic and architecture of a house, the UI is the interior design, paint, and furniture.

Social Proof

Social Proof is a psychological phenomenon where people assume the actions, behaviors, or choices of others reflect the "correct" behavior for a given situation. In web design and marketing, social proof refers to using evidence of third-party validation—such as customer testimonials, case studies, partner logos, star ratings, and user metrics—to build trust and influence a prospect's purchasing decision.

Skeleton Screen

A Skeleton Screen is a UI (User Interface) pattern used to improve perceived performance during page load times. Instead of showing a blank white screen or a spinning loading wheel while a web application fetches data, the UI displays a wireframe-like, animated placeholder—often consisting of pulsing gray boxes and lines—that mimics the exact layout of the content that is about to appear.

Scroll Snapping

Scroll Snapping is a native CSS feature that allows developers to control the panning and scrolling behavior of a webpage. Instead of a user's scroll wheel stopping randomly halfway between two sections of content, scroll snapping forces the browser's viewport to "snap" smoothly to specific, predefined points (usually the top or center of a specific section), creating a presentation-like, slide-by-slide experience.

Responsive Web Design

Responsive Web Design (RWD) is the foundational approach to web development that ensures a website's layout, images, and typography automatically adapt, scale, and reorganize themselves to provide an optimal viewing experience across a massive range of devices—from a 4K desktop monitor to a 10-inch tablet and a 4-inch smartphone screen.

Relative Positioning

In CSS, position: relative is a layout property that places an element within the normal flow of the document, but allows developers to manually nudge it slightly (using top, bottom, left, or right values) relative to where it would have normally been. More importantly, it establishes a new coordinate system (a "reference point") for any child elements inside it that use Absolute Positioning.

Positioning (CSS)

Positioning is a fundamental set of CSS properties (static, relative, absolute, fixed, and sticky) that define exactly how an HTML element is placed and manipulated within the browser's document flow. It allows developers to break elements out of the standard top-to-bottom layout, enabling complex, overlapping, and interactive user interfaces.

Favicon

A Favicon (short for "favorite icon") is the tiny, 16x16 or 32x32 pixel image that appears next to your website's title in a browser tab. It also appears in browser bookmark lists, search history, and occasionally in mobile search results. It is typically a simplified version of a company's logo or a distinct brand mark.

Drop Shadow

A Drop Shadow is a CSS visual effect that creates the illusion of a shadow falling behind a specific element (like a button, image, or card) onto the background below it. It is created by off-setting a blurred, semi-transparent color from the element's edges, simulating depth and three-dimensional space on a flat, two-dimensional screen.

Design Thinking

Design Thinking is a non-linear, iterative methodology used to understand users, challenge assumptions, and redefine problems to create innovative solutions. Unlike traditional linear development, it is deeply human-centric and consists of five core phases: Empathize (with your users), Define (their needs and problems), Ideate (create ideas), Prototype (build mockups), and Test.

Dark Mode

Dark Mode is a user interface (UI) setting that shifts the color palette of an application or website to display light text on a dark or black background, as opposed to the traditional "Light Mode" (dark text on a white background). It can be implemented as a user-toggled switch or automatically detect the user's operating system preferences.

Contrast Ratio

In web design, the Contrast Ratio is a mathematical measurement of the difference in perceived luminance (brightness) between two colors—typically the color of the text (foreground) and the color of the background it sits on. The ratio ranges from 1:1 (e.g., white text on a white background, which is invisible) to 21:1 (black text on a white background, the highest possible contrast).

Carousel (Slider)

A Carousel (often called a Slider) is an interactive UI component that displays a series of content items—like images, customer testimonials, or partner logos—one at a time within the same physical space on the screen. Users can navigate through the items using arrows, swipe gestures, or pagination dots.

Burger Menu (Hamburger Icon)

The Burger Menu (or Hamburger Menu) is an iconic user interface element consisting of three parallel horizontal lines (☰) used to represent a hidden navigation menu. Clicking or tapping the icon typically triggers a slide-out drawer, a full-screen overlay, or a dropdown containing the site's primary links. It has become the universal standard for hiding complex navigation on smaller screens.

Breadcrumbs

Breadcrumbs are a secondary navigation scheme that reveals the user's current location within a website's hierarchy. Usually displayed horizontally near the top of a page (e.g., Home > Resources > Case Studies > Enterprise SaaS), they provide a clickable trail that allows users to easily navigate back to higher-level categories without relying on the browser's "back" button.

B2B SaaS Design

B2B (Business-to-Business) SaaS (Software as a Service) Design is a highly specialized discipline of web and product design focused on software sold to other businesses. Unlike B2C (Business-to-Consumer) e-commerce sites which rely on emotion and impulse buys, B2B SaaS design is optimized for complex buying cycles, logic-driven decision-making, clear articulation of technical value propositions, and generating highly qualified sales leads.

Baseline Grid

A Baseline Grid is an invisible framework used in typography and layout design to ensure vertical rhythm and alignment across a webpage. Imagine the lined paper you used in school—the baseline is the invisible line upon which the bottom of most letters sit. A baseline grid ensures that the line height, margins, and padding of all text elements (from massive H1 headers to tiny footer links) align to a consistent mathematical increment, typically 4px or 8px.

Aspect Ratio

Aspect Ratio is the proportional relationship between the width and height of an image, video, or UI element. It is expressed as two numbers separated by a colon (e.g., 16:9, 4:3, or 1:1).

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes are specialized HTML codes added to a website's markup to make web content and web applications more accessible to people with disabilities.

Anchor Link

An Anchor Link is a type of hyperlink that, when clicked, immediately scrolls the user to a specific section on the same webpage, rather than taking them to a completely different URL. It is created by assigning a unique ID to a page section and linking to that ID (e.g., #pricing-section).

Alt Text (Alternative Text)

Alt Text (Alternative Text) is a brief, written description of an image on a webpage. This text does not appear visually on the page itself but is embedded in the HTML code and is read by screen readers or displayed if the image fails to load.

Above the Fold

"Above the fold" is a term originally from the newspaper industry that now refers to the portion of a webpage that is visible in a browser window when it first loads, before the user scrolls down. It is the very first impression your website makes.

Figma

Figma is a cloud-based, collaborative interface design tool. It has become the undisputed global standard for designing websites, mobile apps, and user interfaces. Unlike legacy software that lived on a single designer's hard drive, Figma operates in the browser, allowing multiple designers, developers, and clients to view and edit the same file simultaneously in real-time.

Zoom Interaction

Zoom Interaction allows users to enlarge the view of a webpage. This includes: browser zoom and UI zoom.

Zero-State Design

The Zero-State is a critical UI/UX Design opportunity often found in SaaS Dashboards or personalized areas. It must be designed to: explain, educate and guide.

Z-Pattern Layout

The Z-Pattern Layout is a model for organizing content on a simple, typically single-page or low-content website. It is an effective framework for ensuring key elements align with the user's natural Visual Hierarchy and User Flow.

XD (Adobe XD)

XD is one of the industry-standard tools for UI/UX Design, performing functions similar to Figma.

Wireframe

A Wireframe is the schematic blueprint of a page, intentionally stripped of color, images, and visual styling (Color Theory, Typography). It focuses solely on: structure, content hierarchy, and functionality.

Widget

A Widget is a compact element designed to provide utility or functionality. They are often third-party tools embedded onto a Webflow site.

White Space

White Space is the deliberate use of empty space that gives content "room to breathe." It is not necessarily white; it can be any background color, image, or pattern. It is controlled primarily by CSS properties like Margin & Padding.

Visual Hierarchy

Visual Hierarchy uses design elements to signal to the user what they should look at first, second, and so on. It is a fundamental technique in UX Design and relies on size, scale, color, contrast, spacing and typography.

Viewport

The Viewport is the physical window through which the user views the website. It is the core concept that drives Responsive Design.

Video Background

A Video Background is a high-impact element often used to showcase a product in action or to immediately convey the energy of a brand.

Upload Field

An Upload Field is a specialized type of Input Field used in Lead Forms or application forms (e.g., uploading a resume or a logo). Due to the complexity and size of files, it requires robust handling.

Typography

Typography defines the entire textual aesthetic of a website. It is a critical component of the Style Guide and Design System, governing rules for: font choice, hierarchy, and spacing.

Tooltip

A Tooltip is a common graphical UI element. It is a brief, informative, floating message that appears when a user hovers their cursor over, focuses on, or clicks an item (such as an icon, a link, or a piece of text) on a webpage. Once the user moves their mouse away, the tooltip disappears.

Sticky Navigation

Sticky Navigation keeps the most crucial navigation links and the primary CTA (Call to Action) accessible at all times, regardless of where the user is on the page.

Responsive Design

Responsive Design ensures a single codebase adapts fluidly to all Viewports, from large desktop monitors to small smartphones. It is achieved through flexible Layout Grids, fluid images (Object Fit), and CSS (Cascading Style Sheets) media queries that apply specific styles based on screen size.

Quick View (Ecommerce)

The Quick View feature is designed to reduce friction and speed up the browsing experience in an Ecommerce store. It is a type of Overlay triggered by a button on a product listing card.

Prototype

A Prototype is the clickable model of the website created in tools like Figma. It falls on a spectrum from low-fidelity (Wireframe) to High-Fidelity Prototype. It's crucial for validating the design and User Flow before the Webflow build begins.

Pixel Perfect

Pixel Perfect is a term used to define the highest quality standard for Frontend Development. It confirms the coded Webflow site adheres precisely to the original Figma Mockup or High-Fidelity Prototype in terms of: spacing, tyography, and aligne

Overlays

Overlays are used to draw the user's attention to a specific task, message, or content, effectively separating it from the main page. Common types include: modals, full screen navigation, and image light boxes.

Onboarding Flow

The Onboarding Flow is the dedicated set of screens, tutorials, or emails designed to guide a user from the point of sign-up to achieving their first success (the "Aha moment") with the product. For SaaS companies, this flow is critical for preventing early churn.

Navbar

A Navbar is synonymous with the Navigation Menu and is one of the most visible and important components of the entire User Interface (UI).

Motion Design

Motion Design is the purposeful application of Animation to enhance the narrative, structure, and aesthetics of a website. It is used for, transitions between pages or Sections, complex Lottie Animations to explain product features, guiding the user's eye to the primary CTA (Call to Action), and setting the visual pacing and rhythm of the User Flow.

Mockup

A Mockup is a refined stage in the design process, falling between a low-fidelity Wireframe and a fully interactive High-Fidelity Prototype. It is typically created in Figma and used for client approval of the look and feel before interactivity is added.

Mobile Responsiveness

Mobile Responsiveness is essential for all modern websites, as a majority of traffic often comes from mobile devices. It is achieved primarily through flexible CSS (Cascading Style Sheets) and the use of a fluid Layout Grid.

Microinteractions

Microinteractions are the subtle details that make a user interface feel alive and polished. They consist of: triggers, rules, feedback, and modes.

Lottie Animation

Lottie Animations are high-quality, scalable vector animations that are vastly more lightweight and efficient than traditional GIFs or MP4 videos.

Loading Animation

A Loading Animation is a form of Microinteraction used when a system needs a few moments to complete a task, such as fetching Dynamic Content via an API call, or during the initial page load.

Layout Grid

The Layout Grid provides the underlying structure for a design, ensuring all content blocks, images, and text align predictably. It is typically defined early in the Figma phase using a 12-column structure and is carried through to the Webflow build using CSS flexbox or grid properties.

Jitter (in animation)

Jitter is the visual symptom of the browser struggling to render visual changes at a consistent frame rate (ideally 60 frames per second). It's caused when the JavaScript or CSS used for Animation is computationally expensive or forces the browser to frequently recalculate the layout (known as Reflow or layout thrashing).

Interaction Design

Interaction Design focuses on how a user engages with the interface. It governs the response and feedback the system provides to user actions. Key elements include: micro-interactions, animations, hover effects, and transitions.

Input Field

Input Fields are the core components of any Lead Form, search bar, or user sign-up area. Their design and behavior are critical to the overall User Experience (UX). Key considerations include: labeling, placeholder text, error states, and button states.

Iconography

Iconography involves the design and consistent application of icons. Icons must be instantly recognizable and maintain visual consistency with the overall Brand Identity and Design System.

High-Fidelity Prototype

A High-Fidelity Prototype is the final output of the design phase, typically created in Figma. Unlike a low-fidelity Wireframe, it includes all the final elements.

Hero Section

The Hero Section is the first content users see when they land on a page, before scrolling. Its primary purpose is to clearly answer: "What is this site about, and what should I do next?" It typically contains: headline, supporting text, visuals, and primary CTA.

Header

The Header (or site-wide global navigation) is the most critical element for site orientation and often includes the primary means for a user to move between pages. A well-designed header ensures: brand identity, navigation menu, CTAs, and sticky navigation.

Grid System

A Grid System provides designers and developers with a set of invisible columns and rows that all page elements adhere to. Common grids include 12-column systems, which offer maximum flexibility for different layouts.

Gestalt Principles

These principles explain how the brain groups elements. Designers leverage them to create clear Visual Hierarchy and intuitive User Interfaces (UI). Key principles include: proximity, similarity, and closure.

Footer Design

The Footer serves as a final opportunity to guide the user before they leave the page. A good Footer Design is functional, not just decorative, and often includes: secondary navigation, legal links, social proof, and accessibility/

Error State

An Error State is a specific UI (User Interface) condition designed to visually communicate to a user that an action they attempted has failed. This usually occurs during data entry—such as typing an invalid email format into a Lead Form, using an incorrect password on a login screen, or trying to upload a file that is too large.

Dropdown Menu

Dropdown Menus are commonly used within the main Navigation Menu (Navbar) or as interactive fields in a Lead Form. They save screen space by hiding secondary options until needed.

Data Visualization

Data Visualization is the practice of translating raw, complex data into easily digestible visual elements.

Dashboard

A Dashboard presents essential data, progress tracking, and access to core functionality (like settings or reports) in an easily digestible format. For SaaS companies, this is typically the private, logged-in area where users manage their accounts and use the product's features.

Color Theory

Color Theory is the study of how colors interact and how they affect human perception. In UI/UX design, it defines the rules for creating a site's palette, including: primary colors, secondary colors, accent colors, and contrast.

Accessibility

Accessibility refers to removing barriers that prevent people with disabilities from interacting with a website. This includes users with visual, auditory, cognitive, and motor impairments. Adherence to web accessibility relies on meeting the standards set by the Web Content Accessibility Guidelines (WCAG).

Animation

Animation refers to the visual effects and motion applied to website elements. This ranges from subtle Microinteractions (like a button color change on hover) to complex Scroll Animations (like Parallax Scrolling) or full-screen Lottie Animations.

Footer

The Footer is the structural section located at the very bottom of a webpage. Unlike the main body content which changes from page to page, the footer is a "global" component that appears consistently across the entire website. It serves as a secondary navigation hub and a repository for essential, but lower-priority, information.

F-Pattern Layout

The F-Pattern is a design concept based on eye-tracking studies that reveals how users naturally consume content on web pages. Instead of reading every word line-by-line, users typically scan horizontally across the top part of the screen, move down the page slightly, read across a shorter horizontal line, and then scan vertically down the left side of the text—forming a shape that resembles the letter "F".