Design Glossary

Comparing two versions of a design or feature to see which performs better.

Designing products and interfaces usable by people with varying abilities (e.g., vision, motor, cognitive).

A structure that assistive tech (like screen readers) uses to interpret and convey interface elements to users.

Creating distinct layouts tailored for specific screen sizes rather than using one responsive layout.

Arranging elements so their edges or centers line up, promoting order and unity.

The proportional relationship between width and height of an image or screen (e.g., 16:9).

A methodology breaking UIs into basic building blocks (atoms, molecules, organisms) for consistency and scalability.

The visual distribution of elements in a layout; can be symmetrical, asymmetrical, or radial.

The imaginary line on which most letters sit in typography.

Releasing a nearly finished product to a select user group to gather final feedback before full launch.

The collection of visual and verbal elements (logo, color palette, voice) that convey a brand’s essence.

A secondary, hierarchical navigation system showing users their location in a site (e.g., Home > Category > Product).

A subtractive color model (Cyan, Magenta, Yellow, Key/Black) used in printing.

A prompt (e.g., “Sign Up,” “Buy Now”) encouraging users to take a specific action.

A method of organizing content into categories based on how real users group items.

The path a user takes through a website or app, recorded for analyzing behavior and flow.

The mental effort required for a user to understand and interact with a system.

Evaluating usability by stepping through tasks as if you’re the user, pinpointing potential confusion.

Principles that guide the choice and combination of colors for aesthetic and functional appeal.

Studying rival products/services to identify strengths, weaknesses, opportunities, and threats.

The arrangement or placement of visual elements in a design or layout.

Planning the creation, publication, and governance of useful, usable content that aligns with user and business goals.

The degree of difference in color, tone, or shape between elements, improving readability and hierarchy.

The percentage of users who complete a desired action (sign-up, purchase) compared to the total who visited a page or screen.

Deceptive UI tactics that trick or manipulate users into actions they may not otherwise have taken.

Presenting data in charts, graphs, or infographics to make information clear and actionable.

Unexpected, pleasant touches in a design that exceed user expectations and create positive emotions.

A short, time-boxed process (popularized by Google) to ideate, prototype, and test solutions within days.

An iterative, user-centric approach to problem-solving that emphasizes empathy, ideation, and experimentation.

A four-stage design framework (Discover, Define, Develop, Deliver) from the UK Design Council.

Focusing on crafting interfaces or products that elicit positive emotions and brand loyalty.

A tool capturing what users say, think, feel, and do, aiding in understanding user perspectives.

Observing and interviewing users in their natural environments to uncover in-depth behavioral insights.

Predicts the time to move to a target area (like a button) based on the target’s distance and size.

A minimalistic style emphasizing simple shapes, flat colors, and minimal gradients or shadows.

A moderated discussion with a selected group to gather qualitative insights on a product or concept.

A typeface is a family (e.g., Helvetica), while a font is a specific style/weight (e.g., Helvetica Bold, 12pt).

Anything in the user journey that causes difficulty, confusion, or slows progression toward a goal.

Psychological theories describing how humans organize visual information into groups or wholes (e.g., similarity, proximity).

The craft of visual communication through typography, imagery, color, and layout.

Quick, low-cost usability testing conducted in informal settings (like coffee shops) to gather immediate feedback.

A visual representation (often color-coded) showing where users click or hover most on a page.

Experts reviewing a product against established usability principles (like Nielsen’s heuristics).

Use of icons and symbols to communicate meaning quickly and universally.

Structuring and organizing content so users can easily find and understand information.

Clues (like link labels or icons) indicating what users will find when following a link or exploring a section.

The total mental and physical effort required for a user to complete a task.

A cyclic process of prototyping, testing, analyzing, and refining a product based on feedback.

User stories focusing on context and motivation: “When I ___, I want to ___, so I can ___.”

A visual representation of the steps and emotions a user experiences when interacting with a product or service.

A quantifiable metric (e.g., conversion rate, churn) used to measure success against specific objectives.

Adjusting the space between individual characters in typography to achieve a visually pleasing result.

A system of rows, columns, and margins to organize and align design elements consistently.

The vertical space between lines of text, affecting readability and overall aesthetics.

A user experience approach emphasizing rapid, iterative testing and collaboration, aligning with Agile development.

The simplest version of a product that can be released to users for early feedback and validation.

Google’s design framework emphasizing grid-based layouts, responsive animations, and depth effects.

Small, concise text (e.g., tooltips, error messages) guiding or informing users within an interface.

Subtle, contained product moments (like a “like” button toggle) enhancing feedback and delight.

A product release that not only functions but also offers enough delight to satisfy early adopters.

A collage of visuals (images, colors, fonts) that establish the style and emotional tone for a project.

The empty space around or between elements, improving clarity and focus.

A set of 10 general usability principles (e.g., error prevention, visibility of system status) that guide UI design evaluation.

The initial process guiding and familiarizing new users with a product’s features and benefits.

A series of screens or steps specifically structured to introduce and teach users how to use key product features.

Specific problems or frustrations users face when trying to achieve their goals.

A standardized color matching system used for consistent color reproduction in print.

Creating low-fidelity sketches on paper to quickly test and refine ideas before digital prototyping.

A curated collection of reusable design components (e.g., buttons, forms) ensuring consistency across a product.

A fictional, yet data-driven, archetype of a target user representing demographics, goals, and pain points.

Gradually revealing information or options to reduce cognitive load and interface clutter.

An interactive model of a design or product used for testing and gathering feedback before final implementation.

Grouping related items and separating unrelated ones to improve scannability and hierarchy.

Processes ensuring products meet quality standards and function as expected (e.g., bug checks, usability evaluations).

Collecting and analyzing numerical data (e.g., surveys, analytics) to identify trends or correlations in user behavior.

An additive color model (Red, Green, Blue) used for screens and digital displays.

Quickly creating and iterating prototypes to gather immediate user feedback in early design stages.

Pixel-based images (e.g., JPEG, PNG) which can lose quality when scaled up.

Reusing the same or similar design elements (colors, shapes) to create unity and consistency.

Dots or pixels per inch, indicating the clarity and detail of an image or display.

Creating layouts that fluidly adapt to different screen sizes (mobile, tablet, desktop).

A typeface category without small strokes (serifs) at the ends of letters (e.g., Arial).

The intensity or purity of a color; high saturation is vivid, low saturation is muted.

Uncontrolled expansion of project scope (features, requirements) that can lead to delays or budget issues.

A typeface category with small strokes (serifs) at the ends of letters (e.g., Times New Roman).

A hierarchical outline or map of a website’s pages or screens.

A design style replicating real-world textures or objects (e.g., a notepad app resembling paper).

A sequence of images or sketches illustrating user interactions or scenarios, often paired with text descriptions.

A document detailing the visual and written standards (colors, fonts, tone) for a brand or product.

The specific group of people a product or service aims to attract and serve.

Any moment (digital or physical) where a user interacts with a brand or product.

Adjusting the uniform space between letters across a range of text.

The art and technique of arranging type to make written language legible, readable, and visually appealing.

The visual and interactive layer of a product where users engage with content and controls.

A set of pre-designed UI elements (buttons, forms, icons) maintaining brand consistency across a product.

A reusable solution to a common design problem (e.g., hamburger menu for mobile navigation).

How effectively, efficiently, and satisfactorily users can achieve their goals in a given environment.

High-level guidelines (e.g., Nielsen’s Heuristics) to evaluate and improve interface usability.

Observing real users performing tasks to uncover issues and improve the design.

The path or sequence of steps users take to complete a task within a product.

An end-to-end narrative of a user’s interactions with a product or service, capturing goals and pain points.

Methods (interviews, surveys, observations) used to understand user needs, behaviors, and motivations.

A design approach prioritizing user needs and feedback throughout the product development lifecycle.

Graphics defined by mathematical paths (e.g., SVG, AI) which can scale indefinitely without quality loss.

Organizing elements so users naturally notice or read them in order of importance (e.g., larger headers, bolded text).

Interfaces that allow user interaction through voice commands (e.g., Siri, Alexa).

Single lines of text that appear at the bottom or top of a column/page, disrupting reading flow.

A low-fidelity schematic of a layout focusing on structure and hierarchy rather than final visuals.

A multi-step UI flow guiding users through complex tasks one step at a time.

In typography, the height of the lowercase “x,” influencing readability and the look of a typeface.

An umbrella term for augmented reality (AR), virtual reality (VR), and mixed reality (MR).

The vertical axis in a graph or chart, used to measure or compare data values.

Humorously refers to a chain of tasks you must complete before you can work on the main goal.

A CSS property controlling stacking order of overlapping elements (higher z-index elements appear “on top”).