Привіт, мене звати Діма Дюг. Я веб- і UX/UI-дизайнер вже 10 років. Раніше мені доводилося передавати макети розробнику, потім зʼявилися конструктори сайтів, і я почав робити на Webflow.
Але зараз ці нейронки.... Короче, можна без розробника обійтися.
Короче зробив я собі новий сайт, розробка нейронкою, дизайн — мій (ще не замінила 🥳)
Це треба усвідомити кожному дизайнеру і розробнику, підхід змінився дуже швидко і кардинально.
Я вже не памʼятаю, коли я останній раз робив шось БЕЗ нейронок.
Ресьорч — нейронки.
Прототип — нейронки.
Дизайн-система — нейронки.
І тепер ще й розробка — повністю на нейронках.
Але я думаю що це не погано, якщо у вас, як у дизайнера є аналітичне мислення і свіжа думка, вітаю — для вас це інструмент, який розвʼязує вам руки.
Розробники — ну я хз, якщо чесно, вони походу треба тепер тільки у якихось серйозніших проєктах зі складною архітектурою, ролями і тд.
Як AI допомагає мені в дослідженні та дизайні
AI у моєму процесі з’являється ще до першого макета. Перед брифінгом я проводжу кабінетне дослідження: розбираюся в бізнесі клієнта та його запиті. Нейронка допомагає швидше знайти матеріали, зібрати посилання й структурувати інформацію. На цій основі готую питання під конкретний проєкт.
Після брифінгу починається докладніше дослідження. Зібране перевіряю, висновки коригую й оформлюю в презентацію для клієнта. Тут AI забирає на себе частину пошуку та впорядкування матеріалів. Вирішувати, що з них справді стосується нашої задачі, доводиться мені. Навіть дуже впевнено написаний абзац іноді потребує перевірки.
Окремо сам займаюся трендвотчингом: шукаю візуальні рішення, цікаві взаємодії та прийоми, які можемо використати. Дивлюся, чи доречні вони для продукту й аудиторії. Красива анімація в референсі ще не означає, що їй потрібне місце біля кнопки оплати.
Так складається дизайн-стратегія: для кого робимо сайт, що показуємо, які аргументи використовуємо та як будуємо структуру.
Дизайн-концепцію малюю сам у Figma. Зазвичай це вся головна сторінка або щонайменше більша її частина. На цьому етапі визначаю вигляд сайту, композицію й типографіку. Потім за допомогою AI та Figma MCP оформлюю дизайн-систему: стилі, токени та правила для наступних екранів.
Скляна кнопка з власною лабораторією
Тому скляна кнопка й отримала власний мініпроєкт.
Її вигляд я придумав у Figma. Хотів відтворити на сайті конкретний ефект скла: заломлення, дисперсію, реакцію на курсор. Знайшов основу на SVG-фільтрі й почав із неї.
Результат наблизився до задуму, але мене ще не влаштовував. Тоді попросив AI зробити саме цю кнопку на WebGL, окремо наголосивши на плавності та оптимізації.
Щоб зручніше шукати потрібний вигляд, спочатку створив окремий мініпроєкт із повзунками. Через них налаштовував ефект і анімації взаємодії та одразу бачив зміни. У кнопки з’явилася власна лабораторія, а в мене — можливість менше пояснювати й більше пробувати.
Як я відкрив для себе власну адмінку
Тут я відчув себе Колумбом: відкрив для себе цілий континент можливостей, на якому розробники вже давно жили, працювали і не пускали сюди дизайнерів, але час йде, і ми дісталися сюди.Виявилося, що можу додати в адмінку функцію саме під свій процес. Наприклад, мені було потрібне масове стиснення зображень, до якого я звик у Webflow.
Показав AI, де хочу бачити цю можливість, звичайними словами описав задачу та попросив порадити формат. Так у моїй адмінці з’явився потрібний інструмент. Експедицію вважаю успішною.
Хто хоче подивитись на мій AI-сайт 😁 і заодно почитати повну версію статті — лишаю лінк https://dimadiuh.com/journal/ai-i-dyzajner