Введение в UI: что это такое, в чём отличие от UX и чем занимается UI-художник

Отвечаем на основные вопросы, рассказываем про используемые программы, обязанности художника и про то, как получить работу в геймдеве.

Что такое UI-дизайн и чем занимается UI-художник

UI-дизайн — это создание элементов интерфейса игры.

В интерфейс входят:

• Иконки (способности, предметы, заклинания).
• Диалоговые окна.
• Индикаторы (показатели здоровья, маны и запаса сил).
• Всплывающие сообщения (о критическом уроне, о произошедшем событии).
• Экраны меню (настройки, сохранения).

UI так и расшифровывается — User Interface, а потому специалист, занятый в этой сфере, создает все элементы интерфейса игры.

В чём разница между UI и UX дизайном

UX-дизайн — это дизайн-решения, которые помогут пользователю проще и удобнее ориентироваться в игре.

К примеру, мы делаем игру про алхимика, и у нас есть несколько категорий инвентаря: «ингредиенты», «зелья» и «разное». UX-художник, понимания мышление пользователя, должен знать, в каком порядке удобнее расположить эти категории: что будет в самом начале, а что — в конце.

Если мы разместим категорию «разное» на самом видном месте, а категорию «зелья» спрячем вдалеке, то пользователи будут недовольны. «Разное» — это скорее всего не очень нужные предметы, которые игрок будет использовать редко. С зельями ситуация обратная: так как игра про алхимика, то и использовать зелья мы будем часто, а значит эта категория должна быть на самом видном месте.

Предвидеть это и сделать всё для удобства пользователя — задача UX-художника.

Задача UI-художника: придумать и нарисовать конкретные иконки и кнопки, применить к игре определенную типографику, подобрать цветовые схемы, интервалы, и в целом сделать приятный дизайн.

UX — это дизайнер-проектировщик. Он заглядывает в голову игроку и понимает, как сделать его игровой опыт наиболее комфортным. Результат такого анализа — схема взаимодействия человека с игрой, макет и прототип будущего интерфейса.

UI — это дизайнер-художник. Он отрисовывает, подбирает для элементов интерфейса единый стиль, превращает макет UX-дизайнера в готовый интерфейс.

Какие программы использует UI-художник

На разных этапах работы художник использует различный софт.

Для отрисовки кнопок, всплывающих окон, индикаторов и других элементов интерфейса используют:

• Adobe Photoshop.
• Adobe Illustrator.

В этих же программах можно работать с типографикой и создавать мокапы

Если нужно создать не отдельные элементы интерфейса, а прототип целого окна со множеством элементов, то UI-художники используют:

• Figma.
• InVision Studio.
• Adobe XD.

Целые окна можно создавать во всё том же Adobe Photoshop и в геймдеве это очень распространено, но всё же быстрее создать прототип в одной из этих трёх программах.

Если нужно анимировать отдельные элементы интерфейса или показать работу интерфейса в динамике, то пригодятся:

• Adobe Animate.
• Adobe After Effects.
• Spine.

Важно: анимированием изображений занимаются отдельные специалисты, но если UI-художник метит на позицию сеньора или же просто хочет уметь демонстрировать работу интерфейса на практике, то базовые познания в анимации не будут лишними.

Если художник работал с одним из популярных игровых движков, то это повысит его цену на рынке. Этот опыт не обязателен, но так как игры разрабатываются на конкретных игровых движках, то и умение сверстать UI в этих же движках — это ценное умение.

К самым актуальным игровым движкам относятся:

• Unreal Engine.
• Unity.

Разбираться в обоих движках не надо. Можно и вовсе пропустить этот пункт. Но для общего развития будет полезно освоиться хотя бы в одном из них.

Что НЕ входит в обязанности UI-художника

Задача UI-художника — нарисовать нужные элементы интерфейса, создать для них единый стиль, подобрать типографику. UI-художник не должен:

Внедрять элементы интерфейс в игру. Это задача технического художника.

• Продумывать логику расположения элементов интерфейса. Это задача UX-дизайнера.
  Другой момент, что в некоторых компаниях должность UX-дизайнера и UI художника объединяется в одну — тогда да, эта задача ложится на того же человека, кто отрисовывает кнопки и попапы.
• Анимировать элементы интерфейса. Это задача художника-аниматора.

Однако всё это справедливо только на начальных позициях и для крупных компаний. С ростом грейда (джун, миддл, сеньор) UI-художник зачастую берёт на себя новые функции: кто-то учится анимировать элементы интерфейса, кто-то осваивает игровой движок и переходит на позицию технического UI-художника.

Так происходит не везде — в крупных компаниях под каждую деятельность есть свой специалист, но даже здесь UI-художник со смежными компетенциями будет цениться и оплачиваться выше, чем тот, кто строго ограничен рамками своей должности.

Востребованы ли UI-художники

Собрать точную статистику востребованности сложно, но согласному популярному на Западе сайту по поиску работы ZipRecruiter на февраль 2023 года по всему миру насчитывается 5400 вакансий UI-художников в сфере геймдева.

Учитывайте, что это только один сайт, — на Linkedin, GlassDoor, отечественном HH.ru и в телеграмм-каналах встречаются вакансии, которые размещаются только на этих ресурсах, а значит, их ещё больше. Это без учёта внутреннего поиска, когда HR ищет кадры через внутренние сети контактов, не размещая вакансию публично.

Что по зарплате: в среднем, по данным hh.ru, UX/UI-художник в студиях и с уровнем мидла+ или сеньора может получать от 120-200 тысяч рублей.

На международном рынке зарплаты выше: в среднем она начинается от 3000$.

Как UI-художнику получить работу в геймдеве

Для получения работы нужно иметь портфолио, а следовательно и навыки в графическом дизайне.

Самому получить эти навыки может быть сложно: в интернете есть общедоступная информация о сфере, но её не так много. Если получится обучиться по гайдам из открытых источников, то можно начать делать интерфейс для воображаемых проектов и размещать результат этой работы на ArtStation.

Так, например, поступил Иван Ефимов, который некоторое время работал графическим дизайнером, а потом решил перейти в UI-сферу. Чтобы добиться своей цели, Иван сделал больше 10-ти осовремененных экранов интерфейса для игры 2000-го года Deux Ex.

UI-дизайну обучают в нашей школе. Мы даем большую базу знаний, с помощью которой вы научитесь создавать иконки и интерфейсы в разных стилях. Напишите нам, чтобы записаться на курс «UI-дизайн: Иконки для игр» и научиться рисовать иконки у старшей художницы в MY.GAMES Юлии Титовой.

Ответы на популярные вопросы

А UI-художники, которые рисуют в векторе, тоже называются UI-художники?

Да.

UI-художнику нужно программирование? Сталкивался с высказыванием, что это направление плавает на грани рисования и кода.

Нет, UI-художнику не нужно знать программирование.

Есть отдельная профессия технического UI-художника, который программирует всё то, что нарисует обычный UI-художник. Еще программирование нужно знать техническому художнику — они и внедряют большинство арт-вещей в игру.

Как часто при создании иконок используют 3D?

Нечасто, но используют. Если вы умеете в 3D, то вы будете цениться дороже на рынке труда. Базовым вещам в 3D мы обучаем на нашем курсе «3D для 2D-художника».

В чём отличие UI-художника от UI-дизайнера?

UI-дизайнер не занимается отрисовкой элементов интерфейса. Дизайнер — это про упрощение форм и стилизацию. Они зачастую верстают полученные иконки и кнопки в готовый интерфейс.

Художник же берёт на себя такие детали, как светотень, композицию кнопок — отрисовывает всё это вручную. Они могут с нуля нарисовать набор эмблем и иконок инвентаря, а затем отдать это всё дизайнеру.

Статью написал Никита Барышников для Smirnov School.