Всім привіт! Продовжуємо етер, сьогодні поговоримо про opinionated design і подивимось на різні продукти і апки яким це вдалось 🙂

Ця тема для мене складається з двох компонент:
1. Відсутність “наміру” в продуктах і проблема “дизайну всім гуртом”
2. Проблема візуальної складової, що всі продукти виглядають ~однаково за виключенням вибору дефолтного dark/light mode і акцентного кольору

Погнали!

Стосовно першого, дуже раджу подивитись інтервʼю з CEO teenage engineering, який своїми руками дизайнить майже всі девайси які вони випускають:
https://www.youtube.com/watch?v=qCliqmX_TQ4

Трошки мимо каси теми але не можу не пошерити нову рекламу про рекламу яку вчора зарелізилили Anthropic, це напевно найкраща кампанія яку я бачив останні роки:
https://x.com/claudeai/status/2019071113741906403

Інший poster-boy "свідомого" дизайну в софті це звісно Linear. В якийсь момент засновникам набридло користуватись UI-франкенштеном Jira, і вони вирішили створити свій продукт з нормальним UI. Але з часом вони почали все більше робити продукт так як саме їм здається найкраще підходити до таск-менеджменту в розробці (наприклад той ж Triage'инг популяризовали саме вони).

Що найцікавіше, ідейно Linear почався зі звичайного розширення для Chrome яке вирізало візуальний шум з Jira. Це еталоний приклад як маленькі утіліти для вирішення ваших особистих проблем перерастають в щось навколо чого можна побудувати цілу компанію.

Ось архівна стаття 2019 року де Каррі поділився як почався Linear:
https://karrisaarinen.com/posts/starting-linear-app/

Ще один цікавий приклад дизайну "з думкою" це апки від !Boring. Вони беруть найбазовіші додатки як калькулятор, камера, погода і переосмислюють, роблять їх not boring.

https://notbor.ing/works
https://apps.apple.com/us/app-bundle/not-boring-apps/id1694712310

Приклад створення "свідомої" соціальної мережи: Retro. Виходили з того що соцмережі перестали бути простором щоб звʼязатись з друзями а стали таким "сучасним телебаченням", і вирішили створити свою соцмережу, теплу і лампову.

https://apps.apple.com/us/app/retro-photos-with-friends/id6443709020
https://retro.app/ethos

Друга проблема відсутності "наміру" в дизайні це візуальна банальність. Більшість продуктів зараз виглядають і працюють абсолютно однаково, через поширення дизайн-систем (як відкритих типу shadcn так і внутрішніх), стандартних патернів UI дизайну і відсутності візуальної складової бренду в продукті.

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

Колись я написав статтю стосовно того як дизайн-системи вбивають дизайнерів яка і досі актуальна, раджу прочитати:
https://borys.is/writing/uidesign

Ось також випуск подкасту Радіо Кнопка як раз на цю саму тему:
https://www.youtube.com/watch?v=iFE63TastgI

Взагалі ребята роблять дуже крутий подкаст, раджу підписатись на їх канал в телеграмі 🔥
@radioknopka

Гарний приклад відмови від взагалі будь-якої стандартизації це додатки від amo, які роблять абсолютно дикі апки Bump, Sugar (і раніше Zenly)
https://amo.co/

Інший приклад це Places, які створюють закрите комʼюніті з курованими закладами в різних містах, і яким дуже добре вдалось передати цю "преміальність" в продукті:
https://apps.apple.com/us/app/places-curated-discovery/id6446208302

Ну і останній на сьогодні щоб розбавити трохи весь цей мобайл, elevenlabs вдалось взяти той самий білий #FFF фон, чорний #000 акцент і зробити з цього не соромʼязливий вайрфрейм, а дійсно цікавий UI. Раджу поклацати!
https://elevenlabs.io/

Пʼятий і останній день — день інформації

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

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

Лекцію можна подивитись безкошотовно в бібліотеці Прожектора:
https://prjctr.com/library/video/metod-kazana-rozvytok-dyzainera-1

А книга про цей самий метод вже доступна для передзамовлення! Біжіть куплять:
https://www.metodkazana.com/

Цікавий погляд як можна сприймати споживання інфи я прочитав у Gurwinder'a (просто тіп з інтернета). Він ділить споживання інформації на рибалку i полювання: ми рибалимо коли наприклад гортаємо соціальні мережі, і полюємо коли шукаємо відповідь на конкретне питання. Обидва важливі, але рибалити треба обережно, в чистих водах — в тіктоці корисної інфи не знайдеш.

Поки що найбільш рибне місце для мене це твітер, бо там є можливість конектитись і дивитись що роблять люди з найбільш провідних tech компаній.

Моя порада це завести окремий аккаунт (якщо в вас вже є персональний де ви фоловите своїх друзів/політичних діячів і ви не хочете його перебудовувати на дизайн), знайти когось кого ви вважаєте “шарящим” і підписатись тупо на всіх кого ця людина фоловить. Так в вас буде можливість подивитись інтернет очами іншої людини. А потім починаєте потихеньку просіювати свою стрічку: відписуватись від того що не цікаво, додавати що цікаво.

Дизайн-твітер достатньо маленький і всі фоловлять ± одних і тих ж людей, то думаю ви швидко їх знайдете: дизайнери з Vercel, Linear, Raycast, OpenAI, Figma, незалежні фаундери, тощо.

Ось мій твітер, не можу сказати що я там сильно активний, але фоловлю більшість тих вищезгаданих дизайнерів, то ви можете використати мої підписки як стартову точку:
https://x.com/borysbaklanov/following

Удачі з рибалкою! 😄🎣

Ну і поділюсь трохи корисними копалинами ресурсами. Оскільки тема портфоліо завжди дуже хвилююча, шерю з вами свою особисту колекцію тих портфоліо що мені сподобались:
https://raindrop.io/borysbaklanov/portfolios-3056306

Курси які час від часу постійно вспливають з анімацій і крафту від тих самих твітерських дизайнерів:
https://animations.dev/ — раджу особисто
https://devouringdetails.com/ — не проходив сам, але чув гарні відгуки
https://www.interfacecraft.dev/ — поки не релізнувся, і скоріш не як лінійний курс, а збірка ресурсів і гайдів з "крафту"

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

https://shaders.paper.design/

Це також ідеальна можливість потестити Claude Code і створити свій перший репозіторій на гітхабі. Просто попросіть Клода вам допомогти :)

(але в них на сайті є і веб інтерфейс куди можна просто завантажувати картинки)

Доречі якщо вам колись треба було конвертнути відео в гіфку без компрессії, ось моя улюблена тулза (має ідеальний UX доречі: трім, швидкість, можна обирати розмір і FPS, все що необхідно)
https://gif.ski/

Ну і по традиції, конкурс вихідного дня:

→ Зробити концепт першого екрану сайту прожектора з використанням шейдерів від Paper які я постив раніше. Розмір "редизайну" визначаєте самі — можна як повністю переосмислити весь екран, так і точково застосувати обраний шейдер так, щоб він дав максимальний вау-ефект.

Можете використовувати шейдери як поверх картинок які завантажуєте в них на сайті і потім додавати їх в дизайн в Фігмі, або прям наживо в коді (Клод в поміч, якщо будуть питання — пишіть).

Сайт Прожектора
prjctr.com

Шейдери
shaders.paper.design

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

🎁Найкращі 3 концепти отримають нову книгу Саші Трегуба що виходить в кінці березня з підписом самого автора ✍️💫

🕰️ Дедлайн: неділя 8 лютого o 19:30

Успіхів!