Перспективы роста в нише UI/UX для 2D-художников

Меня зовут Александра Гриневич, я руководитель департамента фич VOKI Games. Сегодня хочу поговорить с вами о востребованности UI/UX-художников в геймдеве, о специфике их работы и о том, какими базовыми компетенциями нужно обладать для старта в этом сегменте. Надеюсь, материал будет полезен 2D-художникам и специалистам смежных областей, которые ищут возможности карьерного роста в геймдеве.

Почему такая тема? Сегодня большинство 2D-художников выбирают как дополнительную экспертизу 3D-направление. Это очень полезный навык. Знание 3D облегчает жизнь художникам. Можно расширить свой функционал, портфолио и вырасти как специалист на рынке.

Но, помимо 3D, хочу обратить внимание на перспективы развития в нише UI/UX. Сейчас специалисты в этом направлении очень востребованы на рынке. Например, в нашей компании вакансии UI/UX-художников не исчезают с job-сайтов, за три года команда выросла в 7 раз и продолжает расти.

Почему же UI/UX ー перспективная ниша для развития художников? Какие есть мифы о профессии UI/UX Artist? Что входит в их обязанности и что можно подучить, чтобы прокачаться в этом направлении?

Главный миф о профессии UI/UX Artist

UI/UX Artist ー это художник, который разрабатывает пользовательский интерфейс. Совместно с геймдизайнерами делает удобные решения для игроков. Верстает окна, рисует кнопки и иконки, составляет UI-kit, готовит графику для программистов.

Может сложиться такое впечатление, это направление выгодно для старта карьеры. Мне приходилось сталкиваться с мнением, что «иконки и кнопочки ー это для джунов, и я готов повозиться с ними только, чтобы войти в геймдев». Но профессия UI/UX Artist ー это не просто о рисовании иконок и кнопок. Я люблю направление UI/UX, потому что оно объединяет удобство, красоту и лаконичность. На первый взгляд эта лаконичность может показаться чем-то простым, но на самом деле мы управляем взглядом игрока и ведем его по игре, и сделать это изящно и результативно ー непростая работа.

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

Сейчас хороший момент, чтобы войти в эту профессию. Предложений о работе больше, чем кандидатов. И компании готовы обучать людей с минимальным опытом. Что же можно подучить, чтобы подготовиться к собеседованию?

Основные навыки для UI/UX-художника

Эти навыки связаны с этапами разработки продукта.

Навык № 1. User Flow. Это разработка последовательности действий, которые пользователь (игрок) выполняет для достижения своей цели, например, старта игры, покупки контента или получения приза. Все это разбивается на определенные алгоритмы, и продумывается логика, чтобы игроку было понятно, где он стартовал, какие этапы он проходит, как он может вернуться или выйти из игры. Визуально весь путь пользователя изображается на последовательности схем.

Навык № 2. Wireframe. Разработка низкодетализированного наброска дизайна экрана с упором на расположение элементов, структуру и содержание экрана.

Когда проработана траектория движения игрока для достижения цели, мы можем все эти этапы перевести в экраны и наполнить их простыми геометрическими объектами, которые будут подразумевать будущий текст, иконки, какую-то графику, возможно, персонажа или фон. То есть все этапы user flow переходят на вайрфреймы, и становится понятно, где сколько всего располагается. Понимая это, в дальнейшем мы уже сможем заказывать графику у персонажников и иллюстраторов.

Навык № 3. 2D Art. Умение перевести набросанный макет в аппетитную и детализированную графику с правильно расставленными акцентами и контрастами.

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

Навык № 4. UI-KIT. Умение формировать файл со всеми основными элементами интерфейса, которые являются конструктором для сборок новых экранов и оптимизируют вес игры.

Очень важный навык. Когда графика интерфейса понятна, ее переводят в конструкторы, оптимизируют. И в дальнейшем новый контент собирается уже на основе этого конструктора. Здесь UI/UX-художник работает в плотной связке с программистами. Так, например, в систему заводится кнопка определенного размера и в дальнейшем она дублируется, что помогает оптимизировать вес интерфейса в игре, чтобы она была доступна на большем количестве устройств.

UI-KIT разрабатывается художниками очень скрупулезно. Добавление или удаление какого-то элемента из UI-KIT ー серьезное решение, потому что на основании этого кита строится большое количество контента.

Навык 5. 9-Slice Scaling. Очень ценно не только умение нарисовать красивую графику, но и оптимизировать ее так, чтобы она весила как можно меньше, а выглядела так же качественно.

Виртуозное решение, если выходит сделать cектора Top, Left, Сenter, Right, Bottom максимально компактными, и при этом сохранить визуальное решение на высоком уровне, не теряя детализацию.

Пример из нашей практики ー интерфейс игры Manor Matters достаточно объемный, у нас крупные скругления по углам. Но все же промежуточные сегменты ー Top, Left, Right, Bottom и Сenter (посредине) удалось сделать по два пикселя. Эти два пикселя в последующем растягиваются или уменьшаются. Это оптимизирует графику для последующего использования.

9-Slice Scaling используется в Unity и других редакторах. Понимая, как работает инструмент, можно рисовать уже с учетом того, как это все потом будет оптимизироваться и компоноваться.

Полезные программы для работы

ХMind или Мiro. Приложения для создания карт продукта. Обе программы удобные, но мы чаще всего работаем с Miro: там много классных инструментов для построения карты интерфейса, user flow и общения с командой.

Gliffy ー сервис для создания диаграмм и блок-схем.

Figma ー отлично подходит для дизайнеров интерфейсов и позволяет работать одновременно двум и более специалистам.

Principle ー легкая программа для анимации интерфейсов.

MarvelApp ー приложение для быстрого создания функциональных прототипов.

Sketchー векторный редактор для интерфейсов.

Photoshop, Illustrator ー тут объяснять не нужно.

Полезная литература

Несколько книг, которые могут быть интересны и полезны новичкам.

В направлении UI:

  • «Дизайн привычных вещей», Дональд Норман.
  • «Модульные системы в графическом дизайне», Йозеф Мюллер-Брокманн.
  • «Школа дизайна: макет», Ричард Пулин.
  • «Школа дизайна: шрифты», Ричард Пулин.

В направлении UX:

  • «Текст в интерфейсе», Александра Вельянинова.
  • «Не заставляйте меня думать: веб-юзабилити и здравый смысл», Стив Круг.
  • «Отзывчивый веб-дизайн», Итан Маркотт.
  • «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия», Расс Унгер. Кэролайн Чендлер.
  • «UX-стратегия. Чего хотят пользователи и как им это дать», Джейми Леви.

Полезные игры тренажёры

Они помогут где-то приобрести навык, где-то его раскачать.

The Bezier Game ー отлично оттачивает работу с вектором, чтобы с первой попытки получилось нарисовать четкую фигуру.
Сolor ー игра, которая помогает тренировать восприятие цветов и их расположение на цветовом круге.
Blendoku ー классная игра, которая также помогает тонко настроить восприятие сложных оттенков и их переходов.
Type War ー это сайт, который помогает отличать и запоминать шрифты и их названия.
I love typography ー сайт с тестами на знание шрифтов. Это отличное упражнение, которое поможет ознакомиться с огромным количеством шрифтов.
Kolor ー сайт с упражнениями на время для тренировки цветовосприятия.

Сайты для поиска UI референсов

Behance, Artstation, Pinterest ー полезные ресурсы, но их бывает мало в поиске графики для интерфейсов. Здесь пригодятся gameuidatabase и interfaceingame ー они предлагают не просто отдельные элементы, а целые экраны игр. Можно анализировать, как расположены объекты на этих экранах. Там есть экраны топовых ААА-проектов, так и казуальных и гиперказуальных игр.

Полезные сайты

Подбор шрифтовых пар:
fontsinuse.com
fontjoy.com
Интерфейс без шрифта невозможен. И нередки ситуации, когда есть заглавный шрифт, который более оригинальный, и нужно найти ему соответствующую пару. Эти два сайта станут хорошими помощниками в решении этой задачи.

А с референсами иконок помогут следующие ресурсы:
flaticon.com
thenounproject.com
iconfinder.com

Кому же может быть близко это направление?

UI/UX может заинтересовать художников с подходом Pixel Perfect, для которых в работе важен каждый пиксель, детальная проработка силуэта и формы блика, тонкий подбор оттенок.

Также интересно может быть художникам, хорошо воспринимающим вектор, программные градиенты и эффекты.

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

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

Спасибо, что дочитали до конца. Надеюсь, материал поможет в освоении нового направления. Ведь сегодня в направлении UI/UX для художников открываются хорошие возможности для развития.

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини.

👍ПодобаєтьсяСподобалось11
До обраногоВ обраному6
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Підписатись на коментарі