Коли я кажу знайомим «працюю над проєктом», вони часто уявляють картинку: чашка кави, музика в навушниках і я магічно малюю гарний інтерфейс за 20 хвилин.
Нічого подібного.
Реальність — це 70% мозгового штурму, 20% суперечок із клієнтом (або з собою) і 10% власне візуалу. Сьогоді покажу вам справжню кухню. Без глянцю. Розкажу, як ми проектуємо, а не просто «малюємо». Бо різниця — як між хатинкою з Lego та хмарочосом, який витримає землетрус.
Поїхали за лаштунки.
Етап «нуль»: коли проєкт — це 100 запитань і жодної відповіді
Будь-яка робота починається не з натхнення на Dribbble, а з болю. Болю від незрозумілості. Тому перший крок — дістати з клієнта те, що він сам не знає.
Я називаю це «інтелектуальним допитом». Замість «який колір любите?» питаю:
- Яка бізнес-метрика зміниться, якщо проєкт стане крутим?
- Хто ваші реальні конкуренти (навіть ті, що бісять)?
- Що користувач має відчути на першій секунді?
Мій лайфхак: я даю клієнту завдання — намалювати на папері три речі:
- Як виглядає ідеальний сценарій.
- Як — жахливий фейл.
- Де палець юзера «зависає» зараз.
По-перше, це одразу вимикає режим «ооо, просто зробіть красиво». По-друге, ми отримуємо карту ризиків. І тільки після цього я відкриваю Фігму.
Приклад із життя: один клієнт хотів «сучасний мінімалізм». Після трьох годин брифу з’ясувалося, що його аудиторія — пенсіонери, які не бачать тонких сірих ліній. Проєктування виграло над «красиво». Ми зробили великі контрастні кнопки. Продажі зросли.
Дослідження — там, де народжується логіка (а не інтуїція)
Отже, бриф є. Тепер я зникаю на 2–3 дні. Чому? Бо ледачий дизайнер одразу лізе в UI. Професіонал лізе в Excel, аналітику та чужі помилки.
Ось мій чекліст дослідження:
- Аналіз конкурентів — але не копіювати, а знайти їхній біль. Де вони туплять? Де користувач глухне?
- Сценарії використання — «щасливий шлях» і «шлях катастрофи» (забули пароль, впав сервер, клік повз кнопку).
- Технічні обмеження — бекенд каже «ні», і це нормально. Краще на початку, ніж на фіналі.
З іншого боку, важливо не перетворитися на аналітичного зомбі. Тому я роблю «карту емпатії»: що бачить, чує, думає та відчуває користувач. Звучить пафосно, але на ділі — це табличка на три стовпчики. І вона рятує від факапів.
Лайфхак: Знайдіть 3–5 людей з цільової аудиторії. Дайте їм папір і скажіть: «Намалюйте, як ви уявляєте рішення вашої проблеми». Результати іноді шокують. Люди не хочуть «крутий дизайн». Вони хочуть щоб працювало швидко та без думок.
Прототипування — малюємо скелет, а не м’язи
Ось де починається реальна інтелектуальна складність. Бо будь-хто намалює кнопку. Але не кожен побудує логіку переходів, щоб користувач не заблукав.
Я починаю з сірої сітки. Жодних кольорів, тіней чи градієнтів. Тільки чорно-білі прямокутники. Це як архітектурний креслення: спочатку несуча стіна, потім шпалери.
Що я проектую на цьому етапі:
- Ієрархію — на що дивимось першим, на що — другим? Якщо все важливе, то нічого не важливе.
- Відповіді на “а якщо?” — а якщо помилка? а якщо немає результатів? а якщо користувач клацне назад?
- Три кліки до мети — це не правило, а маяк. Якщо потрібно більше, отже, я десь збрехав у логіці.
Складна частина — пояснити клієнту, що «це дизайн». Тому що він бачить сірі квадрати і думає: «Ви що, жартуєте? Де краса?». Але є нюанс: якщо логіка кульгає, краса нічого не врятує.
Я люблю порівнювати це з будівництвом моста. Міст може бути неймовірно естетичним, але якщо інженери прорахували навантаження — він впаде. Прототип — це інженерія взаємодії.
Реальний біль — правки, зворотний зв’язок і «збільште лого»
Я обіцяв без глянцю. Тому скажу правду: найскладніше починається після показу першої версії.
Клієнт каже геніальні речі:
- «Зробіть лого більшим» (хоча воно вже на пів екрану).
- «Додайте трохи радості» (переклад — щось незрозуміле).
- «А давайте як у них, але краще».
І отут вмикається справжнє проектування. Бо моя робота — не натискати кнопки, а захищати логіку.
Мій алгоритм роботи з правками:
- Вислухати — навіть безглузду ідею. Раптом там є зерно?
- Задати «чому?» тричі — найсильніший лайфхак. «Чому ви вважаєте, що більше лого = більше продажів?»
- Запропонувати A/B тест — замість «ні» говорю «давайте перевіримо на двох варіантах».
- Зафіксувати рішення — усні домовленості — це бомба уповільненої дії.
Іноді я таки помиляюся. Клієнт має рацію. Але частіше — ми просто по-різному бачимо проблему. Тому я роблю «прототип на папері» за п’ять хвилин. Коли людина сама клікає по намальованих стрілочках — половина правок відпадає сама.
Лайфхак для клієнтів, які люблять «просто додати рядок»: кажу, що будь-яка зміна в дизайні — це як додати кімнату в квартирі. Можна, але тоді зміниться несуча стіна. Раптово “дрібниці” перестають бути дрібницями.
Передавання в розробку — момент істини
Останній етап — це коли дизайн перетворюється на код. І тут найбільша небезпека — ілюзія “ми закінчили”.
Що я роблю обов’язково:
- Специфікація — відступи, кольори в hex, стани кнопок (звичайний, ховер, натиснутий, disabled). Жодних “ну, воно саме зрозуміє”.
- UI-кіт — усі компоненти в одному місці. Щоб розробник не шукав радіокнопку п’ятий раз.
- Перевірка на реальних даних — у дизайні завжди ідеальний текст. А в житті назви бувають довгі як “ТОВ Агро-Транс-Експоцентр-Плюс”. І все ламається.
Порівняння з реальності: це як передати рецепт шеф-кухарю. Якщо ви напишете «посолити до смаку», він покладе одну сіль. Якщо «2 грами морської солі — після закипання» — буде ідеально. Дизайн-специфікація — це рецепт, а не мрія.
І фінальний акорд — я залишаюся на зв’язку після передачі. Тому що розробник обов’язково знайде місце, де “так не працює”. І це нормально. Ми проектуємо рішення, а не картинки.
Висновок: чому “просто малювання” залишається в школі
Якщо винесу одну думку з цієї статті — ось вона: дизайн — це відповідальність за логіку, а не за красу.
За лаштунками проєкту завжди:
- дослідження,
- суперечки,
- прототипи у сірому кольорі,
- правки,
- специфікації на 40 сторінок.
Але результат — це не просто “гарний сайт”. Це інструмент, який вирішує реальну проблему. І коли користувач не помічає, як виконав завдання — ось тоді ми зробили свою роботу на всі сто.
Тож наступного разу, коли побачите мінімалістичний інтерфейс, знайте: за ним — кілометри чорнової інтелектуальної роботи.