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