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

Шукаю медлів і синьорів, продуктових дизайнерів і UX-людей, яким цікаво те, про що я писала цього тижня. Людей із креативним мисленням, про яке був перший пост. Людей, яким цікаво робити інноваційні продукти і пробувати нові підходи.

І тепер до завершальної теми цієї серії постів — як ідентифікувати можливості для інновацій. Не тільки в AI, а загалом у продуктах.

Насправді це повертає нас до базового дизайн-процесу і до того, що іноді називають “табуретом Нормана”.

У ньому є три складові: користувач і його потреби, бізнес і його можливості, технологія. На перетині цих трьох речей виникає продукт. Це стосується не тільки великих рішень, а й окремих фіч, user flow або навіть невеликих змін в інтерфейсі.

Саме в цих перетинах часто з’являються нові ідеї.

Якщо подивитися глибше, кожна з цих складових дає свої можливості для інновацій. Я розповім, як я сама це використовую в роботі.

Почну з технології.

До появи AI я рідше працювала з цією частиною дизайн-процесу. Зараз стало значно зрозуміліше, як технологічні можливості можна напряму переводити в продуктові рішення.

Наприклад, генеративні інтерфейси і NLP дозволяють працювати з природною мовою користувача. Це відкриває можливість спрощувати форми, скорочувати кількість фільтрів і будувати пошук не тільки за параметрами, а і за наміром користувача.

Natural language інтерфейси сильно вплинули на продукти, особливо в e-commerce і генеративних тулах. Користувач може сформулювати запит своїми словами, і система вже може інтерпретувати контекст, дату або категорію і знайти релевантні результати.

Наприклад, замість ручного вибору параметрів користувач може написати: “Хочу щось цікаве на День святого Валентина”, і система зможе сформувати релевантну видачу.

Такі підходи скорочують user flow і роблять взаємодію більш природною.

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

Якщо перейти до користувачів, важливо працювати не тільки з їхніми потребами, а й з освоєнням нових можливостей.

Будь-яка нова функція потребує пояснення і поступового знайомства користувача з можливостями продукту.

Тому важливо продумувати:

як користувач дізнається про нову можливість
які приклади він бачить
які підказки отримує
чи є готові запити або сценарії використання

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

Третя складова — бізнес.

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

У кожного бізнесу є свої асети. Це можуть бути дані, операційні процеси або інфраструктура.

Наприклад, якщо у компанії є багато років історичних даних, їх можна використати для рекомендаційних систем або персоналізації.

Якщо це сервіс доставки, оренди автомобілів або таксі, у нього вже є операційна система, карти і транспорт. Ці ресурси теж можна використовувати як основу для нових рішень.

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

Крім ресурсів, у бізнесу є і власні задачі. Інновації часто з’являються там, де продукт допомагає вирішувати конкретні бізнесові потреби: підвищення конверсії, розвиток напрямків продукту, оптимізація процесів або спрощення взаємодії з користувачем.

У результаті можливості для інновацій з’являються на перетині технологій, користувачів і бізнесу. Кожен продукт використовує ці складові по-своєму, тому універсальних рецептів тут немає.

Для мене це скоріше спосіб мислення, який допомагає помічати можливості.

Особливо корисно слідкувати за новими технологіями і дивитися, що стає можливим на ринку.

Технології часто відкривають нові напрямки розвитку продуктів.

Так само важливо розуміти можливості бізнесу і його задачі.

Інновації працюють тоді, коли вони підтримують розвиток продукту і допомагають бізнесу рости.

Якщо вам цікаво працювати над такими продуктами — я зараз шукаю дизайнерів у команду, тож напишіть мені, я відмітилась в коментарях 👇

Вау, це було цікаво і змістовно!

Нагадуємо, цього тижня для цінність в каналі створювала Аня Дем'яненко, лід продукт дизайнерка у Lazarev.

- підписуйтесь на Анін лінкдін.
- і велкам на курс, де вона є кураторкою UX Advanced — для глибокого розуміння дизайн-процесів.

Дякуємо.

— Projector ✨

Порадимо трохи курсів.

Почнемо з неочікуваної рекомендації. Вона навіть формально не в категорії дизайну.

Мідли, сіньйори і ліди, зверніть увагу на Facilitation for Group Meetings.

Він допомагає навчитись фасилітувати воркшопи, тримати групову динаміку, розрулювати конфлікти і направляти зустрічі в правильне русло.

10/10.

—

А також:

- інтенсив Стаса Говорухіна — User Onboarding Design — тут навчитесь проєктувати розкішні онбординги. Три дні починаючи з цієї п'ятниці.

- той самий Product Design для переходу з клієнтської розробки у продуктову.

- інтенсив Віталія Фрідмана — Designing for Complex UI — про те, як будувати комплексні інтерфейсні системи.

Побачимось 💙

Шановні, цей тиждень канал буде вести Богдан Матвіїв.

- лінкедин
- біхенс

Вже як 3 роки куратор у Проджі — на курсах UX Design та UI/UX Design Beginning.

Понад 8 років у дизайні, в ролі сеніора і ліда.

Починав як фронтенд-девелопер, тому приніс вам трохи роботи з кодом на цьому тижні.

Тільки не лякайтесь — Claude буде за вас писати код.

Тож готуйтесь кодити, навіть якщо не вмієте 🌞

Спасибі за представлення, всіх вітаю 🖖

В нас з вами буде не дуже типовний тиждень як для каналу з дизайнерами. Цілий тиждень ми будемо прототипувати за допомогою AI, використовуючи Claude Code. У планах послідовно і чітко розібратись у таких темах:

👉 Як працювати з Claude Code
👉 Що таке середовище розробки і як з ним працювати (VS code, Cursor)
👉 Як розгорнути проект локально та підключити live server на комп'ютері
👉 Що таке GitHub і навіщо дизайнерам там реєструватись
👉 Що таке Vercel і як туди завантажити свої проекти

Кілька слів 😅 про те, чому я обрав цю тему для тижня. Коли я починав свій шлях у професії, веб-дизайнери були спеціалістами, які просто деліверили сайт. Так, самостійно, комплексно - брали і робили робочу штуку з живою лінкою у браузері. Відкривав блокнот, писав код, зберігав файл з розширенням .html, а в кінці робочого дня все вигружав по FTP на сервер. Мабуть, це дивно зараз звучить, і вам важко зрозуміти флоу роботи тодішнього дизайнера в епоху дизайн палеоліту 🦖

Пізніше світ ставав складнішим - почали з'являтися спеціальності, технології, фреймворки. І в один прекрасний день ми всі, хто називався веб-дизайнерами, опинилися у фотошопі і почали гратися з тінюшками, текстами і таке інше. Трохи пізніше народилися на світ XD, Figma (трохи раніше Sketch) - і ми почали бавитися з тінюшками, шрифтами та кольорами тільки у векторі.

Я жодним чином не знецінюю гру з тінюшками, кольорами й таке інше. Я сам таке люблю. Суть у тому, що ми втратили прямий доступ до того, що конкретно рендериться в браузері. Не мали прямого впливу до місця де і живе наш дизайн.

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

🟢 Дизайн не живе у фігмі, він там лише народжується.

Думаю, якщо хтось із вас мав хоч мінімальний досвід роботи з девелоперами та передачі їм макетів на розробку - ви знаєте, який це біль😶 А ще більший біль - дивитися на результат у браузері, паралельно рефлексуючи щодо своєї професії: хто ви, що ви і чому взагалі цим займаєтесь. Знайомо?

Але настає новий дивний світ, і на сцену виходить AI👾 Він дає вам можливість робити речі прямо в браузері й контролювати все так, як ви захотіли, як вам подобається - без дебатів і безкінечних сінків.

🟢 Новий фрейм - це в'юпорт браузера.

Ми повертаємось до того, з чого починали. Я тепер знову бачу файли .html у своєму робочому процесі, і мене це надзвичайно радує.

Ми з вами будемо вчитись впродовж тижня як працювати в цьому новому фреймі. З надією, що через кілька років ми не відкриємо фігму, так само як я зараз не відкриваю фотошоп, хотя бережно тримаю іконку його у себе на комютері, чисто раді респекта і тінюшок 🤜

Адаптуйся або стань не актуальним, як би це жорстко не звучало. На жаль, я це бачив із десятками дизайнерів. Усі, в кого я вчився і з ким починав свій шлях понад 10 років тому, зараз не займаються дизайном. Інтересно чому і чим? 🤔

Ділюся з вами відео дизайнера з Perplexity - подивіться на його флоу, як він дизайнить, і десь увечері порефлексуйте кілька хвилин на цю тему.

https://www.youtube.com/watch?v=4soEK3BkBmI&t=16s

Всім привіт. Ділюся першим відео про роботу з Claude Code.

Працюватиму з високодеталізованим прототипом, який містить кілька брейкпоінтів. Намагатимусь досягти pixel-perfect відображення в браузері. Моя мета - продемонструвати процес, який в мене сформувався, від А до Я зі всіма проблемами та нюансами.

Я впевнений, якщо зрозуміти підходи й принципи збірки такого високодеталізованого прототипу, зможете зібрати будь-який прототип, незважаючи на складність. Найімовірніше, в реальній роботі рідко стикнетеся із завданням, де потрібна pixel-perfect точність або деліверити 4 брейкпоінти. Але саме розуміння, як цього досягти, дозволяє збирати будь що.

Якщо хочете повторювати крок за кроком з тим самим макетом, з яким я працюю у відео, напишіть мені в лінкедин -я поділюся цим макетом для навчання.

Якщо у вас виникнуть питання, пишіть у коментарях - постараюся відповісти на все.

Гарного дня і більше лімітів.🖖

https://youtu.be/SFKgkTaOP6E

Друга частина відео готова, тож ділюся з вами. + кілька думак на день)

Дуже часто можна зустріти думку, що AI всіх замінить, що всі в найближчому майбутньому підемо на заводи (хоч би були ці заводи, бо чомусь більшість заводів переформатовуються у кавʼярні останнім часом 😅) і таке інше. Це природна реакція на швидкі зміни, але я схильний вважати, що реальність буде менш драматичною.

В цьому питанні, схильнйи важати що ніякої повноціної заміни не буде, все переформатується під нові реалії, інстурменти, створятсья нові контексти.

🟢 AI - це потужний інструмент, але це інструмент хаосу.

У мене асоціація з геніальним безумцем, який створює велику цінність, але паралельно ще й великий обсяг хаосу.

Цей хаос, створений AI, можна систематизувати і впорядкувати лише експертністю. Тому цінність експертності стане ще більшою. Той, хто зможе приборкати цю хаотичну природу AI, валідувати рішення, направляти і створювати правильний коридор рішень, у якому AI працює результативно, буде в рази продуктивнішим та ефективнішим.

🟢 Винахід комп'ютера став велосипедом для людського мозку, AI - це двигун внутрішнього згоряння для людського мозку.

Коли студенти питають мене, чи буде професія дизайнера актуальна через рік-два і чи варто навчатись, моя відповідь - не просто буде актуальна, а буде надзвичайно затребувана. Тільки затребуваність буде в експертів, які зможуть приборкати цей безумний хаос, створений AI.

Не панікуємо - освідчуємось.
Миру та процвітання 🖖

https://www.youtube.com/watch?v=S8m94PXq_KI

Привіт. Розшарюю 3 частину, нашої з вами тижневої подорожі.

Сьогодні опрацюємо з:
👉 Підключенням шрифтів у проєкт
👉 CSS змінними - створимо їх і використаємо
👉 Працюємо з адаптаційною схемою
👉 Розбираємось з readme .md

Всім гарного дня 🤜

https://youtu.be/ulLZEtB7E2U

Всім привіт. Відправляю 4 частину.
Дякую всім, хто взяв участь в опитуванні.

Сьогодні:
👉 Фіналізуємо Hero section
👉 Створюємо бургер-меню
👉 Створюємо внутрішні сторінки
👉 Працюємо зі зміною формату табів при адаптації.
👉 Додаємо мікроанімації

https://www.youtube.com/watch?v=sn19p_tOvoA

Привіт 🖖
Цієї середи на курсі UX Beginning у нас відбувся захист курсових проєктів.

Завдання студентів - дослідити ринок праці України та створити платформу для пошуку роботи. Хочу поділитися з вами прототипами для натхнення, які студенти вперше зібрали за допомогою AI:

👉 https://anastasia-chugueva.github.io/work-hard/main.html
Анастасія Чугуєва

-
👉 https://prototype-test-alpha.vercel.app/index.html
Оля Солодовнікова

-
👉 https://work-smart-nine.vercel.app/
Тетяна Каміль

-
👉 https://julia-kr-afk.github.io/prototype-1/index.html
Юлія Кравус


І вперше більшість студентів:
👉 Відкрили claude code
👉 Працювали з GitHub
👉 Відкрили VS Code
👉 Деплоїли на Vercel
👉 Працювали з AI для генерації прототипів.

Дехто ще кілька місяців тому вперше відкрив Figma.

За наполегливість і боротьбу з невизначеністю, яка виникала під час першого зіткнення з такими процесами, середовищами тощо. Студентам - окремий мій щирий респект 🤜

Я думаю, що під впливом AI проходження традиційних фаз дабл діаманту пришвидшиться. Кожна фаза - від discovery до delivery - буде перформитись швидше та ефективніше. Це означає, що продуктові спринти стануть коротшими, а в довгій перспективі можна буде провалідувати більше гіпотез та імплементувати більше фіч.

Це призведе до появи багатьох різноманітних нових продуктів, тому що валідація продуктових гіпотез стане швидшою та якіснішою, а головне дешевшою. Мені здається, у валідації це одне з найголовніших, щоб було швидко та якісно.

Якими б класними не були гіпотези й наскільки б якісно не було проведені глибині інтервю, кінцева валідація залежить від того, як ви «запакуєте» реалізацію цих класних гіпотез.

🟢 value виникає тільки через взаємодію

І ось взаємодія користувача з вашим прототипом, на мою думку, є однією з ключових точок у процесі дабл діаманту. Поганий прототип не дає можливості проявитися тій самій цінності. AI дає змогу цього уникнути, зробивши прототип максимально наближеним до реальності, який не створюватиме тих самих перешкод, а навпаки допоможе цінності проявитися.

🟢 Поганий інтерфейс = гіпотеза працює (виглядє) гірше, ніж є насправді.

Гарних прототипів і вихідних.

Якщо ви думали, що на сьогодні все, то біжу вас потішити 🏃.

Шерю 5 частину. Ніколи б не подумав, що в дизайнерському каналі буду шерити відео, де розказую і показую, як працювати з GitHub 😅. Тут мене вибачте, але це справді потрібно знати, якщо ви хочете робити свої проєкти й деплоїти їх. Без цієї бази ніяк не обійтися та і це не так важко як здається. Складні штуки просто звучать складно, поки в них не розберешся. Тому давайте розбиратись.

У сьогоднішньому відео:

👉 Розберемося, навіщо зберігати наші проєкти на GitHub
👉 У чому різниця між Git та GitHub
👉 Як перевірити, чи встановлений Git на вашому комп’ютері
👉 Як створити свій перший репозиторій
👉 Як зробити свій перший коміт через VS Code і термінал
👉 Обговоримо флоу роботи, коли стикаєтесь із багом (звісно що через ще одну AI 😂)
👉 На додачу імплементуємо анімацію ховер-ефекту для табів, яку згенерує нам aura.bild

Завтра ми з вами будемо деплої те що в нас вийшло за тиждень на vercel і отримувати live-лінку на наш проект.

https://youtu.be/bTW3hq7gvqk

Всім привіт. Ділюся 6 частиною.
Це буде остання частина в межах мого тижня.

Що сьогодні:
👉 Вчимося промтити через назви класів.
👉 Створюємо динамічний формат слайдера та адаптуємо його.
👉 Комітимося.
👉 Деплоїмо на Vercel та отримуємо live-link.
👉 Кайфуємо від результату (це найважливіше в процесі)

🚀 Ділюся результатом, що в нас вийшло впродовж цього тиня
→ https://blog-ai-prototyping.vercel.app

Як і обіцяв, ми пройшли шлях:
→ Figma
→ Claude Code
→ GitHub
→ Vercel
→ live-версія.

Якщо хтось повторював за мною, скидайте результати. Буде круто побачити, що у вас вийшло.

Дякую всім за увагу та зворотній фідбек, я це ціную 💙. Мій тиждень завершився, і я сподіваюся, що це було корисно для вас, що ви змогли підчерпнути щось для себе та імплементувати у свої робочі процеси. Для мене цей тиждень теж був певним викликом: я вперше в житті вчився монтувати, рендерити відео та робити інші подібні речі.

Я не прощаюся. Думаю, ми ще десь перетнемося, дизайн-індустрія не така вже й велика.
Якщо захочете побачити, як наш прототип перетвориться на повноцінну сторінку і не тільки, ви зможете знайти це на моєму YouTube. А я буду радий побачити ваші результати та експерименти з AI.

- лінкедин
- біхенс
• ютуб


Миру та процвітання 🖖

https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R

Бодан, дякуємо!

Твій тиждень став спонтанним міні-курсом по вайбкодингу для дизайнерів і це дуже круто ✨

Обожнюємо коли протягом тижня створюється щось нове і твої уроки це прямо найцінніше.

- Продж

Якщо тиждень сподобався, радимо звернути увагу на практичні і комплексні AI курси у Проджі, що стартують у березні і квітні:

- Ai for Product Creation — вже легендарний курс Дениса Суділковського де Make, Cursor і інші інструменти використовуються для створення продуктових рішень. Рекомендасьйон.

- Build Your Startup with Ai — як Аі змінює підхід фаундерів до пошуку потреб, просування і побудови прототипів.

- Ai for Personal Productivity — НОВИНКА — щойно запущений дуже крутий курс про те, як витрачати менше часу на рутинне і більше — на важливе.

І не забуваємо, що не Аі робить дизайн, а дизайнер робить класні продукти, а Аі йому допомагає.

Гарного тижня 🌞