Робота у сфері 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.
Я б радив постійно тестувати свої рішення. Це не завжди можуть бути цифрові сервіси, окрім них існує багато методів, які не потребують великого ресурсу.
Висновок
Раджу кожному ознайомитись з цими ресурсами та потестувати незнайомі зі списку інструменти. Впевнений, що їх освоєння дозволить вам підійти до щоденних задач більше оптимізовано та завжди знаходитись в середовищі повному натхнення й ідей.