Порадимо трохи курсів.
Почнемо з неочікуваної рекомендації. Вона навіть формально не в категорії дизайну.
Мідли, сіньйори і ліди, зверніть увагу на Facilitation for Group Meetings.
Він допомагає навчитись фасилітувати воркшопи, тримати групову динаміку, розрулювати конфлікти і направляти зустрічі в правильне русло.
10/10.
—
А також:
- інтенсив Стаса Говорухіна — User Onboarding Design — тут навчитесь проєктувати розкішні онбординги. Три дні починаючи з цієї п'ятниці.
- той самий Product Design для переходу з клієнтської розробки у продуктову.
- інтенсив Віталія Фрідмана — Designing for Complex UI — про те, як будувати комплексні інтерфейсні системи.
Побачимось 💙
Почнемо з неочікуваної рекомендації. Вона навіть формально не в категорії дизайну.
Мідли, сіньйори і ліди, зверніть увагу на Facilitation for Group Meetings.
Він допомагає навчитись фасилітувати воркшопи, тримати групову динаміку, розрулювати конфлікти і направляти зустрічі в правильне русло.
10/10.
—
А також:
- інтенсив Стаса Говорухіна — User Onboarding Design — тут навчитесь проєктувати розкішні онбординги. Три дні починаючи з цієї п'ятниці.
- той самий Product Design для переходу з клієнтської розробки у продуктову.
- інтенсив Віталія Фрідмана — Designing for Complex UI — про те, як будувати комплексні інтерфейсні системи.
Побачимось 💙
❤6
Шановні, цей тиждень канал буде вести Богдан Матвіїв.
- лінкедин
- біхенс
Вже як 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