Дизайн — це не про «зробити красиво». За лаштунками проєкту: дослідження, бриф, прототипи, ітерації та біль, коли треба переробляти. Читайте, як ми мислимо.
За лаштунками проєкту: чому «просто намалювати» — це завжди погана ідея
Клієнти часто кажуть: «Там дрібниці, просто намалюйте гарненько».
Якби ж то. За цією фразою зазвичай ховається нерозуміння, чим насправді займається дизайнер або SEO-копірайтер у великому проєкті. Ми не малюємо картинки. Ми проектуємо систему, в якій кожна деталь має причину з’явитися на світ.
Сьогодні покажу вам справжню «кухню» — від першого брифу до фінального «так, підписуємо». Без прикрас, але з інсайдами, які економлять місяці роботи.
Етап перший: бриф — головна розмова, яку всі бояться
Бриф — це не анкета на 100 питань «заради галочки». Це наша розвідка боєм. Якщо на старті не зрозуміти справжню бізнес-ціль, далі буде треш.
По-перше, ми не питаємо «якого кольору має бути кнопка?». Ми питаємо:
- Що має зробити користувач через 5 секунд після відкриття сторінки?
- Яка головна метрика успіху? (Не «подобається», а продажі/реєстрації/читання)
- Кого вважаєте своїми конкурентами — і що вони роблять не так?
На практиці: нещодавно нам прийшов запит на «простий лендінг за тиждень». Після годинної розмови з’ясувалося, що клієнту насправді потрібна багатосторінкова платформа з освітніми відео. Якби ми «просто намалювали» — проєкт би провалився.
Лайфхак: якщо клієнт уникає брифу, зробіть одне безкоштовне інтерв’ю на 40 хвилин. Відмазка «мій проєкт простий» майже завжди означає, що людина не продумувала бодай один крок наперед.
Окрім питань до бізнесу, ми завжди додаємо блок про технічні обмеження. Де буде жити сайт? Яка CMS? Хто буде наповнювати контентом? Це врятує вас від ситуації, коли дизайнер намалював анімацію, яку CMS не підтримує.
Аналіз і архітектура: найнудніша (й найважливіша) частина
Переходимо до «заліза». Саме тут починається справжнє проектування. Жодного Photoshop, лише схеми, таблиці та нервові нотатки на полях.
Що ми робимо на цьому етапі:
- Аналіз поведінки ЦА. Не «всі люблять зручні сайти», а конкретно: «о 22:00 мами в декреті гортають інстаграм однією рукою, тому кнопки мають бути великими».
- Карта його дій (CJM — Customer Journey Map). Де він спотикається? Де вагається? Чому йде?
- Прототипи. Сірі «скелети» сторінок без дизайну. Ми тестуємо логіку, а не красу.
- Технічне завдання для контенту. Хто що пише, в якому порядку, які заголовки везуть конверсію.
З іншого боку, багато хто пропускає цей крок, бо «клієнт хоче бачити кольорові картинки вчора». Але є нюанс: без архітектури ви будете перероблювати кожен екран по 10 разів. Бо спочатку не продумали, чи потрібна там кнопка «Назад» чи форма з 10 полів.
Приклад з життя: робили лендінг для доставки здорової їжі. На прототипі з’ясувалося, що користувачі хочуть бачити не «наші переваги», а склад БЖУ на кожну страву. Якби одразу малювали дизайн — довелося б викинути 3 дні роботи.
Візуальне проектування: коли краса підпорядковується логіці
Ось тут нарешті починається магія. Але не та, де «зараз я намалюю шедевр». А жорстка дисципліна.
Кожен колір, кожен відступ має відповідати на питання «навіщо?».
- Чому ця кнопка червона? Бо вона аварійна — видалення акаунта.
- Чому цей текст дрібний? Бо це юридичне застереження, він не має відволікати.
Ми працюємо з модульними сітками, типографікою, доступністю (контрасти для людей з вадами зору). До речі, перевірити контрастність тексту можна безкоштовним сервісом WebAIM — це лайфхак номер один, який ми використовуємо навіть для презентацій.
Порівняння з реального життя: уявіть, що будуєте будинок. «Просто малювати» — це взяти олівці та розфарбувати стіни в рожевий. А проектувати — це розкласти несучі стіни, провести вентиляцію, розрахувати навантаження, і тільки потім обирати шпалери. У дизайні те саме.
Але є нюанс: навіть найкращий візуал — це гіпотеза. Тому ми одразу робимо клікабельний прототип у Figma або навіть на Tilda. Щоб клієнт понатискав кнопки, а не дивився картинку. Різниця між «гарно» і «працює» стає очевидною за 5 хвилин тестування.
Ітерації та біль правок: чому «дрібниця» коштує годину
Найчесніша частина. Правки нікуди не діваються. Навіть якщо ви ґуру.
Проблема в тому, що «здається» клієнта часто не збігається з реальністю. Фраза «Зробіть логотип трохи більшим» означає перевірку всієї сітки, тому що на мобільній версії цей «трохи більший» логотип заїде на кнопку.
Як ми мінімізуємо біль:
- Усі правки пишемо списком (жодних «як ми обговорювали усно»).
- Пояснюємо наслідки кожної зміни в грошах або часі.
- Робимо два варіанти: «як каже клієнт» і «як краще з точки зору логіки».
- Маємо чекліст «Готовність до передачі» — перевіряємо ту самі дрібниці: вирівнювання, помилки в тексті, поведінку кнопок на 320px.
До речі, про це рідко говорять, але копірайтер часто бачить те, чого не помічає дизайнер. Слова впливають на композицію: довгий заголовок у 3 рядки ламає всю сітку. Тому на фінальному етапі ми сідаємо разом (SEO, копірайтер, дизайнер) і проходимо кожен екран. Бо помилка на етапі макету коштує години, а на готовому сайті — доби.
Висновок: проектуємо — не значить ускладнюємо
Якщо після цього тексту ви захочете «просто намалювати» — я вас зрозумію. Але тепер ви знаєте, чому хороші проєкти коштують дорожче: за ними стоять дослідження, десятки відмовлених ідей, прототипи, тестування та купа правок ще до того, як побачите перший кольоровий екран.
Головний лайфхак, яким я ділюся: найкраща інвестиція — це час на старті. Глибокий бриф і прототип рятують 70% нервів на фініші. А якщо вам кажуть «нам просто, ось зразок» — одразу показуйте цю статтю.
Є питання про ваш проєкт? Кидайте в коментарі — розповім, з якого етапу краще почати саме вам. Або пишіть у особисті — розберемо «за лаштунками» безкоштовно.