Словник термінів до курсу UI/UX дизайн з нуля

UI — інтерфейс користувача;
UX — досвід користувача.

Human Computer Interaction, HCI (Взаємодія «Людина-компʼютер») — це сфера дизайну, яка фокусується на взаємодії між людьми та комп’ютерами.

Інтерфейс — сукупність засобів, методів і правил взаємодії (керування, контролю тощоміж елементами системи. Інтерфейс важливий для будь-якого продукту: онлайн чи офлайн. Це об'єкт, середовище і інструменти, що використовуються користувачем для взаємодії з готовим продуктом. Інтерфейс може включати кнопки, чекбокси, текстові поля, підказки, перемикачі тощо. Всі вони будуть описані в розділі словника про інтерфейс користувача (UI). Простіше кажучи, інтерфейс орієнтований на користувача.

UI/UX дизайн — це креативна сфера, яка займається вивченням, дослідженням та проєктуванням користувацьких інтерфейсів.

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

Дизайн мобільних додатків — це галузь дизайну, головною задачею якої є проєктування інтерфейсів мобільних додатків.

Фриланс дизайн — це віддалена робота у сфері дизайну, де вільнонайманий дизайнер сам шукає собі проєкти та може одночасно працювати на кілька фірм.

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

Full-stack designer (Фулстек-дизайнер) — це універсальний крос-дисциплінарний фахівець, який розуміється і на дизайні, і на програмуванні.

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

Фідбек — це зворотний зв’язок, який ви отримуєте від керівника. Він оцінює вашу роботу, вказує, що потрібно виправити, у якому напрямі розвиватися, що ви робите добре, які ваші сильні й слабкі сторони.

Фіча — це функціональна особливість продукту.

Мобільний застосунок — застосунок, призначений для роботи на смартфонах, планшетах та інших мобільних пристроях, який розроблено для конкретної платформи: iOS, Android, Windows Phone тощо.

Вебсайт — це сукупність логічно пов’язаних вебсторінок та їхнього вмісту, доступних у мережі Інтернет, які об’єднані як за змістом, так і за навігацією під єдиним доменним ім’ям (назва сайту в адресному рядку браузера).

Web app (вебдодаток) — це програма, одна частина якої завантажується в браузер і взаємодіє з користувачем (візуально-інтерфейсна частина), а інша знаходиться на вебсервері та виконує запити, що надходять від першої, а потім повертає відповідь.

Frontend developer (фронтенд-розробник) — це фахівець, який відповідає за створення користувацького інтерфейсу сайту, додатка або ПЗ. Предметом роботи фронтенд-розробника є частина коду сайту, яка завантажується в браузер і з якою взаємодіє користувач (фронтенд).

Backend developer (бекенд-розробник) — це спеціаліст, який займається програмно-адміністративною частиною вебдодатка, внутрішнім вмістом системи, серверними технологіями — базою даних, архітектурою, програмною логікою. Предметом роботи бекенд-розробника є частина коду сайту, що знаходиться на вебсервері (так звана серверна частина вебпрограми або бекенд).

Junior (джуніор) — спеціаліст практично без досвіду роботи. На цій посаді частіше за все не займаються стратегічно важливими задачами. Як правило, на цій позиції тримаються близько 1–1,5 років.

Middle (мідл) — спеціаліст, який працює швидко та якісно й може допомагати джуніорам, йому можна довіряти як відповідальну, так і не дуже роботу. Досить відпрацював, щоб розбиратися у своїй сфері та розвиватися далі, обговорювати з командою спільні питання. На цій позиції можна затриматися надовго, якщо не робити зусиль зростати.

Senior (сінйор) — зазвичай дуже крутий спеціаліст-професіонал, один із найкращих співробітників у компанії, але буває, що це ті middle-фахівці, яких підвищили, щоб їх не схантили інші компанії. Іноді займає керівні позиції. Досвід роботи приблизно 5–7 років.

Team Lead (тімлідер або просто lead(лід)) — це IT-фахівець, який керує своєю командою розробників, володіє технічною стороною, бере участь у роботі над архітектурою проєкту, займається рев’ю коду, а також розробкою деяких особливо складних завдань на проєкті.

Project Manager (проєктний менеджер) — це фахівець, головним завданням якого є управління проєктом загалом: планування та розставлення пріоритетів, планування виконання завдань, контроль, комунікації, а також оперативне розв’язання проблем.

Estimate (естімейт) — орієнтовна оцінка часу, необхідного на виконання того чи іншого завдання.

Deadline (дедлайн) — крайній термін виконання обумовлених задач.

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

Software Development Life Cycle (життєвий цикл розробки програмного забезпечення) — це структура, яка визначає кроки в розробці програмного забезпечення на кожному етапі й охоплює детальний план побудови, розгортання та обслуговування програмного забезпечення. SDLC визначає повний цикл розробки, тобто всі завдання, пов’язані з плануванням, створенням, тестуванням та розгортанням програмного продукту.

Draft (драфт) — чернетка, документ у Figma.

FigJam (фігма джем) — онлайн-дошка для роботи з ідеацією проєкту, брейнстормінгу, створення мудбордів та інших складників командної роботи з UX.

Ідеація — це творчий процес, під час якого дизайнери генерують ідеї на сесіях (напр., мозковий штурм, найгірша з можливих ідей).

Template (темплейт) — шаблон, заготовка.

Frame (фрейм) — робоча область у Figma.

Mobile (мобайл) — мобільна версія.

Tablet (таблет) — планшетна версія.

Desktop (десктоп) — версія розширення екрана стаціонарного комп’ютера чи ноутбуку.

Layer (леєр, шар) — назва панелі шарів, що розташована ліворуч в інтерфейсі Figma.

Invite (інвайт) — запрошення до файлу.

Share (шерити) — поділитися файлом.

Editor (едітор) — редактор.

Viewer (вьювер) — глядач.

Figma Community (ком’юніті, спільнота) — спільнота Figma із тематичними файлами, макетами, плагінами, які можна використовувати безпосередньо в програмі Figma.

Plugin (плагін) — додаток, що підключається до основного функціонала програми.

Gradient (градієнт) — це тип заливки двома чи більше кольорами з плавним, м’який, поступовим переходом від одного кольору до іншого.

Stroke (штрих) — цей термін використовується як синонім обведення, контуру об’єкта.

Pattern (орнамент) — це система повторюваних елементів, які мають передбачуване розташування і створюють єдину структуру.

Fill (заливка) — програмна функція, що означає заливку об’єкта. Figma дозволяє зробити більше ніж одну заливку для об’єкта.

Group (обʼєднання в групи) — функція, що дає змогу об’єднувати об’єкти в спільні групи для полегшення маніпуляцій із ними. Їх використовують, щоб організувати та зберігати пов’язані елементи разом.

Align (вирівнювання) — функція, що дає змогу вирівнювати об’єкти відносно площини та/або інших об’єктів.

Rotate (обертання) — функція, що дає змогу обертати окремі шари, як-от об’єкти, рамки, групи або виділені шари. Figma використовуватиме горизонтальний та вертикальний центр виділених обʼєктів як точку обертання.

Constraints (обмеження) вказують Figma, як шари мають реагувати на зміну розміру їхніх рамок. Це допомагає контролювати вигляд дизайну на різних пристроях та розмірах екранів.

Shape tool (Інструменти фігур) — інструмент для створення фігур, які складають більшість шарів у будь-якому дизайні. Figma має кілька основних фігур, які можна використовувати як будівельні блоки: Прямокутник, Лінія, Стрілка, Еліпс, Багатокутник, Зірка.

Repetition (повторення) — це багаторазове використання візуального елемента для створення візерунка, руху та ритму. Воно часто використовується для створення єдності в композиції. Елементи, які можна ефективно повторювати в композиції, це кольори, тональні значення, форми, просторові відносини й текстури.

Rythm (ритм) — це впорядкований рух. Ритмічні візерунки будуються з елементів та інтервалів між ними, і так само як вухо буде слідувати за ритмом пісні, око буде слідувати за ритмом, створеним візуально.

Рух – це спрямування погляду користувача до заздалегідь визначеного шляху в композиції. Найважливіший елемент повинен вести до наступного за важливістю і так далі. Це досягається за допомогою позиціювання (око природно падає на певні ділянки дизайну в першу чергу), акцентування та інших елементів дизайну.

Векторний об’єкт/ілюстрація — це зображення, що складається з векторної графіки. Ця графіка — це точки, лінії, криві та фігури, які базуються на математичних формулах. Під час масштабування файлу векторного зображення, його роздільна здатність не зменшується, а якість не втрачається, тож його розмір можна збільшувати чи зменшувати як тобі потрібно.

Flatten (перетворення в криві) — функція, за допомогою якої можна перетворити будь-який із текстових шарів на векторний контур, а також об’єднати групу об’єктів, які редагувалися за допомогою unite/substract/intersect/exclude, в один загальний об’єкт.

Outline Stroke (контурний штрих) — функція, яка дає змогу перетворити штрихи на векторні об’єкти.

Bézier Curves (Криві Безьє або просто криві) — математично описані криві, що використовуються в комп’ютерній графіці та анімації. У векторних зображеннях їх застосовують для моделювання плавних кривих, які можна масштабувати до нескінченності.

Вуса Безьє — точки-маніпулятори, що дають змогу управляти нахилом та вигином кривої лінії контуру.

Pen Tool (перо) — інструмент для створення векторних мереж і кривих Безьє.

Pencil Tool (олівець) — інструмент для малювання на полотні або інших об’єктах.

Canvas (полотно, синонім frame та artboard) — центральна область при відкритті проєкту, що слугує основним робочим простором.

Sketch or Sketching (ескіз, скетч) — це особлива форма малювання, яку дизайнери використовують, щоби пропонувати, досліджувати, вдосконалювати та передавати ідеї. Скетчі — це швидкий спосіб створити основну композицію вашої ілюстрації.

Snap to Pixel Grid — прив’язка до піксельної сітки.

Шрифт — це комплекс візуально різних, але спроєктованих за одним принципом знаків усього алфавіту, включно з літерами, цифрами, арифметичними знаками та іншими символами.

Гарнітури (також сімейства тексту або сімейства шрифтів) — це колекція шрифтів, що мають спільний загальний вигляд і розроблені для використання разом. Кожна гарнітура має один і той же вигин зарубок, співвідношення кутів або міжбуквені інтервали тощо.

Стиль шрифту — це версія шрифту в гарнітурі. Зазвичай Regular (назва залежить від гарнітури) — це базовий шрифт, що може містити такі стилі тексту, як звичайний, жирний, напівжирний, курсив та жирний курсив.

Resize (ресайз) — зміна розміру.

Растр (або Bitmap) — цифрові зображення, які складаються з крихітних прямокутних пікселів, або елементів зображення, які розташовані в сітці (або растрі) з координатами x і y (у випадку 3D включає і координату z) таким чином, що вони утворюють зображення.

Маска — це об’єкт, форма якого маскує інше зображення так, що видимими залишаються лише області, що лежать у межах цієї маски — тобто зображення обрізається формою маски.

Resizing (ресайзинг) — зміна розміру об’єкта.

Reposition (репозиція) — зміна позиції об’єкта в просторі.

Блюр, блюрити — застосовувати ефект розмиття до об’єкта.

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

Стиль — інструмент для визначення, який колір, текст або ефект було використано на обʼєкті; його також використовують для визначення структури та вигляду сітки.

Альфа-канали відображають ступінь прозорості або непрозорості кольору, зображення або об’єкта.

Auto Layout (авторозміщення/”автолейаут”) — це інструмент у Figma, що дає змогу автоматизовано організовувати об’єкти всередині контейнера “автолейаута”. Наприклад, відступи та вирівнювання між об’єктами.

Контейнер — об’єкт, що дає змогу інкапсулювати (поєднати) у собі об’єкти інших типів. У контейнерах реалізується конкретна структура об’єктів.

Інкапсуляція — збір в одному об’єкті інших об’єктів, які підпорядковуються певним правилам організації та поведінки.

Padding (заповнення) — відступ (білий простір) від меж рамки Auto Layout до об’єктів, що розташовані всередині контейнера.

Packed (“пакування”): об’єкти в контейнері автолейаута будуть групуватися із заданими відстанями по вертикалі чи горизонталі. Цей параметр використовується для налаштування відстаней «вручну» між об’єктами в середині Auto Layout відносно один до одного.

Space Between (Auto) (групування з автоінтервалом): об’єкти в контейнері автолейаута будуть групуватися з автоматичними відстанями по вертикалі чи горизонталі, рівномірно розтягуючись залежно від розміру контейнера. Цей параметр використовується для створення «гумовості» контейнеру.

Text baseline alignment (вирівнювання базової лінії тексту) – інструмент автолейаута, який допомагає вирівняти базові лінії між блоками з різними розмірами шрифтів.

Absolute position (абсолютне положення) – інструмент, що виключає об'єкт з потоку автолейаута, при цьому залишаючи його в рамці автолейаута. Об'єкт і його “сусіди” ігнорують один одного, навіть якщо вони змінюють розмір і переміщуються.

Resizing (зміна розміру) – властивість автолейаута контролювати розміри об'єктів в рамці автолейаута. Якщо задати ресайзинг материнської рамки автолейаута, усі наступні зміни будуть також адаптовані й для її дочірніх обʼєктів.

Canvas stacking order (порядок укладання полотна). Коли кілька шарів мають від'ємний інтервал, створюючи стос, останній об'єкт (крайній правий або крайній нижній) у стосі за замовчуванням буде зверху. Ти можеш змінити візуальний порядок стека на полотні.

Negative Spacing (від'ємне значення інтервалу) — можливість використати від’ємне значення spacing у автолейауті для зміщення відстаней між об’єктами.

Components (компоненти) — це елементи, які можна повторно використовувати в різних проєктах, щоб створювати узгоджений дизайн. Ти можеш створювати компоненти з будь-яких шарів або об'єктів, які ти розробив. Це можуть бути найрізноманітніші елементи, як-от кнопки, піктограми, макети тощо.

Master component (майстер, батьківський компонент) — блок Figma, який працює як основа і дозволяє вносити зміни до всіх інстанс-компонентів, і ці зміни поширюються на всі інстанси.

Instance component (компонент-екземпляр, -копія) — це компонент-копія, що був скопійований із майстер-компонента. Будь-які зміни, що були застосовані для майстер-компонента автоматично застосовуються до будь-якого інстанс-компонента (крім випадків, коли компонент-копія був відкріплений від батьківського).

Component properties (властивості компонента) – це змінні аспекти компонента. Ти можеш визначити, які частини компонента можуть змінювати інші, прив'язавши їх до певних властивостей дизайну.
Це дозволяє тобі контролювати такі речі, як:

Boolean properties (булеві властивості) – властивості, що слугують для встановлення значень true/false та дозволяють користувачам увімкнути або вимкнути атрибут. Наприклад, якщо система дизайну містить кнопки з піктограмою та без неї, застосуй булеву властивість до видимості шару піктограми замість створення варіантів для кожного стану. Це також чудовий спосіб зменшити розмір систем дизайну та бібліотек файлів.

Text properties (властивості тексту) – властивості, які дають тобі змогу контролювати все, від зовнішнього вигляду та розміщення тексту до зміни розміру та функцій OpenType.

Variants (варіанти, сети компонентів) — блок Figma, який дає тобі змогу групувати та організовувати схожі компоненти в єдиний контейнер. Це спрощує організацію твоєї бібліотеки компонентів та полегшує усім процес пошуку необхідних елементів.

Variant property (властивість варіанту) дозволяє  визначати такі атрибути варіантів, як стан, колір або розмір.

Hover-ефект — це технологія вебанімації, завдяки якій елементи сайту змінюють свій вигляд під час наведення на них курсора або натискання на них. Ховери включають безліч різноманітних ефектів, які продумують дизайнери: зміна кольору, підказки та інші підписи, збільшення/зміщення/трансформація/ротація об’єктів, плавні переходи й т. ін.‍

Prototype (прототип) — функція Figma, яка дає змогу створити інтерактивний плин того, як користувачі можуть взаємодіяти з твоїм дизайном.

Micro Interactions (мікровзаємодія) — маленькі, бажано функціональні анімації, які підтримують користувачів тим, що надають візуальний фідбек та чітко відображають зміни.

Trigger (тригер) визначає, який тип взаємодії з хотспотом користувачі мають виконати, аби прототип «просунувся далі». Це може бути взаємодія мишею чи дотиком, наприклад, тап, перетягування, клацання тощо.

Hotspot (хотспот) — місце, де відбуваються взаємодії з користувачами.

Action (дія) визначає, що станеться після взаємодії користувачів із хотспотом.

Connection (зʼєднання) — стрілка або «нудл», який зʼєднує хотспот із «місцем призначення». І взаємодія, й анімація визначаються через зʼєднання.

Destination (місце призначення) — наступний крок у прототипі, на якому й закінчується зʼєднання.

Flow (потік) — мережа з фреймів та зʼєднань на одній сторінці, яка дає змогу попередньо переглянути повну подорож користувачів та їхній досвід із твоїм дизайном.

UX (User experience, досвід користувача) дизайн – процес створення значущого та релевантного досвіду користувачів, який використовують дизайн-команди під час створення продукту. UX-дизайн передбачає розробку всього процесу створення та інтеграції продукту, включаючи аспекти брендингу, дизайну, практичності та функціональності.

Design thinking (дизайн-мислення) – методологія, що намагається розвʼязувати проблеми творчим та орієнтованим на користувача шляхом. Її використовують, щоб зрозуміти користувачів, ставити під сумнів припущення, наново визначати проблеми та знаходити інноваційні рішення.
Основні риси методології дизайн-мислення включають:

Дизайн-мислення складається з таких етапів:

Product design thinking (продуктове дизайн-мислення) – це набір когнітивних процесів і, можливо, методів проєктування, якими користується дизайнер під час розгляду та розв'язання проблеми. Ефективне продуктове мислення починається з визначення проблеми аудиторії. 

Продуктове мислення складається з таких стадій:

Вебсайт – це сукупність пов'язаних між собою вебсторінок, що містять зображення, текст, аудіо, відео тощо. Він може складатися з однієї, двох сторінок чи n-кількості сторінок.  Вебсайт надає візуальний і текстовий контент, який можуть переглядати користувачі. При цьому вебсайти – це односторонні інформаційні канали, вони не дозволяють користувачам взаємодіяти з сайтом або звертатися до нього (напр., вебсайт Академії).

​​Вебдодаток – це частина програмного забезпечення, до якої можна отримати доступ через браузер після автентифікації. Вебдодаток використовує комбінацію скриптів на стороні та на стороні клієнта для представлення інформації. Для управління запитами від користувачів потрібен сервер (напр., LMS Академії).

Вебсайт електронної комерції, e-commerce – це вебсайт, який дозволяє людям купувати й продавати фізичні товари, послуги та цифрові продукти через Інтернет, а не в фізичному магазині. За допомогою вебсайту електронної комерції бізнес може обробляти замовлення, приймати платежі, керувати доставкою та логістикою, а також надавати послуги клієнтам (напр., Comfy).

Онлайн-маркетплейс – це сайт електронної комерції, який з'єднує продавців з покупцями. Оператор маркетплейсу не володіє товаром, його бізнес полягає в тому, щоби представити користувачеві чужий товар і сприяти укладенню угоди (напр. olx).

Сайт-візитка – являє собою простий невеликий вебресурс, що складається з однієї або декількох сторінок, на яких вказана головна інформація про компанію, продукт, послугу або особистості. Основна мета – коротка передача інформації про компанію чи персону для привернення уваги відвідувачів (напр., Wibicom).

Блог – це сайт, який постійно поповнюється новою інформацією і, як правило, складається з добірки постів (напр., Arun (blog))

Social media (соцмережі) – це збірний термін для позначення вебсайтів і додатків, які зосереджені на спілкуванні, створенні спільнот, взаємодії, обміні контентом і співпраці. Люди використовують соцмережі, щоб залишатися на зв'язку та взаємодіяти з друзями, родиною та різними спільнотами. Компанії використовують соціальні додатки для маркетингу та просування своєї продукції, а також для відстеження потреб клієнтів (напр., Facebook).

Інформаційний (медіа) портал – це вебсайт, який є ресурсом для передачі інформації. Прикладами є енциклопедії та сайти новин. Вони часто включають розгорнутий контент, щоб задовольнити читацьку цікавість, і мають функцію пошуку, щоб користувачі могли знайти те, що вони шукають (напр., USA today).

Інтернет-форум – це тип вебсайту, на якому люди можуть ставити запитання або вести бесіди, публікуючи повідомлення (напр., Reddit).

Посадкова сторінка (landing page, лендінг) – це окрема вебсторінка, на яку потенційні клієнти можуть "приземлитися", перейшовши за посиланням з електронного листа чи іншого цифрового ресурсу. Мета такої сторінки – зібрати інформацію від користувачів в обмін на щось цінне (промокод для знижки, технічний документ для бізнесу (B2B)). Такі вебсторінки не «живуть» постійно у навігації вебсайту, а слугують конкретній меті в певний момент рекламної кампанії для цільової аудиторії (напр. Безкоштовний пробний період на Shopify).

No-code tool (ноу-код тулз, інструмент «без кодування») – це платформа, яка дозволяє «нетехнічним» користувачам розробляти цифрові продукти. Зазвичай вони мають функцію перетягування та зручний інтерфейс. Інструменти «без кодування» допомагають створювати вебсайти, посадкові сторінки, додатки тощо без попереднього досвіду програмування.

Дизайн-бриф або креативний бриф – це документ, який дає змогу визначити обсяг, масштаб і основні деталі твого майбутнього дизайн-проєкту.

Інтерв'ю з клієнтом – це планована особиста бесіда за заздалегідь наміченим планом між представником компанії та клієнтом. Метою цієї розмови є збір думок, відгуків та інформації про потреби та задоволення клієнта, що дозволить компанії покращити свої продукти та послуги.

Технічне завдання – це документ в ІТ-сфері для підрядника, який визначає вимоги до функціональності, дизайну та інших технічних характеристик проєкту. Від якості технічного завдання залежить кінцевий результат роботи.

Скрипт дзвінка або зустрічі – письмовий сценарій, що містить правильно сформульовані фрази та логічні допоміжні засоби. Скрипт допомагає будувати комунікацію та зосередитися на змісті розмови. 

Stakeholder (стейкхолдер) – це зацікавлена в проєкті особа чи сторона, що хоч якось його стосується.

Stakeholder mapping (мапування стейкхолдерів) – це візуальне представлення всіх зацікавлених сторін, які беруть участь у проєкті, та рівня їхнього впливу.

Scope (скоуп) – це спосіб встановити межі твого проєкту і точно визначити цілі, дедлайни та результати, над якими ти будеш працювати. Визначивши обсяг проєкту, ти зможеш досягти поставлених цілей і завдань без затримок і перевтоми.

Dependencies (залежності) описують взаємозв'язок між діями та визначають конкретний порядок, в якому вони повинні бути виконані. Залежності виникають у кожному процесі прийняття рішень, планування та розробки та в ідеалі є наперед визначеними. 

Deliverables (результати) – це будь-який продукт, послуга або інший результат, який повинен бути виконаний для завершення проєкту.

Timings (таймінг) – це відстеження або планування інтервалів між подіями в часі.

Mind Maps (майндмепи, інтелект- або ментальні мапи) – інструменти для генерації ідей, розпізнавання патернів та візуалізації процесів, які можна нескінченно використовувати в практиках UX дизайну.

Ideation (ідеація, генерація ідей) – процес генерації ідей та рішень за допомогою таких методів, як скетчинг, прототипування, мозковий штурм (в усній чи письмовій формі), найгірша з можливих ідей та інші.

Informational Architecture, AI (інформаційна архітектура) – дисципліна, яка зосереджена на організації інформації всередині діджитал продукту. Наприклад, коли дизайнери створюють додатки чи вебсайти, вони компонують кожен окремий екран так, щоб користувач міг легко знайти необхідну інформацію. Також вони створюють певний флоу екранів, який дозволяє користувачам переходити між екранами без особливих зусиль.

Sitemap (сайтмеп, мапа сайту) — візуальна карта, яка містить список сторінок твого сайту. Її роблять у вигляді ієрархічної діаграми, яка показує інформаційну архітектуру сайту.

Matrix of prioritization (матриця пріоритетів) – матриця, яка сортує завдання або проєкти за визначеним переліком критеріїв, таких як терміновість та зусилля. За допомогою цього інструменту члени команди можуть швидко визначити, що починати в першу чергу. 

Аналіз конкурентів у UX – це метод, який дослідники UX використовують, щоби зрозуміти конкуренцію, визначити можливості та знайти свої переваги. Цей аналіз надає командам UX-дизайнерів цінну інформацію для розробки UX-стратегії, щоб покращити користувацький досвід та бізнес-цінність продукту. Конкурентний аналіз UX фокусується насамперед на дизайні та взаємодії, але дослідники також розглядають, як бізнес та інші аспекти впливають на загальний користувацький досвід.

SWOT (strengths (сильні сторони), weakness (слабкі сторони), opportunities (можливості), threats (загрози) — це ефективний інструмент бізнес-планування, який використовується в бізнесі для формування стратегій. Цей інструмент допомагає проаналізувати внутрішні фактори (сильні та слабкі сторони), які впливають, і зовнішні фактори (можливості та загрози), які можуть мати вплив на організацію.

Прямі конкуренти – усі компанії, які виробляють дуже схожий продукт, орієнтуються на той самий сегмент ринку або використовують дуже подібну цінову стратегію. Наприклад, прямими конкурентами є McDonald's та Burger King, оскільки обидві компанії виробляють гамбургери, сегмент ринку – це люди, які цінують послуги швидкого харчування, і рівень їх цін дуже схожий.

Непрямі конкуренти – усі конкуренти, які виробляють продукт для задоволення однакових потреб і, як наслідок, прагнуть отримати перевагу споживача та отримати дохід шляхом реалізованих продажів. Як правило, вони виробляють замінники. Наприклад, McDonald's та KFC є непрямими конкурентами, адже обидві компанії вирішують потребу в голоді споживачів.

Reference (референс) – допоміжне зображення (малюнок, ілюстрація, фотографія), яке художник чи дизайнер вивчає перед роботою, щоби точніше передати атмосферу проєкту, отримати додаткову інформацію, ідеї, натхнення.

Moodboard (мудборд) – це інструмент, який відображає основні ідеї та елементи, що стоять за проєктом. Він допомагає дизайнеру та клієнту синхронізувати очікування та визначитися з бажаним результатом найбільш детально, тим самим оптимізуючи процес взаємодії. Найбільш розповсюджений формат роботи із мудборд – це колаж із зображень.

Дослідження користувачів – це важливий етап у процесі створення продукту, який дає змогу отримати інформацію про потреби та вимоги цільової аудиторії. Такий підхід допомагає у створенні більш якісного та ефективного дизайну.

Якісні дослідження (Qualitative research) належать до описових даних і допомагають з'ясувати, як люди думають і що відчувають. Дослідження відповідає на питання "чому", а його результати часто є спостереженнями та коментарями, які дають краще уявлення про реальний досвід своїх користувачів.

Кількісні дослідження (Quantitative research) зазвичай базуються на числових даних і відповідають на питання "що". Його часто використовують, щоб додати контекст до думок і поведінки своїх користувачів (наприклад, виявляється, що їм знадобилося менше часу, щоб виконати завдання на прототипі А).

Дослідження ставлення до продукту (Attitudinal research) – це дослідження, яке ґрунтується на інформації від учасників тестування про їхню взаємодію з продуктом. До методології дослідження ставлення належать інтервʼю та фокус-групи. Дослідники можуть отримати необхідну інформацію, звернувшись безпосередньо до користувачів за відгуками, наприклад, про їхній досвід, думки та очікування щодо продукту.

Поведінкові дослідження (Behavioral research) – це дослідження, що базується на безпосередньому спостереженні за діями учасників тестування. Юзабіліті-тестування з модератором – це поведінкова методологія. Модератор спостерігає за тим, як учасники тестування взаємодіють з користувацьким інтерфейсом під час тесту, і на основі цього спостереження робить висновок про поведінку користувачів. Поведінковий аналіз допомагає команді зрозуміти, що люди насправді роблять з продуктом і де вони «застрягають» під час його використання.

Сортування карток – це метод UX-дослідження, який дозволяє з'ясувати, як люди розуміють і класифікують інформацію. Ця техніка використовується, коли команда хоче згрупувати й позначити інформацію на сайті так, щоб вона була зрозумілою для цільової аудиторії. Сортування карток створює основу для надійної інформаційної архітектури (ІА), а сильна ІА дозволяє створити навігаційну систему, яка відповідає очікуванням користувачів.

Відкрите сортування карток – у відкритому сортуванні учасники організовують набір карток за категоріями. Потім вони називають кожну категорію тією назвою, яка, на їхню думку, найкраще їй підходить.

Закрите сортування карток – у закритому сортуванні учасники розподіляють набір карток за заздалегідь визначеною групою категорій.

Гібридне сортування карток – під час гібридного сортування учасники отримують заздалегідь визначену групу категорій, за якими користувачі можуть організувати свої картки, але учасники також можуть створювати й позначати нові категорії, якщо захочуть.

Сегментація користувачів – це практика поділу потенційних або наявних користувачів на групи, які мають схожі характеристики. Основна ідея полягає в тому, що ці групи, ймовірно, матимуть схожу поведінку і, ймовірно, однаково реагуватимуть на маркетингові/продуктові пропозиції.

Характеристики користувача – детальна інформація про користувача (напр., вік, стать, освіта, посада тощо), яка дозволяє більш ефективно проєктувати та взаємодіяти з ним.

Вільний користувач – користувача послуг, який не завершив процес реєстрації та не оплачує підписку.

Оплачений користувач – це той користувач, який використовує продукт на умовах платного плану підписки.

Цільова аудиторія – це група людей, яка визначається певними демографічними характеристиками та поведінкою. Часто компанії використовують те, що вони знають про свою цільову аудиторію, для створення персон користувачів.

UX персона (персона користувача) – це архетипічні користувачі, цілі та характеристики яких відображають потреби більшої групи користувачів. Зазвичай персони представлені в документі на одну-дві сторінки.

Карта емпатії – це легка для розуміння діаграма, яка пояснює все, що дизайнери дізналися про певний тип користувачів. Карта емпатії складається з чотирьох квадратів, які показують, що користувач говорить, робить, думає і відчуває. 

Карта подорожі клієнта(CJM / customer journey map) – це візуалізація процесу, який проходить користувач для досягнення мети під час використання продукту або послуги. Вона допомагає уявити весь досвід з точки зору користувача, пропонуючи продуктовим командам цінну інформацію, яка може допомогти їм оптимізувати взаємодію з користувачем відповідно до його потреб.

Карта сценарію (Scenario map) – це процес опису всіх кроків, які користувач зробить, щоб виконати завдання. Вона може містити нотатки про те, що користувач думає і відчуває на кожному кроці, а також коментарі або важливу для кожного кроку інформацію, запитання або припущення, ідеї або пропозиції, які з'являються під час виконання вправи.

Розкадровка (Storyboard) – це графічний упорядник у вигляді фотографій або зображень, які демонструються з метою попередньої візуалізації кінофільму, анімації, рухомої графіки або інтерактивної медіапослідовності.

User Flow (юзер флоу) – це діаграма, яка наочно показує шлях, який пройде користувач у додатку або на вебсайті, щоби досягти певної мети. Юзер флоу можна створювати на будь-якій стадії проєктування і це допоможе визначити інформаційну архітектуру.

Screen flows (скрін флоу) – це high fidelity екрани, які фактично є макетами сторінок готового додатку. Вони дуже деталізовані та відображають реальний розмір і вигляд майбутнього продукту.

Sitemap (Карта сайту) показує ієрархію структури сайту. Карти сайту допомагають дизайнерам організувати та розставити пріоритети щодо контенту та функціональності продукту.

Wire flow (вайр флоу) – це поєднання вайрфрему та юзер флоу. Замість блоків з інформацією ми бачимо візуалізацію екранів, з якими взаємодіють клієнти на шляху до досягнення мети.

Wireframe (вайрфрейм, каркас) – це макет вебсайту або користувацького інтерфейсу, який ілюструє елементи дизайну на кожній сторінці, як вони пов'язані між собою та який у них функціонал.

Flow chart (блок-схема, флоучарт) – це діаграма, яка відображає порядок кроків користувача під час взаємодії з продуктом. Вони можуть відображати весь процес або лише його частину.

Task flow (таск флоу) відображає дії користувача під час виконання певного завдання. Зазвичай таск флоу ілюструють лише один шлях, а не декілька. Вони використовуються в UX-дизайні, коли дизайнери вважають, що всі клієнти будуть виконувати однакову послідовність кроків.

UX скетчинг – це просто чорновий малюнок від руки, який зазвичай використовується для генерування, передачі та вдосконалення ідей. Це може бути як для власного використання, так і для того, щоб поділитися з колегами, менеджерами команди, клієнтами та стейкхолдерами.

Wireframe (вайрфрейм, каркас) – це макет вебсайту або користувацького інтерфейсу, який ілюструє елементи дизайну на кожній сторінці, як вони пов'язані між собою та який у них функціонал. 
‍Найтиповіші елементи сайту представлені на зображенні:

Lo-fi wireframe (low-fidelity, вайрфрейм низької точності) – це перше візуальне представлення ідеї дизайнера. Він забезпечує розробникам і клієнтам чітке розуміння функціональності та дизайну, які має підтримувати програмне забезпечення.

Hi-fi wireframe (high-fidelity, вайрфрейм високої точності) – це реалістичний прототип, який дуже схожий на остаточний дизайн проєкту. Він може включати типографіку, кольори, зображення, іконки та кнопки заклику до дії.

Прототип – невіддільна частина процесу проєктування. Прототипування дозволяє перетворити бачення на щось відчутне, щоб перевірити гіпотезу на реальних користувачах. Воно також дозволяє продуктовим командам експериментувати та досліджувати різні підходи до ідеї, перш ніж обрати той, який є найбільш цінним як з точки зору бізнесу, так і з точки зору користувачів.

Low-fidelity прототип (прототип низької точності) – це грубе представлення концепції дизайну, яке допомагає дизайнерам перевірити її на ранній стадії процесу проєктування. Прототипи низької точності, як правило, обмежені у функціях та взаємодії.

High-fidelity прототип (високоточний прототип) – це інтерактивний прототип, який імітує функціональність і деталі дизайну реального вебсайту або додатку. Високоточне прототипування допомагає користувачам зрозуміти, як виглядатиме майбутній продукт.

Mockup (мокап) – це візуальне представлення кінцевого цифрового продукту або вебсайту, включаючи макет/ієрархію, колір, типографіку, іконки та інші елементи інтерфейсу. 

Website Heat Mapping (Хітмепінг, теплове мапування вебсайтів) – це метод візуалізації даних, який показує поведінку користувачів на вебсайті або в додатку за допомогою кольору (від теплого до холодного), щоби продемонструвати залученість користувачів. Програмне забезпечення для теплового мапування дозволяє компаніям краще зрозуміти, як працюють окремі сторінки вебсайту. Ці якісні дані дають змогу дизайнерам краще зрозуміти, що стоїть за користувацьким досвідом, щоби допомогти постійно вдосконалювати продукт.

A/B-тестування (також відоме як спліт-тестування або bucket-тестування) – це одночасне проведення експерименту між двома або більше сторінками чи екранами, щоб побачити, яка з них показує найкращі результати. Під "ефективністю" зазвичай мається на увазі конверсія.

Воронка продажів (також відома як воронка доходів або процес продажу) - це процес купівлі, через який компанії проводять клієнтів під час придбання продуктів. Це визначення також стосується процесу, за допомогою якого компанія знаходить, кваліфікує та продає свою продукцію покупцям.

Call to action (CTA, заклик до дії) – це твердження, розраховане на негайну реакцію людини, яка його читає або чує. 

Процес генерації лідів зазвичай починається, коли відвідувач сайту натискає на заклик до дії (CTA), розташований на одній зі сторінок вашого сайту або в блозі.

Конверсія на сайті відбувається, коли користувач виконує бажану дію на сайті, наприклад, робить покупку або заповнює контактну форму.

Інклюзивний дизайн — це процес, спрямований на те, щоби сервіс або продукт був доступним для різної аудиторії.

Універсальний дизайн — ширше поняття, воно виникло у галузі архітектури та позначає те, наскільки середовище комфортне для людей з різними фізичними порушеннями.

Accessibility (безбар'єрність) – це розробка продуктів, пристроїв, послуг, транспортних засобів або середовища таким чином, щоб ними могли користуватися люди з інвалідністю.

Learnability (легкість навчання) оцінює легкість, з якою користувач навчається працювати з вебсайтом.

Efficiency (ефективність) показує, наскільки добре користувач адаптується до роботи з вебсайтом для виконання завдання.

Memorability (запам'ятовуваність) позначає легкість, з якою користувач запам'ятовує, як переміщатися сайтом, щоб повторно виконати завдання.

Readability (читабельність) – це те, наскільки легко чи важко щось читати. Читабельність залежить від оформлення тексту (наприклад, вибору шрифту, інтервалів або кольорів) і контексту (слів і речень на сторінці). Інші фактори, які впливають на читабельність, включають довжину речення, структуру речення та середню кількість складів у слові. Ці комбіновані фактори допомагають оцінити, наскільки добре ваш текст буде зрозумілим.

Usability (юзабіліті) – це спосіб виміряти, наскільки легко користуватися продуктом. Це концепція в дизайнерських колах, яка гарантує, що продуктами – вебсайтами, меблями чи лобі в готелях – можна користуватися максимально просто і безболісно.

Композиція – простір, в якому різні окремі елементи мають стати одним цілим; де картинки, текст, колір та графіка стає єдиним дизайном.

Статична композиція означає, що більшість ліній на сторінці горизонтальні або вертикальні. Вважається, що такі лінії мають заспокійливий ефект на спостерігача.

Динамічна композиція ґрунтується на ідеї руху та енергії. Вона має привертати увагу та захоплювати, але не бути передбачуваною. Ефект руху досягається шляхом використання різних кутів нахилу основного об'єкта відносно лінії горизонту.

Баланс – рівновага цілого і всіх частин композиції у відношенні до вертикальних та горизонтальних осей у просторі.
‍
Є два базових типи балансу:
‍
1. Для симетричного балансу елементи з однаковою візуальною вагою розміщуються по обидва боки від уявної центральної лінії сторінки.
‍
2. Асиметричний баланс використовує елементи різної візуальної ваги, часто розміщуючи їх відносно лінії, яка не є центральною в загальному дизайні.

Обертова симетрія досягається тоді, коли є центральна точка (центр обертання), навколо якої можна обертати дизайн, зберігаючи його симетрію. Таким чином, створюючи дизайн, не варто обмежуватись лише чотирма частинами екрана або сторінки – можна думати про це і як про коло, з градусами й координатами, які ти можеш використовувати більш вільно.

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

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

Ковзна симетрія виникає, коли ми відзеркалюємо зображення, а потім переміщуємо копію, щоб вона не була строго навпроти оригінального зображення. Таким чином, копія виглядатиме трохи зміненою, наприклад, її можна перевернути чи віддалити від оригіналу, створивши таким чином відчуття руху.

Асиметрія – це відсутність симетрії або рівномірності відносно центральної лінії, площини або точки. У контексті дизайну, асиметрія може використовуватись для створення динамічної та цікавої композиції, яка відрізняється від стандартних симетричних рішень.

Emphasis (акцент, виділення) спрямовано на ті частини дизайну, які мають виділятися. У більшості випадків, це стосується найважливішої інформації, яку має передати дизайн.

Пропорція співвідносить розміри елементів відносно один одного. Таким чином демонструється, що більші елементи дизайну важливіші за менші.

Ієрархія – принцип дизайну, який безпосередньо повʼязаний з тим, наскільки добре контент буде сприйнятий користувачами вебсайту. Вона стосується важливості елементів дизайну чи контенту, де найважливіші елементи дизайну виглядають відповідно. 

Повторення – гарний спосіб стандартизувати дизайн, у якому використано багато різних елементів. Повторення може бути використано різними способами: через повтор однакових кольорів, шрифтів, форм чи інших елементів дизайну.

Ритм – це повторювані проміжки між елементами. Існує п'ять основних типів візуального ритму, які дизайнери можуть створити: випадковий, регулярний, змінний, плавний і прогресивний.

Візерунки (патерни) – це просто повторення кількох елементів дизайну, що поєднуються між собою. Патерни також можуть стосуватися встановлених стандартів для дизайну певних елементів. Наприклад, top navigation (верхня навігація) – це шаблон дизайну, з яким взаємодіяла більшість інтернет-користувачів.

Білий простір (або негативний простір) – це ділянки дизайну, які не містять жодних елементів дизайну. Простір, по суті, порожній.

Рух (динаміка) – це те, як око переміщується дизайном. Найважливіший елемент повинен вести до наступного за важливістю і так далі. Це досягається за допомогою позиціювання (погляд, природно, спочатку падає на певні ділянки дизайну), акцентів та інших елементів дизайну.

Різноманітність у дизайні використовується для створення візуального інтересу. Без неї дизайн може дуже швидко стати монотонним, що призведе до втрати інтересу користувача. Різноманітність можна створити різними способами: за допомогою кольору, типографіки, зображень, форм і практично будь-якого іншого елемента дизайну.

Єдність – це те, наскільки добре елементи дизайну поєднуються між собою. Візуальні елементи повинні мати чіткі взаємозв'язки в дизайні. Єдність також допомагає забезпечити чітке та послідовне донесення концепцій. Дизайн із хорошою єдністю також виглядає більш організованим і якіснішим.

Групування – це процес утворення однорідних груп на основі розподілу цілого на окремі частини або їх об'єднання.

Контраст – порушення закономірностей стосовно сусідніх елементів, різко виражена протилежність. Контраст форм та елементів являється акцентом.

Акцент – підкреслювання, виділення, винесення на перший план.

Нюанс – порушення закономірностей стосовно сусідніх елементів, з малим порогом відмінності. Нюансні композиції м’які й створюються за принципом схожості форм, зображень, шрифту, техніки, стилю і т. ін.

Домінанта – прийом управління увагою, де об’єкт в композиції або групі явно панує над іншими об’єктами за допомогою кольору, розміру, форми, розміщення, текстури і т. ін.

Баланс – рівновага цілого і всіх частин композиції у відношенні до вертикальних та горизонтальних осей у просторі.

Білий простір або негативний простір – це порожній простір навколо вмісту та функціональних елементів сторінки. Білий простір – це інструмент ієрархії та композиції.

Гештальт – це теорія візуального сприйняття і того, як наш мозок збирає реальність в одне ціле. Вона базується на кількох принципах, таких як: закон близькості, закон подібності, закон спільної області, закон фокусної точки, закон безперервності, закон замикання, закон зв'язку фігури з основою.

Pixel Perfect Design (дизайн досконалих пікселів) – це особлива техніка створення структури дизайну, яка базується на точних та повторюваних величинах об’єктів та дистанцій між ними й дозволяє html-верстці максимально збігатися з дизайн-макетом.

Scannability (сканованість) – це легкість, з якою текст може бути прочитаний і зрозумілий цільовою аудиторією. У дизайні це також сукупний ефект технік написання і форматування інформації, які компенсують той факт, що багато людей не читають контент в інтернеті.

Z-патерн – шлях погляду-сканування користувача з верхнього лівого кута інтерфейсу у верхній правий, потім вниз у нижній лівий і нижній правий кут інтерфейсу.

Повторення – гарний спосіб стандартизувати дизайн, у якому використано багато різних елементів. Повторення може бути використано різними способами: через повтор однакових кольорів, шрифтів, форм чи інших елементів дизайну.

F-патерн – у цьому патерні користувачі зазвичай сканують інтерфейси сайтів зверху зліва направо, потім до наступного рядка зліва направо і так далі. Помітно активно використовується на текстових сторінках, таких як блоги, статті й т. ін.

Grid (сітка) – це структура, що складається з ряду ліній, які ділять сторінку на колонки. Зазвичай лінії вертикальні, але вони також можуть перетинатися. Хоча лінії сітки не обов'язково видно (однак у деяких дизайнах вони є), ця структура допомагає дизайнерам вирівнювати елементи контенту під час компонування сторінки.

Формат – це область, у якій розміщується візуальний дизайн. У вебпросторі формат – це розмір вікна браузера.

Margins (поля) – це негативний простір між краєм формату і зовнішнім краєм контенту. Саме встановлений розмір полів надає контенту загальну форму. Примітка: бокові поля збільшуються зі збільшенням ширини пристрою.

Columns (колонки) – це вертикальні зони, які повністю займають простір від верхнього до нижнього поля. Кількість колонок варіюється залежно від пристрою; дизайнери зазвичай використовують до 12 колонок на десктопах, до 8 колонок у дизайні планшетів і до 4 колонок на мобільних пристроях. Найчастіше ширина колонки становить від 60 до 80 пікселів.

Rows (рядки) – це горизонтальні ділянки сітки. У вебдизайні їх часто не відображають. Сітки з рядками та стовпчиками називаються модульними сітками.

Модулі – це одиниці простору, які створюються на перетині рядків і стовпців.

Regions (регіони) – це групи колонок, рядків або модулів, які формують елемент композиції.

Flowline (флоулайн) – це дизайнерський елемент для розбиття композиції на частини та створення плавної, органічної лінії або шляху, який направляє око глядача через елементи дизайну.

Marker (маркер) – це область, в якій розміщується другорядний контент. У книжках зазвичай в області маркера розміщують назви розділів, номери сторінок тощо.

Gutters (інтервали) – це проміжки між стовпчиками й рядками. Гарний візуальний баланс можливий лише тоді, коли між стовпчиками однакові проміжки. Звичайний розмір інтервалу – 20 пікселів.

Field elements (елементи поля) – це блоки твого дизайну. У цих контейнерах зберігається контент, зображення та інтерактивні елементи. Елементи поля повинні розташовуватися в межах колонок і не «витікати» в інтервали.

Adaptive layout (адаптивний макет) – це макет, який повністю змінюється залежно від формату, в якому він представлений. Це сприяє більш адаптованому користувацькому досвіду, але процес перебудови однієї й тієї ж функціональності для різних пристроїв може багато коштувати. 

Breakpoints (брейкпоінти) – це діапазон заздалегідь визначених розмірів екрана, для яких існують певні вимоги до макета. У заданому діапазоні брейкпоінтів макет підлаштовується під розмір екрана, область перегляду та орієнтацію. 

Респонсивний дизайн – це підхід, який дозволяє створювати дизайн для різних пристроїв (мобайл, десктоп, планшет тощо, що реагуватиме на поведінку користувача залежно від розміру екрана, платформи та орієнтації. Гнучкі сітки є основними елементами респонсивного дизайну. Всі ресурси, такі як зображення, адаптуються до різних розмірів та роздільної здатності екрана (за допомогою медіазапитів CSS). 

Адаптивний дизайн використовує статичні макети, що базуються на брейкпоінтах, які не реагують після завантаження. Таким чином, це менш гнучке вирішення проблеми оптимізації дизайну до різних типів екрана.

Mobile-first (мобайл-фьорст) – підхід до вебдизайну, коли дизайн продукту створюється спочатку для мобільних пристроїв, і лише потім для планшетів та десктоп моніторів. Такий підхід допомагає командам розробників зосередитися на найважливішому контенті та донести його до користувачів.

Гнучкі макети – це практика побудови макета вебсайту за допомогою гнучкої сітки.

Mobile-dedicated sites (мобільні спеціалізовані сайти) – це сайти, розроблені спеціально для мобільних телефонів. Вони часто мають окрему URL-адресу (напр., m.site.com) й містять функції або контент, які вважаються придатними для мобільних пристроїв; часто це лише частина того, що доступно на десктопних версіях. Їх часто протиставляють респонсивним сайтам, які зазвичай містять однаковий контент і функціонал для мобільних і десктопних версій, але переставляють ці функції на мобільних пристроях.

Cross-platform design (кросплатформний дизайн) – це процес перенесення певного дизайну продукту на різні платформи. Це робиться для того, щоб задовольнити потреби цільових користувачів різних пристроїв.

Subdomain (піддомен) — домен, який є частиною домену вищого рівня. Наприклад, de.aliexpress.com є частиною домену aliexpress.com

Breakpoint (брейкпоінт) в респонсивному дизайні – це «точка», в якій вміст і дизайн вебсайту адаптуються певним чином, щоб забезпечити найкращий користувацький досвід.

Колір – властивість обʼєктів, зумовлена різними якостями світла, що відбивається або поглинається. Щоби побачити колір, необхідне світло: коли світло падає на предмет, кольори або відбиваються від нього, або поглинаються ним – саме це і бачать наші очі. 

Градієнт – це використання двох або більше відтінків для зафарбування елементу, коли поступово зменшується насиченість кольору.

Контрастність кольорів – це різниця між різними відтінками кольору. Тональний контраст – інший тип регулювання контрастності – описує різницю між найсвітлішими й найтемнішими тонами на зображенні. Обидва типи контрасту необхідні для збалансованого зображення, і знання їхніх налаштувань дуже важливе для загальної якості фотографій.

Монохромні схеми використовують один колір, але з різними відтінками й тонами цього кольору. Така схема дуже «легка» для очей, оскільки кольори природно поєднуються між собою та створюють заспокійливий ефект.

Аналогові схеми використовують кілька споріднених кольорів – один колір є основним, а інші його підтримують. Допоміжні кольори збагачують схему і роблять її візуально привабливішою.

Компліментарні схеми складаються лише з двох контрастних кольорів (наприклад, основного зеленого та акцентного червоного). Така схема добре працює, якщо треба привернути увагу.

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

Hue (відтінок) – одна з основних властивостей кольору. Він означає як колір, так і відтінок кольору (тобто колір, змішаний з чорним). Наприклад, синій, зелений, помаранчевий і жовтий – кожен з них є відтінком.

Saturation (насиченість) – інтенсивність кольору. Зі збільшенням насиченості кольори стають чистішими.

Tone (тон) – колір, змішаний із сірим.

Tint (насиченість тону) – колір, змішаний з білим.

Opacity (прозорість) – характеристика, що задає рівень прозорості для елемента, щоби він став напівпрозорим або навіть невидимим. За замовчуванням будь-який колір/елемент має 100% непрозорість.

Колірна модель – термін, що означає абстрактну модель опису кольорів у вигляді чисел, зазвичай із трьох або чотирьох значень, які ще називаються колірними компонентами або координатами кольорів. Метод розшифрування цих даних визначає колірний простір. Основні колірні простори, які використовуються дизайнерами: CMYK, RGB, HEX.

RGB (Red, Green, Blue – червоний, зелений, синій) – колірна модель, що служить для виведення зображення на екрани моніторів та інші електронні пристрої. Кольори фізично утворюються завдяки відповідному змішуванню трьох кольорів діодів в екранах пристроїв. Складається з синього, червоного та зеленого кольорів, які утворюють усі проміжні кольори та відтінки. 

CMYK (Cyan, Magenta, Yellow, Key color, Блакитний, пурпуровий, жовтий, ключовий колір/чорний) – схема формування кольору, яка використовується в поліграфії для стандартного тріадного друку. Має менше, у порівнянні з RGB, колірне охоплення. Усі кольори та відтінки утворюються за допомогою відповідного змішування чотирьох кольорів тонерів принтерів (блакитний, пурпуровий, жовтий, чорний) та насиченості цих кольорів.

HEX-кодування кольору (початкові літери англ. hexadecimal — шістнадцятковий) – це запис числа у шістнадцятковій системі числення. Тобто кожне число в ній записується за допомогою 16 символів. Арабські цифри від 0 до 9 відповідають значенням від нуля до дев'яти, а 6 літер латинської абетки A, B, C, D, E, F відповідають значенням від десяти до п'ятнадцяти.

HSL (hue, saturation, lightness; відтінок, насиченість, світлість) та HSV (hue, saturation, value; відтінок, насиченість, значення, або ж HSB: hue, saturation, brightness; відтінок, насиченість, яскравість) – це дві різні колірні моделі, які використовуються для опису кольорів за допомогою трьох параметрів. В обох випадках параметр «відтінок» визначає колір на колірному колі, «насиченість» – міру його насиченості, а третій параметр відрізняється: у HSL це «світлість», а в HSV – «значення» або «яскравість». Обидві моделі дозволяють точно визначити кольори та налаштувати їхні параметри, що є важливим у графічному дизайні та фотографії. Використання однієї або іншої моделі залежить від конкретних завдань та особливостей роботи з кольорами.

Typeface and font (гарнітура та шрифт) – це система класифікації, що використовується для позначення сімейства символів (наприклад: Arial, Times New Roman, Cambria тощо). Багато дизайнерів використовують терміни «гарнітура» і «шрифт» як взаємозамінні, однак це не одне й те саме. Гарнітура – це дизайн шрифту, тоді як шрифт – це власне шрифт певного розміру та ваги.

Kegel (кегль) – це розмір шрифту в типографіці.

Mean line (лінія висоти) позначає верхню і нижню частину тіла символу.

Font weight (вага шрифту) – це товщина його символу. Шрифт може мати різну вагу, від надлегкої до наджирної.

Font height (або x-height, висота) – це відстань між базовою лінією рядка шрифту та вершинами основних малих літер.

Ascender (верхній виносний елемент) – це частина літери, яка виступає над середньою лінією шрифту, наприклад, як у літери «h».

Descender (нижній виносний елемент) – та частина літери, яка опущена нижче базової лінії, як у літери «р». 

Baseline (базова лінія) – це невидима лінія, на яку спирається рядок тексту.

Serif (зарубка) – це елементи на закінченнях вертикальних та горизонтальних штрихів. Шрифт, який таких зарубок не має, називається sans serif (sans = без).

Titles / headings (h1, h2, h3, h4; заголовки) — вони використовуються для відображення контексту блоку або сторінки, побудови візуальної ієрархії.

Body text or paragraphs (p; основний текст або абзац) — загальна інформація, звичайний текст, подібний до того, що ти читаєш зараз.

User Interface text (inputs, buttons; текст інтерфейсу користувача) — окрім контенту, ми також визначаємо і використовуємо текст для кнопок, навігації, форм і багатьох інших різних елементів.

Icon fonts (шрифти іконок) – шрифт, який вже має всі типи іконок і повністю підтримується: розмір, кольори й навіть стиль (контур, лінії, гліфи тощо). Використовуючи шрифти іконок, не доведеться завантажувати та оновлювати по одній іконці за раз.

Шрифтова композиція – гармонійне поєднання тексту з графічними об'єктами: малюнками, елементами орнаменту й декору тощо.

Font pair (шрифтова пара) – це поєднання різних шрифтів у певному проєкті. Хоча тут використовується термін «пара», він може стосуватися будь-якої кількості. Вдале поєднання – зазвичай не більше 2-3 наборів – має бути гармонійним, але водночас достатньо контрастним. Будь-яка комбінація повинна включати лише один незвичайний, екстравагантний або зухвалий шрифт.

Типографіка – це мистецтво розташування літер і тексту таким чином, щоб зробити текст розбірливим, чітким і візуально привабливим для читача.

Tracking (трекінг) – це горизонтальна відстань між усіма символами шрифту. Правильна відстань може зробити текст приємним для ока.

Kerning (кернінг) – це простір між кожною літерою в слові. Також це процес регулювання проміжку між двома символами шрифту. На відміну від трекінгу, який застосовується для всіх символів, кернінг застосовується для окремих випадків. Наприклад, дизайнер вирішує змінити відстань між двома конкретними літерами, щоб вони виглядали більш природно.

Leading (інтерліньяж) – відстань по вертикалі між двома базовими лініями рядків, іншими словами – міжрядковий інтервал.

Glyph (гліф) – це один індивідуально розроблений символ шрифту. Це графічне зображення символу/знака. Один символ може бути представлений кількома альтернативними гліфами.

Negative space (негативний простір) – це простір між окремими елементами в дизайнерській композиції.

Діаграма Гутенберга описує загальну схему, за якою рухаються очі, коли дивляться на рівномірно розподілений текст. Вона передбачає, що око ковзає вздовж і впоперек сторінки серією горизонтальних рухів, які називаються осями орієнтації. Кожен новий рух починається трохи далі від лівого краю і рухається трохи ближче до правого краю.

Повторення – гарний спосіб стандартизувати дизайн, у якому використано багато різних елементів. Повторення може бути використано різними способами: через повтор однакових кольорів, шрифтів, форм чи інших елементів дизайну.

Іконки – це символ, який зберігає схожість з об'єктом, який він представляє. Як правило, іконки використовуються для передачі інформації без потреби в словах.

Іконографія – це форма візуальної мови, яка додає продукту ідентичності. Дизайнери іконографії відповідають за створення іконок – ілюстрацій, які допомагають користувачам орієнтуватися в різних цифрових продуктах.

Icon sets (pack/family;набори/паки/сімейства іконок) – це група іконок, спеціально створених для візуальної схожості, які можна легко впроваджувати у дизайни, подібно до шрифтів.

SVG або Scalable Vector Graphics (масштабована векторна графіка) – це вебстандарт для визначення векторної графіки на вебсторінках. Заснований на XML, стандарт SVG надає розмітку для опису контурів, фігур і тексту в області перегляду. Розмітка може бути вбудована безпосередньо в HTML для відображення або збережена у файлі .svg і вставлена як будь-яке інше зображення.

Atomic Design (атомний/атомарний дизайн) – це методологія, створена Бредом Фростом, яка надає вказівки щодо побудови систем більш продуманого дизайну інтерфейсів та з чітким порядком та ієрархією.

Повторення – гарний спосіб стандартизувати дизайн, у якому використано багато різних елементів. Повторення може бути використано різними способами: через повтор однакових кольорів, шрифтів, форм чи інших елементів дизайну.

UI Kit (або User Interface Kit) – це готовий набір елементів інтерфейсу користувача для створення дизайну вебсайту, мобільного додатка або іншої програми. Він містить готові компоненти, такі як кнопки, поля введення, перемикачі, меню, іконки тощо, що дає змогу економити час на розробку та підтримку дизайну, а також забезпечити консистентність інтерфейсу користувача на всій платформі.

Атоми – в атомному дизайні, як і в хімії, це базові елементи, які допомагають будувати все інше. У вебдодатках атоми є основоположними елементами, такими як HTML теги, шрифти, анімації та палітри кольорів. Проте атоми у вебдизайні можть бути і менш конкретними, наприклад, кнопками чи формами.

Молекули – це наступний за величиною будівельний блок у вебдизайні. Оскільки вони складаються з атомів, їх можна концептуально «розкласти» на окремі UI елементи, які легше сприймаються. Прикладами молекул у вебдизайні можуть бути мітки форм або поля для введення тексту – те, що стане основою більшої системи дизайну. 

Організми – UI елементи, які складаються з групи молекул та визначають зовнішній вигляд і функціонал вебсайту. Це також елементи, які починають впливати на інтерфейс користувача. Те, як розробник впорядкує молекули, визначає досвід користування сайтом та складність фінального продукту. Прикладами організмів є логотип, поля для пошуку та основна навігація, які разом формують організм хедера.

Темплейти – це організми, повʼязані між собою на рівні сторінки або вище. Темплейти є дуже конкретними, вони забезпечують фіксований контекст, у який вписуються більш абстрактні елементи, та «збирають» сайт у його фінальну форму. HTML вайрфрейм є чудовим прикладом темплейту.

Сторінки – фінальний елемент атомного дизайну, це конкретні екземпляри темплейтів. Сторінки є найбільш «відчутним» елементом, це місце, де користувачі проводять найбільше свого часу. 

Design system (Дизайн-система, DS) – це набір компонентів, які керуються чіткими стандартами, можуть бути використані для різних проєктів та зібрані разом для створення будь-якої кількості додатків.

Design tokens (дизайн-токени) – це стильові значення UI елементів, таких як колір, типографіка, інтервали, тіні тощо, які використовуються у всіх продуктах і можуть бути конвертовані у відповідний формат для будь-якої платформи (веб, мобільної, десктопної). Токени є будівельними блоками системи дизайну – думай про них як про субатоми, найменші частини стильових значень, які дозволяють дизайнерам створювати стилі для продукту.

Visual audit Візуальний аудит) – це перевірка, яка дозволяє оцінити узгодженість усіх візуальних елементів сайту, таких як шрифти, кольори, кнопки, спадні списки, поля для вводу, блоки, фотографії тощо.

Інтерактивні прототипи – це робочі моделі, які створюють UX архітектори. Вони можуть допомогти протестувати дизайн-моделі або фреймворки чи показати, як виглядатиме кінцевий продукт. Ти можеш створювати цифрові прототипи, які поводитимуться так само як і фінальний додаток, без жодних дорогих технічних зусиль.

Анімація прототипу – це інструмент, який можна використовувати для створення плавних переходів між сторінками та визначення поведінки для таких дій, як розгортання меню, перегортання між сторінками або відкриття галереї. Figma має наступні варіанти прототипів анімації: Instant (Миттєва), Dissolve (Розчинення), Smart Animate (Розумна анімація), Move In / Move Out (Наближення/віддалення), Push (Поштовх), Slide In / Slide Out (Висування/засунення).

Тригер прототипу визначає, який тип взаємодії з хотспотом користувачі мають виконати, аби прототип «просунувся далі». Це може бути взаємодія мишею чи дотиком, наприклад, тап, перетягування, клацання тощо. Figma має такі варіанти тригерів: On Click/On Tap (За клацанням миші), On Drag (За перетягуванням), While Hovering (При наведенні курсора), While Pressing (При натисканні), Keyboard and Gamepad Shortcuts (Комбінації клавіш клавіатури та геймпада), Mouse Enter (Введення миші в певну зону), Mouse Leave (Виведення миші з певної зони), Mouse Down/Touch Down (За першим натисканням миші чи сенсорної панелі), Mouse Up/Touch Up (Після натисканням миші чи сенсорної панелі), After Delay (Після затримки).

Landing page (лендінг, посадкова сторінка) – це сторінка, яка призначена для полегшення однієї бажаної дії, наприклад, здійснення покупки, заповнення форми, реєстрації на безкоштовну пробну версію або введення адреси електронної пошти. Вона називається посадковою, тому що це сторінка, на яку користувачі «приземляються» після натискання на посилання в публікації у Facebook, Google Ad, електронній розсилці або будь-якому іншому джерелі трафіку.

Lead generation (генерація лідів) – це процес формування інтересу споживачів до продукту або послуги з метою перетворення цього інтересу на продаж. В інтернет-маркетингу це, як правило, передбачає збір контактної інформації відвідувача (так званого «ліда») через вебформу.

Conversions (конверсії) – це дії, які просувають потенційного клієнта далі вниз воронкою продажів. Хоча покупка – це основна конверсія, до якої ми прагнемо, дії, які ведуть до успішної покупки, також мають значення.

Воронка продажів – це маркетинговий термін, який використовується для опису шляху, який проходять потенційні клієнти від пошуку до покупки. Воронка продажів складається з декількох етапів, фактична кількість яких залежить від моделі продажів кожної компанії.

Трафік – це підрахунок кількості відвідувачів вебсайту або вебсторінки, і цей показник може бути додатково визначений за його джерелом – наприклад, платний або органічний трафік з пошукових систем, трафік з кампаній (з цифрової реклами, електронних листів, соціальних мереж), прямий трафік (прямі відвідування, можливо, після промоакцій в магазині).

Social Proof (соушіал пруф, соціальний доказ) – це психологічний феномен, коли люди беруть на себе дії інших, намагаючись відобразити правильну поведінку в певній ситуації.

Design handoff (передача дизайну) відбувається після виконання всіх вимог та тестування прототипів. Дизайн передається розробникам для початку кодування.

Style Guide (стайл-гайд) – це документ, який містить інструкції щодо використання брендового стилю візуального оформлення, наприклад, логотипу, кольорової гами, шрифтів та інших елементів дизайну. Цей документ є важливим інструментом для забезпечення консистентності та співпраці внутрішньої та зовнішньої комунікації бренду.

Дизайн-макет – це графічне зображення, що відображає орієнтовний вигляд майбутньої сторінки вебсайту, друкованого матеріалу або іншого продукту. Дизайн-макет створюється з метою візуалізації концепції дизайну та демонстрації замовникові, як буде виглядати кінцевий продукт.

Правило 44px — усі клікабельні елементи — кожна кнопка, повзунок, елемент управління введенням — повинні мати розмір не менше 44x44 px. Єдиний виняток – текстові посилання. У тексті абзацу кожен рядок тексту, ймовірно, буде трохи коротшим, ніж 44px.

Нативна розробка — розробка програми «рідною» для платформи мовою програмування (від англ. native). Для Android це Java, для Apple iOS — Objective-C та Swift.

Гібридна розробка — розробка програми для кількох платформ одразу за допомогою технологій, які використовуються для створення сайтів (HTML, CSS, JavaScipt та ін.). Такі додатки далі оброблятимуть на таких платформах із розробки, як React Native, Flutter, Ionic тощо, щоб надати їм нативних рис.

Етапи створення мобільного додатку:
‍
1. Дослідження
‍Попередні дослідження
Коментарі користувачів
Інтерв’ю з користувачами
Онлайн-опитування
Конкурентний аналіз
Евристична оцінка

2. Визначення
‍Створення діаграми спорідненості
Персони користувачів
Мапування шляху клієнта
Пріоритезація функцій
Блок-схема процесу
‍
3. Дизайн
‍Каркас
Візуальний макет
Дизайн інтерфейсу
Довідник з UI стилю
Інтерактивний прототип

4. Тестування
‍Юзабіліті-тестування
Дослідження шкали практичності системи

‍5. Презентація
‍Інтерактивний прототип
Звіт про дослідження
Презентація

Панель вкладок — поширена схема навігації в iOS. Це низка іконок меню, які розташовані в нижній частині екрана, кожна з яких представляє основний розділ програми.

Сповіщення — елементи поза додатком (оскільки вони зʼявляються і коли користувач не знаходиться в ньому), які попереджають про щось важливе. Це може бути нове оновлення, помилка чи критична подія, яка потребує уваги користувача.

Підказки — бульбашки тексту, які зʼявляються в необхідних ситуаціях. Їхня мета — навчити користувача в процесі використовувати певний елемент або рису інтерфейсу. Підказки необхідні для поступового введення в курс справи та ознайомлення з продуктом, коли користувачі вивчають додаток у процесі його використання.

Вебдодаток — це програма, яка працює в браузері, як сайт.

Мобільний додаток — той, який завантажується з App Store або Google Play.

Human Interface Guidelines (HIG), Гайдлайни користувацького інтерфейсу — це посібник, який містить компоненти та інструменти, що стане у пригоді при створенні більш інтуїтивних, легких для сприйняття і логічних інтерфейсів взаємодії з користувачем. Він допоможе створити програми, які легко інтегруються з платформами Apple.

Система сітки на 8pt. — використання чисел, кратних 8 (8, 16, 24, 32, 40, 48, 56 і т. ін.), для компонування, розмірів, відступів і полів елементів.

NavBar, Навігаційна панель (iOS) — панель інструментів у верхній частині екрана, що містить кнопки керування поточним екраном.

Сповіщення — сповіщення, яке передає важливу інформацію, пов’язану зі станом додатка або пристрою, і часто запитує зворотний зв’язок. Воно складається із заголовка, необов’язкового повідомлення, однієї або декількох кнопок.

Бабл — овальний елемент вибору будь-якого параметра, найчастіше використовується у фільтрах.

Онбординг — навчальний функціонал у застосунку, що з’являється під час першого запуску для ознайомлення користувача з продуктом.

Status Bar — рядок стану, що містить загальну інформацію про пристрій: час, дату, мережу, рівень заряду тощо.

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

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

Початковий екран або Splash Screen — зображення, яке ми бачимо, коли додаток чи вебсторінка завантажується. Зазвичай це анімована картинка або лого певного бренду. Це також добре продуманий маркетинговий підхід, оскільки початковий екран — наше перше знайомство з додатком.

Онбординг додатком — це процес ознайомлення користувачів із вашим мобільним додатком, часто з метою утримання та довгострокового залучення користувачів. Це критично важливе перше враження, яке користувачі отримують від вашого продукту. Онбординг мобільного додатку може являти собою поєднання інформативних вітальних сторінок, входу/реєстрації та будь-яких інших навчальних сторінок про переваги, які отримає користувач після реєстрації в додатку. Якщо він добре продуманий і привітний, користувачі, швидше за все, продовжать свою подорож вашим додатком.

SMS-верифікація дає змогу вебсайтам, додаткам, банкам та соціальним мережам ще раз перевірити особистість користувача. Після введення свого ніку та паролю, компанії надішлють на ваш смартфон SMS із верифікаційним кодом. Використання пароля, щоб закінчити процес реєстрації, і є SMS-верифікацією.SMS-верифікація має і інші назви. Ви можете почути, що її називають SMS-аутентифікацією, двофакторною аутентифікацією на основі SMS (2FA) або одноразовим SMS-паролем (OTP).

NavBar, Навігаційна панель (iOS) — панель інструментів у верхній частині екрана, що містить кнопки керування поточним екраном.

Material Design, який часто називають просто матеріалом – це концептуальна філософія дизайну від Google, яка окреслює, яким чином повинні виглядати й працювати на мобільних пристроях додатки.

Cегментовані кнопки – кнопки з кількома сегментами, які допомагають обирати один з варіантів, перемикати вид вікна чи сортувати елементи. 

Нижня панель додатка – панель, що відображає навігацію та ключові дії в нижній частині мобільних екранів.

Нижня сторінка – поверхня, що містить додатковий вміст, прикріплена до нижньої частини екрана.

Фішки показують кілька інтерактивних елементів разом в одній області, наприклад, список фільмів, які можна вибрати, або серію контактів електронної пошти. Існує чотири типи фішок: допомога, фільтр, введення та пропозиція.

Панель навігації – постійний і зручний спосіб перемикання між основними пунктами призначення в додатку. У Material існує один тип навігаційної панелі. У M2 цей компонент називається нижня навігаційна панель.

Навігаційне бокове меню, “шухлядка” – панель, яка забезпечує ергономічний доступ до пунктів призначення в додатку. Існує два типи навігаційних панелей: стандартні та модальні.

Верхні панелі програм – панелі, які відображають інформацію та дії у верхній частині екрана. Існує чотири типи верхніх панелей програм: вирівняні по центру, малі, середні та великі.

Снекбар – короткі повідомлення про процеси програми внизу екрана.

Висота (elevation) в Android – це відносна відстань між двома поверхнями вздовж осі z.

Screenshots в магазині додатків – це актив. Вони мають привернути увагу й стимулювати користувача завантажити додатки. За допомогою скріншотів можна продемонструвати функціональність застосунку та його переваги.лення про процеси програми внизу екрана.

ASO (App Store Optimization) – це підготовка сторінок застосунку в App Store і Google Play Market, необхідна для коректного пошуку застосунку на цих майданчиках і підвищення конверсії відвідувачів сторінок у завантаження.

App Store – онлайн-магазин від Apple, де зібрано майже 2 млн додатків. Усі вони адаптовані для роботи на пристроях Apple і перевірені її розробниками на наявність шкідливого ПЗ, шпигунських програм та інших вразливостей.

Google Play Market або просто Play Market – сервіс, який належить компанії Google (яка володіє правами на саму ОС "Андроїд") і являє собою "фірмовий" онлайн-магазин. Усі представлені в ньому програми розділені на кілька категорій ("Додатки", "Ігри", "Музика", "Книги" тощо).

Портфоліо – формат презентації своїх робіт, поширений серед ілюстраторів, дизайнерів, архітекторів та митців. Основна його ціль – зацікавити та вразити, тобто, отримати клієнта. Кожен, хто дивиться на портфоліо, має чітко розуміти, що це не наспіх зібрані роботи, а ретельно продумана та підготована добірка.