interfaces.prjctr | hladynets week

Всім привіт.Сьогодні буде день юайки.Весь 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

В минулому ми вже проговорили що дизайнер як роль досить важливий, але кого можна вважати дизайнером?Всі ми знаємо що є безліч видів дизайнерів: UX Designer, UI Designer, UX/UI Designer, UI/UX Designer, Product Designer, Web Designer, Interaction Designer, Service Designer, Graphic Designer, UX Researcher, UX Writer і багато інших в залежності від того як хоче обізвати дизайнера ваша компанія.Тут в мене є певний діалектичний тейк - Я особисто вважаю що дизайнер це просто людина яка графічними методами вирішує проблему бізнеса (збільшення рівня прибутку), заметчивши реквайрменти юзера і пропозицію продукту. І виходячи з цього, дизайнер це завжди про інволвмент одночасно в бізнес і юзера.Якщо ж ви відкриєте Djinni або будьяку іншу платформу для пошуку роботи, то побачите безліч дизайн-вакансій. Але чи така вже велика різниця між тайтлами в цих вакансіях? ІМХО НІ!Давайте спробуємо розібратись:⚫️ UX Designer - людина яка працює здебільшого з досвідом користувача. Скоріш за все людина компетентна в дослідженнях і відмальовці.⚫️ UI Designer - людина яка працює суто з інтерфейсами (оператор Фігми), але погана юайка може нівелювати гарний UX і критично занижувати конверсію. Тобто UI це є UX.⚫️ UX/UI Designer - людина і про UI і про UX.⚫️ UI/UX Designer - людина і про UI і про UX.⚫️ Product Designer - це вже цікавіше: ця роль вже працює з метриками, воронками, стратегією, звісно ж з досвідом користувача, підтримує продукт консистентним і привабливим. Адже всі ці аспекти можуть (і будуть) впливати на результати всього продукту в цілому.⚫️ Web Designer - працює з вебом. Але чи це означає що нічого крім веба людина не робить? Наврядчи. Це лише спеціалізація ТУТ і ЗАРАЗ і якщо продукт захоче робити аппку, то веб-дизайнер стане ще і апп-дизайнером)⚫️ Interaction Designer - мікроанімації, взаємодії, “красоти”. Але ж це також є частиною UI та UX.⚫️ Service Designer - проектує не окрему кнопку або сайт, а весь шлях клієнта від моменту «я щось хочу» до «я отримав послугу і щасливий». В голову одразу проситься думка “о, так і я вмію робити блюпрінт”))))).⚫️ Graphic Designer - людина яка круто шарить за колористику, типографіку, композицію, ритм і тд. Але хіба це не є UI? Можливо графічні дизайнери не валідують свої рішення?⚫️ UX Researcher - людина яка вміє проводити дослідження. Тут наче просто все, але якщо дослідник провів діскавері, віддав юайнику і на етапі тестувань побачив проблеми - чи виправлення і валідація цих фіксів не входить в зону відповідальності нашого рісьорчера?⚫️ UX Writer - людина вміє працювати з текстами. Ну класно ж. Але 80% інтерфеса то є текст. Тож текст це також UX.Виходить все якось дуже складно, адже зв'язок UI, UX, текстів, анімації дуже тісний. І все це впливає на метрики, а отже і на рівень конверсії та монетизацію.І ось мій тейк, на тему якого я б хотів з вами поспорити: РОЗПОДІЛ ДИЗАЙНЕРІВ ДУЖЕ УМОВНИЙ. Він важливий лише відділу кадрів, щоб знати що написати на вашому бейджику. Хороший дизайнер повинен бути T-shaped і вміти робити багато. Тоді такого працівника можемо назвати Дизайнером.А як ви вважаєте - варто робити розподіл?

Всім привіт. Ділюся 6 частиною. Це буде остання частина в межах мого тижня.Що сьогодні:👉 Вчимося промтити через назви класів.👉 Створюємо динамічний формат слайдера та адаптуємо його.👉 Комітимося.👉 Деплоїмо на Vercel та отримуємо live-link.👉 Кайфуємо від результату (це найважливіше в процесі)🚀 Ділюся результатом, що в нас вийшло впродовж цього тиня → https://blog-ai-prototyping.vercel.appЯк і обіцяв, ми пройшли шлях:→ Figma → Claude Code → GitHub → Vercel → live-версія.Якщо хтось повторював за мною, скидайте результати. Буде круто побачити, що у вас вийшло. Дякую всім за увагу та зворотній фідбек, я це ціную 💙. Мій тиждень завершився, і я сподіваюся, що це було корисно для вас, що ви змогли підчерпнути щось для себе та імплементувати у свої робочі процеси. Для мене цей тиждень теж був певним викликом: я вперше в житті вчився монтувати, рендерити відео та робити інші подібні речі. Я не прощаюся. Думаю, ми ще десь перетнемося, дизайн-індустрія не така вже й велика.Якщо захочете побачити, як наш прототип перетвориться на повноцінну сторінку і не тільки, ви зможете знайти це на моєму YouTube. А я буду радий побачити ваші результати та експерименти з AI.- лінкедин - біхенс• ютубМиру та процвітання 🖖https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R

Друга частина відео готова, тож ділюся з вами. + кілька думак на день)Дуже часто можна зустріти думку, що AI всіх замінить, що всі в найближчому майбутньому підемо на заводи (хоч би були ці заводи, бо чомусь більшість заводів переформатовуються у кавʼярні останнім часом 😅) і таке інше. Це природна реакція на швидкі зміни, але я схильний вважати, що реальність буде менш драматичною.В цьому питанні, схильнйи важати що ніякої повноціної заміни не буде, все переформатується під нові реалії, інстурменти, створятсья нові контексти. 🟢 AI - це потужний інструмент, але це інструмент хаосу. У мене асоціація з геніальним безумцем, який створює велику цінність, але паралельно ще й великий обсяг хаосу.Цей хаос, створений AI, можна систематизувати і впорядкувати лише експертністю. Тому цінність експертності стане ще більшою. Той, хто зможе приборкати цю хаотичну природу AI, валідувати рішення, направляти і створювати правильний коридор рішень, у якому AI працює результативно, буде в рази продуктивнішим та ефективнішим.🟢 Винахід комп'ютера став велосипедом для людського мозку, AI - це двигун внутрішнього згоряння для людського мозку.Коли студенти питають мене, чи буде професія дизайнера актуальна через рік-два і чи варто навчатись, моя відповідь - не просто буде актуальна, а буде надзвичайно затребувана. Тільки затребуваність буде в експертів, які зможуть приборкати цей безумний хаос, створений AI.Не панікуємо - освідчуємось.Миру та процвітання 🖖https://www.youtube.com/watch?v=S8m94PXq_KI

Ну що, всім привіт. Вчора взяла день тиші, щоб принести вам трохи лонгрідів.Хочу почати з теми, яка виявилась найпопулярнішою в опитуванні — кар’єрний розвиток і скіли дизайнера.Окрім креативності і здатності швидко адаптуватися — про що я писала раніше — я все більше переконуюсь, що одна з найважливіших навичок дизайнера це вміння презентувати і фасилітувати зустрічі. Особливо якщо ви працюєте в агенції або багато взаємодієте з клієнтами.Я часто думаю про дизайн-агенцію як про сервіс. І найпростіша аналогія для мене — це ресторан. Досвід гостя складається не тільки з їжі: є атмосфера, інтер’єр, запах, швидкість обслуговування, зручність бронювання — це все разом формує враження.З агенцією так само: портфоліо, якість дизайну, доступність команди, швидкість комунікації — це “кухня”. Але є ще й обслуговування, тобто те, як дизайнер спілкується з клієнтом.Останнім часом я дуже гостро відчула неочевидну для себе річ: клієнтів і команду потрібно залучати емоційно. Під час зустрічей важливо створювати унікальні відносини: жарти, маленькі інсайди, відчуття спільної історії. Звісно, це не замінює дизайн, але це створює середовище, в якому дизайн починають слухати, бо дизайн не має цінності, якщо його не розуміють.І це особливо видно на великих презентаціях для стейкхолдерів або екзек’ютивів — ми можемо зробити великий шматок роботи за тиждень, але навіть кілька годин презентації не гарантують результату.І тут важливо зрозуміти, що мета презентації — не approval, а щоб люди повірили в рішення і зрозуміли їх. Я не раз бачила ситуацію, коли після переходу від wireframes до дизайну раптом з’являються питання, які можна було вирішити два етапи тому, просто тому що раніше стейкхолдери не занурились достатньо глибоко.Люди втомлюються, втрачають увагу, дивляться поверхнево, тому презентація — це завжди робота з увагою.Стейкхолдерів потрібно енгейджити:- жива інтонація- гумор (де доречно)- приклади- відсилки до попередніх розмов- маленькі “easter eggs”- І обов"язково просто харизма.А ще хороша презентація завжди починається з бази:- яка була задача- для кого ми це робимо- про що домовились минулого разу- що показуємо сьогодні- яка мета зустрічі- чому це важливоІ ні в якому разі не "everything I did in the order I remember it" — не пересказуйте хронологію ваших дій. Рецепт такий: Задача -> Для кого -> Яка проблема -> Як ми її вирішуємо -> Можна ще показати чому ми думаємо що це рішення хорошеЦе звучить очевидно, але саме ці речі найчастіше пропускають.Коли деталей стає багато, допомагають фасилітаційні інструменти:- дати людям час самостійно пройтись по макетах- зібрати коментарі карточками- зробити голосування, емоджі на макетах- зафіксувати рішення- вчасно зробити перерву- залучати більш пасивних учасників, звертатись напрямуЦе навичок управління груповою динамікою — одна з найбільш недооцінених дизайнерських навичок. На практиці більшість дизайнерів фокусуються на портфоліо і хард-скілах і значно менше — на комунікації.Є і друга сторона цієї теми — презентаційними навичками можна виправдати майже будь-який дизайн. Я не раз бачила, як дизайнери переконливо захищали рішення, які були слабкими по UX або повністю суб’єктивними, бо харизма може замаскувати проблеми.Тому важливо пам’ятати, що дизайн-рішення потрібно захищати структуровано.Починати від потреби користувача в моменті, підтвердити бізнес-можливістю, подивитись на конкурентів, але тільки якщо вони співпадають по сегменту, позиціонуванню і бізнес-моделі яка підходить під конкретну проблему, переконатись, що не суперечить евристикам — хоча б три пункти з цього списку дають триангуляцію, на яку можна опиратись. Коли рішення ще не протестовані, потрібно робити extra mile, щоб показати логіку — чому саме це рішення має сенс саме для цієї аудиторії.Чесно кажучи, чим далі, тим більше я думаю, що вміння показати мислення — це один з ключових скілів дизайнера, який вам допоможе не тільки лиш в роботі із командою, а й при кар"єрних 1-1 і співбесідах. 🤞

В коментарях позавчора зачепили тему підходу до досліджень і валідації в ентерпрайзах VS молодих продуктах. Мій досвід якось співпав, що навіть великі ентерпрайзи зараз починають активно інтегрувати AI або, щонайменше, намагаються додати якусь інноваційність — більш “молоду” стилістику, нові підходи в UI — щоб залишатися конкурентоспроможними й не випадати з ринку.Стартапи при цьому часто збирають навколо себе надзвичайно сильні команди з точки зору продукту, growth, UX-дизайну. Але коли доходить до реального розуміння користувацьких потреб, багато хто все ще «плаває». Ніхто до кінця не знає, який має бути core продукту, де саме value proposition, який сегмент ринку справді варто закривати. Всі перебувають у стані намацування, хаотичного пошуку й постійних півотів. Живучи в Лісабоні і спілкуючись із місцевими підприємцями-на-расслабоні спостерігаю таку тенденцію: no-code білдери і вайбкодінг зробили розробку MVP дуже доступною, і дозволяють провалідувати ідею випустивши фічу буквально за вихідні. Це створює нову парадигму: якщо раніше ми навчали про необхідність досліжень перед будь-яким мокапінгом і, тим більше, розробкою, то тепер просто швидше випустити 10 різних ідей навмання і подивитись який напрямок відгукується у аудиторії краще. Прийнамні в очах самих підприємців. Я особисто все ще бачу цей підхід дуже витратним, і зовсім не завжди швидшим, і абсолютно неінформативним — часто фіча або ідея провалюється, але незрозуміло чому. Але таким чином у підприємців і інвесторів створюється враження швидких результатів, і відчуття контролю над процесом "сам зробив — сам поламав". Ентерпрайзи — повна протилежність. Вони дуже консервативні, часто слабо орієнтуються в growth-механіках, чи сучасному UX. Але водночас вони неймовірно глибоко знають своїх користувачів. Вони знають фідбек цитатами з customer support, точно розуміють болі, сценарії й очікування. Проблема починається там, де потрібна смілива креативність і швидке прийняття рішень — те, чим живуть молоді команди.Для себе ще не вирішила який процес подобається більше, бо у стартапах є враження фантазії, де треба придумати вау-ефект здебільшого для інвесторів, а у ентерпрайзах фантазувати хочуть, але не дають, зате все по правилах і більш безпечно, комфортно. Як думаєте, живу в своїй бульбашці, чи у вас таке ж? Який процес вам більше до душі?

Друзі, бачу цікаві коментарі у повідомленні вище - рада, що змушує подумати та порефлексувати над питанням обміну фідбеку.Тут ще раз підкріплю, що фідбек - це 100% важливо.Ключова задача інструменту, що обговорювали вище - це щоб кожен з нас був здатен до рефлексії та відповідальності. А також, це інструмент роботи із тривожними та гіпер-відповідальними людьми, які вже самостійно оцінили ситуацію і їх необхідно підштовхнути до спільного вектора, а не мікроменеджерити.У мене також були такі етапи у кар‘єрі, коли я приходила до менеджера та впроваджувала фідбек сесії, бо мені не вистачало їх.Щоб фідбек вам від вашого менеджера був підкріпленим та обдуманим, створіть для цього також умови, якщо ваш менеджер це не робить, або це відсутнє у культурі компанії:1. Запитуйте у команди регулярний 360.2. Робіть NPS/CSAT опитування в кінці важливих операційних процесів. Наприклад, якщо вам важлива оцінка hand-off - запустіть опитування після релізу.3. Проводьте ретро по ваших процесах.І ключове - ми всі різні, ваші менеджери також вчаться. Я за те, щоб кожен був дорослим, а разом ми всі були командою

Відсутність зворотнього зв‘язку.1. Сформуйте спільне поняття зворотнього зв‘язку.2. Поки не побудуєте довіру у обидва боки, зворотній зв‘язок може сприйматись викривлено.Поділюсь із вами історією, де мені, як менеджеру, тіммейт із моєї команди повертав(-ла) фідбек, що бракує зворотнього зв‘язку. З мого ж боку, я надавала зворотній зв‘язок де він був необхідний. Я діяла в міру того, що чим сіньйорніша людина, тим менше він/вона потребує оцінки (у менеджменті є такий принцип).Проте, я прийшла на 1-1 та сказала: «Я знаю, що є такий фідбек до мене [Confront the brutal facts], скажи, що для тебе є зворотнім зв‘язком?».Так ми домовились про формат фідбеку.Також, є такий принцип у лідерстві, що майже неможливо перекомунікувати щось. Цілі, цінності, місію необхідно комунікувати часто і багато. Тільки якщо команда скаже: «Аня, ми зрозуміли», тоді можна прикрутити кількість комунікації.Для мене, як для лідера, це означає, що я продовжую працювати над зворотнім зв‘язком допоки мені не скажуть, що все гуд, контакт є, паралельно перевіряю цей контакт.

-> Уявіть, що ви любите рамен, але ніхто у вашій родині його не любить. Ви є early адоптером у вашій родині.-> А потім уявіть, що ваша сестра вирішила також розпробувала рамен за вашою рекомендацією. Вона стала early majority.-> Далі ви спокусили тата на рамен. Тепер ви всі ходите у раменну по неділях, але мама тримається та п‘є тільки лимонад та їсть чізкейк.-> Проте через місяць мама здається - їй набридло не їсти з вами - спрацював тиск - їй також починає подобатись рамен. Вона - Laggard - авдиторія, що не готова до змін, але під тиском здається.У будь-яких змінах так само.Коли ви робите редизайн або сміливий реліз - у вас будуть early адоптери, а інші будуть фукати. Згадайте будь-яке оновлення монобанку. Але погодьтесь, вплив early адоптерів моно такий сильний, що early majority швидко під‘єднуються.РесурсЩе ресурс➡️ Напишіть у коментарях як ви своїми дизайн рішеннями у минулому впливали на адопшн.А далі на вас чекає ексклюзивний кружечок про адоптерів монобанку від Влади Подкуйко.

Цікавий погляд як можна сприймати споживання інфи я прочитав у Gurwinder'a (просто тіп з інтернета). Він ділить споживання інформації на рибалку i полювання: ми рибалимо коли наприклад гортаємо соціальні мережі, і полюємо коли шукаємо відповідь на конкретне питання. Обидва важливі, але рибалити треба обережно, в чистих водах — в тіктоці корисної інфи не знайдеш.Поки що найбільш рибне місце для мене це твітер, бо там є можливість конектитись і дивитись що роблять люди з найбільш провідних tech компаній.Моя порада це завести окремий аккаунт (якщо в вас вже є персональний де ви фоловите своїх друзів/політичних діячів і ви не хочете його перебудовувати на дизайн), знайти когось кого ви вважаєте “шарящим” і підписатись тупо на всіх кого ця людина фоловить. Так в вас буде можливість подивитись інтернет очами іншої людини. А потім починаєте потихеньку просіювати свою стрічку: відписуватись від того що не цікаво, додавати що цікаво.Дизайн-твітер достатньо маленький і всі фоловлять ± одних і тих ж людей, то думаю ви швидко їх знайдете: дизайнери з Vercel, Linear, Raycast, OpenAI, Figma, незалежні фаундери, тощо.Ось мій твітер, не можу сказати що я там сильно активний, але фоловлю більшість тих вищезгаданих дизайнерів, то ви можете використати мої підписки як стартову точку:https://x.com/borysbaklanov/followingУдачі з рибалкою! 😄🎣