Блог

Топ корисних інструментів і ресурсів для UI/UX дизайнерів

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

Мене звати Костя Лавренюк, я UI/UX Designer в ІТ-компанії Boosta й у цій статті хочу поділитися своєю підбіркою ресурсів та інструментів, що допомагають та спрощують процес створення інтерфейсів. Вони будуть корисними й актуальними як для колег-початківців, так і для досвідчених фахівців.

Де здобувати теоретичні знання?

Для розуміння принципів візуального дизайну при нагоді можуть стати сервіси:

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

Для розвитку надивленності

У пошуках референсів і натхнення? Зайдіть на ці ресурси:

  • Lapa Ninja та Land-Book — незамінні помічники в проєктуванні продуктових сторінок чи інших вебсервісів. На цих платформах зібрані реальні приклади зі зручною фільтрацією по індустріях. Як на мене, це — суперкомбо.
  • Mobbin — mobile app/web бібліотека елементів і патернів всесвітньовідомих, і не дуже, сервісів та продуктів. На мою думку, необхідно звертати увагу на речі, на дослідження яких було витрачено багато ресурсів.
  • Awwwards — синонім слова «inspiration». Незвичні паттерни та анімації — все тут. Цей ресурс не завжди дозволить вам позичити щось для свого проєкту, але вийти з ідейного ступору допоможе.
  • Pinterest — незмінна класика для пошуку натхнення. Просто вводьте слово-запит, яке крутиться в голові, і ви отримаєте сотні ідей: колажі, логотипи, ілюстрації, і навіть візуали кухні вашої мрії.

Для роботи з кольором

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

Adobe Color Wheel — онлайн-інструмент, який дозволяє створювати гармонійні колірні палітри, використовуючи різні правила комбінування кольорів.

Material Design Palette Generator — інструмент, що дозволяє швидко створювати колірні палітри відповідно до Material Design.

Для роботи зі шрифтами

Особисто я раджу початківцям не витрачати час на пошуки субʼєктивно крутих платних шрифтів. У вільному доступі в Інтернеті є багато сервісів, які дозволяють створювати класні рішення не витрачаючи багато ресурсів, таких як час і гроші. Ось деякі з них.

Google Fonts — це безплатна служба, яка надає доступ до широкого вибору вебшрифтів для використання на вебсайтах та в інших проєктах в Інтернеті.

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

Для роботи з графікою

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

Freepik — це онлайн-платформа, яка пропонує широкий вибір графічних ресурсів для дизайну, включаючи векторні зображення, фотографії, ілюстрації, шаблони та багато іншого. Мій беззаперечний фаворит!

Unsplash — використовуйте цей сервіс, якщо потрібно швидко та безкоштовно знайти будь-які фото. Для Figma також існує плагін від Unsplash, що стає корисним у випадку коли потрібно вставити плейсхолдер чи аватар.

Для анімації

Rive — якщо Adobe After Effects занадто важкий для вас на даному етапі, цей додаток може стати вам корисним. Rive працює з векторною графікою, що дозволяє створювати анімації, які можна легко масштабувати без втрати якості.

Головними перевагами є:

  • підтримка експорту анімацій у формати, які можна використовувати на різних платформах, таких як веб, iOS, Android та інші;
  • легко інтегрується з популярними інструментами для дизайну та розробки, такими як Figma, Sketch.

LottieFiles — це відкритий формат анімації, розроблений компанією Airbnb, який дозволяє створювати легкі та високоякісні анімації для мобільних додатків та вебсайтів. Також є велика бібліотека безплатних анімацій на різний смак.

Для роботи з текстами

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

Для тестування дизайн рішень

Maze — інструмент для тестування та оцінки користувацького інтерфейсу (UI) та користувацького досвіду (UX) вебсайтів та додатків. На мою думку, найбільшою перевагою Maze є можливість тестувати прототипи з Figma.

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

Висновок

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