Существует широкий спектр программ, которые используют 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% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение