Введение в 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-художники, которые рисуют в векторе, тоже называются UI-художники?

Да.

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

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

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

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

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

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

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

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