interfaces.prjctr | oleksiuk week
11.4K subscribers
1.63K photos
263 videos
910 links
Найбільший український канал присвячений дизайну продуктів від спільноти Projector Institute.

Наші курси ➡️ bit.ly/3Ok2oRD
Для питань та пропозицій — [email protected]
Download Telegram
Порадимо трохи курсів.

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

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

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

10/10.



А також:

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

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

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

Побачимось 💙
6
Channel name was changed to «interfaces.prjctr | matviiv week»
Шановні, цей тиждень канал буде вести Богдан Матвіїв.

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

Вже як 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 років тому, зараз не займаються дизайном. Інтересно чому і чим? 🤔
42🔥11🥰1
Всім привіт. Ділюся першим відео про роботу з Claude Code.

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

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

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

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

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

https://youtu.be/SFKgkTaOP6E
🔥8015
Друга частина відео готова, тож ділюся з вами. + кілька думак на день)

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

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

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

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

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

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

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

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

https://www.youtube.com/watch?v=S8m94PXq_KI
🔥397👍1
Привіт. Розшарюю 3 частину, нашої з вами тижневої подорожі.

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

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

https://youtu.be/ulLZEtB7E2U
🔥277👍1
Гайс, дайте, будь ласка, короткий фідбек 🙌
Якщо ви переглянули відео або пробували повторити -
чи були пояснення та приклади зрозумілими?
Anonymous Poll
22%
Так, усе зрозуміло
9%
Частково зрозуміло
1%
Було складно, майже не зрозумів
56%
Ще не переглядав, але планую
12%
Не переглядав, не планую
Всім привіт. Відправляю 4 частину.
Дякую всім, хто взяв участь в опитуванні.

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

https://www.youtube.com/watch?v=sn19p_tOvoA
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 дає змогу цього уникнути, зробивши прототип максимально наближеним до реальності, який не створюватиме тих самих перешкод, а навпаки допоможе цінності проявитися.

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

Гарних прототипів і вихідних.
🔥274👍1
Якщо ви думали, що на сьогодні все, то біжу вас потішити 🏃.

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

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

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

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

https://youtu.be/bTW3hq7gvqk
🔥274
Всім привіт. Ділюся 6 частиною.
Це буде остання частина в межах мого тижня.

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

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

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

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

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

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

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


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

https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R
31
Channel name was changed to «interfaces.prjctr»
Бодан, дякуємо!

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

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

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

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

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

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

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

Гарного тижня 🌞
5
Channel name was changed to «interfaces.prjctr | oleksiuk week»
Хей спільното!

Вітайте нового оунера каналу — Женю Олексюка.

Що сказати, він крутий.

- курує курс UX Advanced;
- запустив спільноту Проджа у Хмельницькому (ви доречі, можете зробити це у своєму місті);
- senior UX Designer в Epam.

А ще його лекція по Jobs To Be Done одна з найбільш популярних за підпискою.

Ну і загалом, Женя класний і його обожнюють студенти і колеги.

Женя, тобі слово
🔥428
Всім привіт!
Давайте знайомитись - мене звати Євген Олексюк. В дизайні я з 2013 року і за цей час встиг попрацювати в аутсорзі, аутстафі, продукті і фрілансі. Мав справи з різними доменами та різними командами. Маю технічну та фінансову освіти і 7 років банківського стажу (тому бізнесові аспекти мені даються досить не складно а від слова ЕБІТДА я не ховаюсь під плінтус). Ще дуже люблю пояснювати на дивних прикладах, дизайнерські байки, душне задротство, скепсиз та провокації😉
Ось мої контакти, якщо раптом захочете поспілкуватись додатково:
https://www.linkedin.com/in/olexworld/
https://medium.com/@olex_world
https://ux.pub/olex_world
https://www.instagram.com/olex_world/
На цей тиждень в мене заплановано для вас кілька цікавих тем, які, як мені здається, цікаво проговорити. Принаймні, мені було б цікаво і корисно почути про це в певний час своєї карєри. Трошки нового, трошки старого, трошки провокацій, але однозначно весело і цікаво)
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, бо це була "ідея про дизайн, а не про код". Тепер дизайн — це їхня головна конкурентна перевага, яка монетизує.

А розкажіть ви - чи бували в вас ситуації, коли вас запрошували на роботу на продукт, де раніше не було дизайнера? Які були труднощі?
27👍5🔥4
Друзі, бачимо технічний баг, тестуємо можливість залишати коментарі👀
3👌2👏1