Шановні, цей тиждень канал буде вести Богдан Матвіїв.
- лінкедин
- біхенс
Вже як 3 роки куратор у Проджі — на курсах UX Design та UI/UX Design Beginning.
Понад 8 років у дизайні, в ролі сеніора і ліда.
Починав як фронтенд-девелопер, тому приніс вам трохи роботи з кодом на цьому тижні.
Тільки не лякайтесь — Claude буде за вас писати код.
Тож готуйтесь кодити, навіть якщо не вмієте 🌞
- лінкедин
- біхенс
Вже як 3 роки куратор у Проджі — на курсах UX Design та UI/UX Design Beginning.
Понад 8 років у дизайні, в ролі сеніора і ліда.
Починав як фронтенд-девелопер, тому приніс вам трохи роботи з кодом на цьому тижні.
Тільки не лякайтесь — Claude буде за вас писати код.
Тож готуйтесь кодити, навіть якщо не вмієте 🌞
❤53🔥6👍2
Спасибі за представлення, всіх вітаю 🖖
В нас з вами буде не дуже типовний тиждень як для каналу з дизайнерами. Цілий тиждень ми будемо прототипувати за допомогою AI, використовуючи Claude Code. У планах послідовно і чітко розібратись у таких темах:
👉 Як працювати з Claude Code
👉 Що таке середовище розробки і як з ним працювати (VS code, Cursor)
👉 Як розгорнути проект локально та підключити live server на комп'ютері
👉 Що таке GitHub і навіщо дизайнерам там реєструватись
👉 Що таке Vercel і як туди завантажити свої проекти
Кілька слів 😅 про те, чому я обрав цю тему для тижня. Коли я починав свій шлях у професії, веб-дизайнери були спеціалістами, які просто деліверили сайт. Так, самостійно, комплексно - брали і робили робочу штуку з живою лінкою у браузері. Відкривав блокнот, писав код, зберігав файл з розширенням .html, а в кінці робочого дня все вигружав по FTP на сервер. Мабуть, це дивно зараз звучить, і вам важко зрозуміти флоу роботи тодішнього дизайнера в епоху дизайн палеоліту 🦖
Пізніше світ ставав складнішим - почали з'являтися спеціальності, технології, фреймворки. І в один прекрасний день ми всі, хто називався веб-дизайнерами, опинилися у фотошопі і почали гратися з тінюшками, текстами і таке інше. Трохи пізніше народилися на світ XD, Figma (трохи раніше Sketch) - і ми почали бавитися з тінюшками, шрифтами та кольорами тільки у векторі.
Я жодним чином не знецінюю гру з тінюшками, кольорами й таке інше. Я сам таке люблю. Суть у тому, що ми втратили прямий доступ до того, що конкретно рендериться в браузері. Не мали прямого впливу до місця де і живе наш дизайн.
По суті наша професія - робити речі, які класно й технологічно рендеряться в браузері для конкретного типу користувача, враховуючи його ментальні моделі, когнітивні навички тощо. Але ми як дизайнери відірвані від середовища, для якого працюємо, тобто браузера. Ми не маємо контролю. Контроль є лише в наших фреймах у фігмі, але це не кінцевий результат.
🟢 Дизайн не живе у фігмі, він там лише народжується.
Думаю, якщо хтось із вас мав хоч мінімальний досвід роботи з девелоперами та передачі їм макетів на розробку - ви знаєте, який це біль😶 А ще більший біль - дивитися на результат у браузері, паралельно рефлексуючи щодо своєї професії: хто ви, що ви і чому взагалі цим займаєтесь. Знайомо?
Але настає новий дивний світ, і на сцену виходить AI👾 Він дає вам можливість робити речі прямо в браузері й контролювати все так, як ви захотіли, як вам подобається - без дебатів і безкінечних сінків.
🟢 Новий фрейм - це в'юпорт браузера.
Ми повертаємось до того, з чого починали. Я тепер знову бачу файли .html у своєму робочому процесі, і мене це надзвичайно радує.
Ми з вами будемо вчитись впродовж тижня як працювати в цьому новому фреймі. З надією, що через кілька років ми не відкриємо фігму, так само як я зараз не відкриваю фотошоп, хотя бережно тримаю іконку його у себе на комютері, чисто раді респекта і тінюшок 🤜
Адаптуйся або стань не актуальним, як би це жорстко не звучало. На жаль, я це бачив із десятками дизайнерів. Усі, в кого я вчився і з ким починав свій шлях понад 10 років тому, зараз не займаються дизайном. Інтересно чому і чим? 🤔
В нас з вами буде не дуже типовний тиждень як для каналу з дизайнерами. Цілий тиждень ми будемо прототипувати за допомогою AI, використовуючи Claude Code. У планах послідовно і чітко розібратись у таких темах:
👉 Як працювати з Claude Code
👉 Що таке середовище розробки і як з ним працювати (VS code, Cursor)
👉 Як розгорнути проект локально та підключити live server на комп'ютері
👉 Що таке GitHub і навіщо дизайнерам там реєструватись
👉 Що таке Vercel і як туди завантажити свої проекти
Кілька слів 😅 про те, чому я обрав цю тему для тижня. Коли я починав свій шлях у професії, веб-дизайнери були спеціалістами, які просто деліверили сайт. Так, самостійно, комплексно - брали і робили робочу штуку з живою лінкою у браузері. Відкривав блокнот, писав код, зберігав файл з розширенням .html, а в кінці робочого дня все вигружав по FTP на сервер. Мабуть, це дивно зараз звучить, і вам важко зрозуміти флоу роботи тодішнього дизайнера в епоху дизайн палеоліту 🦖
Пізніше світ ставав складнішим - почали з'являтися спеціальності, технології, фреймворки. І в один прекрасний день ми всі, хто називався веб-дизайнерами, опинилися у фотошопі і почали гратися з тінюшками, текстами і таке інше. Трохи пізніше народилися на світ XD, Figma (трохи раніше Sketch) - і ми почали бавитися з тінюшками, шрифтами та кольорами тільки у векторі.
Я жодним чином не знецінюю гру з тінюшками, кольорами й таке інше. Я сам таке люблю. Суть у тому, що ми втратили прямий доступ до того, що конкретно рендериться в браузері. Не мали прямого впливу до місця де і живе наш дизайн.
По суті наша професія - робити речі, які класно й технологічно рендеряться в браузері для конкретного типу користувача, враховуючи його ментальні моделі, когнітивні навички тощо. Але ми як дизайнери відірвані від середовища, для якого працюємо, тобто браузера. Ми не маємо контролю. Контроль є лише в наших фреймах у фігмі, але це не кінцевий результат.
🟢 Дизайн не живе у фігмі, він там лише народжується.
Думаю, якщо хтось із вас мав хоч мінімальний досвід роботи з девелоперами та передачі їм макетів на розробку - ви знаєте, який це біль😶 А ще більший біль - дивитися на результат у браузері, паралельно рефлексуючи щодо своєї професії: хто ви, що ви і чому взагалі цим займаєтесь. Знайомо?
Але настає новий дивний світ, і на сцену виходить AI👾 Він дає вам можливість робити речі прямо в браузері й контролювати все так, як ви захотіли, як вам подобається - без дебатів і безкінечних сінків.
🟢 Новий фрейм - це в'юпорт браузера.
Ми повертаємось до того, з чого починали. Я тепер знову бачу файли .html у своєму робочому процесі, і мене це надзвичайно радує.
Ми з вами будемо вчитись впродовж тижня як працювати в цьому новому фреймі. З надією, що через кілька років ми не відкриємо фігму, так само як я зараз не відкриваю фотошоп, хотя бережно тримаю іконку його у себе на комютері, чисто раді респекта і тінюшок 🤜
Адаптуйся або стань не актуальним, як би це жорстко не звучало. На жаль, я це бачив із десятками дизайнерів. Усі, в кого я вчився і з ким починав свій шлях понад 10 років тому, зараз не займаються дизайном. Інтересно чому і чим? 🤔
❤42🔥11🥰1
Ділюся з вами відео дизайнера з Perplexity - подивіться на його флоу, як він дизайнить, і десь увечері порефлексуйте кілька хвилин на цю тему.
https://www.youtube.com/watch?v=4soEK3BkBmI&t=16s
https://www.youtube.com/watch?v=4soEK3BkBmI&t=16s
YouTube
Why Designers at Perplexity skip Figma to design directly in code
👋 Welcome to Sneak Peek with Jay, a series where you will see how top design teams design. In this interview Jay chats with Henry Modisett (VP of Design at Perplexity) who shows his product design process.
🔓 Unlock AI design & Growth design videos: http…
🔓 Unlock AI design & Growth design videos: http…
❤24🔥6
Всім привіт. Ділюся першим відео про роботу з Claude Code.
Працюватиму з високодеталізованим прототипом, який містить кілька брейкпоінтів. Намагатимусь досягти pixel-perfect відображення в браузері. Моя мета - продемонструвати процес, який в мене сформувався, від А до Я зі всіма проблемами та нюансами.
Я впевнений, якщо зрозуміти підходи й принципи збірки такого високодеталізованого прототипу, зможете зібрати будь-який прототип, незважаючи на складність. Найімовірніше, в реальній роботі рідко стикнетеся із завданням, де потрібна pixel-perfect точність або деліверити 4 брейкпоінти. Але саме розуміння, як цього досягти, дозволяє збирати будь що.
Якщо хочете повторювати крок за кроком з тим самим макетом, з яким я працюю у відео, напишіть мені в лінкедин -я поділюся цим макетом для навчання.
Якщо у вас виникнуть питання, пишіть у коментарях - постараюся відповісти на все.
Гарного дня і більше лімітів.🖖
https://youtu.be/SFKgkTaOP6E
Працюватиму з високодеталізованим прототипом, який містить кілька брейкпоінтів. Намагатимусь досягти pixel-perfect відображення в браузері. Моя мета - продемонструвати процес, який в мене сформувався, від А до Я зі всіма проблемами та нюансами.
Я впевнений, якщо зрозуміти підходи й принципи збірки такого високодеталізованого прототипу, зможете зібрати будь-який прототип, незважаючи на складність. Найімовірніше, в реальній роботі рідко стикнетеся із завданням, де потрібна pixel-perfect точність або деліверити 4 брейкпоінти. Але саме розуміння, як цього досягти, дозволяє збирати будь що.
Якщо хочете повторювати крок за кроком з тим самим макетом, з яким я працюю у відео, напишіть мені в лінкедин -я поділюся цим макетом для навчання.
Якщо у вас виникнуть питання, пишіть у коментарях - постараюся відповісти на все.
Гарного дня і більше лімітів.🖖
https://youtu.be/SFKgkTaOP6E
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | ч.1
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
🔥80❤15
Друга частина відео готова, тож ділюся з вами. + кілька думак на день)
Дуже часто можна зустріти думку, що AI всіх замінить, що всі в найближчому майбутньому підемо на заводи (хоч би були ці заводи, бо чомусь більшість заводів переформатовуються у кавʼярні останнім часом 😅) і таке інше. Це природна реакція на швидкі зміни, але я схильний вважати, що реальність буде менш драматичною.
В цьому питанні, схильнйи важати що ніякої повноціної заміни не буде, все переформатується під нові реалії, інстурменти, створятсья нові контексти.
🟢 AI - це потужний інструмент, але це інструмент хаосу.
У мене асоціація з геніальним безумцем, який створює велику цінність, але паралельно ще й великий обсяг хаосу.
Цей хаос, створений AI, можна систематизувати і впорядкувати лише експертністю. Тому цінність експертності стане ще більшою. Той, хто зможе приборкати цю хаотичну природу AI, валідувати рішення, направляти і створювати правильний коридор рішень, у якому AI працює результативно, буде в рази продуктивнішим та ефективнішим.
🟢 Винахід комп'ютера став велосипедом для людського мозку, AI - це двигун внутрішнього згоряння для людського мозку.
Коли студенти питають мене, чи буде професія дизайнера актуальна через рік-два і чи варто навчатись, моя відповідь - не просто буде актуальна, а буде надзвичайно затребувана. Тільки затребуваність буде в експертів, які зможуть приборкати цей безумний хаос, створений AI.
Не панікуємо - освідчуємось.
Миру та процвітання 🖖
https://www.youtube.com/watch?v=S8m94PXq_KI
Дуже часто можна зустріти думку, що AI всіх замінить, що всі в найближчому майбутньому підемо на заводи (хоч би були ці заводи, бо чомусь більшість заводів переформатовуються у кавʼярні останнім часом 😅) і таке інше. Це природна реакція на швидкі зміни, але я схильний вважати, що реальність буде менш драматичною.
В цьому питанні, схильнйи важати що ніякої повноціної заміни не буде, все переформатується під нові реалії, інстурменти, створятсья нові контексти.
🟢 AI - це потужний інструмент, але це інструмент хаосу.
У мене асоціація з геніальним безумцем, який створює велику цінність, але паралельно ще й великий обсяг хаосу.
Цей хаос, створений AI, можна систематизувати і впорядкувати лише експертністю. Тому цінність експертності стане ще більшою. Той, хто зможе приборкати цю хаотичну природу AI, валідувати рішення, направляти і створювати правильний коридор рішень, у якому AI працює результативно, буде в рази продуктивнішим та ефективнішим.
🟢 Винахід комп'ютера став велосипедом для людського мозку, AI - це двигун внутрішнього згоряння для людського мозку.
Коли студенти питають мене, чи буде професія дизайнера актуальна через рік-два і чи варто навчатись, моя відповідь - не просто буде актуальна, а буде надзвичайно затребувана. Тільки затребуваність буде в експертів, які зможуть приборкати цей безумний хаос, створений AI.
Не панікуємо - освідчуємось.
Миру та процвітання 🖖
https://www.youtube.com/watch?v=S8m94PXq_KI
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | ч.2
Це серія відео про створення pixel perfect live-прототипів за допомогою AI.
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
🔥39❤7👍1
Привіт. Розшарюю 3 частину, нашої з вами тижневої подорожі.
Сьогодні опрацюємо з:
👉 Підключенням шрифтів у проєкт
👉 CSS змінними - створимо їх і використаємо
👉 Працюємо з адаптаційною схемою
👉 Розбираємось з readme .md
Всім гарного дня 🤜
https://youtu.be/ulLZEtB7E2U
Сьогодні опрацюємо з:
👉 Підключенням шрифтів у проєкт
👉 CSS змінними - створимо їх і використаємо
👉 Працюємо з адаптаційною схемою
👉 Розбираємось з readme .md
Всім гарного дня 🤜
https://youtu.be/ulLZEtB7E2U
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | ч.3
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
🔥27❤7👍1
Гайс, дайте, будь ласка, короткий фідбек 🙌
Якщо ви переглянули відео або пробували повторити -
чи були пояснення та приклади зрозумілими?
Якщо ви переглянули відео або пробували повторити -
чи були пояснення та приклади зрозумілими?
Anonymous Poll
22%
Так, усе зрозуміло
9%
Частково зрозуміло
1%
Було складно, майже не зрозумів
56%
Ще не переглядав, але планую
12%
Не переглядав, не планую
Всім привіт. Відправляю 4 частину.
Дякую всім, хто взяв участь в опитуванні.
Сьогодні:
👉 Фіналізуємо Hero section
👉 Створюємо бургер-меню
👉 Створюємо внутрішні сторінки
👉 Працюємо зі зміною формату табів при адаптації.
👉 Додаємо мікроанімації
https://www.youtube.com/watch?v=sn19p_tOvoA
Дякую всім, хто взяв участь в опитуванні.
Сьогодні:
👉 Фіналізуємо Hero section
👉 Створюємо бургер-меню
👉 Створюємо внутрішні сторінки
👉 Працюємо зі зміною формату табів при адаптації.
👉 Додаємо мікроанімації
https://www.youtube.com/watch?v=sn19p_tOvoA
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | ч.4
Це серія відео про створення pixel perfect live-прототипів за допомогою AI.
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
❤27
Привіт 🖖
Цієї середи на курсі 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 дає змогу цього уникнути, зробивши прототип максимально наближеним до реальності, який не створюватиме тих самих перешкод, а навпаки допоможе цінності проявитися.
🟢 Поганий інтерфейс = гіпотеза працює (виглядє) гірше, ніж є насправді.
Гарних прототипів і вихідних.
Цієї середи на курсі 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 дає змогу цього уникнути, зробивши прототип максимально наближеним до реальності, який не створюватиме тих самих перешкод, а навпаки допоможе цінності проявитися.
🟢 Поганий інтерфейс = гіпотеза працює (виглядє) гірше, ніж є насправді.
Гарних прототипів і вихідних.
🔥27❤4👍1
Якщо ви думали, що на сьогодні все, то біжу вас потішити 🏃.
Шерю 5 частину. Ніколи б не подумав, що в дизайнерському каналі буду шерити відео, де розказую і показую, як працювати з GitHub 😅. Тут мене вибачте, але це справді потрібно знати, якщо ви хочете робити свої проєкти й деплоїти їх. Без цієї бази ніяк не обійтися та і це не так важко як здається. Складні штуки просто звучать складно, поки в них не розберешся. Тому давайте розбиратись.
У сьогоднішньому відео:
👉 Розберемося, навіщо зберігати наші проєкти на GitHub
👉 У чому різниця між Git та GitHub
👉 Як перевірити, чи встановлений Git на вашому комп’ютері
👉 Як створити свій перший репозиторій
👉 Як зробити свій перший коміт через VS Code і термінал
👉 Обговоримо флоу роботи, коли стикаєтесь із багом (звісно що через ще одну AI 😂)
👉 На додачу імплементуємо анімацію ховер-ефекту для табів, яку згенерує нам aura.bild
Завтра ми з вами будемо деплої те що в нас вийшло за тиждень на vercel і отримувати live-лінку на наш проект.
https://youtu.be/bTW3hq7gvqk
Шерю 5 частину. Ніколи б не подумав, що в дизайнерському каналі буду шерити відео, де розказую і показую, як працювати з GitHub 😅. Тут мене вибачте, але це справді потрібно знати, якщо ви хочете робити свої проєкти й деплоїти їх. Без цієї бази ніяк не обійтися та і це не так важко як здається. Складні штуки просто звучать складно, поки в них не розберешся. Тому давайте розбиратись.
У сьогоднішньому відео:
👉 Розберемося, навіщо зберігати наші проєкти на GitHub
👉 У чому різниця між Git та GitHub
👉 Як перевірити, чи встановлений Git на вашому комп’ютері
👉 Як створити свій перший репозиторій
👉 Як зробити свій перший коміт через VS Code і термінал
👉 Обговоримо флоу роботи, коли стикаєтесь із багом (звісно що через ще одну AI 😂)
👉 На додачу імплементуємо анімацію ховер-ефекту для табів, яку згенерує нам aura.bild
Завтра ми з вами будемо деплої те що в нас вийшло за тиждень на vercel і отримувати live-лінку на наш проект.
https://youtu.be/bTW3hq7gvqk
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | GitHub | ч.5
Це серія відео про створення pixel perfect live-прототипів за допомогою AI.
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
У результаті ви зможете:
👉 перетворювати дизайн-макети на повноцінні інтерактивні live-прототипи
👉…
🔥27❤4
Всім привіт. Ділюся 6 частиною.
Це буде остання частина в межах мого тижня.
Що сьогодні:
👉 Вчимося промтити через назви класів.
👉 Створюємо динамічний формат слайдера та адаптуємо його.
👉 Комітимося.
👉 Деплоїмо на Vercel та отримуємо live-link.
👉 Кайфуємо від результату (це найважливіше в процесі)
🚀 Ділюся результатом, що в нас вийшло впродовж цього тиня
→ https://blog-ai-prototyping.vercel.app
Як і обіцяв, ми пройшли шлях:
→ Figma
→ Claude Code
→ GitHub
→ Vercel
→ live-версія.
Якщо хтось повторював за мною, скидайте результати. Буде круто побачити, що у вас вийшло.
Дякую всім за увагу та зворотній фідбек, я це ціную 💙. Мій тиждень завершився, і я сподіваюся, що це було корисно для вас, що ви змогли підчерпнути щось для себе та імплементувати у свої робочі процеси. Для мене цей тиждень теж був певним викликом: я вперше в житті вчився монтувати, рендерити відео та робити інші подібні речі.
Я не прощаюся. Думаю, ми ще десь перетнемося, дизайн-індустрія не така вже й велика.
Якщо захочете побачити, як наш прототип перетвориться на повноцінну сторінку і не тільки, ви зможете знайти це на моєму YouTube. А я буду радий побачити ваші результати та експерименти з AI.
- лінкедин
- біхенс
• ютуб
Миру та процвітання 🖖
https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R
Це буде остання частина в межах мого тижня.
Що сьогодні:
👉 Вчимося промтити через назви класів.
👉 Створюємо динамічний формат слайдера та адаптуємо його.
👉 Комітимося.
👉 Деплоїмо на Vercel та отримуємо live-link.
👉 Кайфуємо від результату (це найважливіше в процесі)
🚀 Ділюся результатом, що в нас вийшло впродовж цього тиня
→ https://blog-ai-prototyping.vercel.app
Як і обіцяв, ми пройшли шлях:
→ Figma
→ Claude Code
→ GitHub
→ Vercel
→ live-версія.
Якщо хтось повторював за мною, скидайте результати. Буде круто побачити, що у вас вийшло.
Дякую всім за увагу та зворотній фідбек, я це ціную 💙. Мій тиждень завершився, і я сподіваюся, що це було корисно для вас, що ви змогли підчерпнути щось для себе та імплементувати у свої робочі процеси. Для мене цей тиждень теж був певним викликом: я вперше в житті вчився монтувати, рендерити відео та робити інші подібні речі.
Я не прощаюся. Думаю, ми ще десь перетнемося, дизайн-індустрія не така вже й велика.
Якщо захочете побачити, як наш прототип перетвориться на повноцінну сторінку і не тільки, ви зможете знайти це на моєму YouTube. А я буду радий побачити ваші результати та експерименти з AI.
- лінкедин
- біхенс
• ютуб
Миру та процвітання 🖖
https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R
YouTube
Як прототипувати pixel perfect макети з AI | Claude Code | Vercel | ч.6
Це серія відео про створення pixel perfect live-прототипів за допомогою AI.
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
🚀 Live prototype:
https:// blog-ai-prototyping.vercel.app/
У результаті ви зможете:
👉 перетворювати…
Показую повний workflow: Figma → Claude Code → GitHub → Vercel → live-версія.
🚀 Live prototype:
https:// blog-ai-prototyping.vercel.app/
У результаті ви зможете:
👉 перетворювати…
❤31
Бодан, дякуємо!
Твій тиждень став спонтанним міні-курсом по вайбкодингу для дизайнерів і це дуже круто ✨
Обожнюємо коли протягом тижня створюється щось нове і твої уроки це прямо найцінніше.
- Продж
Твій тиждень став спонтанним міні-курсом по вайбкодингу для дизайнерів і це дуже круто ✨
Обожнюємо коли протягом тижня створюється щось нове і твої уроки це прямо найцінніше.
- Продж
❤33🔥2
Якщо тиждень сподобався, радимо звернути увагу на практичні і комплексні AI курси у Проджі, що стартують у березні і квітні:
- Ai for Product Creation — вже легендарний курс Дениса Суділковського де Make, Cursor і інші інструменти використовуються для створення продуктових рішень. Рекомендасьйон.
- Build Your Startup with Ai — як Аі змінює підхід фаундерів до пошуку потреб, просування і побудови прототипів.
- Ai for Personal Productivity — НОВИНКА — щойно запущений дуже крутий курс про те, як витрачати менше часу на рутинне і більше — на важливе.
І не забуваємо, що не Аі робить дизайн, а дизайнер робить класні продукти, а Аі йому допомагає.
Гарного тижня 🌞
- Ai for Product Creation — вже легендарний курс Дениса Суділковського де Make, Cursor і інші інструменти використовуються для створення продуктових рішень. Рекомендасьйон.
- Build Your Startup with Ai — як Аі змінює підхід фаундерів до пошуку потреб, просування і побудови прототипів.
- Ai for Personal Productivity — НОВИНКА — щойно запущений дуже крутий курс про те, як витрачати менше часу на рутинне і більше — на важливе.
І не забуваємо, що не Аі робить дизайн, а дизайнер робить класні продукти, а Аі йому допомагає.
Гарного тижня 🌞
❤5
Хей спільното!
Вітайте нового оунера каналу — Женю Олексюка.
Що сказати, він крутий.
- курує курс UX Advanced;
- запустив спільноту Проджа у Хмельницькому (ви доречі, можете зробити це у своєму місті);
- senior UX Designer в Epam.
А ще його лекція по Jobs To Be Done одна з найбільш популярних за підпискою.
Ну і загалом, Женя класний і його обожнюють студенти і колеги.
Женя, тобі слово ✨
Вітайте нового оунера каналу — Женю Олексюка.
Що сказати, він крутий.
- курує курс UX Advanced;
- запустив спільноту Проджа у Хмельницькому (ви доречі, можете зробити це у своєму місті);
- senior UX Designer в Epam.
А ще його лекція по Jobs To Be Done одна з найбільш популярних за підпискою.
Ну і загалом, Женя класний і його обожнюють студенти і колеги.
Женя, тобі слово ✨
🔥42❤8
Всім привіт!
Давайте знайомитись - мене звати Євген Олексюк. В дизайні я з 2013 року і за цей час встиг попрацювати в аутсорзі, аутстафі, продукті і фрілансі. Мав справи з різними доменами та різними командами. Маю технічну та фінансову освіти і 7 років банківського стажу (тому бізнесові аспекти мені даються досить не складно а від слова ЕБІТДА я не ховаюсь під плінтус). Ще дуже люблю пояснювати на дивних прикладах, дизайнерські байки, душне задротство, скепсиз та провокації😉
Ось мої контакти, якщо раптом захочете поспілкуватись додатково:
https://www.linkedin.com/in/olexworld/
https://medium.com/@olex_world
https://ux.pub/olex_world
https://www.instagram.com/olex_world/
На цей тиждень в мене заплановано для вас кілька цікавих тем, які, як мені здається, цікаво проговорити. Принаймні, мені було б цікаво і корисно почути про це в певний час своєї карєри. Трошки нового, трошки старого, трошки провокацій, але однозначно весело і цікаво)
Давайте знайомитись - мене звати Євген Олексюк. В дизайні я з 2013 року і за цей час встиг попрацювати в аутсорзі, аутстафі, продукті і фрілансі. Мав справи з різними доменами та різними командами. Маю технічну та фінансову освіти і 7 років банківського стажу (тому бізнесові аспекти мені даються досить не складно а від слова ЕБІТДА я не ховаюсь під плінтус). Ще дуже люблю пояснювати на дивних прикладах, дизайнерські байки, душне задротство, скепсиз та провокації😉
Ось мої контакти, якщо раптом захочете поспілкуватись додатково:
https://www.linkedin.com/in/olexworld/
https://medium.com/@olex_world
https://ux.pub/olex_world
https://www.instagram.com/olex_world/
На цей тиждень в мене заплановано для вас кілька цікавих тем, які, як мені здається, цікаво проговорити. Принаймні, мені було б цікаво і корисно почути про це в певний час своєї карєри. Трошки нового, трошки старого, трошки провокацій, але однозначно весело і цікаво)
Medium
Yevgeny Oleksyuk – Medium
Read writing from Yevgeny Oleksyuk on Medium. User Experience Designer https://taplink.cc/olex_world [email protected]
❤45🔥14
Перший день - пропоную його провести в рефлексії на тему “Хто такий дизайнер”.
Якщо говорити про дизайнера як роль, то звісно, бажано розуміти рівень мачюрності компанії, де працює цей дизайнер. Очевидно, що якщо компанія працює з фріланс-замовленнями, то рівень UX-компетенцій дизайнера буде досить низьким, адже на фрілансі важлива “красота” і швидкість надання лейауту клієнту.
Тут одразу постає питання - а чи важливий UX як такий? І тут я б хотів проговорити цей аспектсловами через рот літерами через екран. Якщо поцікавитись і погуглити історії фейлів продуктів через відсутність на цих продуктах дизайнерів, то наврядчи ви знайдете прям яскраві приклади (ну бо не сильно прийнято обговорювати публічно факап-сторі). Але є досить багато прикладів коли НЕЗАЛУЧЕННЯ (або недостатнє залучення) дизайнера призвело до втрат компаній.
Приклад 1: Nokia та BlackBerry
Це певне найгучніший приклад в історії. На початку 2000-х вони були королями ринку і кожен знав слоган Nokia Connecting People.
Проблема: Вони фокусувалися на залізі (кнопки, антени), а не на досвіді користувача (UX). Коли з’явився iPhone з сенсорним інтерфейсом, ці гіганти вважали це «іграшкою».
Наслідок: Nokia втратила ринок смартфонів і була продана Microsoft за $7.2 млрд (частка ринку впала з 40% до майже 0%).
Висновок: Відсутність продуктового дизайнера, який розуміє потреби користувача, вбиває навіть технологічних лідерів.
Приклад 2: Walmart (Втрата $1.85 млрд через "дизайн без досліджень")
Колись Walmart вирішив, що їхні магазини занадто захаращені, і провів редизайн, прибравши зайві стелажі та рекламу, щоб зробити проходи просторими.
Проблема: Вони зробили це на основі опитувань («Ви хочете менше безладу?» — «Так»), а не на основі спостереження за реальною поведінкою (UX Research). Покупці почали купувати менше, бо не бачили товарів «під рукою».
Наслідок: Продажі впали на $1.85 млрд через "дизайн без досліджень". Компанії довелося повертати старий «захаращений» дизайн.
Висновок: Дизайн без повноцінного якісного та кількісного дослідження може призвести до невірних гіпотез і, як наслідок, до фінансових втрат.
Приклад 3: Citigroup (Втрата $500 млн через поганий UI)
У 2020 році сталася одна з найдорожчих помилок в історії банківської справи через жахливий дизайн інтерфейсу внутрішньої системи (Flexcube).
Проблема: Банківські працівники мали переказати лише відсотки за кредитом компанії Revlon, але через заплутаний інтерфейс (потрібно було поставити галочки в неочевидних місцях) вони випадково переказали $900 млн — всю суму боргу.
Наслідок: Суд дозволив кредиторам не повертати $500 млн. Це була UI помилка.
Висновок: Навіть поганий UI може вплинути на UX (досвід користувача) і спричинить втрати.
Фанфакт: Співзасновник Airbnb Браян Ческі (дизайнер за освітою) часто каже, що на початку інвестори не вірили в Airbnb, бо це була "ідея про дизайн, а не про код". Тепер дизайн — це їхня головна конкурентна перевага, яка монетизує.
А розкажіть ви - чи бували в вас ситуації, коли вас запрошували на роботу на продукт, де раніше не було дизайнера? Які були труднощі?
Якщо говорити про дизайнера як роль, то звісно, бажано розуміти рівень мачюрності компанії, де працює цей дизайнер. Очевидно, що якщо компанія працює з фріланс-замовленнями, то рівень UX-компетенцій дизайнера буде досить низьким, адже на фрілансі важлива “красота” і швидкість надання лейауту клієнту.
Тут одразу постає питання - а чи важливий UX як такий? І тут я б хотів проговорити цей аспект
Приклад 1: Nokia та BlackBerry
Це певне найгучніший приклад в історії. На початку 2000-х вони були королями ринку і кожен знав слоган Nokia Connecting People.
Проблема: Вони фокусувалися на залізі (кнопки, антени), а не на досвіді користувача (UX). Коли з’явився iPhone з сенсорним інтерфейсом, ці гіганти вважали це «іграшкою».
Наслідок: Nokia втратила ринок смартфонів і була продана Microsoft за $7.2 млрд (частка ринку впала з 40% до майже 0%).
Висновок: Відсутність продуктового дизайнера, який розуміє потреби користувача, вбиває навіть технологічних лідерів.
Приклад 2: Walmart (Втрата $1.85 млрд через "дизайн без досліджень")
Колись Walmart вирішив, що їхні магазини занадто захаращені, і провів редизайн, прибравши зайві стелажі та рекламу, щоб зробити проходи просторими.
Проблема: Вони зробили це на основі опитувань («Ви хочете менше безладу?» — «Так»), а не на основі спостереження за реальною поведінкою (UX Research). Покупці почали купувати менше, бо не бачили товарів «під рукою».
Наслідок: Продажі впали на $1.85 млрд через "дизайн без досліджень". Компанії довелося повертати старий «захаращений» дизайн.
Висновок: Дизайн без повноцінного якісного та кількісного дослідження може призвести до невірних гіпотез і, як наслідок, до фінансових втрат.
Приклад 3: Citigroup (Втрата $500 млн через поганий UI)
У 2020 році сталася одна з найдорожчих помилок в історії банківської справи через жахливий дизайн інтерфейсу внутрішньої системи (Flexcube).
Проблема: Банківські працівники мали переказати лише відсотки за кредитом компанії Revlon, але через заплутаний інтерфейс (потрібно було поставити галочки в неочевидних місцях) вони випадково переказали $900 млн — всю суму боргу.
Наслідок: Суд дозволив кредиторам не повертати $500 млн. Це була UI помилка.
Висновок: Навіть поганий UI може вплинути на UX (досвід користувача) і спричинить втрати.
Фанфакт: Співзасновник Airbnb Браян Ческі (дизайнер за освітою) часто каже, що на початку інвестори не вірили в Airbnb, бо це була "ідея про дизайн, а не про код". Тепер дизайн — це їхня головна конкурентна перевага, яка монетизує.
А розкажіть ви - чи бували в вас ситуації, коли вас запрошували на роботу на продукт, де раніше не було дизайнера? Які були труднощі?
❤27👍5🔥4
Друзі, бачимо технічний баг, тестуємо можливість залишати коментарі👀
❤3👌2👏1
В минулому ми вже проговорили що дизайнер як роль досить важливий, але кого можна вважати дизайнером?
Всі ми знаємо що є безліч видів дизайнерів: UX Designer, UI Designer, UX/UI Designer, UI/UX Designer, Product Designer, Web Designer, Interaction Designer, Service Designer, Graphic Designer, UX Researcher, UX Writer і багато інших в залежності від того як хоче обізвати дизайнера ваша компанія.
Тут в мене є певний діалектичний тейк - Я особисто вважаю що дизайнер це просто людина яка графічними методами вирішує проблему бізнеса (збільшення рівня прибутку), заметчивши реквайрменти юзера і пропозицію продукту. І виходячи з цього, дизайнер це завжди про інволвмент одночасно в бізнес і юзера.
Якщо ж ви відкриєте Djinni або будьяку іншу платформу для пошуку роботи, то побачите безліч дизайн-вакансій. Але чи така вже велика різниця між тайтлами в цих вакансіях? ІМХО НІ!
Давайте спробуємо розібратись:
⚫️ UX Designer - людина яка працює здебільшого з досвідом користувача. Скоріш за все людина компетентна в дослідженнях і відмальовці.
⚫️ UI Designer - людина яка працює суто з інтерфейсами (оператор Фігми), але погана юайка може нівелювати гарний UX і критично занижувати конверсію. Тобто UI це є UX.
⚫️ UX/UI Designer - людина і про UI і про UX.
⚫️ UI/UX Designer - людина і про UI і про UX.
⚫️ Product Designer - це вже цікавіше: ця роль вже працює з метриками, воронками, стратегією, звісно ж з досвідом користувача, підтримує продукт консистентним і привабливим. Адже всі ці аспекти можуть (і будуть) впливати на результати всього продукту в цілому.
⚫️ Web Designer - працює з вебом. Але чи це означає що нічого крім веба людина не робить? Наврядчи. Це лише спеціалізація ТУТ і ЗАРАЗ і якщо продукт захоче робити аппку, то веб-дизайнер стане ще і апп-дизайнером)
⚫️ Interaction Designer - мікроанімації, взаємодії, “красоти”. Але ж це також є частиною UI та UX.
⚫️ Service Designer - проектує не окрему кнопку або сайт, а весь шлях клієнта від моменту «я щось хочу» до «я отримав послугу і щасливий». В голову одразу проситься думка “о, так і я вмію робити блюпрінт”))))).
⚫️ Graphic Designer - людина яка круто шарить за колористику, типографіку, композицію, ритм і тд. Але хіба це не є UI? Можливо графічні дизайнери не валідують свої рішення?
⚫️ UX Researcher - людина яка вміє проводити дослідження. Тут наче просто все, але якщо дослідник провів діскавері, віддав юайнику і на етапі тестувань побачив проблеми - чи виправлення і валідація цих фіксів не входить в зону відповідальності нашого рісьорчера?
⚫️ UX Writer - людина вміє працювати з текстами. Ну класно ж. Але 80% інтерфеса то є текст. Тож текст це також UX.
Виходить все якось дуже складно, адже зв'язок UI, UX, текстів, анімації дуже тісний. І все це впливає на метрики, а отже і на рівень конверсії та монетизацію.
І ось мій тейк, на тему якого я б хотів з вами поспорити: РОЗПОДІЛ ДИЗАЙНЕРІВ ДУЖЕ УМОВНИЙ. Він важливий лише відділу кадрів, щоб знати що написати на вашому бейджику. Хороший дизайнер повинен бути T-shaped і вміти робити багато. Тоді такого працівника можемо назвати Дизайнером.
А як ви вважаєте - варто робити розподіл?
Всі ми знаємо що є безліч видів дизайнерів: UX Designer, UI Designer, UX/UI Designer, UI/UX Designer, Product Designer, Web Designer, Interaction Designer, Service Designer, Graphic Designer, UX Researcher, UX Writer і багато інших в залежності від того як хоче обізвати дизайнера ваша компанія.
Тут в мене є певний діалектичний тейк - Я особисто вважаю що дизайнер це просто людина яка графічними методами вирішує проблему бізнеса (збільшення рівня прибутку), заметчивши реквайрменти юзера і пропозицію продукту. І виходячи з цього, дизайнер це завжди про інволвмент одночасно в бізнес і юзера.
Якщо ж ви відкриєте Djinni або будьяку іншу платформу для пошуку роботи, то побачите безліч дизайн-вакансій. Але чи така вже велика різниця між тайтлами в цих вакансіях? ІМХО НІ!
Давайте спробуємо розібратись:
⚫️ UX Designer - людина яка працює здебільшого з досвідом користувача. Скоріш за все людина компетентна в дослідженнях і відмальовці.
⚫️ UI Designer - людина яка працює суто з інтерфейсами (оператор Фігми), але погана юайка може нівелювати гарний UX і критично занижувати конверсію. Тобто UI це є UX.
⚫️ UX/UI Designer - людина і про UI і про UX.
⚫️ UI/UX Designer - людина і про UI і про UX.
⚫️ Product Designer - це вже цікавіше: ця роль вже працює з метриками, воронками, стратегією, звісно ж з досвідом користувача, підтримує продукт консистентним і привабливим. Адже всі ці аспекти можуть (і будуть) впливати на результати всього продукту в цілому.
⚫️ Web Designer - працює з вебом. Але чи це означає що нічого крім веба людина не робить? Наврядчи. Це лише спеціалізація ТУТ і ЗАРАЗ і якщо продукт захоче робити аппку, то веб-дизайнер стане ще і апп-дизайнером)
⚫️ Interaction Designer - мікроанімації, взаємодії, “красоти”. Але ж це також є частиною UI та UX.
⚫️ Service Designer - проектує не окрему кнопку або сайт, а весь шлях клієнта від моменту «я щось хочу» до «я отримав послугу і щасливий». В голову одразу проситься думка “о, так і я вмію робити блюпрінт”))))).
⚫️ Graphic Designer - людина яка круто шарить за колористику, типографіку, композицію, ритм і тд. Але хіба це не є UI? Можливо графічні дизайнери не валідують свої рішення?
⚫️ UX Researcher - людина яка вміє проводити дослідження. Тут наче просто все, але якщо дослідник провів діскавері, віддав юайнику і на етапі тестувань побачив проблеми - чи виправлення і валідація цих фіксів не входить в зону відповідальності нашого рісьорчера?
⚫️ UX Writer - людина вміє працювати з текстами. Ну класно ж. Але 80% інтерфеса то є текст. Тож текст це також UX.
Виходить все якось дуже складно, адже зв'язок UI, UX, текстів, анімації дуже тісний. І все це впливає на метрики, а отже і на рівень конверсії та монетизацію.
І ось мій тейк, на тему якого я б хотів з вами поспорити: РОЗПОДІЛ ДИЗАЙНЕРІВ ДУЖЕ УМОВНИЙ. Він важливий лише відділу кадрів, щоб знати що написати на вашому бейджику. Хороший дизайнер повинен бути T-shaped і вміти робити багато. Тоді такого працівника можемо назвати Дизайнером.
А як ви вважаєте - варто робити розподіл?
❤44
Вчора ми з вами говорили про позиціонування та дизайн як такий. Сьогодні пропоную зробити день UX.
Адже на мою думку саме UX керує всім.
Всі знають про дизайн процес, юзер інтервью, тестування та інші базові бази але давайте поговоримо про більш цікаві і не сильно відомі види досліджень. Частину з них я практикував, частину дуже хотів би. На мою думку чим більше ваш арсенал активностей, тим більшу невиправну користь продукту ви можете нанести. Ви можете планувати, проводити, кастумізувати різні активності, проаналізувавши результати яких отримаєте корисний результат.
Метод "Муха на стіні" (Passive observation)
Це один із тих методів, який дозволяє брендам знаходити «золото» там, де цифри аналітики мовчать. Коли люди не знають, що за ними спостерігають, вони поводяться максимально природно, і саме це народжує геніальні продуктові рішення.
Ось кілька крутих прикладів того, як «муха на стіні» (або її варіації) допомогла великим гравцям:
1. IKEA: Чому люди не купують дивани?
IKEA регулярно відправляє своїх антропологів та дизайнерів у домівки звичайних людей (з їхнього дозволу, звісно, але як пасивних спостерігачів).
Спостереження: Вони помітили, що в багатьох країнах Азії люди не сидять на диванах так, як це задумували шведські дизайнери. Вони використовують диван як спинку, сидячи на підлозі, або складають на нього речі.
Результат: IKEA змінила висоту ніжок та глибину сидінь для певних ринків і почала створювати модульні меблі, які підлаштовуються під реальний побут, а не під «каталожну» картинку.
2. LEGO: Порятунок компанії від банкрутства
На початку 2000-х LEGO ледь не збанкрутували, бо вважали, що дітям потрібні прості ігри (через кліпове мислення).
Метод: Дизайнери провели тижні, просто спостерігаючи, як діти граються в кімнатах. Вони побачили 11-річного німецького хлопчика, який пишався своїми старими, потертими кросівками.
Інсайт: Хлопчик пояснив, що кросівки показують, наскільки він крутий скейтбордист, бо він довго тренувався, щоб їх так стерти. Дизайнери зрозумів: дітям не потрібна простота, їм потрібні досягнення та складність.
Результат: LEGO повернулися до складних наборів з тисячами деталей (як Star Wars), що врятувало бренд.
3. Ford: "Ефект вагітної жінки"
Розробляючи модель Focus, інженери Ford одягали спеціальні костюми ("Third Age Suit"), які обмежували рухи, та спостерігали за тим, як люди з обмеженою мобільністю або вагітні жінки намагаються сісти в авто.
Спостереження: "Муха на стіні" показала, що люди не просто сідають, вони "втискаються", тримаючись за все підряд.
Результат: Ford переглянув кути відкриття дверей, висоту порогів та підсвітку підлоги. Це зробило машину зручною для всіх, а не тільки для молодих і спортивних.
Цікаві факти про метод
Ефект Хоторна: Це головний ворог методу. Він каже, що як тільки людина усвідомлює, що за нею спостерігають, вона починає працювати краще або поводитися "правильніше". Тому дизайнери часто чекають годину-дві, поки піддослідний розслабиться і забуде про них.
"Сміттєві дослідження": Іноді цей метод доходить до абсурду. Деякі компанії (наприклад, виробники побутової хімії) аналізують сміття користувачів (звісно, анонімно), щоб побачити, які упаковки насправді порожні, а які викинули напівповними. Це теж вид пасивного спостереження за результатом.
Камери в супермаркетах: Коли ти бачиш у великих мережах (як Сільпо чи Walmart) камери над полицями — це не завжди про крадіжки. Часто це UX-дослідження: аналізують, на якій полиці людина затримала погляд найдовше, але так і не взяла товар.
Як це виглядає в Digital
Зараз роль "мухи" часто виконують інструменти на кшталт Hotjar або FullStory.
Дизайнер відкриває запис сесії реального користувача і просто дивиться, як курсор мишки хаотично смикається навколо незрозумілої кнопки. Це і є цифрове пасивне спостереження.
Адже на мою думку саме UX керує всім.
Всі знають про дизайн процес, юзер інтервью, тестування та інші базові бази але давайте поговоримо про більш цікаві і не сильно відомі види досліджень. Частину з них я практикував, частину дуже хотів би. На мою думку чим більше ваш арсенал активностей, тим більшу невиправну користь продукту ви можете нанести. Ви можете планувати, проводити, кастумізувати різні активності, проаналізувавши результати яких отримаєте корисний результат.
Метод "Муха на стіні" (Passive observation)
Це один із тих методів, який дозволяє брендам знаходити «золото» там, де цифри аналітики мовчать. Коли люди не знають, що за ними спостерігають, вони поводяться максимально природно, і саме це народжує геніальні продуктові рішення.
Ось кілька крутих прикладів того, як «муха на стіні» (або її варіації) допомогла великим гравцям:
1. IKEA: Чому люди не купують дивани?
IKEA регулярно відправляє своїх антропологів та дизайнерів у домівки звичайних людей (з їхнього дозволу, звісно, але як пасивних спостерігачів).
Спостереження: Вони помітили, що в багатьох країнах Азії люди не сидять на диванах так, як це задумували шведські дизайнери. Вони використовують диван як спинку, сидячи на підлозі, або складають на нього речі.
Результат: IKEA змінила висоту ніжок та глибину сидінь для певних ринків і почала створювати модульні меблі, які підлаштовуються під реальний побут, а не під «каталожну» картинку.
2. LEGO: Порятунок компанії від банкрутства
На початку 2000-х LEGO ледь не збанкрутували, бо вважали, що дітям потрібні прості ігри (через кліпове мислення).
Метод: Дизайнери провели тижні, просто спостерігаючи, як діти граються в кімнатах. Вони побачили 11-річного німецького хлопчика, який пишався своїми старими, потертими кросівками.
Інсайт: Хлопчик пояснив, що кросівки показують, наскільки він крутий скейтбордист, бо він довго тренувався, щоб їх так стерти. Дизайнери зрозумів: дітям не потрібна простота, їм потрібні досягнення та складність.
Результат: LEGO повернулися до складних наборів з тисячами деталей (як Star Wars), що врятувало бренд.
3. Ford: "Ефект вагітної жінки"
Розробляючи модель Focus, інженери Ford одягали спеціальні костюми ("Third Age Suit"), які обмежували рухи, та спостерігали за тим, як люди з обмеженою мобільністю або вагітні жінки намагаються сісти в авто.
Спостереження: "Муха на стіні" показала, що люди не просто сідають, вони "втискаються", тримаючись за все підряд.
Результат: Ford переглянув кути відкриття дверей, висоту порогів та підсвітку підлоги. Це зробило машину зручною для всіх, а не тільки для молодих і спортивних.
Цікаві факти про метод
Ефект Хоторна: Це головний ворог методу. Він каже, що як тільки людина усвідомлює, що за нею спостерігають, вона починає працювати краще або поводитися "правильніше". Тому дизайнери часто чекають годину-дві, поки піддослідний розслабиться і забуде про них.
"Сміттєві дослідження": Іноді цей метод доходить до абсурду. Деякі компанії (наприклад, виробники побутової хімії) аналізують сміття користувачів (звісно, анонімно), щоб побачити, які упаковки насправді порожні, а які викинули напівповними. Це теж вид пасивного спостереження за результатом.
Камери в супермаркетах: Коли ти бачиш у великих мережах (як Сільпо чи Walmart) камери над полицями — це не завжди про крадіжки. Часто це UX-дослідження: аналізують, на якій полиці людина затримала погляд найдовше, але так і не взяла товар.
Як це виглядає в Digital
Зараз роль "мухи" часто виконують інструменти на кшталт Hotjar або FullStory.
Дизайнер відкриває запис сесії реального користувача і просто дивиться, як курсор мишки хаотично смикається навколо незрозумілої кнопки. Це і є цифрове пасивне спостереження.
🔥36❤15