Design 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.

Template (Web Template)

A Web Template is a pre-designed, pre-coded webpage or set of HTML webpages that anyone can purchase or download. The underlying structure, CSS grid, and interaction design are already built; the end-user simply "plugs in" their own text, images, and brand colors.

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.

Leading (Line Height)

Leading (pronounced "ledding," originating from the strips of lead used in old printing presses), known in web development as "Line Height," is the vertical distance between the baselines of successive lines of text. In CSS, the line-height property dictates how much vertical "breathing room" exists within a paragraph.

JPEG (Joint Photographic Experts Group)

JPEG is one of the oldest and most widely used image file formats on the internet. It uses "lossy compression," meaning it drastically reduces file size by permanently discarding some of the image's hidden color data. It is highly optimized for complex, multi-color photographs, but it does not support transparent backgrounds (unlike PNG or SVG).

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.

HEX Code

A HEX (Hexadecimal) Code is a six-digit alphanumeric combination used in web design and development to specify colors precisely on a screen. Based on the RGB (Red, Green, Blue) color model, the code starts with a hashtag (#) followed by three pairs of characters (ranging from 00 to FF) that dictate the intensity of red, green, and blue light mixed together to create the final color (e.g., #FFFFFF is pure white, #000000 is pure black).

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."

Font Family

A Font Family (often used interchangeably with "Typeface") is a set of related fonts that share common design characteristics and stylistic DNA, but vary in weight, slant, or width. For example, "Inter" is a font family, while "Inter Bold Italic" is a specific font within that family.

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.

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.

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 Handoff

The Design Handoff is the critical phase in a project lifecycle where the finished, approved visual designs (usually in Figma) are transferred to the development team to be built into a functioning website (in Webflow or code). It represents the bridge between how a site looks and how a site works.

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).

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).

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.

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.

Y-Axis Alignment

Y-Axis Alignment is a fundamental layout principle controlled by CSS (Cascading Style Sheets). It dictates the precise vertical positioning of elements within a container.

X-Height (Typography)

X-Height is a micro-detail in Typography that strongly influences the legibility of body text. A typeface with a large x-height means the lowercase letters take up more vertical space, making the font look larger and often easier to read at small sizes.

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.

Web Animation

Web Animation is a broad term covering Transitions, Scroll Animation, Motion Design, and scripted Animation using JavaScript or libraries like Lottie Animation.

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.

UX (User Experience)

UX is a strategic discipline that focuses on how a user feels and what they can accomplish while using a website. Unlike UI (the look), UX is the feel and functionality. Key considerations include: usability, IA, user flow, and website accessibility.

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.

Style Guide

A Style Guide is a crucial part of a larger Design System. It acts as a reference document that defines the specific rules for: typography, button states, color theory, and copywriting.

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.

Section

A Section is the large container that divides a webpage into digestible parts, such as the Hero Section, a "Features" section, or a "Testimonials" section.

Reusable Components

Reusable Components are the building blocks of Modular Design and the coded realization of a Component Library. They are built once and then dropped onto any number of pages or templates across the site.

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.

Parallax Scrolling

Parallax Scrolling is a popular type of Scroll Animation used to add visual interest and sophistication to a website, often in the Hero Section or between key sections. It is a form of Motion Design that, when used subtly, can be highly engaging.

Padding

Padding is one of the two main properties (the other being Margin & Padding) used to control the visual spacing on a web page. Unlike margin (external space), padding is internal space that affects the size of the element's background or clickable area.

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.

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.

Modular Design

Modular Design is the application of the Component Library and Atomic Design principles to the entire website structure. Instead of building pages from scratch, developers build them by snapping together pre-designed and pre-coded modules (Sections, components, and organisms).

Margin & Padding

These two CSS properties are essential for achieving control over the Layout Grid and Visual Hierarchy: padding and margins.

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.

Kerning (Typography)

Kerning is a micro-level detail in Typography that addresses the awkward gaps that can occur between certain letter pairs (e.g., 'W' and 'A', or 'T' and 'o').

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.

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.

Graphic Design

Graphic Design is the art and practice of planning and projecting ideas and experiences with visual and textual content (e.g., logos, illustrations, product imagery).

Gradient

Gradients are a staple of modern web design, adding a sense of dimension that flat colors lack. They can be applied to backgrounds, buttons, text, and other elements.

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/

Design System

A Design System is more than a simple Style Guide; it is the single source of truth for the entire interface. It is typically housed in Figma (design files) and implemented in Webflow (code structure). It defines rules for: brand identity and component library.

Component Library

A Component Library is the heart of a Design System, containing all the modular parts used to construct the interface. These components are fully defined in Figma (design specs) and built as Reusable Components in Webflow (coded elements).

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.

CTA (Call to Action)

A Call to Action (CTA) is a button, link, or graphic element designed to guide the user toward the primary business goal of the page. For a B2B or SaaS site, typical CTAs include 'Book a Demo,' 'Start Free Trial,' or 'Download Ebook.'

Brand Identity

Brand Identity is the tangible expression of a company's values, message, and personality. It is established and enforced through a Design System that details usage guidelines for: typography, color theory, iconography, and tone of voice.

Atomic Design

Coined by Brad Frost, this methodology uses the metaphor of chemistry to organize a Design System into hierarchical components: Atoms, Molecules, Organisms, Templates, and Pages.

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.