🔥 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