Існує широкий спектр програм, які використовують UX/UI дизайнери. Для початку і в більшості випадків достатньо знати лише Figma, але згодом ви розвиватиметесь і можете захотіти спробувити нові програми. Наприклад, якщо ви заглибитесь у створення інтерактивних прототипів, то вам може знадобитись Protopie. Після ознайомлення ви будете орієнтуватись у сучасних програмах і зможете вибрати, що вам потрібно.
Освоївши одну програму, зможете швидко перейти на іншу — відмінності мінімальні. Наприклад, програма Framer X практично один в один перейняла базовий функціонал Figma з додаванням своїх унікальних фішок.
Також заглибимось у теорію і подивимось, що таке векторна та растрова графіка і в чому полягають їх відмінності. Та які інструменти використовуються для роботи з ними.
- Блокнот та маркер – дозволяє швидко створювати грубі нариси вайрфреймів, робити замальовки юзер флоу. Незамінний інструмент на ранніх етапах;
- Figma — ідеально підходить для всіх завдань. Дозволяє навіть створювати інтерактивні прототипи із простою анімацією та запускати їх на смартфоні. Працює на усіх платформах (Windows, MacOS, Linux) та у браузері. Поставляється з безкоштовним набором вайрфреймів. Конкуренти також непогані – Sketch та Xd – є все необхідне;
- Moqups — спеціалізований додаток для створення вайрфреймів та юзер флоу з компонентами на всі випадки (для вебсайтів, мобільних та настільних додатків). Стане у нагоді, якщо не хочете все малювати вручну чи немає часу на пошук готових бібліотек для Figma. Працює прямо у браузері. Потрібна реєстрація, але можливості безкоштовної версії на високому рівні;
- Axure — надає розширені можливості по роботі з інтерактивними прототипами. Є можливість генерувати HTML, що дозволяє вбудовувати Google Analytics (або будь-який інший сервіс для відстеження поведінки користувачів) та проводити складні віддалені usability-тести.
Кожна з цих програм чудово справляються з усіма завданнями UI-дизайнера. Після вивчення Figma ви швидко освоїте решту, якщо буде потрібно.
- Figma – однозначний лідер списку. Надає найширші можливості для UI-дизайнера та працює на всіх платформах (Windows, MacOS, Linux) і навіть у браузері. При цьому робить це дуже швидко та безкоштовно;
- Sketch – платний ($99 з оновленнями на рік) графічний редактор лише для macOS. Саме він послужив натхненням для Figma та Xd. При цьому за деякими функціями поступається Figma (наприклад, немає кольорових стилів);
- Xd – платний графічний редактор (підписка $10 на місяць) для Windows та MacOS від компанії Adobe. Має гарний набір функцій і добре підходить, як і два інших учасника списку.
Залежно від переваг і стилістики графічного дизайнера може використовуватися як растровий, так і векторний редактор.
- Illustrator – потужний платний ($21 на місяць) векторний графічний редактор для платформ Windows та MacOS від компанії Adobe. Використовується для відмальовки та редагування іконок та ілюстрацій;
- Photoshop – потужний платний растровий редактор від тої ж компанії. Мабуть, це найфункціональніший растровий редактор з існуючих. Дозволяє ретушувати і змінювати фотографії, створювати колажі;
- Gimp – безкоштовний растровий графічний редактор із широким набором функцій, який поступається Photoshop лише через свою молодість.
У списку немає Figma, Sketch та Xd, хоча вони теж дозволяють працювати з векторною графікою, малювати іконки та ілюстрації (чого нам буде цілком достатньо для початку). А ось у роботі з растром у цих програм дуже серйозні обмеження. Вам доступні лише обрізка фото, базова корекція кольору і маски.
Домашнє завдання
Відтепер цей курс розрахований на самостійне вивчення та виконання домашніх завдань. Розумію, що деякі завдання можуть бути непростими для вас.
Для додаткової підтримки скористайтесь чатом у телеграмі. Тут ви зможете поставити запитання, що стосуються уроків або переглянути приклади правильного виконання від інших учнів.
Чат недоступний для громадян росії.
- Оберіть сайт, який ви щодня відвідуєте. Намалюйте такс флоу в блокноті для двох типових сценаріїв використання цього сайту.
- Придумайте нову функцію для сайту, яким ви користувалися хоча б одного разу (необов'язково для вашого улюбленця з першого завдання). Створіть таск флоу для цієї нової функції.
- Створіть вайрфлоу для сценаріїв першого завдання. Можете використовувати олівець або ручку, що витирається, щоб робити правки. Постарайтеся наблизитись до оригіналу.
- Останнє завдання підвищеної складності. Створіть вайрфлоу для сценарію з другого завдання. Тут потрібно бути дуже спостережливим, тому що ви не знаєте, які елементи інтерфейсу існують взагалі. Але ви можете подивитись їх на інших сайтах.
Робіть фото ваших юзер флоу і надсилайте в дірект в Instagram @frusia.pro (не забудьте вказати, що це до третього уроку) або залишайте посилання тут у коментарях під уроком (посилання я пізніше заміню на картинки прямо у коментарях).
По кожній відповіді дам фідбек, так ви переконаєтеся, що засвоїли матеріал правильно.
Висновки
От ми й отримали уявлення, з чим доводиться стикатися UX/UI-дизайнеру у повсякденній роботі. Це був найдовший і найскладніший урок з масою нових термінів. Будь ласка, вивчіть його досконало та зробіть домашнє завдання. Все це лише теорія, наступного разу (урок вийде за тиждень) ми переходимо до практики, а саме до вивчення Figma. Обіцяю, буде ще цікавіше!
Підписуйтесь на мене в Instagram @frusia.pro, будьте в курсі анонсів нових уроків, дивіться перевірки домівок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Продовжити навчання