The Index
112 entries
Every term, in
one calm place
112 foundational concepts across UX, UI, product, research, strategy, and visual design. Search or filter to find your way.
112 Entries
A/B Testing
A/B testing is an experiment that compares two versions of something by showing each to different users and measuring which performs better.
Accessibility
Accessibility (often shortened to a11y) is the practice of designing products that people with disabilities can perceive, understand, and use.
Accordion
An accordion is a stack of sections that each expand to reveal content and collapse to hide it. Several sections can often be open at once.
Affordance
An affordance is a property of an object that suggests how it can be used. A button looks pressable; a slider looks draggable.
Alpha (Transparency)
Alpha is the transparency component of a color, separate from its hue. Full alpha is fully opaque, while lower alpha lets the surface behind show through.
Asymmetry
Asymmetry is a layout where elements are intentionally unequal in placement, size, or weight. It balances a composition through contrast rather than mirroring.
Atomic Design
Atomic design is a methodology for building interfaces from the smallest pieces up: atoms, molecules, organisms, templates, and pages.
Badge
A badge is a small label attached to another element, often showing a count or status, that conveys information at a glance.
Border Radius
Border radius is the amount of rounding applied to a corner, from a sharp right angle to a soft curve. A larger radius means a rounder corner.
Breadcrumb
A breadcrumb is a small trail of links showing where the current page sits within a site or app's hierarchy. Each step usually links back to a higher level.
Breakpoint
A breakpoint is the screen width at which a layout changes to fit the space better. Below it the design might stack into one column; above it, it might spread into several.
Button
A button is a clickable element that triggers an action, such as submitting a form, saving changes, or moving to the next step.
Call to Action
A call to action (CTA) is the element — usually a button — that prompts the user to take a specific, desired step.
Card
A card is a contained surface, usually with a background, border, or shadow, that groups related pieces of content into a single unit.
Card Sorting
Card sorting is a research method where users group and label topics to reveal how they expect content to be organized.
Carousel
A carousel is a row of items that scrolls horizontally, showing a few at a time while the rest sit off-screen.
Churn
Churn is the share of users who stop using a product over a given period. It is the inverse of retention: the people who leave rather than the people who stay.
Cognitive Load
Cognitive load is the amount of mental effort required to use an interface or complete a task.
Color Space
A color space is the defined range of colors a medium or file can describe. sRGB is the long-standing standard for screens, while P3 is a wider space that looks more vivid on modern displays.
Color Theory
Color theory is the set of principles for combining colors to create harmony, contrast, and meaning.
Color-Only State
A color-only state is when an interface uses color as the single signal for meaning, such as a field turning red to indicate an error. Anyone who cannot perceive that color difference misses the message entirely.
Component
A component is a reusable, self-contained interface building block — a button, input, card, or menu — used across a product.
Confirmation Dialog
A confirmation dialog is a prompt that appears before a destructive or irreversible action, asking the person to approve it. It adds a deliberate pause so serious actions are not triggered by accident.
Contrast
Contrast is the visible difference between elements — in color, size, weight, or shape — that makes them distinguishable.
Conversion Rate
Conversion rate is the share of visitors who complete a desired action, like making a purchase or creating an account. It is usually written as a percentage of everyone who had the chance to act.
Dark Mode
Dark mode is an interface built on dark surfaces with light text and elements. It is offered as an alternative to the traditional light, paper-like background.
Design Critique
A design critique is a structured session where designers share work and gather focused, constructive feedback.
Design System
A design system is a shared set of reusable components, patterns, and guidelines that keep a product consistent and faster to build.
Design Thinking
Design thinking is a human-centered, iterative approach to problem-solving: empathize, define, ideate, prototype, and test.
Design Token
A design token is a named value for a design decision — like a color, spacing unit, or font size — stored in one place and reused everywhere.
Double Diamond
The Double Diamond is a design process model with two phases — finding the right problem, then finding the right solution — each involving divergent and convergent thinking.
Duration
Duration is how long an animation takes from start to finish, usually measured in milliseconds. It sets the pace of an interface's motion.
Easing
Easing is the way an animation speeds up or slows down rather than moving at a constant rate. It shapes how natural a motion feels.
Empty State
An empty state is what a screen shows when there's no content yet — before a user has added data or when results are absent.
Error State
An error state is what the interface shows when something goes wrong — invalid input, a failed action, or a missing page.
Feedback
Feedback is the system's response that confirms an action has been received and tells the user what happened.
Fidelity
Fidelity is the level of detail and realism in a design artifact, from rough low-fidelity sketches to polished high-fidelity mockups.
Flat Design
Flat design is a minimal visual style that avoids realistic effects like shadows and gradients in favor of simple shapes and solid colors.
Focus State
A focus state is the visible indicator showing which element currently has keyboard focus, often drawn as an outline or ring. It tells people using a keyboard where they are on the page.
Front-Loading
Front-loading means putting the most important word or idea first, because people scan interfaces rather than read them word by word. The key information lands before attention drifts.
Funnel
A funnel is the sequence of steps users move through toward a single goal, such as signing up or buying something. It is called a funnel because fewer people remain at each step than the one before.
Gestalt Principles
Gestalt principles describe how people naturally perceive groups and patterns — seeing the whole rather than separate parts.
Gradient
A gradient is a smooth transition between two or more colors across a shape or background. It can run in any direction or radiate out from a point.
Grid System
A grid system is an invisible framework of columns and rows used to align and organize content consistently.
Handoff
Handoff is the point where a finished design moves to engineering to be built. It covers the specs, assets, and shared understanding the developer needs to turn a layout into a working product.
Heatmap
A heatmap is a visualization that uses color to show where users click, tap, or scroll on a page, with warmer colors marking heavier activity. It aggregates many sessions into one picture of attention.
Heuristic Evaluation
A heuristic evaluation is a review where experts inspect an interface against a set of established usability principles to find problems.
Hover State
A hover state is the visual change an element shows when the cursor moves over it, such as a button shifting color or an underline appearing on a link. It signals that the element can be interacted with.
Information Architecture
Information architecture (IA) is the practice of organizing, structuring, and labeling content so people can find what they need and understand where they are.
Input
An input is a field where a person types information, such as a name, email address, or search term.
Jobs to Be Done
Jobs to Be Done (JTBD) is a framework that frames products around the underlying 'job' a customer is hiring them to accomplish.
Journey Map
A journey map is a visualization of the steps, thoughts, and emotions a person experiences while trying to accomplish a goal with a product or service.
Kerning
Kerning is the adjustment of space between two specific letters to make their pairing look even. It is done pair by pair, not across a whole word.
Layout Shift
A layout shift is when elements jump or move unexpectedly while a page is still loading. Content that has already appeared gets pushed around as more arrives.
Leading
Leading is the vertical space between lines of text, measured from one baseline to the next. It controls how open or compact a paragraph feels.
Line Length
Line length is how wide a column of text runs before it wraps to the next line. It is often measured in characters per line rather than pixels.
Mental Model
A mental model is the internal belief a person holds about how something works, based on past experience.
Microcopy
Microcopy is the small, functional text scattered through an interface — button labels, error messages, placeholders, tooltips, and confirmation lines. It is the writing that guides a single action rather than explaining a whole page.
Microinteraction
A microinteraction is a small, contained moment of interaction — a single animation, toggle, or response to a user action.
Minimum Viable Product
A minimum viable product (MVP) is the simplest version of a product that delivers real value and can be released to learn from users.
Modal
A modal is a window that appears on top of the main content and requires the user to interact with it before returning.
Moodboard
A moodboard is a curated collection of visual references — images, colors, type, and textures — gathered to explore or communicate a possible design direction. It captures a feeling before any real design work begins.
Navigation
Navigation is the system of menus, links, and controls that lets people move through a product and understand where they are.
Net Promoter Score
Net Promoter Score, or NPS, measures how likely users are to recommend a product by asking them to rate it from 0 to 10. The answers are grouped into promoters, passives, and detractors to produce a single score.
North Star Metric
A North Star metric is the single measure that best captures the core value a product delivers to its users.
Onboarding
Onboarding is the experience that helps new users understand a product and reach their first moment of value.
Optical Center
The optical center is where something looks centered to the eye, which is often slightly different from where it sits mathematically. Our perception, not the ruler, decides whether placement feels balanced.
Optimistic Update
An optimistic update is when the interface shows the result of an action immediately, before the server has confirmed it succeeded. It assumes the request will work and updates the screen right away.
Pattern Library
A pattern library is a documented collection of reusable solutions to common design problems, like forms, search, or pagination.
Persona
A persona is a fictional but research-based profile representing a key type of user, with goals, needs, and behaviors.
Placeholder
A placeholder is the faint hint text inside an input field that disappears the moment someone starts typing. It usually shows an example of the expected value or a short prompt.
Popover
A popover is a small overlay anchored to an element, usually opened by a click, that can hold richer content including links and buttons.
Progressive Disclosure
Progressive disclosure is a technique of showing only the most important options first and revealing advanced ones as needed.
Prototype
A prototype is an interactive, clickable model of a product used to simulate the experience before it is fully built.
Reduced Motion
Reduced motion is a system setting where a user asks for less animation across their device. Interfaces can detect this preference and tone their motion down in response.
Responsive Design
Responsive design is an approach where layouts adapt fluidly to different screen sizes and devices.
Retention
Retention measures how many users come back to a product after their first visit or purchase. It tracks whether people stay over time rather than just showing up once.
Saturation
Saturation is how vivid or muted a color is. A fully saturated color is at its most intense; reducing saturation moves it toward grey.
Screen Reader
A screen reader is software that reads interface content aloud, letting blind and low-vision people use a device by listening instead of looking. It also lets users navigate by headings, links, and other landmarks.
Semantic HTML
Semantic HTML means using the HTML element that matches the meaning of your content, such as a button for an action or a heading for a section title. The element communicates purpose, not just appearance.
Sentence Case
Sentence case means capitalizing only the first word and any proper nouns, the way you would write an ordinary sentence. "Save changes" rather than "Save Changes."
Session Recording
A session recording is a replay of one user's journey through a product, capturing their clicks, scrolling, and movements as a video. It lets you watch a single real visit unfold.
Sidebar
A sidebar is a navigation panel anchored to the left or right edge of the screen that stays in place as the main content changes.
Signifier
A signifier is a visible cue that tells people where and how to act — an arrow, a label, an underline on a link.
Skeleton
A skeleton is a placeholder shown while content loads, using simple gray shapes that mirror the layout of the content to come.
Skeuomorphism
Skeuomorphism is a style where digital elements imitate their real-world counterparts in look and texture.
Skip Link
A skip link is a hidden link, usually first on the page, that jumps straight to the main content. It becomes visible when it receives keyboard focus.
Source of Truth
A source of truth is the single, agreed-upon place a team turns to for a design decision, so there is no debate about which version is correct. Traditionally this is a Figma file; increasingly it is the codebase itself.
Stagger
Stagger is animating a group of items one after another with a small delay between each, rather than all at once. The items appear in quick succession, like a ripple.
Stroke Weight
Stroke weight is how thick the lines of an icon or letterform are. It is measured by the width of the stroke, much like the nib of a pen.
Style Guide
A style guide is a reference that documents the visual and content rules of a brand or product — colors, typography, tone, and usage.
Tabs
Tabs are a set of labeled controls that let people switch between related views shown in the same area of the screen. Only one view is visible at a time.
Tag
A tag is a standalone label that categorizes or describes a piece of content, and is often selectable or removable.
Toast
A toast is a small, temporary notification that appears briefly to confirm an action or share a quick update, then dismisses itself.
Tooltip
A tooltip is a small label that appears when someone hovers over or focuses an element, offering a brief explanation or hint.
Touch Target
A touch target is the area of an interactive element that responds to a tap. It can be larger than the visible icon or text it surrounds.
Tracking
Tracking is letter-spacing applied evenly across a word, line, or block of text. It opens up or tightens the overall spacing without targeting any single pair.
Type Scale
A type scale is a predetermined set of font sizes that are designed to work together. The sizes usually follow a consistent ratio, like each step being 1.25 times the last.
Typography
Typography is the art of arranging type — choosing typefaces, sizes, spacing, and line lengths — to make text readable and expressive.
Usability
Usability is how easily and effectively people can use a product to achieve their goals.
Usability Testing
Usability testing is watching real people attempt tasks with a product to discover where they struggle and succeed.
User Flow
A user flow is the path a person takes through a product to complete a task, from entry point to goal.
User Research
User research is the practice of studying people's needs, behaviors, and motivations to inform design decisions.
Value Proposition
A value proposition is a clear statement of the benefit a product offers, who it's for, and why it's better than the alternatives.
Visual Hierarchy
Visual hierarchy is the arrangement of elements to show their order of importance and guide the eye through a layout.
Visual Language
A visual language is the cohesive set of decisions about color, type, shape, motion, and tone that makes a product recognizable. It is the look and feel that holds steady across every screen and touchpoint.
Voice & Tone
Voice is a product's consistent personality in writing — the traits that stay the same everywhere. Tone is how that voice adapts to the moment, shifting with the user's situation.
Wayfinding
Wayfinding is the practice of helping people understand where they are in a product, where they can go next, and how to get back. It borrows from how signage guides us through airports and buildings.
WCAG
WCAG, the Web Content Accessibility Guidelines, is the widely used standard for making digital content usable by people with disabilities. It covers contrast, keyboard access, text alternatives, and much more.
White Space
White space (or negative space) is the empty area around and between elements. It need not be white.
Widows & Orphans
A widow is a lone word or short line left at the end of a paragraph. An orphan is a single line stranded at the top of a column or page, cut off from the rest of its paragraph.
Wireframe
A wireframe is a low-detail visual outline of a screen, showing structure and layout without colors, styling, or final content.