Існує широкий спектр програм, які використовують UX/UI дизайнери. Для початку і в більшості випадків достатньо знати лише Figma, але згодом ви розвиватиметесь і можете захотіти спробувати нові програми. Наприклад, якщо ви заглибитесь у створення інтерактивних прототипів, то вам може знадобитись Protopie. Після ознайомлення ви будете орієнтуватись у сучасних програмах і зможете вибрати, що вам потрібно.
Освоївши одну програму, зможете швидко перейти на іншу — відмінності мінімальні. Наприклад, програма Framer X практично один в один перейняла базовий функціонал Figma з додаванням своїх унікальних фішок.
Також заглибимось у теорію і подивимось, що таке векторна та растрова графіка і в чому полягають їх відмінності. Та які інструменти використовуються для роботи з ними.
- Блокнот та маркер – дозволяє швидко створювати грубі нариси вайрфреймів, робити замальовки юзер флоу.
- Figma — ідеально підходить для всіх завдань. Дозволяє навіть створювати інтерактивні прототипи із простою анімацією та запускати їх на смартфоні. Працює на усіх платформах (Windows, MacOS, Linux) та у браузері. В комплекті є безкоштовний набір вайрфреймів.
- Adobe XD — аналог та конкурент Figma. Легко інтегрується з іншими продуктами Adobe, але має низку недоліків, наприклад відсутність додаткових плагінів. Також Adobe XD не працює із браузера, лише з десктопної програми. Ну і найважливіше – Figma забезпечує реальну співпрацю в режимі реального часу: кілька дизайнерів можуть одночасно працювати над одним проєктом, обмінюючись коментарями та правками прямо у хмарі. У Adobe XD ця функціональність представлена менш інтегрованою, що може ускладнювати командну роботу, особливо у великих проєктах.;
- Penpot — повністю безплатний open source інструмент для дизайну та прототипування, створений для забезпечення гнучкої, колаборативної роботи між дизайнерами та розробниками. Ви можете працювати з Penpot через браузер, а також мати можливість самостійно хостити сервіс, якщо потрібно зберегти дані в корпоративному середовищі.
- Axure — надає розширені можливості по роботі з інтерактивними прототипами. Є можливість розробляти складні сценарії взаємодії та генерувати HTML, що дозволяє вбудовувати Google Analytics (або будь-який інший сервіс для відстеження поведінки користувачів) та проводити складні віддалені usability-тести.
- Framer X – це потужний інструмент для створення інтерактивних прототипів з можливістю інтеграції React-компонентів, що дозволяє дизайнерам і розробникам працювати спільно та створювати високодинамічні інтерфейси. Має безкоштовний план, який дозволяє створювати нескладні прототипи.
- Protopie – це програма для створення інтерактивних прототипів, яка дозволяє дизайнерам моделювати реалістичні взаємодії без необхідності програмування. Вам будуть доступні можливості закласти в управління прототипом жести, а також прописати логічні умови до кожного компоненту. Інтегрується з Figma та Adobe XD.
Незамінний інструмент на ранніх етапах.
Figma має безкоштовний тариф, що є ідеальним для новачків та студентів. Платні тарифи починаються від 12$/міс та надають безліч додаткових функцій.
Тарифи за користування Adobe XD стартують від 9,99$/міс.
Насправді Penpot дуже потужний конкурент Figma та аналогічних платних рішень. На мою думку, він стане доволі популярним, це лише питання часу.
Найдешевший тариф Axure обійдеться вам у 29$/міс.
Розширені можливості обійдуться приблизно у 25$/міс.
Має безкоштовний план. Додатковий функціонал від 13$/міс.
Кожна з цих програм чудово справляються з усіма завданнями UI-дизайнера. Після вивчення Figma ви швидко освоїте решту, якщо буде потрібно.
- Figma – однозначний лідер списку. Надає найширші можливості для UI-дизайнера та працює на всіх платформах (Windows, MacOS, Linux) і навіть у браузері. При цьому робить це дуже швидко та безплатно. А якщо ви працюєте у команді, то від 12$ на місяць.
- Framer X – це потужний інструмент для створення інтерактивних прототипів. Для UI-дизайнера може бути цікавим варіантом для тестування готового дизайну, а також має багато можливостей, щоб показати анімацію та логіку взаємодії з інтерфейсом.
- Adobe Photoshop – ключовий інструмент для роботи з растровою графікою, ретуші, цифрового малювання та створення візуальних ефектів. Найчастіше UI-дизайнери використовують фотошоп, якщо потрібна додаткова робота з растровим контентом. Наприклад, створення банерів чи обробка фотографій.
- Principle – інструмент для створення інтерактивних анімацій і анімаційних прототипів, що допомагає продемонструвати, як інтерфейс реагує на дії користувача. Перевагою є можливість генерувати як відео в форматі mp4, так і gif. Використовувати програму можна також для генерування гіфок чи відео для власного портфоліо.
Варто відзначити, що Adobe XD та Sketch (редактор лише під macOS), здатні виконувати практично усі ті самі функції. Але їх популярність серед дизайнерів сильно впала за останні роки через розвиток функцій Figma: плагінів, розширених автолейаутів, зручного інтерфейсу і т.д.
Є безплатний та платний плани (від 25$/міс).
Фотошоп є платним. Підписка стартує від 12$/міс (за умови річної підписки).
Principle коштує 129$, працює по принципу одноразової покупки. Також доступний пробний період – 14 днів. Цікаво, що програма рахуватиме лише дні, в які ви її використовуєте.
Залежно від переваг і стилістики графічного дизайнера може використовуватися як растровий, так і векторний редактор.
- Illustrator – потужний платний векторний графічний редактор для платформ Windows та MacOS від компанії Adobe. Використовується для відмальовки та редагування іконок та ілюстрацій;
- Photoshop – потужний платний растровий редактор від тої ж компанії. Мабуть, це найфункціональніший растровий редактор з існуючих. Дозволяє ретушувати і змінювати фотографії, створювати колажі;
- CorelDRAW – програма для роботи з векторною графікою, версткою та обробкою зображень.
У списку немає Figma та Xd, хоча вони теж дозволяють працювати з векторною графікою, малювати іконки та ілюстрації (чого нам буде цілком достатньо для початку). Але графічні дизайнері в більшості обирають адобовські продукти, бо вони заточені для створення логотипів, малювання ілюстрацій, створення колажів. І що важливо – файлів для друку. Бо мають спеціальний колірний профіль (CMYK).
Види графіки
Графічні ресурси поділяються на растрові та векторні. Коли ви почнете практикуватись, ви побачите як це впливає на роботу. Зараз я можу лише пояснити це теоретично.
Векторна графіка
Векторна графіка описує зображення за допомогою математичних формул, а точніше кривих Безьє. Таке зображення не втрачає якість при збільшенні у порівнянні з растром. У цьому його головна перевага. Використовується переважно для логотипів, іконок, ілюстрацій. До речі, Figma, Sketch, Penpot та Xd є векторними редакторами, але і мають мінімальний набір функцій для роботи з растром.
Растрова графіка
Растрова графіка описує зображення за допомогою набору кольорових точок. При збільшенні такого зображення можна спостерігати пікселі — найдрібніші елементи квадратної форми. Використовується для фотографій та ілюстрацій з великою кількістю кольорів. Photoshop є найпотужнішим растровим редактором, хоча і вміє працювати з векторними фігурами.
Якщо відкрити растрове та векторне зображення у відповідних редакторах та збільшити їх, ми побачимо, що:
- Збільшений растр є сіткою пікселів;
- Збільшений вектор малюється з такою самою якістю і складається з точок і кривих, які визначають як відмалювати лінії.
Домашнє завдання
Відтепер цей курс розрахований на самостійне вивчення та виконання домашніх завдань. Розумію, що деякі завдання можуть бути непростими для вас.
Для додаткової підтримки скористайтесь чатом у телеграмі. Тут ви зможете поставити запитання, що стосуються уроків або переглянути приклади правильного виконання від інших учнів.
Чат недоступний для громадян росії.
Домашнє завдання в процесі розробки.
Висновки
Цей урок мав надати вам інформацію про актуальні програми, в яких працює сучасний UX/UI дизайнер! Запит на знання цих програм ви будете зустрічати у більшості вакансій. Як бачите, майже весь софт є платним, але щоб вивчити та користуватись Figma (на разі найпопулярнішим інструментом), не потрібно купувати підписку. Наш наступний великий модуль буде присвячено вивченню цієї програми.
Підписуйтеся на мене в Instagram @frusia.pro, щоб не пропустити анонси нових уроків і отримувати корисні поради для UX/UI дизайнерів, зокрема про створення портфоліо та пошук роботи. У стрічці на вас чекає безліч практичних постів, які допоможуть вам удосконалюватись у дизайні щодня. Приєднуйтесь і розвивайте свою професійну майстерність разом зі мною!
Пройти тест
Щоб урок зарахувався, як пройдений, вам потрібно правильно відповісти на 80% питань з тесту. Щоб пройти тест і перевірити свої знання, вам треба увійти в систему та записатись на курс або зареєструватись, якщо ви ще цього не зробили.
Продовжити навчання