interfaces.prjctr | naida-datsenko week
10.7K subscribers
1.93K photos
301 videos
1.08K links
Найбільший український канал присвячений дизайну продуктів від спільноти Projector Institute.

Наші курси ➡️ https://shorturl.at/5Zpvf
@projector_online — менеджер на звʼязку з 10 по 19 💙
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
16🔥2👏1👌1💅1
Тут можуть бути ваші питання👇
Ну і звичайно книжка на тему. Гарно демонструє як структурувати хід думок при побудові рішень
👍98💅1
This media is not supported in your browser
VIEW IN TELEGRAM
15
This media is not supported in your browser
VIEW IN TELEGRAM
10
This media is not supported in your browser
VIEW IN TELEGRAM
10
This media is not supported in your browser
VIEW IN TELEGRAM
12
This media is not supported in your browser
VIEW IN TELEGRAM
9
This media is not supported in your browser
VIEW IN TELEGRAM
14
This media is not supported in your browser
VIEW IN TELEGRAM
14
This media is not supported in your browser
VIEW IN TELEGRAM
12
This media is not supported in your browser
VIEW IN TELEGRAM
15
This media is not supported in your browser
VIEW IN TELEGRAM
18
Привіт, сподіваюсь у вас все гаразд.
Согодні хотіа б відрекомендувати вам свою колегу Аліну . Вона наша Brand Designer з широким досвідом комінкаційного в дизайні. Вона готова поділитись цікавими думками щодо специфіки її роботи. Отже історія від Аліни, яка зробила зручну робочу систему із брендінгових матеріалів, що буде служити, а не обмежувати.

Частина 1 (айдентика)

Скинь, будь ласка, наше лого».
«А де актуальний шаблон?»
«Можеш перевірити презентацію, яку я зібрав сам?»
FINAL. FINAL 2. USE THIS NEW.
Thank God, it’s officially over.

Майже всю свою практику я маю один special interest: як зробити бренд-системи доступними не лише дизайнерам і водночас не перетворити систему на набір обмежень.
У компанії може бути брендбук на 86 сторінок. Він відповідає на питання: «Який відступ має бути навколо логотипа?», але не відповідає на інше:
«Мені завтра потрібна презентація для фінтех-клієнта. Що робити?»
PDF пояснює бренд. А людям потрібна система, яка допомагає ним користуватися.
Ще у 2018 році ми створили для студентів IT-хабів ЛУН у КНУ вебконструктори для комунікацій. Пізніше я розвивала той самий принцип у Figma для саббрендів ЛУН: команда могла змінювати формат, контент або бренд через компоненти та властивості.
Менше шансів випадково зламати дизайн. Більше простору думати про саму комунікацію. Дизайн більше не bottleneck.
Цей дизайнерський pain point поступово виріс у Digital Asset Management — системи, які допомогли впорядкувати бренд-матеріали, версії та права доступу.
Платформи на кшталт Frontify і Bynder поєднали асети з guidelines, шаблонами та процесами погодження. Figma Buzz розвиває ту саму логіку контрольованих адаптацій для маркетингу.
Усе це етапи одного руху: від документа, який пояснює правила, до інфраструктури, яка допомагає застосовувати їх у роботі.
Але у шаблонів є межа: вони працюють лише для сценаріїв, які дизайнер передбачив заздалегідь.
Новий канал, формат або задача і потрібен новий шаблон.
І тут у чат заходить AI.
17
Всім привіт. Сьогодні продовжимо і закінчимо історю Аліни. Перша частина вище.

Частина 2 (айдентика)

AI може зробити ресайз. Але чи може він застосувати бренд?
Частину роботи, яку раніше доводилося робити вручну, вже можна автоматизувати.
Наприклад, Canva Magic Switch може перетворити один дизайн на версії для різних каналів: змінити розміри, трансформувати формат, перекласти або частково адаптувати контент.
Це корисно. Але ресайзнути макет — ще не означає створити хорошу адаптацію.
У новому форматі може змінитися візуальна ієрархія. Частина тексту стане зайвою. Зображення доведеться замінити або по-іншому кадрувати. А повідомлення, яке працює в презентації, не обов’язково працюватиме в Instagram чи зовнішній рекламі.
Тому AI-результат я б розглядала не як фінальний дизайн, а як драфт, майже як pull request у розробників .
Система прибирає проблему blank canvas: пропонує структуру, підтягує актуальні асети, створює перші версії та перевіряє базові обмеження. Дизайнер переглядає результат, виправляє невдалі рішення й затверджує те, що може перейти у продакшн.

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

Частина цієї моделі вже може існувати у Figma-компонентах, шаблонах, variables, Storybook і дизайн-токенах. Стратегічні принципи, tone of voice та посилання на джерела правди можна додати у структурований DESIGN.md.

При цьому не обов’язково завантажувати в контекст усю бренд-систему для кожної задачі.
Окремий index-файл може працювати як карта: пояснювати, до яких джерел звертатися для створення лендингу, а до яких для іконок, фотографій, графіків чи діаграм. Різні існуючі ассети можуть зберігати контекст для різних візуальних потреб бренду.

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

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

Продовження надвечір
👍14
Частина 3 (айдентика)

Зараз я тестую цей підхід в Alty.
Наприклад, сейлз описує задачу:
«Мені потрібна презентація для фінтех-клієнта. Ось структура, дані й релевантні кейси».
Система знаходить актуальні факти, асети, компоненти й правила. Потім збирає брендовану основу та запускає базові перевірки.
Далі матеріал іде на доопрацювання дизайнеру. Це не фінальний дизайн, але вже й не франкенштейн-презентація, зібрана з десяти старих деків із різних ер бренду. І не Notion-файл чи Google Doc, з якого дизайнеру ще потрібно почати все з нуля.

Саме це я називаю Brandbook as a Service.
Це доступна інфраструктура, яка допомагає:
— знайти актуальні знання;
— створити чернетку в межах системи;
— перевірити результат;
— передати його дизайнеру на доопрацювання.

Наступний крок — підключити аналітику з різних каналів, щоб розуміти, що працює, а що ні, й отримувати бренд-сигнали.
Але ці дані не мають автоматично переписувати бренд. Люди вирішують, що саме означають сигнали, формують рішення і вже ці рішення система використовує в наступних задачах.
Оце і є dynamic brandook.

Старий брендбук відповідає:
«Як має виглядати наш бренд?»
Dynamic brandbook відповідає:
«Що мені робити прямо зараз? І як зробити це добре без дизайнера?»
5🔥4
Наздогоняємо сьогоднішній матеріал, матеріалом від Святослава — наш гуру дизайн систем і чудовий інтерфейсний дизайнер.

Частина 1 (дизайн системи)

Всім привіт. З вами Святослав і сьогодні ми будемо говорити про дизайн системи, ui kit-и і все що з цим повʼязано
Я не буду вам розповідати про те, чому ui kit і дизайн система це різні речі. Це ви можете почитати в гуглі)
Але я можу розказати з власного досвіду, яким чином найкраще побудувати дс чи ui kit і навіщо воно вам взагалі
Почнемо з бази. Навіщо ui kit/дс? Ну як мінімум, для того щоб дизайн був консистентним. Як максимум - щоб девелопери могли побачити стани компонентів в різних сценаріях, стилістику і так далі.
А тепер поговоримо про побудову
Почнемо з цікавого спостереження. Якщо ви зайдете в figma community і введете в пошуку ui kit, то ви помітите.. їх там мільйон. Але, 99% з них - відвертий булшіт. І тут виникає питання: «а чому?»
І на цьому етапі я вам розкажу про базові і не базові правила побудови дс чи ui kit-а

Ніколи не будуйте контекстно привʼязаний ui kit чи дс. Що мається на увазі? Уявімо, у вас є елемент в інтерфейсі. Нехай це буде список транзакцій в банку. Всі ж знають як він виглядає, так? Що у нас там? Заголовок, кнопка, елементи списку з іконкою, тексти, можливо статуси тощо. Це все - контекст. В дизайн системі нам не потрібен контекст. Нам потрібен контейнер, в який ми будемо вставляти будь що
Атомарний підхід. Модна крута фраза яку юзали якийсь час тому. Але. Особисто я проти використання повністю атомарного підходу в дс. Чому? От уявіть, що у вас є іконка в транзакціях. Зазвичай це круглий елемент, 40*40px чи 48*48 в якому є іконка чи зображення. І от за атомарним підходом цей айтем має бути компонентом. А тепер дивимось на ситуацію: таких айтемів з різним конентом сотня. Вони мають різний вигляд, різні кольори і все це треба тримати як компоненти десь. А у випадку додавання нового, ми йдемо в дс, додаємо цей варіант, паблішим цю бібліотеку і файл просто вмирає якщо він великий. А часто ще й баги фігми)))
Ну ладно, цей пост і так був досить великий, тому я вам в наступному далі розкажу (і покажу) як будувати дс чи ui kit
Ставте лайкі, підписуйтесь на канал (с)
👍20🤝32
Давайте продовжимо
Іііііі (барабанна дробь)
Частина 2 (дизайн системи)

Зараз будемо говорити про токени.

Якщо ви досі використовуєте стилі замість змінних на своїх проектах, то мабуть потрібно це міняти і ось декілька причин:

Використовуючи змінні набагато легше і швидше робити темінг інтерфейсу
Більш зрозумілі назви які можна привʼязати прямо до компонентів (наприклад для кнопки можна створити свій набір токенів і він буде стосуватись тільки її)
Ви маєте єдине джерело правди, де лежать ваші токени кольорів, шрифтів, скруглень і так далі. В разі чого йдете туди і розумієте де промахнулись
Скейл. Вам набагато легше буде заскейлити систему яка побудована на variables.
Ну і ще є причини, але це буде ваша самостійна робота


А тепер я розкажу про скейл. А в наступному пості розкажу і покажу 2 підходи до створення токенів і ui kit-a на них на реальних прикладах

Скейл: чому дс на токенах набагато більше гнучка ніж на стилях.

Уявімо ситуацію: ви бренд, у вас є певний набір айдентики. Це все закладено в дс в змінні. І тут, одного дня приходить owner і каже: «Ми робим ребрендинг. Будуть нові кольори, шрифти тощо, бот так хочуть інвестори»
І що ми робимо в такому випадку: ми йдемо в змінні, міняємо primitives і у нас всюди-всюди оновлюється бренд колір автоматично. Нам всього навсього треба вписати декілька hex кодів. Ба більше, якщо нам треба щоб десь було 2 бренд кольори — ми і таке робимо максимально легко

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

Що таке семантика, на прикладі: У нас є примітиви, від них йдуть «гілки» семантики, а саме кольори тексту, фонів, обводок тощо. І маючи змінні ми можемо обрати, де буде новий колір, а де старий


На цьому етапі ми (я) робимо маленьку паузу.
В наступному пості я вам покажу як я створюю змінні, які даю назви і також покажу 2 різних підходи до цього діла:new_moon_with_face:
Як завжди, ставте лайкі, натискайте на калакольчік і задавайте питання, якщо вони будуть
🤝198
Всім привіт.
Частина 3 (дизайн системи)

Сьогодні продовжимо і завершимо розмовляти про токени.

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

https://www.loom.com/share/b9be13b3f4c94437861abb01de4fdc47
16👍7👏1
Неділя не заважає нам продовжувати.
Отже сьогодні своїми думками поділиться: Микола Мельник - Head of Design у Alty, куратор на курсах “Mobile Apps Design” та “UI/UX Design Beginning

Пост взаємної підтримки і як не "поїхати кукухою" в найскладніші для айтішки часи.
Пишучи його я довго думав, до кого конкретно з цього каналу я б хотів ним достукатися. І у мене є тема, яка зрезонує більшості тут (в крайньому випадку маю таке припущення).

Так склалося, що я (як і багато хто з нас) міцно сиджу в дизайнерській та айтішній інформаційній бульбашці. І майже кожного дня натикаюся майже одне й те саме (але різними словами) - зараз найважчий час з усіх, які були в нашій сфері.
Когось скоротили на роботі. А хтось уже півроку без успіху шукає роботу. У когось панічка через хайп навколо оцього всього ЕйАю. Хтось хоче змінити роль/компанію, але боїться, що вибрав не той момент. А хтось взагалі тільки випустився з курсу і не знає, з чого почати свій перший проєкт чи роботу.
Чуючи це, у мене в голові виринає Кучма з фразою "Це ж було вже!". Як мінімум через те, що сам мільйон разів проходив через подібне раніше. Ось вам одна з таких кулл сторі.
Колись було застряг в поточній ролі — і в обовʼязках, і в зарплаті. А ще це збіглося з початком КОВІДу, коли ринок раптом став непередбачуваним. Я почав пробуватись на вакансії. Варіантів, які б влаштовували і по посаді, і по компенсації, було мало. Як додаток, отримав кілька відмов по вакансіях, які влаштовували.
Тоді вирішив зайти з іншого боку: замість того щоб шукати ідеальну вакансію, я почав рости поза роботою. Брав участь у хакатонах і челенджах, дизайнив просто для себе концепти, підтягував суміжні скіли (тоді, наприклад, Webflow був тим, що реально вирізняло серед інших), почав менторити новачків. І десь пів року я прожив у такому режимі. За цей час на вакансії взагалі не подавався, бо потреба в розвитку якимось чином закрилась сама. А трохи згодом отримав підвищення на поточній роботі, з вищою компенсацією.

Основна думка, яку хочеться підсвітити: "Виклики нікуди не зникають, а просто щоразу міняють форму". І, здається, наша єдина справжня робота — не перемогти виклик раз і назавжди, а щоразу трохи адаптувати підхід під те, що відбувається навколо.

Тому, питання від мене до вас: а через що проходите ви зараз? З якими викликами стикаєтеся?
Діліться в коментарях. Я читаю і відповідаю кожному. А якщо впізнали себе в чиємусь коменті — підтримайте теж. Бо найкраща порада — порада від того, хто через це вже пройшов.
👍83
Ось і добіг кінця мій тиждень. Я сподіваюся, що теми, які ми зачепили з нашою командою, були корисні для вас. Я все ще вважаю, що наша з вами професія живе і буде жити, бо не тільки користь, а й естетика, зроблена людиною для людини, завжди буде відчуватися як справжнє та невловимо живе. Любіть свою професію і до нових зустрічей. А щоб надихнутись ще одна книжка
18🔥2