Существует широкий спектр программ, которые используют 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 является самым мощным растровым редактором, хотя и умеет работать с векторными фигурами.
Если открыть растровое и векторное изображение в соответствующих редакторах и увеличить их, мы увидим, что:
- Увеличенный растр является сеткой пикселей;
- Увеличенный вектор рисуется с такой же качеством и состоит из точек и кривых, которые определяют как отрисовать линии.
Домашнее задание
С этого момента этот курс рассчитан на самостоятельное изучение и выполнение домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или просмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
Задание. Создайте бесплатный аккаунт Microsoft на office.com и откройте PowerPoint в браузере (New blank presentation). Покупать платную подписку не нужно! Нужно использовать именно PowerPoint, так как на данный момент Google Slides не поддерживает импорт векторных файлов.
Найдите и скачайте одну и ту же иконку в двух форматах: SVG (вектор) и PNG (растр). Лучше выбирать иконку с закругленными элементами или с прямыми, которые проходят под углом, чтобы лучше видеть «лестницу" из пикселей». Поэтому рекомендую искать по запросам heart, like, house. Используйте эти сайты для поиска иконок: svgrepo.com (бесплатно, без регистрации) и thenounproject.com (бесплатно, нужна регистрация).
- На первом слайде нового PowerPoint-файла будет размещено два пустых текстовых блока. Выделите каждый кликом и нажмите клавишу Delete на клавиатуре, чтобы удалить.
- Вставьте иконку в формате SVG. Используйте верхнюю панель инструментов (Ribbon). Перейдите на вкладку Insert. Далее кликаем по кнопке Picture и выбираем This Device (все это размещено в верхней левой части интерфейса). Выбираем нашу иконку и размещаем её на слайде с левой стороны. Тянем за угол, чтобы растянуть и увеличить иконку до половины ширины слайда.
- Вставьте такую же иконку уже в PNG-формате, расположив её справа и растяните до второй половины слайда.
- Сравните четкость каждой иконки. Обратите внимание на кривые и линии под углом. Увеличивайте масштаб просмотра, если нужно. Обратите внимание на края линий, пикселизацию, размытие.
- На втором слайде опишите, какие вы заметили отличия между векторной и растровой версиями иконок.
Поделитесь файлом и пришлите мне ссылку на него. Для этого используйте красную кнопку Share в правом верхнем углу интерфейса PowerPoint, а затем нажмите Copy link.
Не пропускайте это домашнее задание. Хотя вы не будете использовать PowerPoint в своей работе, но вам как дизайнеру нужно готовиться к тому, что придется много разбираться и копаться в новых интерфейсах незнакомых вам продуктов (и довольно часто).
Выводы
Этот урок должен был предоставить вам информацию о актуальных программах, в которых работает современный UX/UI дизайнер! Запрос на знание этих программ вы будете встречать в большинстве вакансий. Как видите, почти весь софт является платным, но чтобы изучить и пользоваться Figma (на данный момент самым популярным инструментом), не нужно покупать подписку. Наш следующий большой модуль будет посвящен изучению этой программы.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение