Нова корисна добірка. Сайти та сервіси, які допоможуть працювати краще. Натхнення, дослідження і тестування, створення форм і опитувань. І за класикою - сервіси для генерації шрифтів, палітр, мікроанімацій та ілюстрацій.
Сучасні інструменти та програми дають змогу створювати шедеври дизайну без зайвих переходів на інші платформи. І в цьому плані Figma однозначно змінила наш спосіб роботи в дизайні UX/UI, зробивши все простіше і все в одному місці. Однак, навіть із дивовижними функціями та плагінами Figma, є інші додатки та вебсайти, які тобі дуже навіть стануть у пригоді - вони виходять за рамки функціоналу Figma.
Ми зібрали 10 додатків і сайтів, які допоможуть тобі виконувати роботу простіше і краще. А також знайти рішення, ще не виявлені іншими дизайнерами, які не виходять за рамки однієї програми.
1. Rebrand Gallery
Багато хто з нас починав свою дизайнерську кар'єру, відтворюючи наявні дизайни або оновлюючи дизайн для популярних брендів, застосунків і веб-сайтів. По-перше, цей процес є фундаментальною частиною нашого навчання. По-друге, це дає нам змогу дослідити усталені дизайни з нової перспективи і, потенційно, відкрити щось більше або навіть створити щось краще.
Колекція дизайнерських систем, оглядів візуальної ідентичності та брендових бенто-сіток Rebrand Gallery може стати золотою жилою для натхнення та навчання. Досліджуючи ці підібрані дизайни, ти зможеш отримати уявлення про поточні тенденції брендингу, ефективні стратегії візуальної комунікації та, можливо, знайти нові ідеї для застосування у своїх проєктах.
Сайт також демонструє нові системи дизайну та заходи з ребрендингу, які можуть допомогти тобі бути в курсі останніх новинок у сфері дизайну та покращити свій професійний словниковий запас.
2. Lyssna
Lyssna може швидко стати для тебе цінним інструментом. Додаток позиціонує себе як комплексна платформа користувацького дослідження, спрямована на те, щоб допомогти командам отримати глибоке розуміння своєї аудиторії для ухвалення більш обґрунтованих рішень. Платформа полегшує створення різноманітних юзабіліті-тестів та інтерв'ю з користувачами, даючи змогу тобі враховувати голос своєї цільової аудиторії в кожне дизайнерське рішення, яке ти приймаєш.
Основні функції включають широкий спектр методологій тестування для перевірки UX/UI, інструменти для організації та проведення інтерв'ю з користувачами, опитування для перевірки гіпотез і доступ до великої панелі для різних відгуків користувачів. Ці можливості можуть значно поліпшити твій дизайн, надаючи чітку, практичну інформацію на основі відгуків користувачів і тестування. Є безкоштовна і платна версія.
3. Maze
Схожа платформа - Maze. Тут можна проводити дослідження користувачів за допомогою тестування прототипів, сайтів, є можливість створювати модеровані/немодеровані тести. Сервіс надає інструменти для проведення тестування з використанням реальних користувачів та аналізу результатів.
Maze дає змогу завантажувати свої прототипи та тестувати їх із реальними користувачами. Це може бути корисно для оцінки зручності використання та виявлення потенційних проблем. Після завершення тестування Maze надає аналітичні дані та звіти, які допомагають зрозуміти, як користувачі взаємодіяли з твоїм інтерфейсом. Також ти можеш використовувати Maze для проведення AB-тестів, порівнюючи різні версії дизайну або прототипів, щоб визначити, які зміни найбільш ефективні.
Maze може інтегруватися з різними інструментами для дизайну та розробки, зокрема з Figma.
4. Fonts In Use
Fonts In Use - це не просто каталог шрифтів. Це джерело натхнення, посібник для практичного застосування та інструмент для ухвалення обґрунтованих рішень з типографіки. Реальні приклади і велика інформація роблять сайт незамінним ресурсом для підвищення рівня дизайнерської роботи.
Правильний шрифт може значно вплинути на взаємодію з користувачем. І цей сайт допоможе тобі зробити вибір, який сподобається користувачам і поліпшить загальний дизайн. Він допомагає розвивати творчий потенціал, надаючи реальні приклади шрифтів, допомагає ухвалювати рішення, показуючи шрифти в контексті, тримає тебе в курсі тенденцій типографіки та спрощує робочий процес, даючи змогу зробити швидкий вибір шрифтів без тривалого прототипування.
Платформа дає контекстні приклади: кожен шрифт відображається під час використання, що дає тобі реальне уявлення про те, який він має вигляд у різних контекстах, наприклад, у рекламі, брендингу, веб-дизайні. Зручно та наочно.
Поруч із кожним шрифтом міститься детальна інформація про типографіку, її історію та дизайнера. Ці базові знання можуть збагатити твої дизайнерські знання та загальний кругозір.
Можна фільтрувати шрифти за галузями, форматами та накресленнями. Це особливо корисно, коли ти шукаєш натхнення або певний стиль для конкретного проєкту.
5. Mobbin
Буває, що ти бачиш сайт і задаєшся питанням, як його було створено, які інструменти використовували, або як різні частини працюють разом? Ми багато дізнаємося, дивлячись на ці речі. І переглядати хороші приклади дуже потрібно будь-якому дизайнеру - як новачкові, так і досвідченому гуру. Само собою, всі ми ходимо на Behance і Dribbble. Але це занадто популярні сайти, щоб включати їх у добірку. Спробуй щось нове.
Mobbin - свого роду колекція дизайнерських ідей. Тут є безліч реальних веб-сайтів і мобільних застосунків із поясненнями. Це допоможе знайти нові ідеї та допомогти у твоїй дизайнерській роботі. Mobbin пропонує як безкоштовні, так і професійні опції, але навіть без підписки ти можеш отримати доступ до величезної кількості перевірених дизайнів. Лайфхак: просто роби знімки екрана у форматі PNG для порівняння з твоїми роботами в Figma. Сайт досить часто оновлюється, зберігаючи контент свіжим і актуальним. Він буде корисним незалежно від того, малюєш ти початкові концепції чи вносиш останні штрихи в проєкт.
6. Typeform
Typeform - це онлайн-інструмент для створення інтерактивних і стильних форм та опитувань. Хоча Typeform не є спеціалізованим інструментом для веб-дизайнерів, він може бути корисним під час збору зворотного зв'язку, опитувань користувачів, або створення інтерактивних форм на веб-сайті. Ось кілька особливостей Typeform, які можуть бути тобі цікаві:
- платформа пропонує стильні та сучасні форми, які можуть інтегруватися з візуальним стилем твого проєкту, варто лише підібрати відповідний варіант;
- ти можеш додавати різні інтерактивні елементи, такі як множинний вибір, поля для введення тексту, фотографії та інші;
- форми, створені в Typeform, зазвичай мають адаптивний дизайн, що означає, що вони добре виглядають на різних пристроях;
- Typeform може інтегруватися з іншими інструментами, такими як Google Sheets, Zapier, Slack, що полегшує опрацювання та аналіз зібраної інформації;
- ти можеш налаштовувати форми відповідно до запиту, додавати логіку запитань тощо;
- Typeform може бути корисним веб-дизайнерам для створення форм зворотного зв'язку, замовлень або опитувань на сайтах.
Як UX-дизайнеру тобі необхідно перетворювати складні користувацькі дані на чіткі, дієві ідеї. Це важливо вміти в повсякденній роботі, формуючи саму основу користувацького дизайну. Візуалізація даних стає рятувальним кругом у цьому сценарії. У постійній гонитві за плавністю та ефективністю дизайну такі інструменти як Typeform є безцінними. Вони слугують каналами для отримання відгуків користувачів за допомогою естетично привабливих інтерактивних опитувань, гарантуючи, що ми збираємо важливі дані без шкоди для залучення користувачів.
7. Palettemaker
PaletteMaker допомагає визначати колірні схеми для нових проєктів з гарантією відповідності стандартам доступності, обираючи кольори з достатньою контрастністю. Також це ті схеми, які допоможуть підтримувати узгодженість бренду на різних платформах і пристроях. Інструмент не тільки спрощує процес вибору кольору, а й підвищує естетичну та функціональну якість твого проєкту на виході.
Сервіс дає змогу створювати унікальні кольорові палітри, необхідні для підтримання послідовності та гармонії в дизайнерських проєктах. Він пропонує інструменти, засновані на теорії кольорів, допомагаючи вибирати додаткові, аналогічні або контрастні кольори, що є вирішальним для створення візуально збалансованих дизайнів.
Тут легко налаштовувати окремі кольори в межах палітри, забезпечуючи точну узгодженість із правилами бренду або з конкретними вимогами до дизайну.
Що зручно - сервіс надає широкі параметри експорту палітр у різні формати, що полегшує їхню інтеграцію в різні інструменти дизайну та робочі процеси.
8. Mingcute
Ти вже вмієш створювати мікроанімації в Figma? Чудово. Ця фішка допомагає оживляти значки, покращує залученість користувачів, ілюструє функціональність і забезпечує відмінний візуальний зворотний зв'язок, покращуючи взаємодію з користувачем.
І можна полегшити собі роботу, якщо не робити все вручну, а скористатися бібліотекою піктограм Mingcute. Сайт може похвалитися колекцією простих, але ефектних піктограм з відкритим вихідним кодом, ідеальних як для дизайнерів, так і для розробників під час використання у веб і мобільних інтерфейсах. А тепер вони додали мікроанімації, готові для використання у твоїх проектах.
Високоякісна плавна анімація, підтримка декількох платформ, різні формати - це все чекає на тебе в Mingcute. Безкоштовний план дає змогу використовувати 10 основних піктограм для необмеженого використання без будь-яких роялті.
9. Designstripe
Настроювані ілюстрації - це знахідка для дизайнера. По-перше, вони пропонують гнучкість узгодження з конкретними темами проєкту та брендингом, підвищуючи ясність і залученість. Вони демонструють професіоналізм і дозволяють здійснювати швидкі зміни. Тобі не доведеться переробляти все з нуля, якщо замовник хоче персонажа з іншим кольором волосся, наприклад.
DesignStripe надає велику бібліотеку ілюстрацій, які можна налаштувати. Ти зможеш змінювати кольори, елементи та композицію відповідно до конкретних потреб дизайну.
Сайт пропонує графіку високої роздільної здатності, яка має вирішальне значення для професійного дизайну. Ці ілюстрації зберігають свою якість як для веб-проектів, так і для друку.
Ілюстрації представлені в різних стилях і темах, що забезпечує універсальність для різних вимог проекту. До того ж, платформа дає змогу легко знаходити та налаштовувати ілюстрації навіть для тих, хто має мінімальний досвід роботи у сфері дизайну. Це дуже зручно, якщо ти спеціалізуєшся на UX/UI і не дуже добре знаєшся на графічному дизайні.
10. ScienceDirect
ScienceDirect є провідним джерелом наукових, технічних і медичних досліджень, де розміщена величезна кількість журнальних статей і розділів книг. Для веб-дизайнера ScienceDirect може бути корисним для доступу до актуальної інформації про технічні та наукові аспекти, пов'язані з веб-технологіями. Наприклад, для отримання даних про останні дослідження в галузі користувацького досвіду (UX), інтерфейсів тощо. Також не зайвими будуть дослідження в галузі нейрофізіології та психології - знаючи, як працює мозок, ти зможеш робити справді зручні та ефективні інтерфейси.
Будь у курсі нових методологій та надихайся на інновації через академічне розуміння поведінки користувачів і технологічних тенденцій. Розширюй кругозір. А якщо ти тільки на початку кар'єри і все це тобі поки що складно - пройди потужне навчання, яке розставить все по поличках. Онлайн-курс "UX/UI легенда" вже чекає на тебе, реєструйся!