Design Glossary

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

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.