Взагалі цього тижня був настрій пофілософстутвати, розповісти інсайти і що споглядаю працюючи в специфічній ніші, ще й в агенції. Але як вам? Що цікаво почитати?
❤10
Ну що, всім привіт. Вчора взяла день тиші, щоб принести вам трохи лонгрідів.
Хочу почати з теми, яка виявилась найпопулярнішою в опитуванні — кар’єрний розвиток і скіли дизайнера.
Окрім креативності і здатності швидко адаптуватися — про що я писала раніше — я все більше переконуюсь, що одна з найважливіших навичок дизайнера це вміння презентувати і фасилітувати зустрічі. Особливо якщо ви працюєте в агенції або багато взаємодієте з клієнтами.
Я часто думаю про дизайн-агенцію як про сервіс. І найпростіша аналогія для мене — це ресторан. Досвід гостя складається не тільки з їжі: є атмосфера, інтер’єр, запах, швидкість обслуговування, зручність бронювання — це все разом формує враження.
З агенцією так само: портфоліо, якість дизайну, доступність команди, швидкість комунікації — це “кухня”. Але є ще й обслуговування, тобто те, як дизайнер спілкується з клієнтом.
Останнім часом я дуже гостро відчула неочевидну для себе річ: клієнтів і команду потрібно залучати емоційно. Під час зустрічей важливо створювати унікальні відносини: жарти, маленькі інсайди, відчуття спільної історії.
Звісно, це не замінює дизайн, але це створює середовище, в якому дизайн починають слухати, бо дизайн не має цінності, якщо його не розуміють.
І це особливо видно на великих презентаціях для стейкхолдерів або екзек’ютивів — ми можемо зробити великий шматок роботи за тиждень, але навіть кілька годин презентації не гарантують результату.
І тут важливо зрозуміти, що мета презентації — не approval, а щоб люди повірили в рішення і зрозуміли їх. Я не раз бачила ситуацію, коли після переходу від wireframes до дизайну раптом з’являються питання, які можна було вирішити два етапи тому, просто тому що раніше стейкхолдери не занурились достатньо глибоко.
Люди втомлюються, втрачають увагу, дивляться поверхнево, тому презентація — це завжди робота з увагою.
Стейкхолдерів потрібно енгейджити:
- жива інтонація
- гумор (де доречно)
- приклади
- відсилки до попередніх розмов
- маленькі “easter eggs”
- І обов"язково просто харизма.
А ще хороша презентація завжди починається з бази:
- яка була задача
- для кого ми це робимо
- про що домовились минулого разу
- що показуємо сьогодні
- яка мета зустрічі
- чому це важливо
І ні в якому разі не "everything I did in the order I remember it" — не пересказуйте хронологію ваших дій. Рецепт такий: Задача -> Для кого -> Яка проблема -> Як ми її вирішуємо -> Можна ще показати чому ми думаємо що це рішення хороше
Це звучить очевидно, але саме ці речі найчастіше пропускають.
Коли деталей стає багато, допомагають фасилітаційні інструменти:
- дати людям час самостійно пройтись по макетах
- зібрати коментарі карточками
- зробити голосування, емоджі на макетах
- зафіксувати рішення
- вчасно зробити перерву
- залучати більш пасивних учасників, звертатись напряму
Це навичок управління груповою динамікою — одна з найбільш недооцінених дизайнерських навичок. На практиці більшість дизайнерів фокусуються на портфоліо і хард-скілах і значно менше — на комунікації.
Є і друга сторона цієї теми — презентаційними навичками можна виправдати майже будь-який дизайн. Я не раз бачила, як дизайнери переконливо захищали рішення, які були слабкими по UX або повністю суб’єктивними, бо харизма може замаскувати проблеми.
Тому важливо пам’ятати, що дизайн-рішення потрібно захищати структуровано.
Починати від потреби користувача в моменті, підтвердити бізнес-можливістю, подивитись на конкурентів, але тільки якщо вони співпадають по сегменту, позиціонуванню і бізнес-моделі яка підходить під конкретну проблему, переконатись, що не суперечить евристикам — хоча б три пункти з цього списку дають триангуляцію, на яку можна опиратись. Коли рішення ще не протестовані, потрібно робити extra mile, щоб показати логіку — чому саме це рішення має сенс саме для цієї аудиторії.
Чесно кажучи, чим далі, тим більше я думаю, що вміння показати мислення — це один з ключових скілів дизайнера, який вам допоможе не тільки лиш в роботі із командою, а й при кар"єрних 1-1 і співбесідах. 🤞
Хочу почати з теми, яка виявилась найпопулярнішою в опитуванні — кар’єрний розвиток і скіли дизайнера.
Окрім креативності і здатності швидко адаптуватися — про що я писала раніше — я все більше переконуюсь, що одна з найважливіших навичок дизайнера це вміння презентувати і фасилітувати зустрічі. Особливо якщо ви працюєте в агенції або багато взаємодієте з клієнтами.
Я часто думаю про дизайн-агенцію як про сервіс. І найпростіша аналогія для мене — це ресторан. Досвід гостя складається не тільки з їжі: є атмосфера, інтер’єр, запах, швидкість обслуговування, зручність бронювання — це все разом формує враження.
З агенцією так само: портфоліо, якість дизайну, доступність команди, швидкість комунікації — це “кухня”. Але є ще й обслуговування, тобто те, як дизайнер спілкується з клієнтом.
Останнім часом я дуже гостро відчула неочевидну для себе річ: клієнтів і команду потрібно залучати емоційно. Під час зустрічей важливо створювати унікальні відносини: жарти, маленькі інсайди, відчуття спільної історії.
Звісно, це не замінює дизайн, але це створює середовище, в якому дизайн починають слухати, бо дизайн не має цінності, якщо його не розуміють.
І це особливо видно на великих презентаціях для стейкхолдерів або екзек’ютивів — ми можемо зробити великий шматок роботи за тиждень, але навіть кілька годин презентації не гарантують результату.
І тут важливо зрозуміти, що мета презентації — не approval, а щоб люди повірили в рішення і зрозуміли їх. Я не раз бачила ситуацію, коли після переходу від wireframes до дизайну раптом з’являються питання, які можна було вирішити два етапи тому, просто тому що раніше стейкхолдери не занурились достатньо глибоко.
Люди втомлюються, втрачають увагу, дивляться поверхнево, тому презентація — це завжди робота з увагою.
Стейкхолдерів потрібно енгейджити:
- жива інтонація
- гумор (де доречно)
- приклади
- відсилки до попередніх розмов
- маленькі “easter eggs”
- І обов"язково просто харизма.
А ще хороша презентація завжди починається з бази:
- яка була задача
- для кого ми це робимо
- про що домовились минулого разу
- що показуємо сьогодні
- яка мета зустрічі
- чому це важливо
І ні в якому разі не "everything I did in the order I remember it" — не пересказуйте хронологію ваших дій. Рецепт такий: Задача -> Для кого -> Яка проблема -> Як ми її вирішуємо -> Можна ще показати чому ми думаємо що це рішення хороше
Це звучить очевидно, але саме ці речі найчастіше пропускають.
Коли деталей стає багато, допомагають фасилітаційні інструменти:
- дати людям час самостійно пройтись по макетах
- зібрати коментарі карточками
- зробити голосування, емоджі на макетах
- зафіксувати рішення
- вчасно зробити перерву
- залучати більш пасивних учасників, звертатись напряму
Це навичок управління груповою динамікою — одна з найбільш недооцінених дизайнерських навичок. На практиці більшість дизайнерів фокусуються на портфоліо і хард-скілах і значно менше — на комунікації.
Є і друга сторона цієї теми — презентаційними навичками можна виправдати майже будь-який дизайн. Я не раз бачила, як дизайнери переконливо захищали рішення, які були слабкими по UX або повністю суб’єктивними, бо харизма може замаскувати проблеми.
Тому важливо пам’ятати, що дизайн-рішення потрібно захищати структуровано.
Починати від потреби користувача в моменті, підтвердити бізнес-можливістю, подивитись на конкурентів, але тільки якщо вони співпадають по сегменту, позиціонуванню і бізнес-моделі яка підходить під конкретну проблему, переконатись, що не суперечить евристикам — хоча б три пункти з цього списку дають триангуляцію, на яку можна опиратись. Коли рішення ще не протестовані, потрібно робити extra mile, щоб показати логіку — чому саме це рішення має сенс саме для цієї аудиторії.
Чесно кажучи, чим далі, тим більше я думаю, що вміння показати мислення — це один з ключових скілів дизайнера, який вам допоможе не тільки лиш в роботі із командою, а й при кар"єрних 1-1 і співбесідах. 🤞
❤25🔥7
Пишу наступний лонгрід (обожнюю лонгріди 👹) про ідентифікацію точок інновації в продукті і думку гадаю — а для кого ж я це пишу? Щоб вам було цікаво, зроблю попереднє дослідження про аудиторію каналу, все по дизайн процесу!
🔥10
👏6
Всім добрий день вихідного ☕️
Почнемо плавний захід у інтерфейсні вихідні із двух must have звичок, які, як виявилося, дизайнери інколи просто не роблять. І мене це щоразу дивує.
1. Не перевіряють дизайн у прототипах
Статичні макети майже завжди створюють ілюзію, що все логічно. Але як тільки збираєш клікабельний прототип і починаєш ним користуватись як продуктом, одразу вилізають речі, які просто неможливо побачити в Figma-фреймах.
Що дає робота через прототип:
— Відчуття реального інтерфейсу
У прототипі видно, чи рішення взагалі працює як взаємодія. Особливо це критично для мобільних сценаріїв, де ритм переходів і розташування елементів вирішують дуже багато.
— Можливість доробити «last mile», клієнти ще називають «delightful moments»
Саме в прототипах народжуються дрібні рішення, які роблять інтерфейс живим: мікроанімації, реакції на дії, маленькі підказки, які підсилюють відчуття якості продукту.
Іноді це спосіб підкреслити додаткову цінність продукту.
Наприклад, коли сервіс підказує, що машина приїде швидше, ніж очікувалося. Що якийсь процес «забустився», що споживач отримує більше ніж очікував. Або коли пошук виглядає більш персоналізованим не лише за логікою, а й за подачею «picked for you» із прикольною анімацією працює більш конверсійно ніж просто дефолтне сортування за рекомендованим.
— Підсвічування неочевидних флоу
Коли дизайнер живе в статичних екранах і тримає юзер-флоу тільки в голові або в схемі, багато переходів здаються очевидними.
Але варто пройти шлях у прототипі — і раптом стає незрозуміло:
• що відбувається після завершення флоу
• куди користувач потрапляє далі
• де перевірити статус
• як виглядає продовження сценарію
Саме прототип дуже швидко показує місця, де континуальність досвіду просто обривається.
Для мене робота без прототипу — це майже завжди робота напівсліпу.
2. Не перевіряють контраст через contrast checker
Про accessibility давно знають і клієнти, і продуктові команди. Більшість уже чула про вимоги до контрастності, але на практиці дизайнери все одно часто перевіряють “на око”.
Я теж уже приблизно пам’ятаю, який сірий не працює на білому. Але це не привід не перевіряти.
Регулярна перевірка контрасту реально впливає на фінальний вигляд продукту — інколи навіть на рівні брендингу.
У нас був кейс, де довелося фактично перезбирати кольорову систему продукту тільки тому, що бренд-кольори нормально не працювали з текстом.
З мого досвіду найскладніше працювати з оранжевим.
Щоб білий текст читався нормально, його часто доводиться затемнювати майже до теплого коричневого.
А якщо працювати з темним текстом — колір часто зсувається в медовий жовтий і може виглядати блякло.
Contrast checker — це одна з тих дрібних дисциплін, які дуже сильно відчуваються в фінальному продукті 🎯
А які у вас дизайнерські звички?
Почнемо плавний захід у інтерфейсні вихідні із двух must have звичок, які, як виявилося, дизайнери інколи просто не роблять. І мене це щоразу дивує.
1. Не перевіряють дизайн у прототипах
Статичні макети майже завжди створюють ілюзію, що все логічно. Але як тільки збираєш клікабельний прототип і починаєш ним користуватись як продуктом, одразу вилізають речі, які просто неможливо побачити в Figma-фреймах.
Що дає робота через прототип:
— Відчуття реального інтерфейсу
У прототипі видно, чи рішення взагалі працює як взаємодія. Особливо це критично для мобільних сценаріїв, де ритм переходів і розташування елементів вирішують дуже багато.
— Можливість доробити «last mile», клієнти ще називають «delightful moments»
Саме в прототипах народжуються дрібні рішення, які роблять інтерфейс живим: мікроанімації, реакції на дії, маленькі підказки, які підсилюють відчуття якості продукту.
Іноді це спосіб підкреслити додаткову цінність продукту.
Наприклад, коли сервіс підказує, що машина приїде швидше, ніж очікувалося. Що якийсь процес «забустився», що споживач отримує більше ніж очікував. Або коли пошук виглядає більш персоналізованим не лише за логікою, а й за подачею «picked for you» із прикольною анімацією працює більш конверсійно ніж просто дефолтне сортування за рекомендованим.
— Підсвічування неочевидних флоу
Коли дизайнер живе в статичних екранах і тримає юзер-флоу тільки в голові або в схемі, багато переходів здаються очевидними.
Але варто пройти шлях у прототипі — і раптом стає незрозуміло:
• що відбувається після завершення флоу
• куди користувач потрапляє далі
• де перевірити статус
• як виглядає продовження сценарію
Саме прототип дуже швидко показує місця, де континуальність досвіду просто обривається.
Для мене робота без прототипу — це майже завжди робота напівсліпу.
2. Не перевіряють контраст через contrast checker
Про accessibility давно знають і клієнти, і продуктові команди. Більшість уже чула про вимоги до контрастності, але на практиці дизайнери все одно часто перевіряють “на око”.
Я теж уже приблизно пам’ятаю, який сірий не працює на білому. Але це не привід не перевіряти.
Регулярна перевірка контрасту реально впливає на фінальний вигляд продукту — інколи навіть на рівні брендингу.
У нас був кейс, де довелося фактично перезбирати кольорову систему продукту тільки тому, що бренд-кольори нормально не працювали з текстом.
З мого досвіду найскладніше працювати з оранжевим.
Щоб білий текст читався нормально, його часто доводиться затемнювати майже до теплого коричневого.
А якщо працювати з темним текстом — колір часто зсувається в медовий жовтий і може виглядати блякло.
Contrast checker — це одна з тих дрібних дисциплін, які дуже сильно відчуваються в фінальному продукті 🎯
А які у вас дизайнерські звички?
❤30🔥1👌1
Привіт! Думаю, що цей пост ви прочитаєте вже завтра. А понеділок — день нових починань, тому почну з новини: я наймаю дизайнерів у свою команду.
Шукаю медлів і синьорів, продуктових дизайнерів і UX-людей, яким цікаво те, про що я писала цього тижня. Людей із креативним мисленням, про яке був перший пост. Людей, яким цікаво робити інноваційні продукти і пробувати нові підходи.
І тепер до завершальної теми цієї серії постів — як ідентифікувати можливості для інновацій. Не тільки в AI, а загалом у продуктах.
Насправді це повертає нас до базового дизайн-процесу і до того, що іноді називають “табуретом Нормана”.
У ньому є три складові: користувач і його потреби, бізнес і його можливості, технологія. На перетині цих трьох речей виникає продукт. Це стосується не тільки великих рішень, а й окремих фіч, user flow або навіть невеликих змін в інтерфейсі.
Саме в цих перетинах часто з’являються нові ідеї.
Якщо подивитися глибше, кожна з цих складових дає свої можливості для інновацій. Я розповім, як я сама це використовую в роботі.
Почну з технології.
До появи AI я рідше працювала з цією частиною дизайн-процесу. Зараз стало значно зрозуміліше, як технологічні можливості можна напряму переводити в продуктові рішення.
Наприклад, генеративні інтерфейси і NLP дозволяють працювати з природною мовою користувача. Це відкриває можливість спрощувати форми, скорочувати кількість фільтрів і будувати пошук не тільки за параметрами, а і за наміром користувача.
Natural language інтерфейси сильно вплинули на продукти, особливо в e-commerce і генеративних тулах. Користувач може сформулювати запит своїми словами, і система вже може інтерпретувати контекст, дату або категорію і знайти релевантні результати.
Наприклад, замість ручного вибору параметрів користувач може написати: “Хочу щось цікаве на День святого Валентина”, і система зможе сформувати релевантну видачу.
Такі підходи скорочують user flow і роблять взаємодію більш природною.
Технології також дають можливість будувати більш точну персоналізацію. Поведінкові дані користувача можна аналізувати разом із даними схожих користувачів і підбирати більш релевантні пропозиції. Для цього іноді достатньо алгоритмів без складних AI-моделей, але сучасні технології дозволяють робити це точніше і швидше.
Якщо перейти до користувачів, важливо працювати не тільки з їхніми потребами, а й з освоєнням нових можливостей.
Будь-яка нова функція потребує пояснення і поступового знайомства користувача з можливостями продукту.
Тому важливо продумувати:
як користувач дізнається про нову можливість
які приклади він бачить
які підказки отримує
чи є готові запити або сценарії використання
Навіть якщо користувач не використовує готові приклади, вони допомагають зрозуміти можливості продукту.
Третя складова — бізнес.
Вона так само важлива для пошуку інновацій, тому що саме бізнес визначає реальні можливості продукту.
У кожного бізнесу є свої асети. Це можуть бути дані, операційні процеси або інфраструктура.
Наприклад, якщо у компанії є багато років історичних даних, їх можна використати для рекомендаційних систем або персоналізації.
Якщо це сервіс доставки, оренди автомобілів або таксі, у нього вже є операційна система, карти і транспорт. Ці ресурси теж можна використовувати як основу для нових рішень.
При пошуку інновацій важливо враховувати, які ресурси є у бізнесу і яких ресурсів немає. Наприклад, складні алгоритмічні рішення можуть бути недосяжними для стартапів без достатніх обсягів даних.
Крім ресурсів, у бізнесу є і власні задачі. Інновації часто з’являються там, де продукт допомагає вирішувати конкретні бізнесові потреби: підвищення конверсії, розвиток напрямків продукту, оптимізація процесів або спрощення взаємодії з користувачем.
У результаті можливості для інновацій з’являються на перетині технологій, користувачів і бізнесу. Кожен продукт використовує ці складові по-своєму, тому універсальних рецептів тут немає.
Для мене це скоріше спосіб мислення, який допомагає помічати можливості.
Особливо корисно слідкувати за новими технологіями і дивитися, що стає можливим на ринку.
Шукаю медлів і синьорів, продуктових дизайнерів і UX-людей, яким цікаво те, про що я писала цього тижня. Людей із креативним мисленням, про яке був перший пост. Людей, яким цікаво робити інноваційні продукти і пробувати нові підходи.
І тепер до завершальної теми цієї серії постів — як ідентифікувати можливості для інновацій. Не тільки в AI, а загалом у продуктах.
Насправді це повертає нас до базового дизайн-процесу і до того, що іноді називають “табуретом Нормана”.
У ньому є три складові: користувач і його потреби, бізнес і його можливості, технологія. На перетині цих трьох речей виникає продукт. Це стосується не тільки великих рішень, а й окремих фіч, user flow або навіть невеликих змін в інтерфейсі.
Саме в цих перетинах часто з’являються нові ідеї.
Якщо подивитися глибше, кожна з цих складових дає свої можливості для інновацій. Я розповім, як я сама це використовую в роботі.
Почну з технології.
До появи AI я рідше працювала з цією частиною дизайн-процесу. Зараз стало значно зрозуміліше, як технологічні можливості можна напряму переводити в продуктові рішення.
Наприклад, генеративні інтерфейси і NLP дозволяють працювати з природною мовою користувача. Це відкриває можливість спрощувати форми, скорочувати кількість фільтрів і будувати пошук не тільки за параметрами, а і за наміром користувача.
Natural language інтерфейси сильно вплинули на продукти, особливо в e-commerce і генеративних тулах. Користувач може сформулювати запит своїми словами, і система вже може інтерпретувати контекст, дату або категорію і знайти релевантні результати.
Наприклад, замість ручного вибору параметрів користувач може написати: “Хочу щось цікаве на День святого Валентина”, і система зможе сформувати релевантну видачу.
Такі підходи скорочують user flow і роблять взаємодію більш природною.
Технології також дають можливість будувати більш точну персоналізацію. Поведінкові дані користувача можна аналізувати разом із даними схожих користувачів і підбирати більш релевантні пропозиції. Для цього іноді достатньо алгоритмів без складних AI-моделей, але сучасні технології дозволяють робити це точніше і швидше.
Якщо перейти до користувачів, важливо працювати не тільки з їхніми потребами, а й з освоєнням нових можливостей.
Будь-яка нова функція потребує пояснення і поступового знайомства користувача з можливостями продукту.
Тому важливо продумувати:
як користувач дізнається про нову можливість
які приклади він бачить
які підказки отримує
чи є готові запити або сценарії використання
Навіть якщо користувач не використовує готові приклади, вони допомагають зрозуміти можливості продукту.
Третя складова — бізнес.
Вона так само важлива для пошуку інновацій, тому що саме бізнес визначає реальні можливості продукту.
У кожного бізнесу є свої асети. Це можуть бути дані, операційні процеси або інфраструктура.
Наприклад, якщо у компанії є багато років історичних даних, їх можна використати для рекомендаційних систем або персоналізації.
Якщо це сервіс доставки, оренди автомобілів або таксі, у нього вже є операційна система, карти і транспорт. Ці ресурси теж можна використовувати як основу для нових рішень.
При пошуку інновацій важливо враховувати, які ресурси є у бізнесу і яких ресурсів немає. Наприклад, складні алгоритмічні рішення можуть бути недосяжними для стартапів без достатніх обсягів даних.
Крім ресурсів, у бізнесу є і власні задачі. Інновації часто з’являються там, де продукт допомагає вирішувати конкретні бізнесові потреби: підвищення конверсії, розвиток напрямків продукту, оптимізація процесів або спрощення взаємодії з користувачем.
У результаті можливості для інновацій з’являються на перетині технологій, користувачів і бізнесу. Кожен продукт використовує ці складові по-своєму, тому універсальних рецептів тут немає.
Для мене це скоріше спосіб мислення, який допомагає помічати можливості.
Особливо корисно слідкувати за новими технологіями і дивитися, що стає можливим на ринку.
❤18
Технології часто відкривають нові напрямки розвитку продуктів.
Так само важливо розуміти можливості бізнесу і його задачі.
Інновації працюють тоді, коли вони підтримують розвиток продукту і допомагають бізнесу рости.
Якщо вам цікаво працювати над такими продуктами — я зараз шукаю дизайнерів у команду, тож напишіть мені, я відмітилась в коментарях 👇
Так само важливо розуміти можливості бізнесу і його задачі.
Інновації працюють тоді, коли вони підтримують розвиток продукту і допомагають бізнесу рости.
Якщо вам цікаво працювати над такими продуктами — я зараз шукаю дизайнерів у команду, тож напишіть мені, я відмітилась в коментарях 👇
❤11
Вау, це було цікаво і змістовно!
Нагадуємо, цього тижня для цінність в каналі створювала Аня Дем'яненко, лід продукт дизайнерка у Lazarev.
- підписуйтесь на Анін лінкдін.
- і велкам на курс, де вона є кураторкою UX Advanced — для глибокого розуміння дизайн-процесів.
Дякуємо.
— Projector ✨
Нагадуємо, цього тижня для цінність в каналі створювала Аня Дем'яненко, лід продукт дизайнерка у Lazarev.
- підписуйтесь на Анін лінкдін.
- і велкам на курс, де вона є кураторкою UX Advanced — для глибокого розуміння дизайн-процесів.
Дякуємо.
— Projector ✨
❤8👍3
Порадимо трохи курсів.
Почнемо з неочікуваної рекомендації. Вона навіть формально не в категорії дизайну.
Мідли, сіньйори і ліди, зверніть увагу на 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