interfaces.prjctr | naida-datsenko week

Замислювалися, чому скруглені кути виглядають більш приємно в інтерфейсі?🥸 Кирило, дизайнер застосунку Сільпо —поділився цим цікавим відео, де розібрано приховану магію хардверного дизайну✨ Від плавності кутів за кривими та тактильної фізики кнопок 👉 до того, як це працює в інтерфейсах, іграх, анімації https://youtu.be/wLIgrGAIRsE?si=GzWuxL8rLUjF-aGX

Хей! Маю підбірку корисностей від KyivUX🌼🦦 📚Бібліотека від спільноти Ми підібрали книги про психологію, дизайн, лідерство і дослідження. За ціною доставки нової пошти — ви можете взяти почитати 📀 Youtube сторінка із записами лекцій та мітапів 💬 Словник 📗Книга «Смачні кнопки» ☕️ Кава-бот Відмічайся і ходи на каву із дизайнерами спільнотиx

А desktop все ще значно більш статичний: курсор, hover, клік, скрол, клавіатура. Через ШІ-асистентів desktop уже стає більш інтерактивним, але, на нашу думку, все ще дуже сильно відстає від мобайлу. Чи почне desktop теж ставати більш reactive — таким середовищем, яке постійно реагує на наші дії? Чи, навпаки, він піде своїм шляхом і ми побачимо зовсім іншу модель взаємодії? Тож давайте покрутимо це питання разом. Куди рухатиметься desktop? І що стане його «haptic feedback»? 👀

без подписи

без подписи

Всім привіт! Дуже щаслива бути тут з вами цього тижня, сподіваюсь буде цікаво і корисно. Давайте знайомитись ближче 💖 Велику частку свого професійного досвіду я отримала працюючи в агенції, аж 8.5 років. Починала з джуна і плавно рухалась в сторону ліда та дизайн-директора. Мені насправді сильно пощастило на старті кар'єри, бо замість дрібних джунівських задач якось так вийшло, що мені майже одразу довірили великий та досить тривалий проєкт. Тому всі умови сприяли тому, щоб жорстко прокачуватись) І далі якось так і рухалась з роботою в рамках великих екосистем продуктів, і заглиблювалась у проєкти роками. Разом із цим росла і компанія. Спочатку я спробувала менторити нового дизайнера, і далі закрутилось. Потім я очолювала команду вже з декількох дизайнерів та була лідом, а згодом стала хедом дизайн напрямку. На піку я відповідала за 30 людей: дизайнерів і менеджерів, розвиток команди, найм, процеси та якість дизайну. Також невідʼємна частина мого життя - це менторство, я завжди рада допомогти чим можу, особливо в контексті того, куди рухатись і як розвиватись. Колись вела ютуб канал про дизайн, але закинула) А зараз я в своїй новій карʼєрній ері, заново переосмислюю себе та свої навички як дизайнера. Вже майже пів року я працюю дизайнеркою в BetterMe продукті, і можу сказати, що дуже радію цьому рішенню свічнутись, а також тому, в якому місці і в якій команді я зараз. Цього тижня я хочу ділитися з вами своїми думками, рефлексією і порадами на тему розвитку, скілів, прийняття змін, та пошуку роботи. Якщо у вас є питання, або теми на які цікаво було б почути думки від мене, пишіть в коментах 🙌🏼

Привіт! Ми Оленка 🦦 і Вадим🦝 і цей тиждень ми будемо наводити суєту в цьому каналі!✌️✌️ Ви вже знаєте, що ми працюємо над застосунком для доставки 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 Канал вже ваш 💙

Тепер хочеться трохи дізнатися про вас 🙌🏼

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

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 та про майбутнє інтерфейсів. Знаємо, що останні дні через повітряні тривоги видалися непростими, ми раді, що ви встигли побути з нами цього тижня. Дякуємо та будемо чекати вас знову на каналі! 💙

без подписи

Спільното, вітайте неймовірну кураторку — Діану Макар. Діана — Product Designer у BetterMe. Більше 9 років у дизайні та менеджменті. У минулому — Head of Design в Arounda Agency, де побудувала команду з 25 дизайнерів. Менторка на платформі The Ways, консультує дизайнерів і допомагає їм розібратися з професійними викликами. За свою кар’єру встигла побувати по різні боки дизайн-процесу: створювати продукти власноруч, будувати команди, наймати дизайнерів і менторити їх. Зараз знову зосереджена на крафті. Передаємо слово та канал 💙

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

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

без подписи

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

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