🔥 Figma знову радує. Сьогодні оновлення торкнулося Variables.

То що там?
- Можна копіювати й вставляти змінні між колекціями — менше рутинної роботи!
- Швидке створення змінних прямо при виборі — ручний труд, прощавай!
- При ховері можете побачити підказки зі значеннями та назвами — зручно, як ніколи.
- Табуляція через вікно авторизації, щоб не заплутатися в довгих списках.
- Більше гнучкості у налаштуваннях: доступність вводу та зміна розміру стовпців.

@berestux

Не брехунькайте☝🏻

@berestux

В продовження вчорашньої новини про Variables, зібрав корисні матеріали як для тих хто ще тільки з ними розбирається, так і для тих хто вже давно практикує.

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

- Стаття від UX.pub українською, на випадок якщо туторіал англійською не підходить

- Variables playground. Плагін/Шпаргалка від фігми як використовувати змінні для кольору, рядки, числа та логічного значення, щоб адаптувати свій дизайн до різних контекстів та наблизити його до коду

- Багатофункціональний комплект атомарної дизайн-системи для Figma з купою налаштованих компонентів, light & dark mode, а також повністю налаштовані стилі та Variables.

І памʼятайте, Variables не такі страшні як можуть здатися на перший погляд, розібратися можна за пару годин 😬

@berestux

Не забувайте пріоритезувати ваші гіпотези☝🏻

@berestux

🔥 Список дійсно важливих навичок для джунів UX/UI-дизайнерів

1. Думати сценаріями 🤔
Припиняйте просто малювати окремі екрани — це добре лише для дріблшотів. Користувач взаємодіє не з одним екраном, а з їх послідовністю. Створюйте сценарії, задаючи собі питання: «Що станеться, якщо користувач натисне тут?» для кожного інтерактивного елемента.

2. Обирати оптимальні інтерфейсні патерни 🎛️
У дизайнера має бути «бібліотека патернів» у голові: які UI-елементи використовуються в певних ситуаціях. Наприклад:

• Вибір часу на мобільному = барабанчик;
• Навігація у вебі = горизонтальне меню.

Новачки часто намагаються винайти велосипед, як дитина, яка, не знаючи багатьох слів, вигадує щось своє: «жужжиха», «зубоческа». Заспокойте фантазію, звертайтеся до гайдів, перевірених джерел і топових сервісів.

3. Малювати чистий і консистентний UI 🎨
Це те саме, що пункт 2, але стосується візуального стилю.
Від вас не очікують шедеврів, але ваш інтерфейс має бути акуратним.

Дотримуйтесь правил:
• Система відступів;
• Ієрархія шрифтів;
• Акценти лише там, де це потрібно;
• Принцип кольорової схеми «60-30-10».

Референси — ваші друзі. Беріть натхнення з гайдів, Mobbin, робіт із Awwwards тощо.

Правило копіювання: запозичуйте лише один елемент із кожної роботи (відступи, розміри, кольори або шрифти).

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

А як щодо досліджень?
Джуна рідко допускають до досліджень, особливо у великих компаніях. Там цим займаються UX-дослідники.

Що робити?
Вивчайте теорію, тренуйтеся на петпроєктах і не хвилюйтеся.

А артефакти (CJM, юзерфлоу, персони)?
Ці інструменти допомагають у попередній підготовці до дизайну (а не для того, щоб вразити керівництво).

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

А Webflow чи 3D?
Не витрачайте час на це, якщо це не ваше хобі.

Що ще?
• Базова логіка.
• Адекватність.
• Бажання працювати.
• Ну і портфоліо! 😊

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

@berestux

“Дизайн може змінити світ”

Дизайнери:

@berestux

Прихований скарб UX/UI №1

Pull-to-refresh — це жест у користувацькому інтерфейсі, коли користувач проводить пальцем вниз, щоб вручну оновити вміст екрану, наприклад, завантажити нові дані. Якщо до цього додається тягуча анімація, процес стає більш веселим та інтерактивним: елемент розтягується або взаємодіє з екраном, додаючи елемент фану і покращуючи користувацький досвід.

Приклад

#прихований_скарб_uxui

@berestux

Клуб на Кирилівській відзначає п'яту річницю.

Але справа не в тому, зацініть який класний промо 3D motion зробив Alex Haro

@berestux

Прихований скарб UX/UI №2

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

#прихований_скарб_uxui

@berestux

dev.ua написали статтю по мотивам мого посту Важливі навички для джунів UX/UI-дизайнерів 😎

@berestux

👉 Які навички дійсно важливі для junior UX/UI-дизайнерів. Перелік від тім-ліда

Олександр Берест, UX/UI Designer та Team Lead, склав список навичок, які він вважає дійсно значущими для початківців у UX/UI-дизайні. Ось, що він пропонує.

@devukraine

Upscale — дуже корисний плагін котрий покращує будь яке зображення в Figma, підвищуючи його роздільну здатність

Встановити плагін

@berestux

🤔 Продуктовий лід vs артдиректор: у чому різниця

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

Якщо звернутися до базової логіки та визначень з Кембриджського словника, то отримуємо:
• Lead — це той, хто керує групою людей, організацією чи ситуацією; або той, хто показує, що і як робити.
• Director — це той, хто керує або контролює певний відділ чи напрям діяльності в організації.

Здавалося б, це одне й те саме, але є нюанси через приставки Product та Art. Відповідно до визначень зі словника:
• Product Lead Designer — це той, хто керує продуктовими дизайнерами і показує їм, як працювати. Якщо ж ти у команді один, то кого ти ведеш? Хіба що продукт у безодню? 🤡
• Art Director — це той, хто керує або контролює “художній” відділ. Але в інтерфейсному дизайні далеко не всі завдання можна назвати художніми.

Що я бачу на практиці та у вакансіях:
• 🥼 Продуктовий лід — це керівник напряму проектування інтерфейсів.
Він — “граючий тренер”, який працює зі стратегією та завданнями команди проектувальників і час від часу сам відкриває Figma (на відміну від дизайн-менеджера).
• 🎨 Артдиректор — це керівник художнього напряму.
Він займається стратегією стилю, бренду, позиціонування і працює з завданнями команди креативних комунікацій. Його зона відповідальності — ключові віжуали та креативи, які виходять за рамки UI.

Це абсолютно різні посади з різним фокусом, які працюють у різних командах і приносять користь продукту з різних боків. Чому артдиректори називають себе продуктовими лідами і навпаки, я не знаю. Можливо, просто подобається, як це звучить😈

@berestux

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

Можна самостійно контролювати нові об’єкти: їхню форму, колір, розмір тощо.

Працює прямо в браузері – посилання

Також можна встановити на комп’ютер – посилання

@berestux

Tech Lead, Design Lead and Product Manager

@berestux

Прихований скарб UX/UI №3

На Airbnb при додаванні гостей, вони візуалізуються як 3D модельки. Це сприяє більшому емоційному залученню, і максимально зрозумілому стану системи.

#прихований_скарб_uxui

@berestux