UXPUB 🇺🇦 Дизайн-спільнота: Frorex

Кейс: Як я перетворив 30 варіантів компоненту налаштувань в 1 варіант і зробив його ще гнучкішим

Edward Korytsky — Thu, 30 Apr 2026 19:08:50 +0000

Контекст і хід робіт

На етапі вайрфреймів ми повністю затвердили логіку з клієнтом і базовий стиль.

Після цього я почав налаштовувати дизайн-систему та паралельно збирав hi-fidelity екрани

Коли дійшов до меню налаштувань, реалізував його як окремий компонент з 10 варіантами під різні сторінки

На етапі адаптації з’явилось ще 10 варіантів для мобайлу.

І тут стало очевидно що планшет ще +10, а підтримка і правки перетворяться на повний треш.

Приблизно ось так виглядав старий компонент

Проблема

Поточна реалізація не масштабувалась і створювала технічний борг.

Основні болі:

3 девайси (Desktop / Tablet / Mobile) в одному компоненті без чіткої структури
Дублювання елементів, які доводилось правити вручну
Відсутність стратегії наповнення контентом усередині компоненту
Кожна нова правка = потрійна робота

Що потрібно було

Компонент має бути:

єдиним
гнучким
контент-незалежним
Адаптив і наповнення мають керуватись системно, а не через копіювання.

Рішення і підхід

Я повністю переосмислив логіку компоненту.

Компонент зі slot-підходом
Основний компонент меню має slot
У slot підставляються готові компоненти секцій
Контент винесений окремо
Кожна сторінка налаштувань = окремий компонент наповнення
Його можна незалежно редагувати і перевикористовувати
Також кожну таку сторінку можна адаптувати окремо.
Адаптив через токени
Desktop / Tablet / Mobile керуються токенами
Компонент автоматично адаптується без дублювання
Допоміжний навігаційний компонент
Створив компонент-обгортку на базі основного
В ньому зібрані всі сторінки одразу для швидкого перемикання і тестування

А тепер давайте детальніше по кожному моменту

Почав я з брейншторму в режимі максималізму.

Мета була одна - спроєктувати компонент так, щоб він покривав майже всі можливі сценарії, а не лише поточні екрани.

Заздалегідь заклав такі вимоги:

Гнучке наповнення контенту без дублікатів
Адаптація всього компоненту і його вмісту без створення окремих варіантів або з мінімальною їх кількістю
Підтримка вспливаючих вікон підтвердження
Різна навігація для різних девайсів

Першим і основним кроком стало розділення компоненту на слоти (Доречі тут використані не нативні слоти від фігма, а зроблені власноруч).

Новий компонент зі слот підходом. Має тільки 1 варіант і все інше налаштовано через токени і слоти

Slot-підхід дав:

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

Кожна сторінка налаштувань існує окремо і підставляється в слот, а не живе всередині головного компоненту.

Компоненти сторінок для заміни в слот. (Всього таких 10)

Адаптив через токени і структурні компоненти

Наступним кроком я вирішив не робити адаптив через варіанти. Замість цього адаптація була закладена на рівні системи.

Основою стали: дизайн-токени та структурні компоненти, які керують головним компонентом.

Як це працює

Ключові параметри компоненту - відступи, розміри, поведінка навігації - винесені в токени.

При зміні брейкпоінту підтягується відповідний набір токенів та Структурні компоненти змінюють вид без дублювання логіки і контенту

Винесення окремих структурних елементів в компоненти. Адаптив відбувається на базі конкретного елеменета.

Токени для адаптації.

Що це вирішило

Один і той самий компонент працює для Desktop, Tablet і Mobile
Адаптив перемикається автоматично
Відпала потреба створювати окремі варіанти під кожен девайс
Контент залишається незмінним і не ламається при адаптації

Заміна слотів і навігаційний компонент

Після цього робота з компонентом стала максимально простою.

У slot підставляється готовий компонент конкретної сторінки а Базовий компонент меню при цьому не змінюється взагалі

Таким чином сторінка існує окремо, але повністю підкоряється спільній логіці і адаптиву.

Готовий компонент з підтягнутим слотом.

Навігаційний компонент для зручності

Щоб не перемикати сторінки вручну, я створив додатковий навігаційний компонент поверх основного.

Він містить усі сторінки налаштувань одразу, дозволяє швидко перемикатися між ними та не потребує перевідмальовування або дублювання компонентів

Що це дало

Швидкий перегляд і тестування всіх сценаріїв
Мінімум ручних дій
Збереження єдиної структури і логіки
Комфортну роботу з компонентом навіть при великій кількості сторінок

Документація для дизайнерів і розробників

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

Документація покриває:

структуру компоненту і логіку слотів
правила підключення готових сторінок
поведінку адаптиву через токени
сценарії навігації і використання
обмеження і принципи масштабування

Цінність документації

Дизайнери швидко розуміють, як додавати нові сторінки без дублікатів
Розробники отримують прозору і передбачувану структуру
Зменшується кількість питань і помилок
Рішення живе довше за конкретний проєкт або команду

Загальний результат

Цей підхід дав відчутний системний ефект:

1 універсальний компонент замість 30+
Повністю прибрані дублікати
Автоматичне перемикання адаптиву
Швидке редагування без ризику щось зламати
Робота з компонентом стала у ~4 рази простішою
Компонент легко масштабується під нові сторінки і девайси

QR-коди без помилок гайд для дизайнерів

Edward Korytsky — Thu, 30 Apr 2026 04:57:38 +0000

QR-код давно перестав бути просто технічним інструментом. Людина бачить постер, упаковку або візитку, сканує код - і за секунду опиняється на сайті, в чаті або в додатку.

Саме тому QR-код потрібно розглядати як частину UX, а не просто чорний квадрат у макеті. Якщо його зробити неправильно, виникають дві проблеми: він або погано сканується, або псує естетику дизайну.

Щоб зрозуміти, як виглядає правильна реалізація, достатньо подивитися на QR-коди великих платформ.

Наприклад, у QR-кодах Telegram, iOS або Instagram завжди є одна спільна риса: вони одночасно функціональні і вписані у дизайн системи продукту.

Це і є головна задача дизайнера.

Технічна база, без якої нічого не працює

Перш ніж думати про стиль, потрібно зрозуміти фундамент. QR-код - це математична структура, і якщо її порушити, він перестає працювати.

Найважливіше правило - контраст. Класичний варіант працює найкраще: темний код на світлому фоні. Камера телефону повинна миттєво розпізнати структуру.

Другий критичний момент - quiet zone. Це чистий простір навколо коду. Він повинен бути щонайменше 4 модулі шириною. Без цього камері складніше зрозуміти де починається і закінчується код.

Також важливий розмір. Для друку мінімальним безпечним розміром вважається приблизно 2×2 сантиметри, але для постерів або білбордів потрібно тестувати сканування з реальної дистанції. Код, який виглядає нормально на екрані, може бути абсолютно нечитабельним на стіні.

Ще один момент - формат файлу повинен бути SVG / PDF. Растрові PNG-файли часто псують різкість і можуть ускладнити сканування.

І останнє правило - тестування. Код потрібно перевіряти на різних камерах: iPhone, Android, старі моделі телефонів. Якщо він не сканується миттєво*, значить дизайн потрібно переробляти.

Типи QR-кодів: статичні та динамічні

QR-коди бувають двох основних типів.

Статичний QR-код містить зашите всередині посилання. Воно записується прямо у код і більше не може змінюватися. Перевага такого варіанту - простота і довговічність. Якщо сайт працює, код працює завжди.
Динамічний QR-код працює через проміжний сервер. Фактично код веде не на кінцеве посилання, а на спеціальний редирект. Це дозволяє змінювати URL навіть після друку матеріалів*. Саме тому такі QR-коди часто використовують у маркетингу.

У динамічних кодів є ще одна цікава функція. Вони можуть визначати операційну систему пристрою і відкривати різні посилання. Наприклад:

користувач на iPhone відкриє App Store

користувач на Android потрапить у Google Play

Зазвичай такі сервіси працюють за підпискою, але для великих кампаній це дуже корисний інструмент.

Дизайн QR-коду: баланс між стилем і функціональністю

Коли технічна база зроблена правильно, можна працювати зі стилем.

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

Проте тут важливо не перейти межу.

У QR-коді є три великі квадрати в кутах - finder patterns. Вони допомагають камері визначити орієнтацію коду. Якщо їх змінити або сильно стилізувати, код може перестати скануватися.

Також небезпечно зменшувати контраст, ставити код на шумний фон або використовувати складні градієнти без тестування.

UX-помилка, яку роблять майже всі

Більшість дизайнерів думають тільки про вигляд QR-коду і забувають про головне - контекст використання.

QR-код без пояснення практично ніхто не сканує. Людина повинна зрозуміти що вона отримає після сканування.

Тому замість беззмістовного напису:

Scan me

краще використати чітку цінність:

Отримай доступ до турнірної сітки
Забронюй місце за 10 секунд
Приєднайся до закритої спільноти

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

Коли QR-код розміщується у цифровому інтерфейсі, особливо на телефоні, виникає інша UX-задача. На відміну від постера або упаковки, користувач не може відсканувати код тим самим телефоном. Тому QR-код у мобільному інтерфейсі потрібно сприймати не як інструмент сканування, а як контейнер для даних, які людина може швидко скопіювати.

У таких випадках важливо підказати, що QR-код можна натиснути. Найкраща практика - додати короткий текст або мікро-interaction, який пояснює дію. Наприклад:

Tap to copy
Copy address
Copy link
Tap to copy wallet address

Після натискання повинна бути підказка для копіювання "скопіювати дані в буфер обміну" і показати коротке підтвердження, наприклад: "Copied to clipboard". Це робить взаємодію зрозумілою і швидкою.

Такий підхід особливо поширений у фінансових та крипто-продуктах. Наприклад, у криптогаманцях QR-код містить адресу гаманця, але поруч завжди є можливість скопіювати її одним тапом. Те саме використовується у фінтех-додатках, де QR-код може містити номер картки, IBAN або адресу для платежу. Користувач може або показати QR-код іншому пристрою, або просто натиснути і скопіювати дані.

З точки зору UX тут важливі три речі.

візуальна підказка, що елемент клікабельний. Це може бути текст під кодом, іконка копіювання або легка анімація при натисканні.
миттєвий фідбек після дії. Людина повинна зрозуміти, що дані скопійовані.
Показ текстового дублювання інформації. Наприклад, частину адреси гаманця або номер картки, щоб користувач міг перевірити, що саме копіюється

У результаті QR-код у мобільному інтерфейсі перетворюється з пасивного елементу на зручний інструмент передачі даних - або через сканування іншим пристроєм, або через швидке копіювання одним натисканням.

Стратегія використання QR-кодів

Ефективність QR-коду сильно залежить від контексту.

На івентах код повинен бути великим і читабельним з кількох метрів. Візуальний шум навколо потрібно мінімізувати, щоб камера легко його знаходила.

У соціальних мережах QR-коди використовуються рідше, тому що люди вже знаходяться у цифровому середовищі. Там часто простіше використовувати короткі посилання.

Типові помилки, які псують навіть хороший дизайн

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

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

Також часто забувають пояснити навіщо сканувати код, або ведуть користувача на сторінку, яка погано працює на мобільному пристрої.

У такому випадку навіть ідеальний дизайн не врятує досвід.

Простий професійний тест перед публікацією

Перед тим як відправляти макет у друк або публікувати його, варто задати собі кілька простих питань.

Чи сканується код менш ніж за секунду?
Чи працює він при різному освітленні?
Чи можна прочитати його з тієї дистанції, де людина реально стоїть?
Чи є зрозумілий заклик до дії?
І чи є резервний URL, якщо QR-код не спрацює?

Якщо всі відповіді позитивні - QR-код готовий.