Всім привіт.
Сьогодні буде день юайки.
Весь UI стоїть на 3 китах:
1️⃣ Типографіка
2️⃣ Колористика
3️⃣ Композиція
Пропоную розібратись з ними по черзі.
Типографіка це мистецтво (мені більше подобається слово наука) працювати з текстом. Для інтерфейсів це надважливо адже 80% інтерфейса це саме текст. Колись зі студентами робили експеримент - виключали відображення візуального контенту в браузері і намагались зрозуміти про що взагалі продукт. Очевидно, без зображень користувач може зрозуміти пропозицію на сайті, взаємодіяти з CTA та пройти по флоу.
Якщо ж робити навпаки (лишати суто візуальщину) то взаємодія неможлива, розуміння немає і взагалі It was at this moment that he knew... he fucked up.
Якщо ми говоримо про типографіку, необхідно взагалі розуміти що існує 2 типу шрифтів в діджиталі:
- Трансцендентний шрифт - це “невидимий” шрифт. Його головна задача це просто передати інформацію і не відволікати увагу юзера на себе. Найпоширенішими трансцендентними шрифтами є Times New Roman та Helvetica. Вони вокристовуються в блочному тексті для передачі інформації.
- Акцидентний шрифт - це шрифт який буде привертати увагу. Він використовується для хедінгів та акцентів. Тут прикладів не наведу, так як акцидентні шрифти “вимахуються” один перед другим. Єдина вимога до них - читабельність.

Загалом, якщо говорити про типографіку, там багато цікавого і весь тиждень в нас піде суто щоб розібратись з літерами. Дуже раджу вам поцікавитись історією типографіки, що таке наборний текст, як раніше друкували - це дууууже цікаво.
З тої бази яку необхідно знати дизайнеру інтерфейсів (і на чому періодично підловлюють на технічних інтервью) - варто розібратись що таке інтерліньяж, базова лінія, виносні елементи, яка довжина строки і тд.
Але ще я хочу розповісти про різницю між кернінгом та трекінгом, адже на цьому іноді підловлюють дизайнерів на інтервью.
Хоча обидва терміни стосуються регулювання пробілів між літерами, вони мають зовсім різні цілі та сфери застосування.

Кернінг (Kerning) це налаштування відстані між конкретною парою літер.
Деякі символи через свою форму візуально "не дружать" один з одним. Наприклад, якщо поставити поруч великі A та V, між ними утвориться величезна діра, хоча за правилами шрифту вони стоять на правильній відстані. Кернінг якраз і підсуває їх ближче, щоб слово виглядало цілісним.

Трекінг (Tracking) це зміна відстані між усіма символами у вибраному діапазоні (слові, рядку або цілому абзаці) одночасно.

І в якості бонуса, ось вам посилання на не погану книжку по типографіці:
https://www.arthuss.com.ua/shop/typohrafiya

Історія про дивні замовлення)))))
А яке найтрешовіше замовлення ВИ робили?

Колористика - це другий кит будь-якої юайки. За допомогою кольору ви можете працювати з акцентами, виділяти необхідне та легше провести користувача продуктом до цілі.

Спочатку я хотів розповісти про колірне коло Йоханеса Іттена, про адитивну (RGB) та субтрактивну (CMYK) моделі і оце все, але то і так всі знають. Тому давайте краще я розповім краще кілька цікавих байок-факапів)))))

Байка № 1
Так от одного разу Pepsi запустила онлайн-кампанію, де важливі елементи інтерфейсу (коди для знижок) були виконані у поєднанні їх бренд-кольорів, які майже зливалися для людей з дейтераномією (найпоширеніший вид дальтонізму - нездатність розрізняти червоний та зелений).
Оскільки синій, червоний і білий — це база брендінгу Pepsi, вони наклали червоний текст на темно-синій фон у мобільному застосунку. Для користувачів з дейтераномією текст просто тупо зникав. Бренд отримав тисячі скарг на те, що «кнопки порожні», хоча з точки зору звичайної людини все було норм.

Байка № 2
Один західний фінансовий додаток (не будемо називати бренд) намагався масштабуватись і спробував вийти на ринок Китаю. Вони залишили свій інтерфейс у "чистому" західному стилі: багато білого простору, мінімалізм та білі картки на світлому фоні.
Проблема була в тому що в Азії білий колір асоціюється зі смертю та жалобою. Користувачі сприймали інтерфейс як "порожній", "неживий" та навіть "зловісний". У Китаї фінансові застосунки зазвичай перенасичені червоним (колір удачі та грошей) та золотим. Неправильний вибір колірної схеми призвів до того, що рівень довіри до банку був майже нульовим, і їм довелося повністю перемальовувати UI для цього регіону.

Висновок простий - варто навчитись працювати з кольором і не забувати про аксесабіліті та локалізацію. Ну бо це не складно, але може повпливати на рівень конверсії. Так-так, навіть колір впливає на гроші)

А ось вам useful links по темі:
https://medium.com/@xd_community_ua/color-in-ux-design-2fb407eaf376
Дуже гарна стаття на Медіумі

https://www.arthuss.com.ua/shop/itten-mystetstvo-koloru
Книга пана Іттена - “батька” колірного кола

А як щодо факапів, повʼязаних з кольором? Якщо вже задали тему треша - накидайте ваших треш-кейсів)

Доречі, от вам приклад, як можна підналажати з UI. Я певний час не читав повідомлення і потім дотягнув до 1 мілліона повідомлень в Телеграм. І ось як це виглядає на телефоні)

До порівняння в папці кількість повідомлень видно нормально, а на самій іконці застосунку - НІТ😐

Композиція - це останній, третій кит нашої UI.
Загалом під композицією ми маємо на увазі організацію інтерфейса на екрані. Знову ж таки, не будемо вкотре говорити про базу в композиції, правило третин, золотий перетин і тд. Все це можна освіжити за допомогою лекції https://prjctr.com/library/video/basic-composition від Євгена Демченка.

Пропоную краще поспілкуватись як на практиці крутіше робити.
Якщо ми говоримо про композицію, варто згадати що люди сприймають контент на тих самих сайтах певними візуальними плямами. І є певні врівноважені композиції, які виглядають впорядковано і не напрягають. Наприклад https://dulcedo.com/ - отримав сайт дня на Awwwards. Імхо виглядає він прям не погано, адже центральна композиція це завжди гарний вибір і плями є не хаотичними. АЛЕ такі сайти запамятовуються гірше, ніж меншвпрядковані композиційно. Доприкладу гляньте цей сайт https://corentinbernadou.com/ - він також є сайтом дня на Евордз, але композиція в ньому хилиться вліво. Це виглядає досить суперечливо, але однозначно круто. Звісно зараз ви скажете що Dulcedo топ і що порівнювати їх важко. І я згоден, адже в кожному з них є свої переваги. Наприклад в Dulcedo класна типографіка і приємна анімація, а в Corentin Bernadou класний помаранчевий і дуже крута фіча з грідами.

Але мій тейк полягає в тому, що нестандартна і іноді неправильна композиція може запамятатись користувачу і для іміджевих “стільна-модна-маладьожна” продуктів буде дуже доцільна. Але зовсім недоцільна у випадку того самого e-commerce, де впорядкованість і зрозумілість є надважливими.

Ви як взагалі вважаєте - чи обовязково дотримуватись правил чи варто все ж на них підзабивати? Може робили щось таке дивне/креативне?

Вчора я певне вас трошки замучив постами, тому сьогодні буде менше - обіцяю😉

Четвер буде день-провокація. Будемо говорити (дуже розраховую на діалог) про ШІ.

Нещодавно ми спілкувались з Сашком Трегубом і він сказав, що я трошки “старовір” в питаннях Artificial Intelligence (в народі просто ШІ-шка). Хоча тема дуже хайпова і на каналі було дуже багато матеріалів по цьому, я досі скептичний. І тут я хочу спитати в вас - як ВИ використовуєте ШІ?

Особисто я для себе прийшов до висновку що іграшка дуже класна і зручна, але не завжди допомогає.
Наприклад мені подобається як можна автоматизувати роботу ШІ-шкою. Наприклад Dovetail та Maze AI класно аналізують інтерв'юшки та виділяють пейнпойнти та патерни. Ще дуже подобається робити SWOT ШІ-асистентом. Ну бо ШІ-шка класно працює з осінтом і те, що раніше вимагало тижнів роботи, зараз займає буквально хвилини.
Звісно ж, дякую ШІ за те що я рідко бачу Lorem Ipsum dolor sit amet в макетах. От тут динозаври дизайну напевне посміхнулись, згадали ті старі роки фотошопів і “риб” і подумати “танунафік, хочу це забути як страшний сон”😂
Ще ШІ не погано працює якщо треба протестувати макет по WCAG-у.

Доречі ось вам не погана стаття про використання ШІ в ресерчі: https://www.userinterviews.com/blog/ai-ux-research-tools
Загалом, людський мозок може робити кілька видів активностей: процесінгову (тут маю на увазі саме обробку масивів інформації - дякую ШІ - тут він дуже допомагає) і генеративну (креативність, ідеація, придумування чогось нового - і тут ШІ поки нічим корисним бути не може).

А з іншої сторони я вже бачив не мало джунів, які “упоролись” по AI і намагаються ним робити все на світі і через це деградують не розвивають себе як спеціаліста.
Навіть Ян Лекун - колишній очільник напрямку ШІ в Meta нещодавно казав що найближчим часом ШІ не зможе замінити людину. Загалом в історії ШІ вже були періоди «зим Штучного Інтелекту». Тому я особисто видихнув і прийняв що ШІ - то не є сільвер буллет, а лише інструмент.

Івенчюлі, мій тейк такий: ШІ як інструмент класний, але дизайнера він не замінить. А як ВИ використовуєте ШІ в рообті - розкажіть де використати АІ доцільно і де вона прям круто допомагає?

Доречі, якщо ви не бачили - Якоб Батькович Нільсен буквально кілька днів тому в останньому раундапі розповідав про те, як Метт Шарп вдало заюзав ШІ для ГОМСа. Прям раджу почитати - досить цікаво. Та і взагалі варто слідкувати за нашим Якобом нашим “UX-тигром”)
https://www.uxtigers.com/post/ux-roundup-20260302

Дякую коментам під минулим постом - Стас, ти прям надихнув на рефлексію щодо вайбкодингу.
Взагалі вайбкодінг - крута штука і на минулому тижні було дуже прям гуд. Дякую тобі Богдан, було цікаво дивитись твої відоси по Claude.

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

Мені чомусь вайбкодінг викликає флешбеки з 2000-х, коли була роль умовного “веб-майстра” який був одночасно і дизайнером і фронтом і беком і ким тільки не був.
Мені виглядає так, що через умовні 2-3 роки, коли ШІ буде писати чистий код (або принаймні не сильно кривий) код, дуже багато спеціальностей замерджаться. Якщо зараз нормальний дизайнер вміє крім фігми ще і HTML з CSS, а іноді навіть JS-ку ванільну може написати, то через кілька років потенційно фронти рівня джун-мідл стануть аттавізмами. Умовно дизайнер з ШІ зможе замінити багатьох. Можливо лишиться роль якогось розробника-перевіряльника, який проводитиме код-ревью після такого дизайнера. Але поки що імхо рано про це говорити.

І тоді птання - як ви бачите - в ЩО може перерости команда в майбутньому? Які ролі відвалюватимуться? А хто повинен залишитись і замінити собою інших? А якщо все зведеться до дуже людини-октопуса, який і дизайнитиме і код писатиме і оце всьо, то КОМУ з нинішніх виконавців на проєкті найзручнішо рости в цього октопуса? І головне - який скілсет повинен бути в такої універсальної людини?

Всім привіт!
П'ятниця в нас буде Днем Софтскілів.

Можливо ви чули вираз “За хардскіли працівника винаймають на роботу, але за софтскіли звільняють”. На мою думку це дуже валідний стейтмент - він відображає важливість софтскілів в роботі на 100%. Але знову ж таки, сети софтскілів для різних ролей і грейдів дуже різні.

Наприклад, якщо ми говоримо про дизайнера рівня джун-мідл, то важливі:
1️⃣ Емпатія (справжня, але контрольована) Це база, адже без емпатії, як здатності співпереживати, наврядчи вдасться провести інтервью з юзером. Але знову ж таки - не забувайте, що емпатію потрібно контролювати. Намагайтесь не приймати близько до серця слова респондента, адже респондент нарозповідає своїх “проблем” (іноді не тільки про продукт, а й як йому погано жеветься), а вас потім може накривати. Пожалійте себе, бо всотувати весь негатив не є продуктивним підходом.
2️⃣ Комунікація / колаборація Тут ми розуміємо здатність вибудувати діалог з членами команди і замовником. Звісно, замовнику ми показуємо наш професіоналізм, а мейтам - здатність комфортного і НЕтоксичного діалогу.
3️⃣ Презентація Це прям буває проблемою (особливо для інтровертів). Дизайнер обовязково повинен мати скіл презентації, вміння говорити різними мовами: дизайнерською, менеджерською, біснесовою, девовською і бажано англійською😉
4️⃣ Вміння давати та приймати критику Не послати критикана нафіх це ВЖЕ добре, але щоб було прям конструктивно, краще всього навчитись хочаб “бургеру” - правилу безболісного фідбека, де булка це похвала, а котлета - критика. Звісно ж, бургер не є єдиною технікою давання фідбеку, але для початку підійде і він.
5️⃣ Критичне мислення Відростіть в собі скептика і навчіться питати “ШОБШО”. Це допоможе позбавлятись різного неважливого, відсікати невдалі ідеї, тощо. Згадайте як ви дивитесь рілзи в ютубчику і періодично самі в себе запитуєте “але ШІ-шка чи насправді ото всьо?”. Так от, так можна (і треба) і в роботі. Адже як казав доктор Гауз “Everybody lies”, а ми, дизайнери, існуємо для того, щоб відстрілювати рожевих єдинорогів замовника і членів команди нашими ШОБШО-питаннями.

А для сіньйор-лід і вище, сет буже зовсім інший:
1️⃣ Спілкування на мові бізнесу На цьому рівні дизайнер вже вирішує досить складні питання складання стратегії розвитку продукту, проведення активностей і тд - і цінність всього цього потрібно пояснити замовнику. Для того, щоб клієнт все зрозумів, треба переключитись на мову бізнеса, тобто на мову грошей. Економічно обґрунтовувати і “продавати” роботу дизайн-юніта, насправді, не супер просто, але навчитись це робити необхідно.
2️⃣ Мотивація субординатів Хороший лід повинен бачити потенційні точки росту субординатів, відслідковувати, куди хоче розвівати себе підлеглий, помічати потенціал і мотивувати людей. Мотивація тут дуже важлива, адже вмотивований дизайнер буде качатись дуже швидко, успішно проходити асесменти, ростити компетенцію і потребувати менше супервізії. Але знову ж таки - для кожної конкретної людини існує своя мотивація і хороший ресурсник підбирає правильні важілі впливу під субордината.
3️⃣ Превенція вигоряння (себе і субординатів) Вигорівший працівник не потрібен НІКОМУ - ні компанії, ні самому собі. Тому вигоряння (а в наших умовах коли вигоряння буститься стресом від війни, вимикань світла, емоційними гойдалками після перегляду новин и тд) стає головним ворогом продуктивності, обійшовши на повороті прокрастинацію. Скіл вчасного відслідковування вигоряння себе та субординатів є критичним скілом. Адже якщо твій субординат вигорів, тобі потрібно замінити його кимось, а за якість і вчасність подачі делівераблів відповідаєш ТИ. А якщо ж вигориш ТИ - то вся робота накриється і замінити умовного ліда набагато важче ніж джуна.
4️⃣ Менеджмент очікувань Це вже про комунікацію з замовником / оунером / стейкхолдером. Хорошему ліду необхідно вміти “відстрілювати рожевих поні замовника”, щоб той не будував марних очікувані і не сподівався що дизайн-тіма зробить дискавері, все відмалює, протестить та захендофить за 2 спрінта.

5️⃣ Проблем солвінг Це вже прям комплексний скіл - він передбачає вміння вирішувати проблемні ситуації всередині дизайн-департмента, команди загалом і окремо з клієнтом. Якщо ми говоримо про дизайн-команду, то треба контролювати щоб дизайнери не перегризлись в процесі роботи, адже це напряму впливає на делівері.
6️⃣ Хайринг / Оффбординг Мачюнрний дизайнер часто залучений в хайринг процес в компанію. Це дуже відповідально, адже потрібно зрізати рівень скілів людини за умовні півтори години технічки. Знову ж таки, якщо ми говоримо про наймання людей на проєкт в аутсорзі, треба обрати та заонбордити “правильну” людину, скілсет якої підходить компанії чи проєкту. Але крім скілів ще є необхідність оцінити людину на сумісність самій компанії за її цінностями. Тут важливо подивитись на софтскіли (дивимось вище пункт скіли мідла).
7️⃣ Всі вище перераховані скіли нищих грейдів повинні бути вже за замовчуванням, якщо що 😉

Це ті думки які залетіли мені сьогодні вранці про софти. Можливо ви можете додати ще якісь софтскіли, які вважаєте важливими?

Ще є один скіл, який я б хотів проговорити. На мою думку він більше індивідуальний і не сильно відноситься до зростання дизайнера в рамках компанії (хоча безпосередньо впливає). Я маю на увазі проактивність і бажання (вміння) постійно вчитись.

Тут є 2 ситуації, на мою думку:
1️⃣ Ви дизайнер, що працює в компанії або на продукті В цьому випадку ваш карєрний шлях буде будуватись суто за правилами вашого роботодавця. Це може бути система періодичних асесментів, або щорічний ван-ту-ван з вашим С-треком, абощо. Ця система оцінювання заточена на контроль розвитку працівника, його деманд щодо компенсації і відслідковування задоволеності (умовно щоб працівник не був в червоній зоні). Якщо людина знаходиться в компанії і грає за її правилами, то проактивність і навчаність сильно не впливає - дизайнер може роками працювати на посаді, бути задоволеність і не приймати якісь додаткові виклики. Я таких людей бачив дууууже багато. Але ж якщо дизайнер починає активнічати, проявляти себе, постійно підвищувати свої компетенції, то тут вже цікавіше - в хорошій компанії дизайнера будуть заохочувати і підтримувати (оплочувати контрибуції, пропонувати курси за рахунок компанії, мотивувати, тощо). Якщо ж це погана компанія, яка не зацікавлена в зростанні працівників, то вона навпаки може стопати дизайнера, забороняти імплементувати знання в робочий процес, тощо. В моїй кар'єрі був досвід обох компаній і я щасливий, що наразі мій роботодавець прекрасний і дає можливість і шляхи розвитку. Костя і Макс, якщо ви це читаєте - ДЯКУЮ ВАМ!
2️⃣ Ви дизайнер, що працює на себе Тут може бути дизайнер на фрілансі, консультаційна або парт-тайм робота. В цьому випадку дизайнер не має ніяких стримуючих факторів, адже він сам відповідає за себе і свій професіоналізм. А з другої сторони ця ситуація важча, адже мостійно необхідно самомотивуватись, щоб тримати себе в тонусі.
Аспект наступний: саме бажання і вміння вчитись. Якщо ми говоримо про дизайнерів рівня сіньор і вище, вони можуть з собою робити вже самі все що хочуть, адже мають базу. Вони знають ДЕ шукати матеріали, за ким слідкувати, як аналізувати свої гепи і “шпаклювати” брак знань. Якщо ж людина трейні-джун-пластиліновий_мідл, то з цим важче: ці дизайнери часто хитаються зі сторони в сторону - вони читають незрозумілі Медіум-канали, ходять на воркшопи дизайнерів-самозванців, тощо. Я не хотів би нікого образити, але вже бачив ситуації, коли людина 1 рік в галузі, має посередній досвід, але вже страждає менторством, проводить курси і таким чином може зіпсувати нових недосвідчених дизайнерів. Прошу вас, будьласка, слідкуйте за тим, що потрапляє в вас - читайте перевірені джерела, адже база отримується саме там. Не ігноруйте напрацювання NNG, Baymard, MeasuringU та інших, або, якщо вже маєте справу з інфоциганом, спробуйте бути критичними і просіть пруфи.

Коли ми говоримо про навчання, давайте згадаємо і про вигоряння - будьласка, робіть паузи і перемикайте вашу увагу і на щось суміжне, щоб не допустити бернаут. Це дійсно важливо.

І останній аспект, який варто проговорити - розвиток особистого бренду. Це може бути важливим і мотивувати дизайнера розвивати себе, постійно буститись. Але є кілька моментів:
⚫️ Треба перебороти внутрішнього імпоузера, який сидить всередині всіх адекватних самокретичних людей Всі побоюються виходити “назовні”. І це нормально. Треба просто наважитись.
⚫️ Якщо ви інтроверт (на мою думку інтровертів і екстравертів не існує - всі ми амбівертні, просто коливаємось від екстраверсії до інтраверсії, і навпаки, в залежності від оточення, ситуації, настрою, погоди і тд), то вам буде трошки важче. Особистий бренд передбачає певний рівень публічності - це треба прийняти.
⚫️ Розбудова вашого особистого бренда може бути важкою або легкою задачкою. Тому якщо ви хочете, щоб вам допомогли, оточіть себе однодумцями, знайдіть платформу для цього. Ви можете (принаймні на початку зростання вас як бренду) стартанути з допомогою комьюніті. Їх є дууууже багато. Наприклад PROJECTOR має комьюніті і залюбки може вам допомогти з самореалізацією.

І тут слова подяки: Света, Міша, Костя, якщо ви це читаєте - ДЯКУЮ ВАМ!

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

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

https://www.yakaboo.ua/ua/rik-osobistoi-efektivnosti-komplekt-iz-4-knig.html

Фактично це вижимки з 48-и найпопулярніших книжок. Звісно, вижимка не замінить повну книгу, але імхо, варте уваги видання.