85 Product Design Terms You Should Know

A lot goes into digital product design, and there’s a name for everything designers create. (We bet you’ve heard of a user interface, but what about a user feedback loop?) Not knowing what these terms mean can make it hard to keep up with each step of the process, and part of getting everyone — from the designer to the client — on the same page is making sure we’re all using the same words. Big Human designers are more than willing to explain anything to anyone who asks, but it’s never a bad idea to do your own research and get a basic understanding.

To help you learn the lingo, we’ve created a dictionary of product design terminology everyone on the team should be familiar with. We regularly update this glossary with the latest product design terms, so be sure to check back for new additions.

Product Design Terminology

A/B testing

There will always be multiple options in design, but it’s all about what performs the best. Also known as split testing, A/B testing compares two versions of a design (a website, app, user flows, or individual screens) to see which is more effective, changing only one variable at a time. 

Accessibility

Web and product design accessibility refers to making a website or app functional for as many people as possible. Learn more by reading our three-part Web Accessibility series.

Active State

An active state shows which element a user has chosen or “activated” by using their cursor, keyboard, or touchscreen. It communicates a destination and since it happens only briefly, the design element for an active state isn’t as pronounced as a design element for a focus or hover state.

Affordance

In digital product design, an affordance communicates how a user can interact with an object. It provides visual cues that indicate which elements are interactive and how they function, helping users understand what actions are possible without further explanation. For example, an "Add to Cart" button clearly signals that clicking it will save items to a user’s cart. If the button is grayed out, that visually indicates the button can’t be clicked.

Animation

An animation arranges static imagery (drawings, photos, icons, etc) in rapid succession to simulate movement or motion. These are often used as supplemental storytelling elements.

Aspect Ratio

The aspect ratio designates the proportional relationship between an image’s width and height, which stays consistent regardless of its size. It’s written as a fraction (4:3, 1:1, etc.), with the first number denoting the width and the second number indicating the height.

Backend

This is the part of an app or website users don’t see, where engineers work behind the scenes. A backend is a server or database that functionally supports the frontend and overall product architecture. It interacts with internal and external APIs to manage user requests, process data, and ensure the product operates as intended. 

Beta Testing

Beta testing is a product’s final testing round. It’s customarily limited to a smaller audience, and the goal of a beta test is to detect and solve as many bugs as possible before the product is fully launched.

Body Copy

The body copy is the primary text on an app or website, supporting the main content and providing more detailed information. It’s typically found under headlines in text-forward sections like paragraphs, descriptions, and articles. Smaller than headlines, the body copy is designed for legibility and uses easy-to-read typefaces. 

Brand Guide

In terms of design, a brand guide (or brand guidelines) is an instructional manual for a company’s visual identity. It outlines how a brand should be visually implemented and communicated across all platforms, physical and digital. A brand guide includes directions for how to use the logo, color palette, iconography, typography, photography, other visual elements, and even UI components.

Brief

A brief is a quick summary of a project’s objectives, requirements, and any possible constraints. It also includes details about the target audience, key functionalities, and design goals. Serving as a practical guide throughout the design process, it ensures everyone on the team understands the project’s scope.

Call to Action (CTA)

This is a design term for any interactive element on a website or app that motivates users to take a specific action. A CTA is usually presented as a button or hyperlink with action words like “Subscribe,” “Learn more,” or “Sign up.”

Card

A card is a UI element that visually expresses information or groups related information together, so content is presented in a way that’s concise, engaging, and easy for users to digest. Resembling physical cards, they can be static or interactive and feature different forms of content like text, images, and buttons.

Color Palette

This is a collection of colors that reflect a brand’s identity and is used throughout every visual touchpoint, from the design itself to the company’s marketing communications. A color palette ordinarily includes four distinct color schemes: the primary palette features the brand’s main colors, while the secondary palette contains complementary colors to add variety to designs; accent or utility colors are used to highlight important elements or signal specific functions within the UI, and neutral colors help bring balance to all designs. 

Color Theme

A color theme, sometimes included in a brand’s color palette, is a separate set of colors that adjusts existing colors to cater to different users, device settings, and even content formats. Designers may adapt colors to maximize accessibility, accommodate a device’s light and dark modes, or account for changes in saturation for printed materials.

Color Theory

Color theory explores how colors interact, complement, and influence each other, focusing on their application in design and branding. A defined color scheme enhances visual appeal and can shape brand perceptions.

Component

A component is a product design term that describes a modular element used throughout the user interface. A design system may include several interchangeable components that can be reused throughout different designs, streamlining the design and development process. Some of the most common UI components are buttons, input fields, filters, cards, navigation bars, and content containers.

Content Container

A content container groups and organizes related pieces of content, including text, images, and videos. Containers give structure to a page’s layout and make the interface more user-friendly.

Design System

Also called a design library, a design system is a set of templates, tools, and directions that guides designers and developers. It sets a uniform visual style and user experience for apps and websites, documenting how each design component is used throughout a product. It can also include a style guide and accessibility and editorial principles.

Disabled State

A disabled state visually communicates which UI elements are inactive and cannot be used by the user. To show this, a designer may gray out elements or deemphasize colors, scale, or shadows.

Display Copy

Display copy conveys key messages in headlines, subheadlines, banners, buttons, and other elements that need to stand out and grab a user’s attention. It’s larger and more prominent than body copy.

Enabled State

An enabled state visually indicates which UI elements are active and can be used by the user. Designers exhibit enabled states by making elements more prominent through heightened colors, scales, or shadows.

Filter

In design terminology, a filter functions as a navigational tool, allowing users to narrow down search results or other data based on distinct criteria. It enhances the user experience by quickly and efficiently directing users to the information that’s most relevant to them. 

Focus Group

This is a small team of people gathered to test and evaluate a digital product. A focus group, which can be composed of a brand’s target audience or people who share common characteristics, may be brought in at any stage of the design and development process, and its feedback informs design decisions.

Focus State

A focus state is triggered when a user highlights an element with their keyboard (normally the tab key) or voice command. Focus states are often outlined to show which element a user can currently interact with. Examples of focus states include links, buttons, and text boxes in input forms.

Footer

This design term refers to the section at the bottom of a webpage that gives users easy access to key resources and information without cluttering the main design. It houses navigational items that link to a company’s contact details, social media profiles, sitemap, legal information, and copyright notices.

Frontend

This is the part of an app or website a user directly interacts with, where developers focus on the user interface and user experience. The frontend prioritizes the product’s overall design, responsiveness, and interactivity. 

Gradient

A gradient is a design term for a visual element that gradually transitions from one color to another (for example, orange fading into pink). Gradients can be used as wallpapers and backgrounds to add visual appeal.

Grid

As a foundational framework, a grid establishes a page’s structure and layout. It’s a system of horizontal and vertical lines that create a series of columns and rows. A grid is incredibly important to digital product design because it helps maintain balance and provides a consistent guide for placing elements.

Heat Map

A heat map visualizes how people interact with a website or app — tracking where users click, scroll, and move their cursors. It’s a graph designers and developers use to identify trouble spots and assess a product’s efficacy.

Hex

Short for hexadecimal color code, a hex (or hex code) is a six-digit value that defines a specific color. Hex codes are standardized throughout the digital world and can contain only numbers, only letters, or a mix of both.

High-Fidelity (Hi-Fi) Prototype 

High-fidelity prototypes are as close to the final design or product as possible, containing all or almost all of the design assets and a product’s necessary components. They’re used to evaluate usability, and identify and fix any issues before the final product is live.

Hover State

A hover state activates when a user puts their cursor over an element, usually a button. Subtle changes in color, scale, or shadows show a user can interact with that element.

Iconography

Iconography, which is ordinarily part of a brand’s design system, is a collection of elements that represent content, features, and functionality. Icons are a visual language that helps a user understand a component or element and its usage. They also add context and express ideas visually.

Illustrations

Like iconography, illustrations are visual tools that help convey information. However, instead of depicting simple actions, they interpret more abstract or complicated concepts to help clarify nuanced information. 

Information Architecture (IA)

An information architecture sorts and labels content to create a logical flow of information and connect related information. It customarily includes sitemaps, user flows, and content like text and media files. It ensures users can easily navigate a product and access its content.

Input Field

An input field is an interactive UI element where users can enter and submit data, enabling tasks like searches, comments, and form submissions. Providing information like names, emails, and passwords requires an input field.

Intellectual Property (IP)

When a designer or developer creates something, they map out its intended use. Intellectual property refers to the parts of a design the owner may want to protect from unintentional use. IP can be protected with patents and design registration.

Interface

Not to be confused with user interface, this is a more general design term that describes any point of interaction between independent systems, devices, or components. For example, an API is an interface that lets different software systems communicate with each other.

Iterative Design

Iterative design is the repeated cycle of designing, prototyping, testing, evaluating, and refining a digital product. As a best practice, all designs should be iterative. This methodology allows designers to continuously improve and evolve a product based on results and user feedback.

Landing Page

This is a standalone webpage a user is taken to or “lands on” after clicking a link in an email, ad, or other place on the internet. Typically featuring a single CTA, a landing page is purposely built to motivate users to take a specific action like purchasing a product or subscribing to a newsletter.

Lettermark

A lettermark is a type of logo that leverages typography to stylize letters, normally the initials or abbreviations of a company’s name. Some of the most recognizable lettermarks are HBO, ESPN, and NASA.

Logotype

Also referred to as a wordmark, a logotype uses a brand’s name as its logo, depending only on typography to represent the company. A few famous wordmarks are Coca-Cola, Disney, and Netflix.

Logomark

A logomark characterizes a company solely through a symbol and doesn’t incorporate any text. Notable examples of logomarks include the Nike Swoosh, McDonald’s Golden Arches, and Apple’s Bitten Apple.

Lorem Ipsum

Lorem ipsum is placeholder text that fills areas where content and copy will go in the future, helping designers visualize what the final product will look like. It's a mix of Latin phrases and made-up words, and it’s also called dummy text or filler text.

Low-Fidelity (Lo-Fi) Prototype

Low-fidelity prototypes are early versions of a design or product that feature the basic content and components. These prototypes are used early in the design process to check and test functionality.

Minimum Viable Product (MVP)

An MVP is a basic version of a product that’s built with just the essential functionalities, allowing a company to quickly launch it in the market and test its viability. Designers and developers take user feedback from the MVP to adapt and improve the product for future use.

Mock-up

A mock-up is a model of what a digital product could look like in its final form. It’s used to test early ideas and guide designs before development starts.

Mood Board

As non-technical design terminology, a mood board is a collection of colors, imagery, or text that inspires a design. It can include photos of similar products or other visuals that evoke the emotions and feelings a brand or design wants to achieve.

Navigation

An app or website’s navigation is a system that enables users to access a product’s information and move through its various parts. It’s comprised of menus, buttons, links, and other interactive elements that helps users find the information or tools they need.

Navigation Bar

Commonly shortened to navbar, a navigation bar is a menu usually found at the top of a screen. It’s populated with links that bring users to key areas of a website like about pages, contact pages, and product display pages. 

Orphan

This product design term refers to a single word or short line of text that dangles at the top of a page or the beginning of a column. Orphans break the flow of text across columns and pages, making a design look unbalanced or even awkward. Designers can fix orphans by adjusting the text’s alignment, spacing, or flow. 

Personas

User personas are fictional characters that represent the different types of people who may use a product or service. Based on trends and audience research, they’re created to better understand user needs, pain points, behaviors, and experiences.

Product Lifecycle

A product lifecycle describes the stages a digital product goes through, from its initial conception to its eventual retirement. The cycles are typically ideation, design, development, testing, launch, growth and improvement, optimization, and retirement.     

Product-Market Fit

This design term measures how well a product satisfies its intended market or audience, meaning that it’s found a balance between what it offers and what customers want or need.

Quality Assurance (QA)

Quality assurance is the formalized process of reviewing a design and its features after it’s been fully developed and before it officially launches. It involves establishing processes and best practices for development to prevent potential issues in functionality and the overall user experience.

Quality Control (QC)

Quality control is an ongoing exercise that monitors and inspects a product to address any problems or pain points that could surface throughout its entire lifecycle. It follows the procedures created during QA to ensure the final product meets the necessary requirements and standards.

Responsive Design

This is a design term for an approach that makes sure websites and apps automatically adapt to different devices and screen sizes, using fluid grid-based layouts to produce a seamless user experience.

Rule of Thirds

The rule of thirds is a design principle that helps create balance and present visual elements in a naturally pleasing way, dividing them into a grid with nine equal parts. Designers generally avoid placing key elements in the center of the grid, which sometimes leads to less visually interesting designs.

Scale

A scale is a ratio that determines the size of an object in relation to another object. Objects or components of the same size are generally seen as equal, while larger ones are regarded as more important.

Scrum

This is a flexible framework that breaks down a project’s goals into smaller, more manageable tasks, allowing teams to quickly adapt to changing requirements. It helps designers, developers, and product managers collaborate on projects while still working independently of each other. 

Sidebar

Operating like a secondary navbar, a sidebar holds additional navigational links or content. It’s a vertical column traditionally located on the left or ride side of a screen. 

Sitemap

A sitemap is a visual hierarchy that shows the connections between an app or website’s pages, content, and media files. It helps designers strategically structure information and map out an intuitive user journey.

Sprint

This design term describes the period of time (around 2-3 weeks) when designers and developers work on a set of tasks and deliverables.

Stock Photo

Stock photos are licensed images produced by a third party. They’re a convenient and more affordable alternative to organizing custom photoshoots.

Style Guide

Similar to a design system, a style guide outlines a brand or digital product’s visuals and offers instructions on how to use each element to create consistent designs. It includes guidelines for typography, color palettes, UI elements, layouts, and imagery. 

System Font

A system font is a pre-installed typeface on a single operating system, serving as the operating system’s main font across different applications and devices.

Territory

At Big Human, a territory is a technique we use to define and refine a brand or digital product’s visual direction based on research and brand strategy. It explores the different visual approaches a design can take and includes found references like mood boards and high-level examples.

Toggle

A toggle switch is a UI component that is often depicted as an on/off switch. It shows a user they can choose between two options.

Typography

Typography is the way letters and text are arranged to make the copy clear and visually appealing. A key design element that employs font styles, font pairings, appearance, and structure, typography affects the way users understand and interact with certain messages. A company’s branded fonts are often included in its design system or style guide.

Usability

Usability is how easily and intuitively users can interact with a product or system, ensuring they can navigate an app or website as efficiently and effectively as possible.

Usability Testing

Usability testing is a product design term that describes the process of evaluating a product’s user-friendliness by testing it on real users, focusing on how the product functions and how well it serves its intended audience. It’s an exercise that helps designers and developers continuously optimize a product.

Use Case

A use case is a description of how people will interact with a website or app to achieve distinct goals. It details the steps or actions users need to take finish tasks and how a system will respond to those actions, helping designers understand a design’s required functionalities.

User Experience (UX)

The user experience is the overall experience a user has when they engage with a digital product. It catalogs all interactions a user has with an app or website from start to finish and how it affects what they think and feel about the experience. The goal of UX design is to make sure digital products address users’ needs in an intuitive, engaging, and frictionless way.

User Feedback Loop

A user feedback loop is the iterative process of gathering and analyzing users’ feedback on a website or app. Both designers and developers use this process to continuously improve and evolve a product to meet users’ needs.

User Flow

More granular than the user journey, a user flow traces a certain sequence of actions a user takes to accomplish a goal or complete a task like making a purchase or filling out a form. It’s a logistical diagram that helps designers identify any challenges a user may run into, so they can optimize the process.

User Interface (UI)

The user interface is what a person uses to communicate with a product, with its design informing exactly how the user interacts with it. It’s a point of contact that pairs visually pleasing elements with necessary navigational functions to create enjoyable, efficient user experiences.

User Journey

This is the high-level experience a user has when interacting with a product or service, from discovery to the end of the engagement. Taking on the perspective of the user, a user journey studies the entire user experience across multiple points of interaction. It concentrates on understanding and improving the end-to-end experience.

User Journey Map

The user journey map visualizes the process a user has to go through to achieve a goal or make a decision on a website or app, arranging actions into a tangible timeline. It takes a user’s needs, perceptions, and motivations into account to help designers create user-centric experiences.

User Research

User research is how companies study their audience’s needs, goals, and behaviors, so they can design and develop effective products that solve problems and meet expectations. Alongside user testing and usability testing, user research can be conducted at every stage of the product lifecycle to ensure it consistently delivers a positive user experience.

User Testing

User testing is the process of discovering what users like and dislike about a product by allowing them to interact with an early version of it and collecting their feedback. It helps companies, especially startups, determine the value their product provides and whether users have a real need for it.

Visual Hierarchy

This is how elements are arranged and presented in a design to show their level of importance. Since people naturally process information in the order their eyes see it, a visual hierarchy organizes content in a way that’s easy for users to understand and navigate.

Whitespace

This design term describes the empty or blank spaces found around or between different design elements. Whitespace is also called negative space, and it can be any color. 

Widow

An orphan’s counterpart, a widow is a single word or short line of text that sits alone at the bottom of a paragraph or column. Widows can create gaps at the end of a line and disrupt the visual flow of a paragraph, but they can be fixed by modifying line spacing and column widths or rewriting the copy.

Wireframe

A wireframe is a website or app’s two-dimensional blueprint. It lays out the structure of a digital product’s interface and informs the placement of different design elements, including the navigation bar, headers, content containers, and other components.

Web Development Terminology

Product design and web development terminology often go hand-in-hand, so be sure to read our list of 35 web development terms, too.