| UI (User Interface) |
Інтерфейс користувача — візуальна частина сайту або додатку: кнопки, поля, меню, елементи навігації. |
Дає розуміння, як зробити дизайн зручним і зрозумілим для користувача. |
| UX (User Experience) |
Досвід користувача — те, як людина взаємодіє із сайтом, наскільки швидко знаходить інформацію, наскільки задоволена процесом. |
Допомагає створювати сайти, якими хочеться користуватись. |
| Wireframe |
Схема або “каркас” сайту/додатку без графіки. |
Дозволяє швидко узгодити структуру проєкту перед дизайном. |
| Mockup |
Статичний макет сайту із стилями, кольорами, шрифтами. |
Дає клієнту зрозуміти, як виглядатиме продукт до розробки. |
| Prototype |
Інтерактивний макет сайту або додатку, де можна клікатись по екранах. |
Дозволяє протестувати логіку і сценарії користувача до написання коду. |
| Responsive Design |
Адаптивний дизайн — коли сайт виглядає добре на мобільних, планшетах і десктопах. |
Забезпечує зручність для більшої кількості користувачів, підвищує конверсію. |
| Grid System |
Сітка — система вирівнювання елементів у макеті. |
Дає чисту, впорядковану композицію без хаосу. |
| Typography |
Мистецтво роботи зі шрифтами: підбір, ієрархія, інтервали. |
Робить текст читабельним, а дизайн професійним. |
| Color Theory |
Теорія кольору, поєднання, контрасти. |
Створює емоційний настрій і допомагає направляти увагу користувача. |
| White Space |
Порожній простір у дизайні. |
Робить інтерфейс “дихаючим”, легким для сприйняття. |
| Design System |
Набір правил і компонентів, які забезпечують єдиний стиль. |
Прискорює роботу і робить дизайн послідовним. |
| Accessibility (A11y) |
Доступність — адаптація дизайну для людей із особливими потребами (кольорова сліпота, екранні рідери). |
Розширює аудиторію і підвищує репутацію бренду. |
| Figma / Sketch / XD |
Інструменти для створення дизайну. |
Є стандартом індустрії для командної роботи і прототипування. |
| Pixel Perfect |
Принцип, коли верстка 1:1 відповідає дизайну. |
Забезпечує професійний вигляд проєкту. |
| CTA (Call to Action) |
Кнопка або елемент, що закликає до дії (наприклад, “Купити”, “Записатись”). |
Збільшує конверсію, якщо зроблений правильно. |
| Hero Section |
Перший екран сайту з основним меседжем. |
Формує перше враження і затримує користувача на сайті. |
| UI Kit |
Набір готових елементів (кнопок, форм, іконок). |
Прискорює створення дизайну і зберігає стиль. |
| Microinteractions |
Маленькі анімації (hover-ефекти, сповіщення). |
Роблять інтерфейс “живим” і приємним. |
| Usability Testing |
Тестування дизайну на реальних користувачах. |
Дозволяє виявити проблеми до запуску продукту. |
| Atomic Design |
Методологія створення інтерфейсів із маленьких компонентів. |
Полегшує масштабування та підтримку проєкту. |