Zeplin

Product Development Glossary

The world of product development is filled with terms, phrases, and jargon. It’s difficult for newbies to navigate and for experienced professionals to stay current. As a platform that prioritizes cross-team collaboration, the Zeplin crew is in a unique position to help!

Page contents:
A

Accessible design

A design approach that specifically considers a variety of disabilities during the design process, so that the end product can be used to the greatest extent possible by all users.

API

Stands for "application programming interface." The set of mechanisms and protocols that a developer can use to integrate two applications, allowing them to communicate and exchange data with one another independently.

B

Back-end development

The side of web development that deals with a product's "behind the scenes" functionality — the portion of a product build that users never see or interact with.

Breakpoints

Specific screen width dimensions that determine when a responsive screen will automatically adjust its sizing to fit the device size and zoom level. Breakpoints are defined by screen width.

Beta testing

The release of an early version of a product to a small group of users, in order to get real feedback and make necessary changes before rolling out a full release. A beta test can take place in a controlled production environment, or the product can be rolled out to a limited number of users to try out in a real-world context.

C

Cache

A small amount of temporary memory storage that's kept closer to a computer's CPU so that it can be accessed faster than information stored in the computer's main RAM or mass storage. Caching is most effectively used to store data that is accessed frequently or complex calculations that would take a long time to re-compute.

Call to Action (CTA)

An interactive UI element, usually a button, that prompts the user to take an action within the product's UI.

Component

A UI element that's stored in the design system and reused throughout a product or group of products in order to create a consistent user experience. Components can stand alone or be made up of multiple smaller components.

Component library

The section of a design system that includes all of the components that are used repeatedly throughout a product. Not to be confused with pattern library.

Container

A component that places a boundary around another group of components, keeping that group from exceeding a particular size. Containers also help group and organize screen components into neat blocks.

Continuous Improvement (CI)

A development approach that makes small, incremental changes on an ongoing basis, instead of establishing a status quo and making changes only at infrequent "breakthrough" points.

D

Deployment

The point at which changes or updates are pushed from one development environment (like a local or staging environment) to another (like a live site).

Design brief

A requirements document that contains all of the details of an upcoming product design. Also called a "product spec," the design brief usually contains basic design requirements as well as information about the design problem, the end user, and the product's intended purpose and function.

Design Delivery

The Zeplin approach to design handoff, used to increase collaboration and eliminate confusion and delays. Designs are "locked" to prevent further edits, and then organized in a shared workspace where designers and non-designers can easily see, understand, and collaborate on what needs to be built.

Design sprint

An intensive, multi-day event in which teams design an entire product, from conception to working prototype. In a traditional five-day sprint, one day each is dedicated to understanding and researching the problem, sketching potential solutions, deciding on a design, prototyping the design, and testing the prototype.

Design system

A comprehensive database that contains all of the components, style guides, patterns, and design tokens for a particular project or set of projects. The design system acts as the "single source of truth" for the whole product team.

Design tokens

Design components that are stored in the design system and each represent a particular style value like a color, font, spacing value, object rounding, etc. Tokens have semantic names (like primary-color or error-state instead of a hex code) and, when that token's underlying value changes, every piece of code that uses that design token will reflect that update without any changes to the code itself.

DesignOps

The management of a design team's tools and resources to facilitate increased collaboration between designers and the rest of the product team. The DesignOps team manages the administrative side of the design operation — things like resource allocation, scoping, tool management, workflow design, and troubleshooting — which increases overall quality and productivity by allowing designers to focus their energy on their designs.

DevOps

A cross-functional approach to software development that combines the development cycle (plan, create, test, ship) and IT operations (secure, release, monitor, govern) into one integrated process. The DevOps leader manages the tools and workflows that facilitate collaboration between development and IT throughout every stage of the product and service lifecycle.

Discovery

A process in which a product team interacts directly with users to investigate, research, and validate its users' needs before designing a product or feature.

Documentation

The technical explanation of all aspects of a product relevant to users and developers, including basics like how to use the product as well as things like release notes, updates, troubleshooting guides, API integration instructions, etc.

E

Element

A part of a larger whole. Can refer to design elements (like a component, pattern, font, or color) or dev elements (like a piece of code).

Empathy map

A simple diagram that catalogs relevant information about a product's target user and is used during the design process to ensure the product satisfies the user's needs.

Epic

An Agile framework that breaks long-term product objectives (called themes) down into distinct shippable units of work. Epics can be further subdivided into product features, product goals, and releases.

F

Front-end development

The side of product development that handles the function and maintenance of a product's UI. Front-end devs work on the portion of the product that the user actually sees and interacts with.

Full-stack designer

A product designer that is involved in every stage of the design process, from UX research to UI implementation. Not to be confused with a full-stack developer.

Full-stack developer

An engineer that does both front-end and back-end development.

G

Graphical User Interface (GUI)

An operating system that allows users to navigate using visual buttons and gestures rather than lines of code (like a Command Line Interface) or a series of menus (like a Menu Driven Interface).

H

Handoff

The transition phase that takes place between design creation and product development, when designers finalize, package, and ship their designs over to the engineering team to be implemented.

Happy path

A user flow sequence in which the user follows the desired path and does not encounter any errors. The happy path (also called the "golden path") is the ideal user scenario and does not replicate real-world conditions or behaviors.

Full definition →

Human Interface Guidelines (HIG)

A set of best practices for a particular application or platform, designed to help developers create consistent and intuitive user experiences.

I

Information architecture

The structure, organization, and formatting of information across a page or product to make it easier for the user to find and understand.

Integrated Development Environment (IDE)

A piece of software that combines multiple developer tools — like a code editor, debugger, and compiler — into one cohesive platform.

Iterative process

An approach to product development that relies on short trial-and-error-style cycles to continuously adjust and improve the development process.

J

JSON

Stands for "JavaScript Object Notation." A language-agnostic file format used to store and transfer data that can then be used with any programming language or platform.

M

Microcopy

Small text segments throughout a UI that help the user navigate a platform or site, like button text, input field placeholders, error messages, and page titles.

Minimum Viable Product (MVP)

The most stripped-down possible version of something that can still fulfill its core function. MVP can be used to refer to anything — a feature, design, document, etc. — but it traditionally refers to an early-release version of a product that has just enough features to be rolled out for beta testing.

Mockup

A fully designed product screen that allows a product team to evaluate the design and make adjustments before creating a prototype or beginning a product build.

Full definition →

P

Parallax scrolling

A style of web design in which the page background moves at a slower speed than the page content as the user scrolls.

Pattern

A group of components that's used throughout a product to perform a specific function.

Pattern library

A collection of patterns stored in the design system. Not to be confused with component library.

Plan Do Check Act (PDCA)

A process improvement methodology that helps facilitate continuous improvement by using a short, four-step change cycle that can be repeated frequently.

Product-Led Growth (PLG)

A business plan that relies on the product quality, experience, and features to drive revenue. Alternative approaches, like sales-, marketing-, or customer-led growth models, place different business functions at the forefront of the company's growth.

Product Requirements Document (PRD)

A document that outlines the development specs for an upcoming product build, including broader information (like the product's purpose, value, and target user) as well as more technical details about the product's functionality.

ProductOps

The combination and management of key processes and tasks that overlap between product management and customer success. ProdOps manages tools and workflows around common responsibilities like user research and customer outreach, internal and external enablement, and product strategy and roadmapping.

Programming library

A collection of reusable code snippets that developers can access to make product development faster and easier.

Prototype

An interactive, clickable version of a product mockup designed to let teams test out user flow sequences before development begins.

Full definition →

Q

Qualitative metrics

Subjective metrics that assess non-numerical facets of a project, e.g. the positivity or negativity of users' product anecdotes.

Quantitative metrics

Numerical metrics that can be measured in terms of quantity, e.g. number of user sessions or average session length.

R

Refactoring

The process of cleaning and restructuring source code, without affecting the product's functionality, to improve readability and eliminate inefficient and overcomplicated sections of code.

S

Scope creep

A condition that occurs when project stakeholders change requirements without following a change protocol, causing the project to extend out of scope.

SDK

Stands for "software development kit." A curated set of developer tools (code libraries, compilers, documentation, etc.) that are best suited to develop applications for a specific platform.

Semantic colors

Color names that indicate how the color is used in a product design, like "background-primary" or "warning."

Semantic HTML

Code elements whose names describe what that code element does, like <header>, <section>, and <nav>.

Style guide

A set of guidelines that's stored in the design system and outlines how components and elements should be incorporated into a product design with regard to decisions like color, font, spacing, and layouts.

SVG

Stands for "Scalable Vector Graphic." An image file format that stores data as text-based XML files. Unlike pixel-based image file types, SVGs can be scaled to any size without losing resolution.

T

T-shirt sizing

A scoping estimation method in which developers are asked to assess each portion of a project and give it a size from XS to XXL. By defining project sizes relative to one another, teams can more accurately allocate time and resources to different projects.

Tech stack

The set of programs and platforms that an individual or team has agreed to use for a particular project. The tech stack is typically chosen and maintained by the team's Ops (so a developer team's tech stack is managed by DevOps, a design team's tech stack is managed by DesignOps, a sales team's tech stack is managed by SalesOps, and so on).

Technical debt

A measurement of the additional development work that will be required in the future as a result of skipping steps or cutting corners in the present.

Tooltip

An informational text box that appears when a user hovers over or selects a particular UI element. Tooltips provide "hints" or instructions to help the user successfully navigate the UI.

U

Unit testing

A process in which source code is broken down into its smallest testable components, each of which is then tested individually.

Usability test

An in-person product test during which a member of the product team interviews a beta user, observes them performing different tasks using the product, and collects insights and feedback. A usability test can be quantitative (collecting numerical data like number of successes and task completion time) or qualitative (collecting user opinions and observations about how the user interacts with the product).

Use case

A written description of how a product can be used in a particular context or to achieve a particular outcome. One product will have multiple use cases describing different feature applications in different scenarios.

User flow

A navigation sequence made up of actions a user takes to move through a digital product and achieve a particular goal.

Full definition →

User experience (UX) design

The area of product design that focuses on improving the quality of users' interactions with the product. Some teams have dedicated UX designers, and some treat UX design as an integrated part of the product design process.

User interface (UI) design

The area of product design focused on the look, feel, and overall aesthetic experience of a digital product. A product designer's role may focus exclusively on UI, or they may work as an integrated UX/UI designer.

User journey

The series of steps a user takes to accomplish a goal. Unlike a user flow, the steps of a user journey can extend beyond the product UI to other platforms, chat interactions, and phone calls.

User persona

A written profile that outlines the commonly-held characteristics of a group of users, like demographics, personality traits, motivations, interests, and shared problems and experiences.

User-centered design

An iterative approach to product design in which the goal is not to produce the "best" design, but to produce the best design for the target user. Unlike traditional design, the user-centered approach features shorter iteration cycles with more user feedback and testing, and the user's needs are prioritized throughout every step of the design process.

V

Variable

A labeled code attribute for a specific product whose visual properties can change. When the variable's value changes, all instances of that variable throughout the product's code change as well.

Vector graphic

An image made up of lines, curves, and points rendered based on a mathematical formula. Whereas raster images are pixel-based, the points of a vector graphic are defined in relationship to one another and can therefore be rendered at any size.

Versioning

Re: Product releases

The formatting conventions that determine how new product releases, updates, and patches are labeled. The most common versioning scheme uses three numbers separated by periods, where the numbers represent major changes, minor changes, and patches (e.g. macOS Ventura 13.0, macOS Ventura 13.0.1, macOS Ventura 13.1).

Re: Designs and internal files

The agreed-upon file naming format used by all members of a product team so that any designer, developer, or product manager is able to tell exactly what iteration a file is on without having to pore over the file's content in search of changes. The setup and maintenance of a versioning system is called version control.

Visual language

Communication based on shapes and images that can be widely recognized without any accompanying text. For example, a designer can use a magnifying glass icon and trust that users will know intuitively that it indicates a search function, even if they do not explicitly include the word "search."

W

Wireframe

A two-dimensional sketch that outlines the basic structure of a product or feature and uses placeholders and annotations to indicate how the product will function.

Full definition →

X

XML

Stands for "Extensible Markup Language." A text-based markup language used to store and transfer information.

Share