Наздогоняємо сьогоднішній матеріал, матеріалом від Святослава — наш гуру дизайн систем і чудовий інтерфейсний дизайнер.

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

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

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

Давайте продовжимо
Іііііі (барабанна дробь)
Частина 2 (дизайн системи)

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

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

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


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

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

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

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

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


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

Всім привіт.
Частина 3 (дизайн системи)

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

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

https://www.loom.com/share/b9be13b3f4c94437861abb01de4fdc47

Неділя не заважає нам продовжувати.
Отже сьогодні своїми думками поділиться: Микола Мельник - Head of Design у Alty, куратор на курсах “Mobile Apps Design” та “UI/UX Design Beginning”

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

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

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

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

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

Діляро, ми захоплюємося тобою!

Усім каналом додивлялися кожен твій кружечок до кінця й дуже дякуємо за постійний зв’язок з аудиторією.

Також неймовірно вдячні, що поділилася з нами своїм досвідом дослідження ринку, поглядом на сферу та книжковими рекомендаціями, а ще — за ексклюзивне залучення колег до каналу.

Ми тебе відпускаємо, але будемо чекати ще!
linkedin

До зустрічі! 🫶

Нам уже не терпиться розповісти про куратора, який очікує на вас цього тижня.

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

UI/UX Design Beginning — 5 місяців бази та підготовки до виходу у світ із 3 роботами в портфоліо.

Product Design — якщо ви UX/UI-дизайнер, уже працюєте в продукті або стикаєтеся з хаотичними рішеннями в команді. Курс допоможе вирости до рівня Middle/Senior Product Designer.

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

Ну що спільното, ви готові?

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

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

linkedin
KyivUX

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

linkedin

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

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 є буквально все для цього.

приклади 👇🏻

А desktop все ще значно більш статичний: курсор, hover, клік, скрол, клавіатура.

Через ШІ-асистентів desktop уже стає більш інтерактивним, але, на нашу думку, все ще дуже сильно відстає від мобайлу.
Чи почне desktop теж ставати більш reactive — таким середовищем, яке постійно реагує на наші дії?
Чи, навпаки, він піде своїм шляхом і ми побачимо зовсім іншу модель взаємодії?

Тож давайте покрутимо це питання разом.
Куди рухатиметься desktop? І що стане його «haptic feedback»? 👀