Новини, знання, навчання в UI/UX та графічному дизайні [Design.Hub]

Скільки часу ти витрачаєш у Figma на те, що можна не робити руками? Я 15 років у продуктовому дизайні, 8 мобільних банків як лід. І от що помітив: половина рутини - перейменувати шари, прив'язати кольори до змінних, зібрати однакові кнопки в 5 станах, перевірити, чи нічого не поплило. Тому я зробив безкоштовні плагіни для Figma: - VooDoo Maker - дизайн-система з одного кольору за хвилину: 150+ змінних, світла і темна тема, 12 компонентів зі станами - Code Runner - Claude пише скрипт, плагін виконує його за секунду (51 хардкод-хекс у токени одним кліком) - Design System Doctor - знаходить усе, що не прив'язано до токенів Зібрав воркбук, як їх використовувати разом: промпти, готові скрипти і демо-проєкти під кнопкою «Копіювати». 🔗 Забрати безкоштовно Більше про Figma, Claude і автоматизацію дизайну пишу у своєму каналі: https://t.me/ux_hero

Text Effects by Colorion — безкоштовна бібліотека з 66 CSS-ефектами для тексту: градієнти, неон, глітч, хром, 3D, анімації та інші стилізації. Код або промт кожного ефекту можна скопіювати. #Корисне ❖ Персональне менторство (900 грн/міс) • YouTube канал

Чому користувачі йдуть із продукту, навіть якщо UX хороший? Причина не завжди в навігації чи складному онбордингу. Можливо, новий продукт просто не дає достатньої переваги, щоб людина змінила звичку. Що перевірити перед наступним редизайном? ▪️Визначте, чому користувач має обрати ваш продукт замість звичного рішення. ▪️Знайдіть момент, коли люди перестають повертатися, і з’ясуйте причину — через аналітику та інтерв’ю. ▪️Перевірте, чи можна розв’язати проблему простіше, замість додавати нову функцію. ▪️Оцінюйте результат за тим, чи стало користувачеві легше досягти своєї мети, а не лише за кліками, сесіями чи оцінками зручності. 📒 Стаття повністю #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Дизайнери найчастіше серед айтівців мають другу роботу За даними зарплатного опитування DOU за травень–червень 2026 року: — 28,9% графічних дизайнерів мають додаткову роботу — це найвищий показник серед ІТ-спеціалізацій. — 15% дизайнерів підпрацьовують на фрилансі — це найбільша частка серед досліджених напрямів. — Медіанна зарплата у категорії Graphic/Motion/Web/Other Design — $1600, а серед тих, хто має додаткову роботу, — $1800. ❖ Персональне менторство (900 грн/міс) • YouTube канал

В Anthropic дизайнери працюють із кодом, а не лише з макетами У команді Anthropic понад 80% коду, станом на травень 2026 року, було написано Claude. Це змінює й роботу дизайнерів: прототипи та функції можна створювати значно швидше, а головним завданням стає вибір правильного рішення. ✏️Як це працює на практиці? — Більше варіантів за менший час. Замість трьох макетів у Figma дизайнер може генерувати десятки інтерактивних HTML-прототипів. — Дизайнери створюють власні інструменти. Наприклад, UX-дослідник розробив систему опитувань та аналітичну панель приблизно за тиждень, а не місяці — Більше прототипування. Команда частіше проводить дизайн-критики й обговорює робочі прототипи замість того, щоб покладатися лише на довгі специфікації. 📌Цінність дизайнера дедалі більше залежить від уміння оцінювати рішення, розуміти потреби користувачів і визначати, що взагалі варто розробляти. 📘Читати повний матеріал #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Energy Icons — безкоштовна бібліотека з 2000 іконок на тему енергетики, клімату, транспорту, промисловості та інших суміжних сфер із налаштуванням розміру та стилю (Regular або Bold). #Корисне ❖ Персональне менторство (900 грн/міс) • YouTube канал

Figma представила нові можливості на Config India 🚀 Усі оновлення спрямовані на те, щоб дизайнери й розробники могли працювати з дизайном, кодом і ШІ в більш узгодженому робочому процесі. → Code Layers (відкрита бета) — переносьте код вебсайтів у Figma через Chrome-розширення та працюйте з кодом і дизайном безпосередньо на canvas. → Specs (відкрита бета) — новий формат для Markdown, що допомагає зберігати й поширювати контекст між інструментами Figma та спільно працювати з документацією. → Guidelines (відкрита бета) і Code Sources (закрита бета) — нові інструменти для об’єднання дизайн-системи та надання AI-агентам контексту про правила дизайну й вихідний код. → Figma Make + Payload — створюйте й запускайте проєкти з реальними даними та контентом. Також Figma оголосила про 20 нових MCP-партнерів, серед яких Linear, Notion, ClickUp, JetBrains Junie, Cline, Zed і Microsoft 365 Copilot. 📎Читати ❖ Персональне менторство (900 грн/міс) • YouTube канал

Чому логотип може виглядати добре на екрані, але не працювати в реальності? Логотип може мати вдалу композицію та красиву типографіку, але втрачати читабельність після зменшення або погано відтворюватися на різних матеріалах. У матеріалі виділяють кілька проблем, які варто перевіряти: ▫️ Надмірна деталізація та ефекти. Дрібні елементи й тіні можуть зникати або зливатися в малому розмірі. ▫️ Слабка читабельність. Текст, який добре видно на великому макеті, може стати нерозбірливим на етикетці чи аватарці. ▫️ Залежність від фону. Логотип має залишатися впізнаваним і на світлому, і на темному тлі. Професійність логотипа визначається не лише тим, як він виглядає на презентаційному макеті, а й тим, наскільки надійно працює в реальних умовах. #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Microsoft додасть до Word шрифт на основі почерку Мікеланджело Microsoft представила Michelangelus — шрифт, створений агенцією Studiogusto на основі рукописів Мікеланджело, що зберігаються в архівах Ватикану. Дизайнери дослідили форму літер, пропорції та інтервали між символами. Оскільки в рукописах не було повного алфавіту й цифр, відсутні знаки відтворили за історичними написами, зокрема на скульптурі «П’єта». Шрифт містить понад 2 000 символів і чотири накреслення: звичайне, курсивне, жирне та жирне курсивне. Він уже доступний для завантаження, а до кінця 2026 року його планують додати до Microsoft 365 — Word, Excel і PowerPoint. 📂 Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

🔔 Знайти референс. Зібрати інтерфейс. Оживити в коді з AI.

Про всі три етапи пишу в UX/UI by SHAIN - я Lead Product Designer, 7+ років у продукті.

→ Референси під конкретні блоки: від hero до футера → UI-бібліотеки, анімації і фішки Figma → Claude, Codex і мої робочі сценарії з AI - наприклад, як запустити їх в одній сесії і що я їм делегую Пробую сам і пишу, що б не став ставити собі 🙃 Wellcome 👉 підпишись на канал

Як називати компоненти, токени та функції інтерфейсу: практичний гайд Невдалі назви в дизайн-системі — це не просто питання порядку. Вони можуть ускладнювати роботу команди, повторне використання компонентів і навіть розуміння функцій користувачами. На що варто звернути увагу: 🏷 Шари й компоненти: назви мають бути короткими, зрозумілими та послідовними, а не описувати лише зовнішній вигляд елемента. 🧩Дизайн-токени: продумана структура назв допомагає орієнтуватися в системі, особливо коли вона охоплює кілька брендів і тем. ✔️ Функції інтерфейсу: назва має передавати цінність для користувача. Якщо людина не розуміє, що означає функція, їй складніше знайти її та почати використовувати. Дизайнер, розробник і користувач можуть по-різному називати ту саму річ — і це стає проблемою, коли команда не має спільної термінології. 📖 Детальніше про неймінг #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Персоналізація в UX: де межа між турботою та стеженням? Персоналізований інтерфейс може бути зручним, але якщо він використовує дані з інших застосунків без відома людини, це викликає недовіру. У статті UXmatters автор пропонує три принципи: ▪️ Враховуйте дії, а не вгадуйте особистість. Якщо користувач увімкнув компактний вигляд, запропонуйте його й на наступному екрані — не створюйте психологічний портрет за його поведінкою. ▪️ Пояснюйте зміни. Наприклад: «Показано, бо ви обрали цей проєкт». Користувач має розуміти, чому інтерфейс адаптувався. ▪️ Залишайте контроль. Дозволяйте скасувати зміни, редагувати налаштування й керувати тим, що система запам’ятовує. 📌Головний принцип: персоналізуйте досвід відповідно до поточного завдання, а не намагайтеся знати про людину якомога більше. #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Як дизайнери використовують AI у 2026 році Contra Labs опублікувала Creative Intelligence Report 2026 — дослідження використання AI у креативних індустріях, для чого опитала понад 150 000 креативних фахівців Відсоток тих хто використовує AI у роботі: • Product design — 73% • Web design — 72% • Graphic design — 66% Найпопулярніші AI-інструменти за активністю користувачів на платформі за останні 3 місяці: • ChatGPT — 29,3% • Claude — 27,1% • Google Gemini — 14,1% • Figma Make — 9,8% • Midjourney — 7,8% Для чого дизайнери залучають AI? Для пошуку й перевірки ідей, аналізу конкурентів, розробки концепцій, оцінки дизайн-рішень і перевірки відповідності брифу. Остаточні рішення та доопрацювання залишаються за дизайнером. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Як прибрати AI-slop із дизайну Вайбкодинг дозволяє швидко отримати готовий інтерфейс, але часто результат виглядає доволі шаблонно. Щоб цього уникнути авторка пропонує 3 рівні «деслопіфікації»: • Прибрати зайве — конкретно вказати AI, що видалити або змінити: кольори, шрифти, графіку, щільність. • Задати естетику — використовувати референси або чітко описувати бажаний стиль. • Спочатку спроєктувати, потім кодити — для повноцінних продуктів створити структуру й дизайн у Figma, а вже потім дати AI використовувати його як орієнтир. 💬 AI може швидко зібрати інтерфейс, але не визначає, яким він має бути. Якщо рішення не продумані дизайнером, швидкість генерації лише швидше приводить до шаблонного результату. #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Олімпіада-2032 представила логотип із какаду В основі айдентики — какаду, характерний для Квінсленду птах, важливий також для корінних народів Австралії. Дизайн побудований навколо його чубчика: контури повторюють форму штату Квінсленд, а п’ять пір’їн розділені на групи 3+2 — відсилання до 2032 року. Усередині емблеми також розміщені олімпійський або паралімпійський вогонь. Для двох подій використали різних птахів: 🩷 рожевого какаду — для Олімпіади; 💛 жовточубого — для Паралімпіади. Айдентику розробили VML, Landor, Black Card та Verian. Один локальний образ працює одразу на кількох рівнях — місце проведення, рік, характер регіону та відмінність між двома подіями. 📂 Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

Figma Agent: як дизайнери використовують його не лише для генерації Figma показала, як команди Uber, Granola та Atlassian використовують Agent у реальній роботі. Що він бере на себе: • створює документацію та аналізує компоненти дизайн-систем; • переносить фідбек із зустрічей прямо на полотно; • генерує варіанти текстів і допомагає швидко ітерувати дизайн; • працює з анімацією в межах дизайн-системи. Агента використовують не для заміни дизайнера, а щоб прибрати тактичну рутину й залишити більше часу на дослідження, рішення та експерименти. __________________ 🎬 Також тепер доступна текстова анімація та аудіо у Figma Motion. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Головна навичка продуктової команди — не придумувати більше, а краще вирішувати UX-дослідження показало проблему, аналітика вказує на інше, бізнес хоче третє — і при цьому ресурсів вистачає лише на частину роботи. UX Design Institute виділяє 5 труднощів, з якими найчастіше стикаються продуктові команди: • поєднання потреб користувачів із бізнес-цілями; • пріоритизація — зокрема вміння сказати «не зараз»; • робота якісно навіть за обмеженого часу й бюджету; • використання AI без передачі йому власного судження; • прийняття рішень на основі неповних або суперечливих даних. Особливо актуальна думка: хороший UX не завжди означає правильний пріоритет. Виправлення проблеми юзабіліті може бути корисним користувачам, але програти в дорожній карті функції, яка безпосередньо впливає на бізнес-результат. 📔Повний матеріал #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Bencho — бібліотека інтерактивних React-компонентів: від hover-ефектів і drag-взаємодій до каруселей та завантаження файлів. #Корисне ❖ Персональне менторство (900 грн/міс) • YouTube канал

CorelDRAW додає AI-генерацію редагованих векторів У вересневому оновленні CorelDRAW з’явився інструмент «Текст у вектор». Він генерує не просто зображення, а векторні об’єкти, які можна розбирати на криві, вузли, форми та окремі елементи. Цікавіше працює генерація за референсом. Наприклад, можна дати власну ілюстрацію або логотип і попросити AI створити нові об’єкти в подібному стилі. У демонстрації Corel на основі авторської ілюстрації створювали значки зайчика, птаха та змії, після чого їх можна було редагувати вручну. Це потенційно корисніше за генерацію готової картинки: AI створює відправну точку, а не фінальний результат. Таким чином можна прибрати частину рутинної роботи зі створення варіацій, залишивши контроль над фінальним дизайном у людини. Але є нюанс: генерація ще може втрачати окремі деталі референсу, тому ручне доопрацювання все одно потрібне. 📂 Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

Airbnb перебудовує пошук: менше фільтрів, більше персоналізації Airbnb представив осіннє оновлення, у якому пошук стає більш персоналізованим і соціальним. Що видно саме з точки зору продуктового дизайну: • Соціальні рекомендації. Користувачі зможуть бачити, де подорожували їхні контакти, читати їхні відгуки та додавати рекомендації до власних списків. • Персоналізована карта. Не лише житло, а й заброньовані послуги та враження. • AI у пошуку. Airbnb додає інструменти для пошуку, фільтрації, описів і порівняння оголошень. AI-порівняння має з’явитися пізніше цього року. По суті, Airbnb намагається змінити сам підхід до вибору житла: не просто показати десятки варіантів, а допомогти швидше визначитися — через рекомендації знайомих, карту, відгуки та автоматичне порівняння. ▫️Чим більше система персоналізує вибір, тим важливішим не перевантажити користувача рекомендаціями та AI-підказками. ❖ Персональне менторство (900 грн/міс) • YouTube канал