interfaces.prjctr

Good evening, everybody! Як ваш тиждень? У нас несеться запуск нової версії LOKO, вже залили на 1% гостей і далі продовжуємо розкатку 💕 🏄‍♂️ 🥑 Давайте поговоримо про те, як інтерфейси перестають бути просто красивими кнопками й картками в Figma. Наприкінці 90-х і на початку 2000-х інтерфейси були більш статичні й повільні: натиснув — щось відбувається дооовго-довго. Люди чекали по 10 хвилин, поки завантажиться сторінка або відео на YouTube. Сьогодні UI швидкий і динамічний 💫. Ми живемо в часи, коли люди звикли до постійного руху. Коли ви сидите на мітингу — ви можете паралельно дивитись Reels в Instagram, переглядати, що замовити в LOKO, Bolt Food, Glovo, відповідати паралельно на робочі питання і дизайнити у Figma. Користувача стає все складніше зачепити — і ще складніше втримати. Йде постійна боротьба за залучення через маркетинг, конверсію в покупку та повернення. Як дизайнери, ми працюємо з увагою, відчуттями й тригерами. Ми вирішуємо, що людина побачить першим, коли вона це побачить, якою буде наступна дія і що до неї підштовхне. Motion, haptics, shimmer, transitions, scroll behavior, micro-interactions і все таке — це вже не просто «давайте додамо анімацію, щоб було прикольно». Це інструменти, за допомогою яких ми можемо керувати увагою і робити досвід максимально плавним та інтуїтивним. У mobile є буквально все для цього. приклади 👇🏻

Привіт! Ми Оленка 🦦 і Вадим🦝 і цей тиждень ми будемо наводити суєту в цьому каналі!✌️✌️ Ви вже знаєте, що ми працюємо над застосунком для доставки LOKO від Сільпо. Та перш ніж почати задвігати за дизайн – хочемо вас трошки розслабити та повайбувати у цей понеділок. У нас з Вадимом багато спільного, ми захоплюємось чайними церемоніями, маємо по рудому коту і собаці, а ще любимо електронну музику. Радимо подизайнити під улюблений альбом Вадима🦝: 🎧 Moderat II на Youtube Music 🎧 Moderat II на Spotify 🎧 Moderat II на Apple Music Улюблений гурт Оленки Depeche Mode (всі їх альбоми найкращі🦦) 🎧 Depeche Mode на Youtube Music 🎧 Depeche Mode на Spotify 🎧 Depeche Mode на Apple Music

Ну що спільното, ви готові? Цього тижня наші куратор(и) Оленка та Вадим — продуктові дизайнери у застосунку LOKO від Сільпо. А тепер по черзі.

Оленка Найда вже 12 років у дизайні та за цей час пройшла шлях від агенцій і стартапів до сталих продуктів. Цього року після ролі дизайн-менеджерки вона знову повернулася до крафту. Оленка також є лідеркою спільноти KyivUX. Разом із командою сформувала дизайн-візію застосунку «Сільпо». А ще обожнює партисипативність і ко-дизайн.

linkedin KyivUX

Вадим Даценко – 5 років у дизайні, працював зі стартапами на ринках США та Дубаю, а цього року приєднався до команди LOKO, щоб розвивати українські продукти. Вадим любить складні дизайн-виклики, які змушують виходити за межі можливого та вибудовує концептуальне бачення.

linkedin Канал вже ваш 💙

Нам уже не терпиться розповісти про куратора, який очікує на вас цього тижня. Але спочатку нагадаємо про навчання, бо цього місяця стартують декілька наших найзатребуваніших курсів: UI/UX Design Beginning — 5 місяців бази та підготовки до виходу у світ із 3 роботами в портфоліо. Product Design — якщо ви UX/UI-дизайнер, уже працюєте в продукті або стикаєтеся з хаотичними рішеннями в команді. Курс допоможе вирости до рівня Middle/Senior Product Designer. На початку вересня розпочнеться Growth Design — курс для тих, хто має кілька років досвіду в продуктовому дизайні. На вас чекає багато нового, тому рекомендуємо перейти на сторінку курсу, щоб побачити всі деталі.

Діляро, ми захоплюємося тобою! Усім каналом додивлялися кожен твій кружечок до кінця й дуже дякуємо за постійний зв’язок з аудиторією. Також неймовірно вдячні, що поділилася з нами своїм досвідом дослідження ринку, поглядом на сферу та книжковими рекомендаціями, а ще — за ексклюзивне залучення колег до каналу. Ми тебе відпускаємо, але будемо чекати ще! linkedin До зустрічі! 🫶

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

Неділя не заважає нам продовжувати. Отже сьогодні своїми думками поділиться: Микола Мельник - Head of Design у Alty, куратор на курсах “Mobile Apps Design” та “UI/UX Design Beginning” Пост взаємної підтримки і як не "поїхати кукухою" в найскладніші для айтішки часи. Пишучи його я довго думав, до кого конкретно з цього каналу я б хотів ним достукатися. І у мене є тема, яка зрезонує більшості тут (в крайньому випадку маю таке припущення). Так склалося, що я (як і багато хто з нас) міцно сиджу в дизайнерській та айтішній інформаційній бульбашці. І майже кожного дня натикаюся майже одне й те саме (але різними словами) - зараз найважчий час з усіх, які були в нашій сфері. Когось скоротили на роботі. А хтось уже півроку без успіху шукає роботу. У когось панічка через хайп навколо оцього всього ЕйАю. Хтось хоче змінити роль/компанію, але боїться, що вибрав не той момент. А хтось взагалі тільки випустився з курсу і не знає, з чого почати свій перший проєкт чи роботу. Чуючи це, у мене в голові виринає Кучма з фразою "Це ж було вже!". Як мінімум через те, що сам мільйон разів проходив через подібне раніше. Ось вам одна з таких кулл сторі. Колись було застряг в поточній ролі — і в обовʼязках, і в зарплаті. А ще це збіглося з початком КОВІДу, коли ринок раптом став непередбачуваним. Я почав пробуватись на вакансії. Варіантів, які б влаштовували і по посаді, і по компенсації, було мало. Як додаток, отримав кілька відмов по вакансіях, які влаштовували. Тоді вирішив зайти з іншого боку: замість того щоб шукати ідеальну вакансію, я почав рости поза роботою. Брав участь у хакатонах і челенджах, дизайнив просто для себе концепти, підтягував суміжні скіли (тоді, наприклад, Webflow був тим, що реально вирізняло серед інших), почав менторити новачків. І десь пів року я прожив у такому режимі. За цей час на вакансії взагалі не подавався, бо потреба в розвитку якимось чином закрилась сама. А трохи згодом отримав підвищення на поточній роботі, з вищою компенсацією. Основна думка, яку хочеться підсвітити: "Виклики нікуди не зникають, а просто щоразу міняють форму". І, здається, наша єдина справжня робота — не перемогти виклик раз і назавжди, а щоразу трохи адаптувати підхід під те, що відбувається навколо. Тому, питання від мене до вас: а через що проходите ви зараз? З якими викликами стикаєтеся? Діліться в коментарях. Я читаю і відповідаю кожному. А якщо впізнали себе в чиємусь коменті — підтримайте теж. Бо найкраща порада — порада від того, хто через це вже пройшов.

Всім привіт. Частина 3 (дизайн системи) Сьогодні продовжимо і завершимо розмовляти про токени. Як і обіцяв, я записав відео, де поділився тим, які підходи до створення токенів як використовую. Бажаю гарного перегляду і чекаю на запитання після:) https://www.loom.com/share/b9be13b3f4c94437861abb01de4fdc47

Давайте продовжимо Іііііі (барабанна дробь) Частина 2 (дизайн системи) Зараз будемо говорити про токени. Якщо ви досі використовуєте стилі замість змінних на своїх проектах, то мабуть потрібно це міняти і ось декілька причин: Використовуючи змінні набагато легше і швидше робити темінг інтерфейсу Більш зрозумілі назви які можна привʼязати прямо до компонентів (наприклад для кнопки можна створити свій набір токенів і він буде стосуватись тільки її) Ви маєте єдине джерело правди, де лежать ваші токени кольорів, шрифтів, скруглень і так далі. В разі чого йдете туди і розумієте де промахнулись Скейл. Вам набагато легше буде заскейлити систему яка побудована на variables. Ну і ще є причини, але це буде ваша самостійна робота А тепер я розкажу про скейл. А в наступному пості розкажу і покажу 2 підходи до створення токенів і ui kit-a на них на реальних прикладах Скейл: чому дс на токенах набагато більше гнучка ніж на стилях. Уявімо ситуацію: ви бренд, у вас є певний набір айдентики. Це все закладено в дс в змінні. І тут, одного дня приходить owner і каже: «Ми робим ребрендинг. Будуть нові кольори, шрифти тощо, бот так хочуть інвестори» І що ми робимо в такому випадку: ми йдемо в змінні, міняємо primitives і у нас всюди-всюди оновлюється бренд колір автоматично. Нам всього навсього треба вписати декілька hex кодів. Ба більше, якщо нам треба щоб десь було 2 бренд кольори — ми і таке робимо максимально легко А ще фішка, яка не доступна стилям. Якщо ми хочемо щоб десь був новий бренд колір, а десь старий, ми це легко зможемо зробити, так як змінна побудована семантично. Що таке семантика, на прикладі: У нас є примітиви, від них йдуть «гілки» семантики, а саме кольори тексту, фонів, обводок тощо. І маючи змінні ми можемо обрати, де буде новий колір, а де старий На цьому етапі ми (я) робимо маленьку паузу. В наступному пості я вам покажу як я створюю змінні, які даю назви і також покажу 2 різних підходи до цього діла:new_moon_with_face: Як завжди, ставте лайкі, натискайте на калакольчік і задавайте питання, якщо вони будуть

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

Частина 3 Зараз я тестую цей підхід в Alty. Наприклад, сейлз описує задачу: «Мені потрібна презентація для фінтех-клієнта. Ось структура, дані й релевантні кейси». Система знаходить актуальні факти, асети, компоненти й правила. Потім збирає брендовану основу та запускає базові перевірки. Далі матеріал іде на доопрацювання дизайнеру. Це не фінальний дизайн, але вже й не франкенштейн-презентація, зібрана з десяти старих деків із різних ер бренду. І не Notion-файл чи Google Doc, з якого дизайнеру ще потрібно почати все з нуля. Саме це я називаю Brandbook as a Service. Це доступна інфраструктура, яка допомагає: — знайти актуальні знання; — створити чернетку в межах системи; — перевірити результат; — передати його дизайнеру на доопрацювання. Наступний крок — підключити аналітику з різних каналів, щоб розуміти, що працює, а що ні, й отримувати бренд-сигнали. Але ці дані не мають автоматично переписувати бренд. Люди вирішують, що саме означають сигнали, формують рішення і вже ці рішення система використовує в наступних задачах. Оце і є dynamic brandook. Старий брендбук відповідає: «Як має виглядати наш бренд?» Dynamic brandbook відповідає: «Що мені робити прямо зараз? І як зробити це добре без дизайнера?»

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

Привіт, сподіваюсь у вас все гаразд. Согодні хотіа б відрекомендувати вам свою колегу Аліну . Вона наша 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.