UI-UX Glossary

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

Figma

Figma is a vector graphics editor and prototyping tool that functions as the primary workspace for designing digital products. It allows multiple designers, clients, and developers to work on the same file 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

Tooltips are a form of Microinteraction used to provide brief, helpful information without cluttering the main User Interface (UI). They are common on icons, abbreviated terms, or forms where extra clarity is needed.

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

The Error State is a crucial element of Interaction Design that addresses user mistakes or system failures. Effective error states must be: clear, informative, and actionable.

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.