Free · 8 min read
English for designers: 60 words and phrases for work
A glossary of English terms for designers: wireframe, mockup, user flow, handoff, kerning and 55 more, with short plain-language explanations grouped by topic.
- 60 terms you'll meet in Figma, briefs and job posts
- Explanations checked against NN/g, Figma, Material and Apple
- Pairs people mix up: mockup and prototype, kerning and tracking
- Free
- 1,504 members
- Join in 1 click
60 words by topic
- 1
1
Deliverables and process: 11 words
- 2
2
Research: 11 words
- 3
3
Interface and Figma: 12 words
- 4
4
Typography and visuals: 16 words
- 5
5
Working with teams and clients: 10 words
- 1,504
- community members
- 8,915
- messages with questions since July 2024
- 9
- design games since September 2024
- 759
- people wrote in the chat
This guide is for you if you are
Learning UI/UX from English sources
Tutorials, articles and docs are in English, and half the words in them are professional jargon.
Mixing up similar terms
Wireframe, mockup and prototype seem like the same thing, and interviewers ask about the difference.
Getting ready to work with clients
You want to understand briefs, revisions and team discussions without a translator.
In short
- 60 terms in five groups: deliverables, research, interface and Figma, typography and visuals, working with teams and clients.
- Explanations are checked against the Nielsen Norman Group glossaries, Figma Help Center, Material Design, Apple HIG, Google Fonts and Cambridge Dictionary.
- A wireframe shows structure, a mockup shows the look, a prototype shows interaction. They're three different things.
- Kerning is the space between two specific letters; tracking is the space between all letters in a text.
- Learn words in sentences from real documentation and use them right away in your case studies and emails.
60 words by topic
- 1
1
Deliverables and process: 11 words
Names for what designers create and show the team. Definitions follow the Nielsen Norman Group UX deliverables glossary:
- wireframe: a skeletal outline of a layout that shows the structure and functionality of an interface before visual design;
- mockup (design comp): a static, high-fidelity image of an interface with colors and imagery;
- prototype: an early version of a design used to test ideas, interactions and functionality;
- paper prototype: screen sketches on paper that are quick to make and test with users;
- wireflow: wireframe-style page layouts combined with a simplified flowchart of the interactions between them;
- user flow: the typical or ideal set of steps to complete a common task in a product;
- site map: a visual representation of how a site's content is organized;
- storyboard: a story told in a sequence of panels showing its main events;
- mood board: a collage of images, video frames, patterns or text that conveys a feeling at a glance;
- style guide: documentation with specific guidelines, visual references and design principles;
- design system: a complete set of standards for managing design at scale with reusable components and patterns.
💡 An interview line: “I start with a wireframe to agree on the structure, then move to a mockup and a clickable prototype for testing.” These three words often get mixed up; here they're in the right order.
- 2
2
Research: 11 words
UX research terms that show up in case studies and job posts. Definitions follow the NN/g research methods glossary:
- persona: a fictional yet realistic description of a typical or target product user;
- journey map (CJM): a visualization of the process a person goes through to accomplish a goal;
- empathy map: a shared visualization of what a team knows about a particular type of user;
- user interview: a one-on-one session where the researcher asks questions, listens and follows up for details;
- survey: participants answer multiple-choice or open-ended questions; it collects self-reported perceptions and attitudes;
- usability testing: a participant performs tasks in an interface while the researcher observes and listens;
- moderated / unmoderated testing: testing with a facilitator who guides the participant in real time, or without one, when software presents the tasks;
- think-aloud: asking a test participant to say their actions and thoughts out loud while using an interface;
- A/B testing: two versions of a product are shown at random to two user groups, and metrics show which works better;
- card sorting: participants group labeled cards in a way that makes sense to them, which helps build an information architecture;
- heuristic evaluation: finding interface problems against a set of guidelines; NN/g recommends Jakob Nielsen's 10 heuristics and stresses that it can't replace research with users.
💡 NN/g splits methods into attitudinal (“what users say”: surveys, interviews) and behavioral (“what users do”: usability tests, analytics). This pair of words neatly explains in a case study why you chose a particular method.
Didn't get a term in a brief? Ask the community
In the community you can ask about an unfamiliar word, a brief or a client comment and get an explanation from designers at every level. It's free.
Ask a questionFree. 1,504 designers are already in the community.
- 3
3
Interface and Figma: 12 words
Words you see in the Figma interface and in guidelines. Explanations follow Figma Learn, Material Design and NN/g articles:
- component: an element you reuse across designs, such as a button, an icon or a layout block;
- instance: a copy of a component linked to the main component; it receives every update made to the main one;
- variant: a way to group similar components, such as buttons in different states and sizes, into one container;
- property / value: a variant's property (size, state, color) and its options (for example, default, hover, pressed, disabled);
- auto layout: elements in a frame are arranged automatically by direction, spacing and alignment; turn it on with Shift + A;
- flow (in a Figma prototype): the network of frames and connections on one page, with its own starting point;
- handoff: passing a design to development; Figma has Dev Mode for it, where developers inspect properties and code and download assets;
- design tokens: small reusable design decisions — a color, a typeface, a measurement — with names instead of hard-coded values;
- button states: enabled, disabled, hover (under the cursor), focus (selected with the keyboard), pressed;
- affordance: what you can do with an object; for example, a checkbox can be turned on and off;
- signifier: a visual cue that shows the affordance before you interact; NN/g notes that in very flat designs buttons are hard to tell from text;
- empty state: a screen or block with no content yet; NN/g recommends explaining what will appear there and offering a path to the first action.
💡 Don't translate Figma feature names when you search: “auto layout wrap” finds the answer faster than any translation, because that's what the feature is called in the interface and the Help Center.
- 4
4
Typography and visuals: 16 words
This is where most mix-ups happen. Typography follows the Google Fonts glossary and Apple HIG; visuals follow the NN/g visual design glossary:
- typeface: the design of the letters itself, for example Roboto;
- font: a specific implementation of a typeface, for example Roboto Bold. Google Fonts puts it this way: a typeface is what you see, a font is what you use;
- weight: Regular, Medium, Semibold, Bold and so on; Apple recommends avoiding Ultralight, Thin and Light, especially for small text;
- kerning: manually adjusting the space between two specific letters, such as W and A;
- tracking (letter-spacing): an even change to the spacing between all the letters in a text;
- line height: the distance from the baseline of one line to the baseline of the next;
- leading: the vertical space between two lines of type; the name comes from the strips of lead placed between lines of metal type;
- baseline: the invisible line letters sit on; line height and x-height are measured from it;
- x-height: the height of lowercase letters without ascenders, from the baseline to the top of the letter x;
- contrast: the difference in color, brightness or size that makes an object stand out from its surroundings;
- whitespace: the empty space between elements that balances a design and makes it easier to scan and read;
- grid: columns, gutters and margins that give structure to the layout of elements;
- visual hierarchy: arranging elements so the eye moves through them in order of importance;
- color palette: a defined set of colors that keeps a design consistent and harmonious;
- vector / raster image: a vector image is easy to scale or modify because the file holds a mathematical description of every shape; a raster image is made of pixels (JPG, PNG, GIF);
- responsive design: an interface that adapts to different screen sizes and devices.
💡 Google Fonts notes that beginners often say kerning when they mean tracking. The rule is simple: two letters means kerning, the whole line means tracking.
Found a term you don't get? Ask the community → - 5
5
Working with teams and clients: 10 words
Everyday English words that have a specific meaning in a design project. Definitions follow Cambridge Dictionary:
- brief: a set of instructions or information for a job; to brief someone means to give them detailed instructions;
- scope: the range a project covers; outside the scope means it isn't included;
- deliverable: something that must be completed or provided as part of a project, such as a set of mockups or a prototype;
- deadline: a time or day by which something must be done;
- feedback: information or opinions about a result that tell you whether it works or is liked;
- revision: a change made to the work, or the process of making it; a round of revisions is one batch of changes;
- iteration: doing something again, usually to improve it, or one of those attempts;
- stakeholder: a person or group involved in a project with an interest in its success;
- invoice: a list of services provided or work done, with the cost, for payment;
- approval: official permission or agreement; in a project, a client approving the result, as in “Could you approve the final screens by Friday?”
💡 Ready-made phrases with these words for emails, calls and revisions are in the guide English for client communication.
You're not alone with these questions
We counted what people ask about most in our community. Learning and Figma are near the top, and most materials on both are in English.
Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.
Practice with a deadline and live feedback
The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.
Design game · January 2026
NAOMA website redesign
The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.
AI challenge · May 2025
A landing page made by AI
Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.
Workshop · April 2026
Figmosha: AI in Figma
The tool's author showed how to generate interfaces in Figma and analyze a design system.
Free. 1,504 designers are already in the community.
How to join: 1 minute
- 1
Tap the button
Telegram opens with the Spaceberry community.
- 2
Join
It's free: all you need is a Telegram account.
- 3
Introduce yourself
Say where you're starting from and ask your first question.
Questions and answers
Didn't find your answer? Ask it in the community.
What's the difference between a wireframe, a mockup and a prototype?
By Nielsen Norman Group's definitions, a wireframe is a skeletal outline showing structure and functionality before visual design. A mockup is a static, high-fidelity image with colors and imagery. A prototype is an early version of a design used to test ideas and interactions. In short: structure, look and behavior. More in our guides on [wireframes](/en/guides/wireframe) and [mockups](/en/guides/mockup).
How is kerning different from tracking?
Kerning adjusts the space between two specific letters, such as W and A. Tracking (letter-spacing in CSS) evenly changes the space between all letters in a text. Google Fonts suggests slightly more open tracking for all-caps text and keeping negative tracking for very large display sizes.
Should I translate these terms into Ukrainian at work?
It depends on the team. Many Ukrainian teams say “вайрфрейм”, “мокап” or “фідбек”, and that's fine, because that's what tools and docs call them. What matters more is that everyone on the team understands them the same way. In client texts and English case studies, use the original terms; in Ukrainian texts, explain them the first time they appear.
How do I remember these words quickly?
Don't memorize the list apart from your work. Write each word down with a sentence from the Figma docs or an NN/g article, group them by topic and test yourself regularly, as the British Council's LearnEnglish also suggests. Then use the terms in your own case study. Where to start with English is covered in a [separate guide](/en/guides/english-for-designers).
Is the Spaceberry community paid?
No. Spaceberry Community is a free Telegram community supported by Spaceberry Foundation, a non-profit organization. All you need to join is a Telegram account. Inside are 1,504 designers who discuss each other's work, plus regular design games: the same brief for everyone, a deadline and a community vote. Conversations are in Ukrainian.
Terms stick when you use them at work
Join 1,504 designers who discuss mockups, briefs and case studies. In design games you get a brief, a deadline and feedback, and all these words become yours. The community talks in Ukrainian.
- Free
- 1,504 members
- Join in 1 click
Updated · Spaceberry Foundation
Sources:
- Nielsen Norman Group — UX Deliverables: Glossary
- Nielsen Norman Group — UX Research Methods: Glossary
- Nielsen Norman Group — How to Conduct a Heuristic Evaluation
- Nielsen Norman Group — Visual Design: Glossary
- Nielsen Norman Group — Button States: Communicate Interaction
- Nielsen Norman Group — Designing Empty States in Complex Applications: 3 Guidelines
- Nielsen Norman Group — Top 10 Application-Design Mistakes
- Figma Learn — Guide to components in Figma
- Figma Learn — Create and use variants
- Figma Learn — Guide to auto layout in Figma
- Figma Learn — Guide to prototyping in Figma
- Figma Learn — Guide to Dev Mode in Figma
- Material Design 3 — Design tokens
- Google Fonts Knowledge — Typeface
- Google Fonts Knowledge — Kerning & kerning pairs
- Google Fonts Knowledge — Tracking, or letter-spacing
- Google Fonts Knowledge — Line height & leading
- Google Fonts Knowledge — Spacing
- Google Fonts Knowledge — Baseline
- Google Fonts Knowledge — X-height
- Apple Human Interface Guidelines — Typography
- Cambridge Dictionary — brief
- Cambridge Dictionary — deliverable
- Cambridge Dictionary — iteration
- Cambridge Dictionary — stakeholder
- Cambridge Dictionary — approval
- Cambridge Dictionary — scope
- Cambridge Dictionary — deadline
- Cambridge Dictionary — feedback
- Cambridge Dictionary — revision
- Cambridge Dictionary — invoice