interfaces.prjctr | oleksiuk week
11.4K subscribers
1.63K photos
263 videos
910 links
Найбільший український канал присвячений дизайну продуктів від спільноти Projector Institute.

Наші курси ➡️ bit.ly/3Ok2oRD
Для питань та пропозицій — [email protected]
Download Telegram
Привіт 🖖
Цієї середи на курсі UX Beginning у нас відбувся захист курсових проєктів.

Завдання студентів - дослідити ринок праці України та створити платформу для пошуку роботи. Хочу поділитися з вами прототипами для натхнення, які студенти вперше зібрали за допомогою AI:

👉 https://anastasia-chugueva.github.io/work-hard/main.html
Анастасія Чугуєва

-
👉 https://prototype-test-alpha.vercel.app/index.html
Оля Солодовнікова

-
👉 https://work-smart-nine.vercel.app/
Тетяна Каміль

-
👉 https://julia-kr-afk.github.io/prototype-1/index.html
Юлія Кравус


І вперше більшість студентів:
👉 Відкрили claude code
👉 Працювали з GitHub
👉 Відкрили VS Code
👉 Деплоїли на Vercel
👉 Працювали з AI для генерації прототипів.

Дехто ще кілька місяців тому вперше відкрив Figma.

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

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

Це призведе до появи багатьох різноманітних нових продуктів, тому що валідація продуктових гіпотез стане швидшою та якіснішою, а головне дешевшою. Мені здається, у валідації це одне з найголовніших, щоб було швидко та якісно.

Якими б класними не були гіпотези й наскільки б якісно не було проведені глибині інтервю, кінцева валідація залежить від того, як ви «запакуєте» реалізацію цих класних гіпотез.

🟢 value виникає тільки через взаємодію

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

🟢 Поганий інтерфейс = гіпотеза працює (виглядє) гірше, ніж є насправді.

Гарних прототипів і вихідних.
🔥274👍1
Якщо ви думали, що на сьогодні все, то біжу вас потішити 🏃.

Шерю 5 частину. Ніколи б не подумав, що в дизайнерському каналі буду шерити відео, де розказую і показую, як працювати з GitHub 😅. Тут мене вибачте, але це справді потрібно знати, якщо ви хочете робити свої проєкти й деплоїти їх. Без цієї бази ніяк не обійтися та і це не так важко як здається. Складні штуки просто звучать складно, поки в них не розберешся. Тому давайте розбиратись.

У сьогоднішньому відео:

👉 Розберемося, навіщо зберігати наші проєкти на GitHub
👉 У чому різниця між Git та GitHub
👉 Як перевірити, чи встановлений Git на вашому комп’ютері
👉 Як створити свій перший репозиторій
👉 Як зробити свій перший коміт через VS Code і термінал
👉 Обговоримо флоу роботи, коли стикаєтесь із багом (звісно що через ще одну AI 😂)
👉 На додачу імплементуємо анімацію ховер-ефекту для табів, яку згенерує нам aura.bild

Завтра ми з вами будемо деплої те що в нас вийшло за тиждень на vercel і отримувати live-лінку на наш проект.

https://youtu.be/bTW3hq7gvqk
🔥274
Всім привіт. Ділюся 6 частиною.
Це буде остання частина в межах мого тижня.

Що сьогодні:
👉 Вчимося промтити через назви класів.
👉 Створюємо динамічний формат слайдера та адаптуємо його.
👉 Комітимося.
👉 Деплоїмо на Vercel та отримуємо live-link.
👉 Кайфуємо від результату (це найважливіше в процесі)

🚀 Ділюся результатом, що в нас вийшло впродовж цього тиня
https://blog-ai-prototyping.vercel.app

Як і обіцяв, ми пройшли шлях:
→ Figma
→ Claude Code
→ GitHub
→ Vercel
→ live-версія.

Якщо хтось повторював за мною, скидайте результати. Буде круто побачити, що у вас вийшло.

Дякую всім за увагу та зворотній фідбек, я це ціную 💙. Мій тиждень завершився, і я сподіваюся, що це було корисно для вас, що ви змогли підчерпнути щось для себе та імплементувати у свої робочі процеси. Для мене цей тиждень теж був певним викликом: я вперше в житті вчився монтувати, рендерити відео та робити інші подібні речі.

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

- лінкедин
- біхенс
ютуб


Миру та процвітання 🖖

https://youtu.be/8pet8gTNepE?si=SGp2nRRSLXhtcO4R
31
Channel name was changed to «interfaces.prjctr»
Бодан, дякуємо!

Твій тиждень став спонтанним міні-курсом по вайбкодингу для дизайнерів і це дуже круто

Обожнюємо коли протягом тижня створюється щось нове і твої уроки це прямо найцінніше.

- Продж
33🔥2
Якщо тиждень сподобався, радимо звернути увагу на практичні і комплексні AI курси у Проджі, що стартують у березні і квітні:

- Ai for Product Creation — вже легендарний курс Дениса Суділковського де Make, Cursor і інші інструменти використовуються для створення продуктових рішень. Рекомендасьйон.

- Build Your Startup with Ai — як Аі змінює підхід фаундерів до пошуку потреб, просування і побудови прототипів.

- Ai for Personal Productivity — НОВИНКА — щойно запущений дуже крутий курс про те, як витрачати менше часу на рутинне і більше — на важливе.

І не забуваємо, що не Аі робить дизайн, а дизайнер робить класні продукти, а Аі йому допомагає.

Гарного тижня 🌞
5
Channel name was changed to «interfaces.prjctr | oleksiuk week»
Хей спільното!

Вітайте нового оунера каналу — Женю Олексюка.

Що сказати, він крутий.

- курує курс UX Advanced;
- запустив спільноту Проджа у Хмельницькому (ви доречі, можете зробити це у своєму місті);
- senior UX Designer в Epam.

А ще його лекція по Jobs To Be Done одна з найбільш популярних за підпискою.

Ну і загалом, Женя класний і його обожнюють студенти і колеги.

Женя, тобі слово
🔥428
Всім привіт!
Давайте знайомитись - мене звати Євген Олексюк. В дизайні я з 2013 року і за цей час встиг попрацювати в аутсорзі, аутстафі, продукті і фрілансі. Мав справи з різними доменами та різними командами. Маю технічну та фінансову освіти і 7 років банківського стажу (тому бізнесові аспекти мені даються досить не складно а від слова ЕБІТДА я не ховаюсь під плінтус). Ще дуже люблю пояснювати на дивних прикладах, дизайнерські байки, душне задротство, скепсиз та провокації😉
Ось мої контакти, якщо раптом захочете поспілкуватись додатково:
https://www.linkedin.com/in/olexworld/
https://medium.com/@olex_world
https://ux.pub/olex_world
https://www.instagram.com/olex_world/
На цей тиждень в мене заплановано для вас кілька цікавих тем, які, як мені здається, цікаво проговорити. Принаймні, мені було б цікаво і корисно почути про це в певний час своєї карєри. Трошки нового, трошки старого, трошки провокацій, але однозначно весело і цікаво)
45🔥14
Перший день - пропоную його провести в рефлексії на тему “Хто такий дизайнер”.
Якщо говорити про дизайнера як роль, то звісно, бажано розуміти рівень мачюрності компанії, де працює цей дизайнер. Очевидно, що якщо компанія працює з фріланс-замовленнями, то рівень UX-компетенцій дизайнера буде досить низьким, адже на фрілансі важлива “красота” і швидкість надання лейауту клієнту.
Тут одразу постає питання - а чи важливий UX як такий? І тут я б хотів проговорити цей аспект словами через рот літерами через екран. Якщо поцікавитись і погуглити історії фейлів продуктів через відсутність на цих продуктах дизайнерів, то наврядчи ви знайдете прям яскраві приклади (ну бо не сильно прийнято обговорювати публічно факап-сторі). Але є досить багато прикладів коли НЕЗАЛУЧЕННЯ (або недостатнє залучення) дизайнера призвело до втрат компаній.

Приклад 1: Nokia та BlackBerry
Це певне найгучніший приклад в історії. На початку 2000-х вони були королями ринку і кожен знав слоган Nokia Connecting People.
Проблема: Вони фокусувалися на залізі (кнопки, антени), а не на досвіді користувача (UX). Коли з’явився iPhone з сенсорним інтерфейсом, ці гіганти вважали це «іграшкою».
Наслідок: Nokia втратила ринок смартфонів і була продана Microsoft за $7.2 млрд (частка ринку впала з 40% до майже 0%).
Висновок: Відсутність продуктового дизайнера, який розуміє потреби користувача, вбиває навіть технологічних лідерів.

Приклад 2: Walmart (Втрата $1.85 млрд через "дизайн без досліджень")
Колись Walmart вирішив, що їхні магазини занадто захаращені, і провів редизайн, прибравши зайві стелажі та рекламу, щоб зробити проходи просторими.
Проблема: Вони зробили це на основі опитувань («Ви хочете менше безладу?» — «Так»), а не на основі спостереження за реальною поведінкою (UX Research). Покупці почали купувати менше, бо не бачили товарів «під рукою».
Наслідок: Продажі впали на $1.85 млрд через "дизайн без досліджень". Компанії довелося повертати старий «захаращений» дизайн.
Висновок: Дизайн без повноцінного якісного та кількісного дослідження може призвести до невірних гіпотез і, як наслідок, до фінансових втрат.

Приклад 3: Citigroup (Втрата $500 млн через поганий UI)
У 2020 році сталася одна з найдорожчих помилок в історії банківської справи через жахливий дизайн інтерфейсу внутрішньої системи (Flexcube).
Проблема: Банківські працівники мали переказати лише відсотки за кредитом компанії Revlon, але через заплутаний інтерфейс (потрібно було поставити галочки в неочевидних місцях) вони випадково переказали $900 млн — всю суму боргу.
Наслідок: Суд дозволив кредиторам не повертати $500 млн. Це була UI помилка.
Висновок: Навіть поганий UI може вплинути на UX (досвід користувача) і спричинить втрати.
Фанфакт: Співзасновник Airbnb Браян Ческі (дизайнер за освітою) часто каже, що на початку інвестори не вірили в Airbnb, бо це була "ідея про дизайн, а не про код". Тепер дизайн — це їхня головна конкурентна перевага, яка монетизує.

А розкажіть ви - чи бували в вас ситуації, коли вас запрошували на роботу на продукт, де раніше не було дизайнера? Які були труднощі?
27👍5🔥4
Друзі, бачимо технічний баг, тестуємо можливість залишати коментарі👀
3👌2👏1
В минулому ми вже проговорили що дизайнер як роль досить важливий, але кого можна вважати дизайнером?
Всі ми знаємо що є безліч видів дизайнерів: 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 і вміти робити багато. Тоді такого працівника можемо назвати Дизайнером.
А як ви вважаєте - варто робити розподіл?
44
Вчора ми з вами говорили про позиціонування та дизайн як такий. Сьогодні пропоную зробити день UX.
Адже на мою думку саме UX керує всім.
Всі знають про дизайн процес, юзер інтервью, тестування та інші базові бази але давайте поговоримо про більш цікаві і не сильно відомі види досліджень. Частину з них я практикував, частину дуже хотів би. На мою думку чим більше ваш арсенал активностей, тим більшу невиправну користь продукту ви можете нанести. Ви можете планувати, проводити, кастумізувати різні активності, проаналізувавши результати яких отримаєте корисний результат.

Метод "Муха на стіні" (Passive observation)
Це один із тих методів, який дозволяє брендам знаходити «золото» там, де цифри аналітики мовчать. Коли люди не знають, що за ними спостерігають, вони поводяться максимально природно, і саме це народжує геніальні продуктові рішення.
Ось кілька крутих прикладів того, як «муха на стіні» (або її варіації) допомогла великим гравцям:

1. IKEA: Чому люди не купують дивани?
IKEA регулярно відправляє своїх антропологів та дизайнерів у домівки звичайних людей (з їхнього дозволу, звісно, але як пасивних спостерігачів).
Спостереження: Вони помітили, що в багатьох країнах Азії люди не сидять на диванах так, як це задумували шведські дизайнери. Вони використовують диван як спинку, сидячи на підлозі, або складають на нього речі.
Результат: IKEA змінила висоту ніжок та глибину сидінь для певних ринків і почала створювати модульні меблі, які підлаштовуються під реальний побут, а не під «каталожну» картинку.

2. LEGO: Порятунок компанії від банкрутства
На початку 2000-х LEGO ледь не збанкрутували, бо вважали, що дітям потрібні прості ігри (через кліпове мислення).
Метод: Дизайнери провели тижні, просто спостерігаючи, як діти граються в кімнатах. Вони побачили 11-річного німецького хлопчика, який пишався своїми старими, потертими кросівками.
Інсайт: Хлопчик пояснив, що кросівки показують, наскільки він крутий скейтбордист, бо він довго тренувався, щоб їх так стерти. Дизайнери зрозумів: дітям не потрібна простота, їм потрібні досягнення та складність.
Результат: LEGO повернулися до складних наборів з тисячами деталей (як Star Wars), що врятувало бренд.

3. Ford: "Ефект вагітної жінки"
Розробляючи модель Focus, інженери Ford одягали спеціальні костюми ("Third Age Suit"), які обмежували рухи, та спостерігали за тим, як люди з обмеженою мобільністю або вагітні жінки намагаються сісти в авто.

Спостереження: "Муха на стіні" показала, що люди не просто сідають, вони "втискаються", тримаючись за все підряд.
Результат: Ford переглянув кути відкриття дверей, висоту порогів та підсвітку підлоги. Це зробило машину зручною для всіх, а не тільки для молодих і спортивних.
Цікаві факти про метод
Ефект Хоторна:
Це головний ворог методу. Він каже, що як тільки людина усвідомлює, що за нею спостерігають, вона починає працювати краще або поводитися "правильніше". Тому дизайнери часто чекають годину-дві, поки піддослідний розслабиться і забуде про них.
"Сміттєві дослідження": Іноді цей метод доходить до абсурду. Деякі компанії (наприклад, виробники побутової хімії) аналізують сміття користувачів (звісно, анонімно), щоб побачити, які упаковки насправді порожні, а які викинули напівповними. Це теж вид пасивного спостереження за результатом.
Камери в супермаркетах: Коли ти бачиш у великих мережах (як Сільпо чи Walmart) камери над полицями — це не завжди про крадіжки. Часто це UX-дослідження: аналізують, на якій полиці людина затримала погляд найдовше, але так і не взяла товар.

Як це виглядає в Digital
Зараз роль "мухи" часто виконують інструменти на кшталт Hotjar або FullStory.
Дизайнер відкриває запис сесії реального користувача і просто дивиться, як курсор мишки хаотично смикається навколо незрозумілої кнопки. Це і є цифрове пасивне спостереження.
🔥3615
Якщо “Муха на стіні” це досить важкий метод дослідження (але погодьтесь цікавий), то ось вам дещо цікаве, що можна легко використати в роботі:
Метод критичних інцидентів (Critical Incident Technique, CIT) — це якісний метод дослідження, який полягає у зборі, аналізі та класифікації конкретних випадків реальної поведінки людей у певних ситуаціях. Це улюблений інструмент сервіс-дизайнерів у компаніях, де клієнтський досвід триває довше, ніж клік по кнопці.
Його розробив американський психолог Джон Фланаган у 1954 році. Спочатку метод використовували для аналізу дій пілотів під час Другої світової війни, але сьогодні він є стандартом у UX-дизайні.
Ось кілька прикладів того, як відомі бренди використовували цей метод для трансформації свого бізнесу:

1. Disney і "Втрачена дитина"
Дізнейленди використовують CIT десятиліттями, щоб підтримувати статус "найщасливішого місця на Землі".
Інцидент: Дослідники вивчали звіти про випадки, коли діти губилися в парку. Це був найвищий рівень стресу (критично негативний інцидент) і для дитини, і для батьків.
Аналіз: Вони помітили, що персонал діяв за інструкцією, але батьки все одно залишалися незадоволеними через довгий час очікування та холодний тон комунікації.
UX-рішення: Компанія змінила протокол. Тепер працівник ("Cast Member") не просто шукає батьків, а стає "персональним аніматором" для дитини: пригощає морозивом, дарує іграшку. Результат: негативний інцидент перетворюється на історію про те, як "Disney піклувався про нас у важку хвилину".

2. Starbucks і "Не той напій"
Starbucks побудували свою репутацію на тому, як вони обробляють помилки бариста.
Інцидент: Аналіз скарг показав, що критичним моментом є не сама помилка в замовленні, а реакція бариста, коли клієнт про це каже.
Аналіз: Якщо бариста починав сперечатися ("Ви самі так замовили"), лояльність клієнта падала до нуля назавжди.
UX-рішення: Впровадження правила "Just Say Yes". Бариста зобов'язаний без питань переробити напій і часто дати купон на наступний безкоштовний кава-брейк. Компанія зрозуміла, що вартість однієї чашки молока набагато нижча за вартість втраченого LTV (Lifetime Value) клієнта.

3. Airbnb: "Жахлива ніч"
На початку шляху Airbnb стикалися з критичними інцидентами, коли житло не відповідало фотографіям або господар не виходив на зв'язок.
Інцидент: Кейси, коли мандрівники опинялися вночі в чужому місті без житла.
Аналіз: Метод CIT допоміг виявити, що найстрашніше для користувача — це відчуття безпорадності.
UX-рішення: Створення цілодобової служби підтримки "AirCover". Якщо трапляється критичний інцидент (господар скасував бронь за 24 години або житло брудне), Airbnb не просто повертає гроші, а бере на себе пошук аналогічного або кращого житла за свій рахунок.

Чим це корисно для тебе як для дизайнера?
Використання CIT у портфоліо показує, що ти не просто "малюєш екрани", а вмієш працювати з еджкейсами, розумієш бізнесові метрики, а не лише “тягаєш пікселі”.

Доречі, цей метод дослідження базується на одному з законів UX - Правилі оцінки на піку та в кінці. Це правило нам говорить що “Люди судять про свій досвід головним чином на основі того, що вони відчували на його піку і в кінці, а не за підсумковою сумою або середнім значенням кожного моменту свого досвіду”.
Якщо вам буде цікаво почитати ще про інші юіксові закони - ви можете глянути статтю на моєму Медіумі. Ось вам ліночка - https://medium.com/@olex_world/закони-ux-дизайну-4e0f8b1d5359
31🔥13👍6
Ну і на вечір давайте ще дещо корисне. Всі вміють проводити юзер інтервью, знають 3,5 правила Мамкиного тесту. Але дуже багато дослідників натикались на ситуації, коли респондентів дуууууже мало. З цього приводу існує техніка “Сніжного кому”. Вона очевидна, але давайте ще раз про неї прочитаємо.

«Сніжний ком» (Snowball Sampling) — це техніка відбору учасників для дослідження, де вже залучені респонденти допомагають знайти та запросити наступних. Цей метод ідеально підходить для пошуку «важкодоступних» або специфічних груп людей, яких неможливо знайти через рекламу, розсилки або постінг.

Як працює механіка «КОМу»
Уявіть, що ви котите маленьку сніжку (seed) з гори: вона збирає на себе все більше снігу (респондентів) і стає величезною кулею.

Пошук «насіння» (Seeds): Ви знаходите 1–3 перших максимальновалідних респондентів, які точно відповідають вашим критеріям (наприклад, вам необхідні респонденти категорії: тек-блогери-міліонники).
Реферальна пропозиція: Після інтерв'ю ви просите їх порекомендувати колег або знайомих із такими ж характеристиками (інших блогерів з великою аудиторією, що оглядають технічні новинки).
Розширення: Ви зв'язуєтеся з новими кандидатами, проводите дослідження і знову просите рекомендації.
Стоп-фактор: Процес триває, поки ви не наберете потрібну кількість людей або поки інформація не почне дублюватися (досягнення так званої точки насичення).

Коли цей метод незамінний?
Метод «Сніжний ком» — це ваш порятунок у UX-дослідженнях B2B-сегмента або нішевих продуктів. Він валідний якщо ваші респонденти: • Є представниками закритих або вузьких комьюніті: Колекціонери антикваріату, професійні хакери, топменеджери корпорацій. • Мають певний специфічний досвід: Люди, які користуються рідкісним софтом для авіадиспетчерів. • Повинні дати інсати на певні сенситивні теми: Люди з певними захворюваннями або специфічним стилем життя, які не готові відкрито відгукуватися на оголошення.

Порада для дослідника
Щоб уникнути однобокості (коли всі респонденти — друзі з однієї компанії), намагайтеся знайти декілька «насінин» із різних джерел (різні міста, різні компанії, різні вікові групи). Це зробить ваш «сніговик» стійкішим і об'єктивнішим. Але не забувайте що занадто різні “насінини” можуть сформувати занадто різні персони, тож зважайте на це будь-ласка.
🔥319
This media is not supported in your browser
VIEW IN TELEGRAM
20🔥7
Всім привіт.
Сьогодні буде день юайки.
Весь 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
47👍3👏1
This media is not supported in your browser
VIEW IN TELEGRAM
13🔥7
Історія про дивні замовлення)))))
А яке найтрешовіше замовлення ВИ робили?
Колористика - це другий кит будь-якої юайки. За допомогою кольору ви можете працювати з акцентами, виділяти необхідне та легше провести користувача продуктом до цілі.

Спочатку я хотів розповісти про колірне коло Йоханеса Іттена, про адитивну (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
Книга пана Іттена - “батька” колірного кола

А як щодо факапів, повʼязаних з кольором? Якщо вже задали тему треша - накидайте ваших треш-кейсів)
22🔥2
Доречі, от вам приклад, як можна підналажати з UI. Я певний час не читав повідомлення і потім дотягнув до 1 мілліона повідомлень в Телеграм. І ось як це виглядає на телефоні)

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