Етапи дизайну сайту: від брифу до передачі макетів у розробку

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

Чому «зробити дизайн» — це не одна дія

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

По порядку.

Етап 1. Бриф і дослідження — На виході: технічне завдання і карта цілей

Дизайн починається не з Figma, а з розуміння задачі. На цьому етапі з’ясовують:

• Бізнес-ціль сайту. Що має зробити користувач? Залишити заявку, купити, зателефонувати, записатися, завантажити матеріал?
• Аудиторія. Хто приходить на сайт і з яким запитом? B2B чи B2C? Мобільний чи десктоп? Молодь чи 40+?
• Конкуренти. Що вже є на ринку? Що робимо не гірше, а що — краще?
• Обмеження. Бренд-гайдлайн, фірмові кольори, технічні вимоги до передачі макетів.

На виході: бриф-документ + карта цілей + список конкурентів для аналізу. Без цього дизайнер малює «свою інтерпретацію», а не рішення задачі.

Етап 2. Аналіз конкурентів і поведінки — На виході: інсайти і рекомендації

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

Паралельно — якщо сайт вже існує — аналіз поведінки поточних користувачів: теплові карти, записи сесій, аналітика Google. Де люди зупиняються? Де йдуть? Яку кнопку ніхто не натискає?

На виході: звіт із конкретними висновками. «Конкуренти показують ціни на першому екрані — отже, або показуємо і ми, або маємо вагому причину цього не робити». «80% сесій — з мобільного, а поточний сайт не адаптований» — це не припущення, а дані.

Етап 3. Інформаційна архітектура (IA) — На виході: карта сторінок і навігація

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

На виході: системна карта сторінок (sitemap), схема навігації, ієрархія контенту. Це те, що підписує клієнт перед тим, як починати прототип.

Етап 4. Прототип (wireframe) — На виході: скелет кожної сторінки

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

Навіщо він потрібен до того, як малювати UI? Щоб перевірити логіку, не витрачаючи часу на красу. Переставити блоки у wireframe — 5 хвилин. Переставити їх у готовому UI-макеті — пів дня.

На виході: wireframe кожної ключової сторінки в Figma. Це те, що погоджується з клієнтом перед переходом до UI.

Етап 5. UI-дизайн — На виході: готові макети сторінок

Тільки тепер відкривається палітра. UI-дизайн — це кольори, типографіка, ілюстрації, іконки, фото, анімації. Це те, що більшість клієнтів уявляє під словом «дизайн».

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

На виході: макети всіх ключових сторінок у Figma для desktop (1440px), tablet (768px), mobile (375px) — мінімум три breakpoints.

Етап 6. Дизайн-система — На виході: компонентна бібліотека і гайдлайн

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

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

На виході: Figma-бібліотека компонентів + документ «Як це використовувати».

Етап 7. Передача в розробку — На виході: готові ассети і специфікація

Фінальний етап — не «відправити Figma-посилання», а структурована передача. До неї входить:

• підготовлені ілюстрації та іконки (SVG, PNG в потрібних розмірах);
• анімаційний протокол (якщо є анімації — описати їх словами або через Principle/After Effects);
• Figma Dev Mode з налаштованими токенами для розробника;
• специфікація відступів, розмірів і поведінки компонентів у різних станах.

На виході: пакет, з яким розробник може йти і робити без постійних питань до дизайнера.

Скільки часу займає кожен етап

Строки залежать від складності проєкту, кількості сторінок і швидкості погодження з клієнтом. Найдовший «незапланований» етап — погодження: якщо відповідь приходить через тиждень замість дня, строки зсуваються.

LongRead: дизайн сайту в Україні у 2026 році

Процес дизайну сайту в Україні у 2026 році суттєво відрізняється від того, що було 5 років тому. По-перше, мобільний трафік домінує: для більшості ніш 60-80% сесій — з телефону. Це означає, що дизайн повинен починатися з mobile-first, а не портуватися на мобільний постфактум. По-друге, AI-інструменти змінили підготовчий етап: аналіз конкурентів, чернетки текстів для wireframe, робота з ілюстраціями — все це тепер помітно швидше.

Але головне не змінилося, і чесно скажу — навряд чи зміниться: якість UI-дизайну все одно визначається якістю роботи на перших чотирьох етапах. Пропустиш дослідження — малюватимеш красу, яка не продає. Пропустиш IA — переробляти структуру після того, як розробник вже написав половину коду.

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

Що далі

• UI/UX-дизайн — що це: різниця та чому це не одне й те саме
• Хто такий UX/UI-дизайнер і за що йому платять
• Тренди UI/UX-дизайну 2026: що працює, а що вже втомило
• Фірмовий стиль — що це і навіщо бізнесу
• Дизайн сайтів та UI/UX — послуга

FAQ

Q: Чи можна пропустити прототип і зразу малювати UI? A: Технічно — так. Але тоді правки логіки (переміщення блоків, зміна структури) будуть робитися на повноцінних макетах — і коштуватимуть у 5-10 разів дорожче часу. Прототип — страховка від «ой, я не те мав на увазі» після трьох тижнів роботи.

Q: Скільки раундів правок входить у роботу? A: Залежить від умов контракту. Стандартна практика — 2-3 раунди правок на кожному ключовому етапі (прототип, UI). Далі — погодинна тарифікація або окремий кошторис.

Q: Що таке дизайн-система і чи потрібна вона для простого лендингу? A: Для одного лендингу — швидше ні, дорого. Для сайту з 5+ сторінками або якщо планується масштабування — так, це заощадить час при розробці і майбутніх змінах.

Q: Чи отримаю я вихідники Figma? A: Залежить від умов договору. Більшість студій передають вихідний Figma-файл — уточніть при укладанні. Важливо: файл без дизайн-системи і правильної організації шарів складно передавати іншому дизайнеру.

Q: Скільки варіантів дизайну ви пропонуєте? A: На практиці: 2 візуальних напрямки на початку UI-етапу (різні tone і стилістика), потім деталізується один обраний. Більше варіантів = більше часу = більша вартість.