Ще одне рев'ю, цього разу знову сайт Станіслава.

👉 Рев'ю тут: cap.link/c2cepx4x1ahas72

Через 30 хвилин останнє

І останнє рев'ю на сьогодні, сайт Олі

👉 Рев'ю тут: cap.link/ep383tqfvzrzhzx

Якщо вам сьогодні було цікаво то нещодавно я запустив Тепер Гарно – мінікурс про те, як оформляти роботи в портфоліо чисто з візуальної точки зору.

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

Буду радий, якщо подивитесь!

Вчора багато говорили про портфоліо, хто не бачив до речі, пролистайте попередні пости – там багато рев'ю портфоліо читачів 💅

🫅 Сьогоднішній день я оголошую днем UX деталей. Буду показувати цікаві, незвичні або просто класні рішення в продуктах з фокусом на деталі. Тримайте одразу першу:

dub.co запам'ятовує яким способом ти авторизовувався останній раз.

Чому всі цього не роблять? В мене часто ступор бо не пам'ятаю чи вводив пошту/пароль чи входив за допомогою Google.

equals.com додали АІ асистента і, увага, зробили його без зірочок ✨

Додали милу ледь помітну анімацію. Асистент привертає до себе увагу за рахунок сильного контрасту бо інтерфейс навколо доволі витриманий.

В Superlist (такий конкурент Notion чи Craft) можна додавати розділювальні лінії.

Самі лінії кожного разу обирають випадкову варіацію форми та кольору.

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

🎮 Який у вас рекорд? Спробувати тут

Ці детальки були з моєї колекції, але якщо вам сподобалось і хочете ще – існує прекрасний ресурс Design Spells. Його автор, до речі, дизайнер з Mobbin і в нього теж класне портфоліо.

🔗 designspells.com

Вчора трошки розвантажились цікавими UX детальками а сьогодні знову до серйозних тем. 🫅 Сьогоднішній день – день вайбкодингу.

Вайбкодинг це дуже загальний (і тупий) термін, тому хочу почати з розділення. В моєму розумінні існує 2 його підвиди:
• створення продуктів або зміна коду в продакшні. Тобто в якомусь вигляді цей код потім йде в реальний світ.
• АІ прототипування. Тобто використовується лише для демонстрації і не призначений для використання кінцевим користувачем.

Здається другий актуальніший для більшості дизайнерів, тому почнемо з нього. Ліза записала хороше відео про те, як робити великі АІ прототипи дизайнерам, де порівняла як з задачею впорався Lovable та Cursor.

👀 https://www.youtube.com/watch?v=BAIUX8q1GmI

‘Great idea! I went ahead and added filtering as well to streamline the UX.’

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

На перший погляд може здадись що це круто – "фільтри і дійсно тут не завадять". Та з мого досвіду це насправді пастка, в яку не варто попадатись. Чим більше таких пропозицій та ініціативи від АІ, тим більший масштаб проєкту та розмір коду, що ускладнює роботу з ним в майбутньому. Визначся з тим, що тобі дійсно зараз потрібно і не додавай нового по дорозі.

Здається є багато матеріалів та статей з гайдами та туторіалами про вайбкодинг але не так багато практичних кейсів.

Тому я записав процес додавання функціоналу Undo/Redo в свій MacOS застосунок від першого промпту до робочої (?) версії. Це не туторіал чи гайд, це просто експеримент з можливістю заглянути в мій процес.

В відео я:
• коротко розказую про проблематику
• показую свій сетап
• обговорюю підхід до задачі
• тестую

🔗 https://youtu.be/ZVeUvNxMxj0

якщо в тебе є молоток, то все навколо стає цвяхами

Слайд з нещодавнього виступу, де я розказував як дизайнерам будувати свої продукти.

Дуже хочеться, щоб ви не забували, що не для всього треба використовувати АІ. Я впевнений, що багато з нас швидше складуть лендинг на фреймері аніж в курсорі. Замість того, щоб боротись з API можна використати n8n чи Zapier і зв'язати 2 продукти в декілька кліків та ще й надійно.

Комбінуйте різні інструменти.

🫅 Для чілової п'ятниці – чіловий день ресурсів. Буду сьогодні ділитись різними посиланнями, тому готуйте ваші збережні повідомлення.

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

uncut.wtf • fontshare.com

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

File → Open File URL From Clipboard

Агенція DIA, яка зробила багато класних штук, релізнули для всіх свої внутрішні інструменти, за допомогою яких можна робити смачні візуальні композиції.

За посиланням доступні 5 інструментів, всі для роботи з текстом та легко конфігуруються.

🔗 tools.dia.tv

Ще одна фішка Figma, чи то скоріше фішка Open Type шрифтів: альтернативні символи.

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

RandomA11y. Сайт, який випадково генерує 2 кольори (для фону та тексту/інших елементів) з умовою що ці кольори проходять перевірку на достатній контраст.

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

👉 randoma11y.com

Ну а під кінець моєї каденції – конкурс 🏆. Завдання: відтворити цю картку у Figma настільки близько, наскільки це можливо. Картка повинна бути повністю векторною та не містити в собі растрових елементів.

Оберу 3 переможців:
• за найкраще відтворення: річний сертифікат у Projector Library
• за відтворення з найменшою кількістю шарів: менторська сесія зі мною на будь-яку тему
• за найкреативніший підхід: доступ до мінікурсу Тепер Гарно про оформлення портфоліо

Для участі надсилайте 2 скріншоти: скріншот вашої роботи і скріншот панелі шарів. Переможців оберу завтра, 11.01, в 21:00 🤞

upd: маємо 3 переможців:
1. Вікторія (@sergeleevna) найкраще, на мою думку, відтворила картку. Окрім самих кольорів добре вийшло зробити ефект гравіювання для логотипів.
2. Андрій (@andrewvwvwv) забирає приз за найменшу кількість шарів – 1.
3. Оля (@itsoliash) найкреативніше підійшла до задачі: згенерувала код градієнту за допомогою АІ замість відтворення "на око".

Зі всіма зв'яжемось. Це було круто, дякую за участь!