interfaces.prjctr | vnotchenko week

Композиція - це останній, третій кит нашої UI.Загалом під композицією ми маємо на увазі організацію інтерфейса на екрані. Знову ж таки, не будемо вкотре говорити про базу в композиції, правило третин, золотий перетин і тд. Все це можна освіжити за допомогою лекції https://prjctr.com/library/video/basic-composition від Євгена Демченка. Пропоную краще поспілкуватись як на практиці крутіше робити.Якщо ми говоримо про композицію, варто згадати що люди сприймають контент на тих самих сайтах певними візуальними плямами. І є певні врівноважені композиції, які виглядають впорядковано і не напрягають. Наприклад https://dulcedo.com/ - отримав сайт дня на Awwwards. Імхо виглядає він прям не погано, адже центральна композиція це завжди гарний вибір і плями є не хаотичними. АЛЕ такі сайти запамятовуються гірше, ніж меншвпрядковані композиційно. Доприкладу гляньте цей сайт https://corentinbernadou.com/ - він також є сайтом дня на Евордз, але композиція в ньому хилиться вліво. Це виглядає досить суперечливо, але однозначно круто. Звісно зараз ви скажете що Dulcedo топ і що порівнювати їх важко. І я згоден, адже в кожному з них є свої переваги. Наприклад в Dulcedo класна типографіка і приємна анімація, а в Corentin Bernadou класний помаранчевий і дуже крута фіча з грідами.Але мій тейк полягає в тому, що нестандартна і іноді неправильна композиція може запамятатись користувачу і для іміджевих “стільна-модна-маладьожна” продуктів буде дуже доцільна. Але зовсім недоцільна у випадку того самого e-commerce, де впорядкованість і зрозумілість є надважливими.Ви як взагалі вважаєте - чи обовязково дотримуватись правил чи варто все ж на них підзабивати? Може робили щось таке дивне/креативне?

Колористика - це другий кит будь-якої юайки. За допомогою кольору ви можете працювати з акцентами, виділяти необхідне та легше провести користувача продуктом до цілі.Спочатку я хотів розповісти про колірне коло Йоханеса Іттена, про адитивну (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 стоїть на 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], скажи, що для тебе є зворотнім зв‘язком?».Так ми домовились про формат фідбеку.Також, є такий принцип у лідерстві, що майже неможливо перекомунікувати щось. Цілі, цінності, місію необхідно комунікувати часто і багато. Тільки якщо команда скаже: «Аня, ми зрозуміли», тоді можна прикрутити кількість комунікації.Для мене, як для лідера, це означає, що я продовжую працювати над зворотнім зв‘язком допоки мені не скажуть, що все гуд, контакт є, паралельно перевіряю цей контакт.