Безкоштовно · українською · 8 хв читання

Англійська для дизайнера: 60 слів і фраз для роботи

Глосарій англійських термінів для дизайнера: wireframe, mockup, user flow, handoff, kerning та ще 55 слів з короткими поясненнями українською, згрупованих за темами.

  • 60 термінів, які трапляються в Figma, брифах і вакансіях
  • Пояснення українською, звірені з NN/g, Figma, Material і Apple
  • Пари, які часто плутають: mockup і prototype, kerning і tracking
Поставити питання
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

60 слів за темами

  1. 1

    1

    Артефакти й процес: 11 слів

  2. 2

    2

    Дослідження: 11 слів

  3. 3

    3

    Інтерфейс і Figma: 12 слів

  4. 4

    4

    Типографіка й візуал: 16 слів

  5. 5

    5

    Робота з командою й клієнтами: 10 слів

1504
учасники спільноти
8915
повідомлень із запитаннями з липня 2024
9
дизайн-ігор з вересня 2024
759
людей писали в чат

Цей гайд для вас, якщо ви

  • Вчите UI/UX з англомовних джерел

    Туторіали, статті й документація англійською, і половина слів у них — професійний жаргон.

  • Плутаєте схожі терміни

    Wireframe, mockup і prototype здаються одним і тим самим, а на співбесіді питають про різницю.

  • Готуєтеся до роботи з клієнтами

    Хочете розуміти бриф, правки й обговорення в команді без перекладача.

Коротко

  • 60 термінів у п'яти групах: артефакти, дослідження, інтерфейс і Figma, типографіка й візуал, робота з командою та клієнтами.
  • Пояснення звірені з глосаріями Nielsen Norman Group, довідкою Figma, Material Design, Apple HIG, Google Fonts і Cambridge Dictionary.
  • Wireframe показує структуру, mockup — вигляд, prototype — взаємодію. Це три різні речі.
  • Kerning — відстань між двома конкретними літерами, tracking — між усіма літерами в тексті.
  • Вчіть слова в реченнях з реальної документації й одразу вживайте їх у своїх кейсах і листах.

60 слів за темами

  1. 1

    1

    Артефакти й процес: 11 слів

    Назви того, що дизайнер створює й показує команді. Визначення — за глосарієм UX-артефактів Nielsen Norman Group:

    • wireframe (вайрфрейм): схематичний каркас макета, який показує структуру й функції інтерфейсу ще до візуального дизайну;
    • mockup (мокап, design comp): статичне детальне зображення інтерфейсу з кольорами й зображеннями;
    • prototype (прототип): рання версія дизайну, на якій перевіряють ідеї, взаємодії й функції;
    • paper prototype: ескізи екранів на папері, які швидко малюють і тестують з користувачами;
    • wireflow: поєднання вайрфреймів сторінок зі спрощеною блок-схемою переходів між ними;
    • user flow: типовий або ідеальний набір кроків, щоб виконати поширену задачу в продукті;
    • site map (карта сайту): візуальне подання того, як організований контент сайту;
    • storyboard (сторіборд): історія в послідовних кадрах, які показують її головні події;
    • mood board (мудборд): колаж зображень, кадрів, патернів чи тексту, що з першого погляду передає настрій;
    • style guide (стайлгайд): документ з настановами, візуальними прикладами й принципами дизайну;
    • design system (дизайн-система): повний набір стандартів, щоб керувати дизайном у масштабі за допомогою компонентів і патернів, які використовують повторно.

    💡 Фраза для співбесіди: «I start with a wireframe to agree on the structure, then move to a mockup and a clickable prototype for testing». Ці три слова часто плутають, а тут вони стоять у правильному порядку.

  2. 2

    2

    Дослідження: 11 слів

    Терміни з UX-досліджень, які трапляються в кейсах і вакансіях. Визначення — за глосарієм методів досліджень NN/g:

    • persona (персона): вигаданий, але реалістичний опис типового або цільового користувача;
    • journey map (CJM, карта шляху користувача): візуалізація процесу, який людина проходить, щоб досягти мети;
    • empathy map (карта емпатії): спільна візуалізація того, що команда знає про певний тип користувачів;
    • user interview: інтерв'ю один на один, де дослідниця чи дослідник ставить питання, слухає й уточнює деталі;
    • survey (опитування): учасники відповідають на питання з варіантами або відкриті питання; це самозвіт про сприйняття й ставлення;
    • usability testing (юзабіліті-тестування): учасник виконує задачі в інтерфейсі, а дослідник спостерігає й слухає;
    • moderated / unmoderated testing: тестування з модератором, який веде учасника в реальному часі, або без нього, коли задачі показує спеціальна програма;
    • think-aloud: прохання до учасника тесту промовляти вголос свої дії й думки під час роботи з інтерфейсом;
    • A/B testing: дві версії продукту випадково показують двом групам користувачів і за метриками з'ясовують, яка працює краще;
    • card sorting (сортування карток): учасники групують картки з назвами так, як їм логічно; це допомагає побудувати інформаційну архітектуру;
    • heuristic evaluation (евристична оцінка): пошук проблем в інтерфейсі за набором настанов; NN/g рекомендує 10 евристик Якоба Нільсена й наголошує, що цей метод не замінює досліджень з користувачами.

    💡 NN/g ділить методи на attitudinal («що користувачі кажуть»: опитування, інтерв'ю) і behavioral («що користувачі роблять»: юзабіліті-тести, аналітика). Ця пара слів добре пояснює в кейсі, чому ви обрали саме такий метод.

    Не зрозуміли термін у брифі? Спитайте в спільноті

    У спільноті можна поставити питання про незнайоме слово, бриф чи коментар клієнта й отримати пояснення від дизайнерів різного рівня. Це безкоштовно.

    Поставити питання

    Безкоштовно. 1504 дизайнери вже в спільноті.

  3. 3

    3

    Інтерфейс і Figma: 12 слів

    Слова, які ви бачите в інтерфейсі Figma та в гайдлайнах. Пояснення — за довідкою Figma Learn, Material Design і статтями NN/g:

    • component (компонент): елемент, який повторно використовують у дизайні, наприклад кнопка, іконка чи макет блоку;
    • instance (екземпляр): копія компонента, пов'язана з головним компонентом; вона отримує всі зміни, внесені в головний;
    • variant (варіант): спосіб згрупувати схожі компоненти, наприклад кнопки різних станів і розмірів, в одному контейнері;
    • property / value: властивість варіанта (розмір, стан, колір) і її значення (наприклад, default, hover, pressed, disabled);
    • auto layout: елементи у фреймі розташовуються автоматично за напрямком, відступами й вирівнюванням; вмикається клавішами Shift + A;
    • flow (у прототипі Figma): мережа фреймів і зв'язків на одній сторінці зі своєю стартовою точкою;
    • handoff: передача дизайну в розробку; у Figma для цього є Dev Mode, де розробники переглядають властивості, код і завантажують ассети;
    • design tokens (дизайн-токени): маленькі дизайн-рішення для повторного використання — колір, шрифт, розмір — з назвами замість конкретних значень;
    • button states: стани кнопки — enabled (доступна), disabled (недоступна), hover (під курсором), focus (вибрана з клавіатури), pressed (натиснута);
    • affordance (афорданс): те, що можна зробити з об'єктом; наприклад, чекбокс можна вмикати й вимикати;
    • signifier (сигніфікатор): візуальна підказка, з якої видно цей афорданс ще до взаємодії; NN/g зазначає, що в надто пласкому дизайні кнопки важко відрізнити від тексту;
    • empty state (порожній стан): екран чи блок, де ще немає контенту; NN/g радить пояснити, що тут з'явиться, і дати шлях до першої дії.

    💡 Не перекладайте назви функцій Figma, коли гуглите: «auto layout wrap» знайде відповідь швидше, ніж будь-який переклад, бо так функція називається в інтерфейсі й довідці.

  4. 4

    4

    Типографіка й візуал: 16 слів

    Тут найбільше пар, які плутають. Типографіку пояснюємо за глосарієм Google Fonts і Apple HIG, візуал — за глосарієм візуального дизайну NN/g:

    • typeface (гарнітура): сам дизайн шрифту, наприклад Roboto;
    • font (шрифт як файл чи накреслення): конкретна реалізація гарнітури, наприклад Roboto Bold. Google Fonts пояснює: typeface — те, що ви бачите, font — те, чим ви користуєтеся;
    • weight (накреслення, товщина): Regular, Medium, Semibold, Bold тощо; Apple радить уникати тонких Ultralight, Thin і Light, особливо в дрібному тексті;
    • kerning (кернінг): ручне налаштування відстані між двома конкретними літерами, наприклад W і A;
    • tracking (трекінг, letter-spacing): однакова зміна відстані між усіма літерами в тексті;
    • line height: відстань від базової лінії одного рядка до базової лінії наступного;
    • leading (інтерліньяж): вертикальний простір між двома рядками; назва походить від свинцевих смужок, які вкладали між рядками металевого набору;
    • baseline (базова лінія): невидима лінія, на якій стоять літери; від неї вимірюють висоту рядка й x-height;
    • x-height: висота малих літер без виносних елементів, від базової лінії до верху літери x;
    • contrast (контраст): різниця в кольорі, яскравості чи розмірі, яка вирізняє об'єкт серед оточення;
    • whitespace (вільний простір): порожнє місце між елементами, яке врівноважує дизайн і полегшує читання;
    • grid (сітка): колонки, міжколонкові відступи (gutters) і поля (margins), які задають структуру розміщення елементів;
    • visual hierarchy (візуальна ієрархія): таке розташування елементів, щоб погляд переходив між ними в порядку їхньої важливості;
    • color palette (палітра): визначений набір кольорів, щоб дизайн був послідовним і гармонійним;
    • vector / raster image: векторне зображення легко масштабувати й змінювати, бо файл містить математичний опис кожної форми; растрове складається з пікселів (JPG, PNG, GIF);
    • responsive design (адаптивний дизайн): інтерфейс, який підлаштовується під різні розміри екранів і пристрої.

    💡 Google Fonts зауважує, що початківці часто кажуть kerning, коли мають на увазі tracking. Правило просте: дві літери — kerning, весь рядок — tracking.

    Натрапили на незрозумілий термін? Спитайте в спільноті →
  5. 5

    5

    Робота з командою й клієнтами: 10 слів

    Звичайні англійські слова, які в дизайн-проєкті мають конкретне значення. Визначення — за Cambridge Dictionary:

    • brief (бриф): набір інструкцій чи інформації для роботи; to brief someone — детально пояснити людині задачу;
    • scope (обсяг робіт): межі того, що охоплює проєкт; outside the scope — те, що до нього не входить;
    • deliverable: те, що треба завершити й передати в межах проєкту, наприклад набір макетів чи прототип;
    • deadline (дедлайн): час або день, до якого щось треба зробити;
    • feedback (фідбек): інформація чи думка про результат, з якої видно, чи він вдалий і чи подобається;
    • revision (правка, ревізія): зміна, внесена в роботу, або сам процес змін; round of revisions — раунд правок;
    • iteration (ітерація): повторення процесу, зазвичай щоб покращити результат, або одна з таких спроб;
    • stakeholder (стейкголдер): людина чи група, яка залучена в проєкт і зацікавлена в його успіху;
    • invoice (інвойс, рахунок): перелік наданих послуг чи виконаних робіт із вартістю для оплати;
    • approval (погодження): офіційний дозвіл чи згода; у проєкті — коли клієнт погоджує результат: «Could you approve the final screens by Friday?» — «Чи могли б ви погодити фінальні екрани до п'ятниці?».

    💡 Готові фрази з цими словами для листів, дзвінків і правок зібрані в гайді Англійська для спілкування з клієнтами.

Ви не самі з цими питаннями

Ми порахували, про що найчастіше питають у нашій спільноті. Навчання й Figma — серед лідерів, а більшість матеріалів про них англійською.

Ви не самі з цими питаннями
Навчання й курси938
Портфоліо та кейси705
Figma647
AI-інструменти380
Робота й вакансії314
UX-дослідження131

Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.

Практика з дедлайном і живим фідбеком

Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.

  • Дизайн-гра · січень 2026

    Редизайн сайту НАОМА

    Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.

  • AI-челендж · травень 2025

    Лендинг, створений AI

    Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.

  • Воркшоп · квітень 2026

    Figmosha: AI у Figma

    Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.

Поставити питання

Безкоштовно. 1504 дизайнери вже в спільноті.

Як приєднатися — 1 хвилина

  1. 1

    Натисніть кнопку

    Відкриється Telegram зі спільнотою Spaceberry.

  2. 2

    Приєднайтеся

    Це безкоштовно: достатньо акаунта в Telegram.

  3. 3

    Представтеся

    Напишіть, з чого починаєте, і поставте перше питання.

Часті питання

Не знайшли відповіді? Поставте питання в спільноті — там відповідають.

Чим відрізняються wireframe, mockup і prototype?

За визначеннями Nielsen Norman Group, wireframe — схематичний каркас, що показує структуру й функції до візуального дизайну. Mockup — статичне детальне зображення з кольорами й картинками. Prototype — рання версія дизайну, на якій перевіряють ідеї та взаємодії. Коротко: структура, вигляд і поведінка. Докладніше — у гайдах про [вайрфрейм](/guides/wireframe) і [мокап](/guides/mockup).

Чим kerning відрізняється від tracking?

Kerning — налаштування відстані між двома конкретними літерами, наприклад між W і A. Tracking (у CSS — letter-spacing) — однакова зміна відстані між усіма літерами в тексті. Google Fonts радить трохи збільшувати tracking для тексту великими літерами, а від'ємний tracking залишати для дуже великих заголовків.

Чи треба перекладати терміни українською в роботі?

Залежить від команди. У багатьох командах кажуть «вайрфрейм», «мокап», «фідбек», і це нормально, бо так ці слова називаються в інструментах і документації. Важливіше, щоб усі в команді розуміли їх однаково. У текстах для клієнтів і в кейсах англійською вживайте оригінальні терміни, а в українських текстах пояснюйте їх при першій згадці.

Як швидко запам'ятати ці слова?

Не зубріть список окремо від роботи. Запишіть кожне слово з реченням з документації Figma чи статті NN/g, розкладіть за темами й регулярно перевіряйте себе: так радить і LearnEnglish від British Council. А потім уживайте терміни в описі власного кейсу. Про те, з чого почати вчити англійську, розповідаємо в [окремому гайді](/guides/english-for-designers).

Чи платна спільнота Spaceberry?

Ні. Spaceberry Community — безкоштовна спільнота в Telegram, яку підтримує громадська організація Spaceberry Foundation, що працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram. Усередині — 1504 дизайнери, обговорення робіт і регулярні дизайн-ігри: однакове завдання для всіх, дедлайн і голосування спільноти.

Терміни запам'ятовуються в роботі

Приєднуйтеся до 1504 дизайнерів, які обговорюють макети, брифи й кейси. На дизайн-іграх ви отримаєте бриф, дедлайн і фідбек — і всі ці слова стануть вашими.

Приєднатися безкоштовно
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

Оновлено · Spaceberry Foundation

Богдан Остафіїв

Перевірив: Богдан Остафіїв, COO Spaceberry Studio

Понад 7 років у дизайні інтерфейсів для вебу й мобільних застосунків, 150+ проєктів. Менторить дизайн-команду Spaceberry.

LinkedInBehanceDribbble

Джерела: