Урок 4. Інструменти дизайнера

Модуль 1. Введення в UX/UI дизайн.
Безкоштовний ввідний курс по UX/UI дизайну для початківця

Існує широкий спектр програм, які використовують UX/UI дизайнери. Для початку і в більшості випадків достатньо знати лише Figma, але згодом ви розвиватиметесь і можете захотіти спробувити нові програми. Наприклад, якщо ви заглибитесь у створення інтерактивних прототипів, то вам може знадобитись Protopie. Після ознайомлення ви будете орієнтуватись у сучасних програмах і зможете вибрати, що вам потрібно.

Освоївши одну програму, зможете швидко перейти на іншу — відмінності мінімальні. Наприклад, програма Framer X практично один в один перейняла базовий функціонал Figma з додаванням своїх унікальних фішок.

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

Інструменти UI–дизайнера

Кожна з цих програм чудово справляються з усіма завданнями UI-дизайнера. Після вивчення Figma ви швидко освоїте решту, якщо буде потрібно.

  • Figma – однозначний лідер списку. Надає найширші можливості для UI-дизайнера та працює на всіх платформах (Windows, MacOS, Linux) і навіть у браузері. При цьому робить це дуже швидко та безкоштовно;
  • Sketch – платний ($99 з оновленнями на рік) графічний редактор лише для macOS. Саме він послужив натхненням для Figma та Xd. При цьому за деякими функціями поступається Figma (наприклад, немає кольорових стилів);
  • Xd – платний графічний редактор (підписка $10 на місяць) для Windows та MacOS від компанії Adobe. Має гарний набір функцій і добре підходить, як і два інших учасника списку.

Програми для UI-дизайну

Види графіки

Графічні ресурси поділяються на растрові та векторні. Коли ви почнете практикуватись, ви побачите як це впливає на роботу. Зараз я можу лише пояснити це теоретично.

Векторна графіка

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