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

Figma: вертикальний wrap з’явився в Auto Layout Тепер при вертикальному Auto Layout елементи, які не поміщаються по висоті, автоматично переходять у нову колонку. Figma таким чином наближає Auto Layout до поведінки CSS Flexbox і спрощує створення адаптивних багатоколонкових компонентів. Також було анонсувано подію 30 вересня, де обіцяє показати нові функції, зокрема Figma Motion та нові можливості Creative Tools. ❖ Персональне менторство (900 грн/міс) • YouTube канал

😎 Потрібна допомога в дизайні? Три способи мати ментора поруч Chat, Meet, Mentorship — це не «три пакети опцій». Це три різні ролі, які я можу відігравати для тебе. 💬 Chat (900 ₴/міс) — досвідчений дизайнер у кишені. Не консультант за розкладом, а людина, якій можна написати в будь-який момент. Питання виникло — написав, за 48 годин маєш відповідь і розбір. Просто, без зайвого церемоніалу. 🎥 Meet (3000 ₴/міс) — регулярна звірка курсу. Раз на тиждень-два хтось досвідчений дивиться, чи туди ти рухаєшся. Усе з Chat + 3 живі зустрічі на місяць голосом, з екраном, по конкретних роботах. 🚀 Mentorship (20 000 ₴/міс) — персональний тренер. План розвитку, 8 зустрічей на місяць, участь у ключових рішеннях по кар'єрі й портфоліо. Веду одночасно лише кілька людей. ☎️ Разова консультація (1500 ₴, для Chat — 1000 ₴) — коли хочеться спробувати, перш ніж вирішувати. Кожен формат — інша глибина залучення, не «більше того самого». 📱 @dsgn_mentor_bot — обирай, що зараз тобі потрібно.

Видиме не означає розпізнаване: чому хороший компонент може не працювати в інтерфейсі Часто оцінюють UI-елементи окремо: чи достатній контраст, чи читабельний текст, чи зрозуміла іконка. Але є проблема візуального скупчення: елемент може залишатися добре видимим, але його стає складніше ідентифікувати, коли навколо багато схожих об'єктів. І тут рішення не завжди про «додайте більше повітря». На сприйняття впливають: → схожість елементів; → їхнє розташування; → групування; → форма, колір і розмір; → взаємозв'язки між сусідніми елементами. Тому кнопка, яка чудово працює в UI-kit, може загубитися на реальному екрані поруч із кількома іконками. Кожен компонент окремо хороший — але в композиції виглядає інакше. 👉 Тож під час перевірки UI варто питати «Чи зможе користувач швидко розпізнати його серед усього іншого?» ↘️ Детальніше тут #Стаття ❖ Персональне

Коли "Відкрити в застосунку» — стає проблемою Знайома ситуація: заходиш на мобільний сайт просто подивитися меню, товар чи бронювання — і замість цього отримуєш великий банер із пропозицією встановити застосунок. Постає просте питання: якщо вебсайт уже дозволяє виконати потрібну дію, навіщо змушувати користувача змінювати середовище? У застосунків справді є переваги: офлайн-доступ, інтеграція з пристроєм, сповіщення чи функції, які складніше реалізувати у браузері. Проблема починається тоді, коли встановлення стає самоціллю. 👉Пропозиція перейти в застосунок теж має зменшувати тертя, а не створювати його. Тому замість банера, який перекриває контент, логічніше: → показати пропозицію ненав’язливо; → пояснити конкретну користь; → дати можливість легко відмовитися; → не повторювати запит через кожні кілька сторінок. Іноді найкращий UX — це просто дозволити користувачу зробити те, заради чого він прийшов. 📌 Читати повністю #Стаття ❖ Персональне менторство (900 грн/міс) • YouTube канал

Колір знову стає голоснішим: PANTONE додає 224 нові відтінки Pantone розширив свою систему зіставлення кольорів, довівши бібліотеку майже до 9000 кольорів. Після тривалого періоду стриманих нейтральних айдентик це не обов’язково означає повернення до хаотичного максималізму. Навпаки — яскравіші кольори використовуються більш продумано, щоб точніше формувати настрій і впізнаваність. І є ще практична сторона: нові кольори розробляли з урахуванням їхнього відтворення на папері, в друці, упаковці та інших фізичних носіях. 📒 Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

І чим довше дивишся— тим цікавіше) 🔗🔗🔗 #Гумор ❖ Персональне менторство (900 грн/міс) • YouTube канал

Kombai Web Gallery — галерея вебдизайнів для пошуку референсів, де кожен приклад має характеристику використаних стилів, яку можна використовувати для аналізу дизайну та пошуку потрібної візуальної подачі. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Фідбек користувачів ≠ готова дорожня карта: як перетворити відгуки на рішення Користувацький фідбек легко перетворюється на хаотичний список «зробіть нам цю функцію». Але сам по собі він ще не показує, що справді варто змінювати. В матеріалі пропонується дивитися на фідбек як на сировину, яку потрібно структурувати: → Збирати з різних джерел: інтерв'ю, опитування, заявки в підтримку, аналітика, форуми. → Поєднувати якісні та кількісні дані. Інтерв'ю допомагають зрозуміти, чому виникла проблема, а аналітика — як часто вона трапляється. → Шукати закономірності. Одна скарга може бути випадковістю, але повторювана проблема вже сигналізує про системне тертя. → Шукати першопричину, а не просто виправляти окремі прояви проблеми. → І лише потім визначати пріоритети з урахуванням впливу на користувача, зусиль і цілей продукту. 👉 Фідбек стає корисним для продукту лише тоді, коли його можна зіставити з поведінкою користувачів і контекстом. ❖ Персональне менторство (900 грн/міс) • YouTube канал

У Opera прототип стає специфікацією: як змінюється робота дизайнерів У мобільних командах Opera дизайнери переходять від статичних концепцій до робочих кодованих прототипів. Раніше цикл виглядав так: Ідея → Figma → Інженерія → Перша збірка → Відгуки Тепер: Ідея → Figma → Прототип → Взаємодія → Фідбек → Ітерація → Інженерія На практиці взаємодії, які раніше могли обговорюватися днями, можна перевірити в прототипі за кілька годин. При цьому дизайнери Opera наголошують на важливості фундаментальних навичок. AI та код не замінюють дизайн — вони зменшують обсяг механічної роботи. 👉 Тож дизайнер поступово передає не лише макет, а перевірений досвід взаємодії. А швидші прототипи не замінюють фідбек користувачів — вони дозволяють отримати його раніше, вже на більш реалістичному продукті. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Що відзначили UX-дизайнери цього вересня? Цього місяця дві міжнародні премії оголосили проєкти, які вирізнилися своїми UX-рішеннями. UX Design Awards — міжнародна премія, що відзначає цифрові та фізичні продукти за якість користувацького досвіду. 🔹 LINQ — платформа Automata Technologies для автоматизації лабораторних процесів. Її UX побудований не навколо фізичного обладнання, а навколо наукового завдання користувача: він створює workflow через інтерфейс, а система бере на себе значну частину виконання. Fast Company Innovation by Design — щорічна премія, що відзначає інноваційні проєкти на перетині дизайну, технологій та бізнесу. 🔹 Moncler.com —Сайт задуманий як цифрове продовження фізичного магазину: AI допомагає створювати реалістичний вигляд і рух одягу, а взаємодія побудована навколо занурення у світ бренду. 🔹 Allegra RMS — система AirportLabs для управління ресурсами аеропортів, яка використовує AI для підтримки операційних рішень. ❖ Персональне менторство (900 грн/міс) • YouTube канал

CSS Container Queries: чому це не «нові медіа-запити» Контейнерні запити підтримуються 94% браузерів, але використовують їх рідше за медіа-запити. Легко сприйняти як майже те саме. Різниця принципова → @media дивиться на viewport — ширину екрана. → @container дивиться на доступний простір компонента. Уявіть картку шириною 300 px у бічній панелі на екрані 1920 px. @media бачить великий екран і може застосувати desktop-стилі, хоча картці бракує місця. @container реагує на ширину її контейнера. Автор пропонує: @media → макет сторінки @container → макет компонента Це корисно для карток, віджетів, форм, навігації, які можуть опинятися в контекстах. Компонент може змінюватися, коли контейнер стає ширшим, незалежно від пристрою. Для адаптивних компонентів правильніше питати не «який розмір екрана?», а «скільки місця доступно цьому компоненту?». Це робить їх незалежнішими від макета та придатнішими для повторного використання. 🔎 Детальний розбір ❖ Персональне менторство (900 грн/міс) • YouTube канал

Cursor Lab — безкоштовний генератор кастомних курсорів від українського дизайнера, де можна налаштувати колір, товщину й анімацію курсора в реальному часі та одразу отримати готовий код для CSS, JS або React. 🔗Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

Kitbitz Cyberpunk — безкоштовний набір мальованих векторних ілюстрацій для створення неонових вулиць, футуристичних магазинів і кіберпанкових світів. Має готові компоненти та змінні кольори для редагування. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Оновлення Figma Папки стали трохи зручніші: → Попередній перегляд тепер показує, які файли знаходяться всередині. → Кольори папок стали чіткішими. → Папки можна дублювати. А ще оновили UI Kit для iOS та iPadOS 27 — тепер із Duo. ❖ Персональне менторство (900 грн/міс) • YouTube канал

Як прибрати стрілки пагінації, не втративши навігацію? У бічній панелі сайту мало місця для кількох повідомлень, а стрілки пагінації разом із кнопкою закриття перевантажують інтерфейс. Рішення після десятків ітерацій — стос карток, де самі картки стають елементами керування. → Наведення на головну картку трохи підтягує наступну — підказує, що тут є інші. → Наведення показує назву картки. → Натискання переміщує на одну картку вперед. → Невидима зона натискання робить взаємодію зручнішою, а мишу не потрібно постійно переміщати до стрілок. Для анімації автор не намагається плавно переставляти картки: активна зникає, а потім переміщується в кінець черги. Кнопку закриття теж пояснює через рух: картки згортаються, а активна зменшується, сигналізуючи, що дія стосується всього стека. 📌Компактному інтерфейсу не завжди потрібно більше кнопок. Іноді краще продумати поведінку самої області взаємодії. ✔️Повний розбір ❖ Персональне менторство (900 грн/міс) • YouTube канал

Як за годину зрозуміти, чому ти застряг на Junior — і що з цим робити Ірина Ващенко (@iryno_vashchenko) звернулась із запитом, який чую дуже часто: відчуття, що UX-дослідження робляться «для галочки» і не впливають на фінальні рішення, плюс невизначеність — на якому рівні вона зараз і що робити далі. Провели годинну консультацію: розібрали її кейси, портфоліо, CV та позиціонування, знайшли конкретні розриви між дослідженням і рішенням, визначили реальний рівень і склали план дій. Ось такий відгук, прочитайте тут:

Після консультації я вийшла з чітким розумінням того, що мені зараз дійсно потрібно робити: не купувати чергові курси, а зробити акцент на переробці портфоліо, позиціонуванні, оновленні CV, веденні LinkedIn та додаванні рекрутерів — тобто перейти зі стану disabled в active 😁 А головне — мені дуже сподобався аналіз робіт: ти детально розібрав мої проєкти та надав конкретні висновки щодо того, що варто покращити. Що особливо сподобалося: Чіткий розбір Пояснення «чому» Конкретика щодо покращень Розуміння, куди рухатися далі Також дуже відгукнулася комунікація, віддача, щирість та прямота, яку я дуже ціную. Дякую! Єдине, чого не вистачило з мого боку, — це попросити зробити запис зустрічі, якщо це було можливо))

👍 Для замовлення та за консультаціями можете писати в @dsgn_mentor_bot.

Дизайн-токени теж можуть перетворитися на хаос Коли дизайн-система виростає до сотень токенів, головним питанням стає не лише те, як їх назвати, а наскільки легко буде знайти потрібний, зрозуміти його призначення та відрізнити від схожих. Автор пропонує розглядати токени на трьох рівнях: → Примітивні — описують саме значення: color-blue-blue_600, spacing-md, radius-full. → Семантичні — описують намір: наприклад, color-background-primary. Такий токен може посилатися на примітивний, але його назва вже не залежить від конкретного кольору. → Компонентні — описують використання в конкретному компоненті: наприклад, колір фону основної кнопки у стані hover. Тобто логіка така: значення → намір → використання Якщо зміниться брендове синє, достатньо змінити зв’язок на рівні примітивного/семантичного токена, а не шукати цей колір у десятках компонентів. Є й цікавіший нюанс: довші та «детальніші» назви не обов’язково 📚Повний матеріал про систему неймінгу токенів ❖ Персональне менторство (900 грн/міс) • YouTube канал

Переможці DesignRush Design Awards Щомісяця американська платформа DesignRush відзначає найкращі роботи у сфері дизайну. Журі обирало переможців у шести категоріях — від сайтів і логотипів до упаковки та відео. 🔹 Найкращий дизайн вебсайту — Off+Brand Персональний сайт Тревора Ноа поєднує паперовий колаж, інтерактивні елементи та голос артиста, автора й ведучого. 🔹 Найкращий дизайн логотипу — Brand Brothers Для фінансового проєкту Node студія створила кастомний логотип із геометричних форм, який працює і в цифровому середовищі, і на плакатах. 🔹 Найкращий дизайн додатку — Pixion Застосунок PISTA синхронізує неформальні автоперегони, поєднуючи мобільний інтерфейс із зовнішнім GNSS-пристроєм. Серед головних акцентів — ручна робота, фізичні матеріали та дизайн, побудований навколо характеру бренду. 📎 Детальніше ❖ Персональне менторство (900 грн/міс) • YouTube канал

Чому кнопку «Вийти» ховають дедалі глибше Для входу сучасні сервіси вигадують усе менше дій: Face ID, посилання, вхід одним натисканням. А от щоб вийти з акаунта, іноді доводиться пройти цілий квест. Netflix, Instagram, Amazon та інші сервіси ховають вихід серед налаштувань, меню профілю й додаткових пунктів. І це не завжди просто недолік навігації. Проблема в тому, що для продукту вихід із системи може означати втрату користувача. У результаті виникає дивна асиметрія: користувача всіляко переконують, що хороший UX — це мінімум дій, але цей принцип раптом перестає працювати, коли людина хоче піти. 📌З'являється питання: чи справді дизайнери створюють зручний інтерфейс, якщо зручність працює лише в інтересах продукту? 🚪Читати повний матеріал про кнопку «Вийти» ❖ Персональне менторство (900 грн/міс) • YouTube канал

Нові шрифти 2026 Минулий місяць виявився доволі продуктивним місяцем для типографіки. Серед нових гарнітур, які варто зберегти для майбутніх проєктів, — Lingo, Sektor, F37 Slabhead і Tuffo. Вони можуть стати у пригоді для брендингу, пакування, айдентики, заголовків та інших завдань, де типографіка має формувати характер візуальної системи. 🔡 Дивитися шрифти ❖ Персональне менторство (900 грн/міс) • YouTube канал