Game ux что это

UX/UI-дизайнер: как освоить востребованную профессию в геймдеве

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

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

Что такое UX/UI

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

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

Сфера дизайна интерфейсов предполагает умение анализировать чужие наработки, использовать выделенные шаблоны, которые можно встроить в свою программу. Эксперты считают – UI-специалисты выяснили, что лучше работает в играх. Именно это является паттерном – общепринятым вариантом проектирования.

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

Красный цвет применяется в качестве индикатора здоровья, урона. Если UX/UI-дизайнер использует зеленый, синий, другой оттенок — это запутает участника в активной игровой сцене. Они служат другой цели, например, для отображения энергии, количества ресурсов.

UX, то есть пользовательский опыт, привязан к жанру игры, UI-дизайн следует теме. При проектировании меню окна персонажа, инвентаря для RPG следует обратить внимание на другие ролевые игры. Если задумана ролевка со средневековым сеттингом, UX/UI-дизайнер смотрит на UI в подобных проектах.

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

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

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

В Dark Souls инвентарь игрока построен на основании сетки, где расположены предметы. При нажатии появляется подробная информация, краткое описание размещено в полосе игрового предмета. Это хороший пример иерархии данных, где каждый показатель имеет положенное место.

Дизайнеры часто используют прием, при котором интерфейс возникает не сразу, а постепенно открывается пользователю. Это важно во всевозможных RPG, подобных играх, где гирлянда на экране пугает неподготовленного пользователя. Но стоит показать новые элементы по мере развития игры – так он постепенно войдет в курс дела, получит удовольствие, изучая пользовательские опции.

Если элементы UI получили анимацию, это параллельное направление дизайна. Специалист может настроить разный тип мигания, цвет подсветки, к примеру, активное заклинание обводится по контуру мигающей полосой, во время применения получает зеленую подсветку. Подобный эффект включают онлайн-РПГ Royal Quest, шутер Metro Exodus предполагает создание анимацией ощущения ретромонитора (окно настроек). UX/UI-дизайнер должен помнить, что анимация, прочие украшательства не должны мешать удобству юзера.

Важную функцию в UX/UI-дизайне выполняют тестировщики, проверяющие:

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

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

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

Например, оформление меню игры Persona 5 сделано максимально ярким и получило интересное позиционирование, которое не влияло на удобство, но запоминалось.

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

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

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

Рабочие инструменты UI/UX дизайнера

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

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

• Sketch. Востребованный инструмент дизайна, позволяющий менять стили слоев, текста, работать с размером, выравниванием. Также UX/UI-дизайнер получает ассортимент плагинов, расширяющих функционал для улучшения результата
• InVision Studio. В рамках цифровой экосистемы UX/UI-дизайнеры получают все для создания пользовательского интерфейса, изначально имеющего анимированные элементы. Программа дает цифровую доску митингов, функцию совместной работы с правками и отзывами.
• Axure. UX/UI-дизайнеры используют ПО для разработки прототипов, имеющих пошаговый контроль рабочего процесса. Здесь реализовано тестирование функциональности. Итогом становится полноценный продукт, готовый к передаче разработчикам. Важные события, ключевые изменения программа показывает онлайн, не пропуская важных деталей.
• Craft. Это плагин вышеупомянутой компании InVision, совместимый со Sketch, Adobe Photoshop. В нем внедряется совместная работа в реальном времени и одной версии проекта. UX/UI-дизайнер получает встроенный доступ к библиотекам графики Getty и iStock, что ускоряет процесс подбора, интеграции контента.
• Proto.io. Инструмент UX/UI-дизайнер применяет для точных макетов и проведения полного цикла, с интеграцией и тестированием. Дополнительно добавлены комментарии команды, видеосвязь, интеграции с тестировочными продуктами, например, Lookback и Validately.
• Adobe XD. В программе UX/UI-дизайнер получает векторные инструменты для подготовки макетов и прототипов с интерфейсами. Здесь реализована работа в реальном времени, присутствуют сложные инструменты. Они понятно используются, имеют функционал для интеграции динамических элементов в прототипы.
• Marvel. ПО подходит UX/UI-дизайнеру, у которого нет опыта в создании прототипов. Интуитивный и прозрачный процесс работы предлагает создание прототипов, каркасов, их пользовательское тестирование. Функция Handoff передает разработчикам HTML-код и CSS-стили для процесса верстки.
• Figma. Профессиональное решение UX/UI-дизайнера для динамических прототипов и макетов, тестирования и синхронизации прогресса. Работать над интерфейсом может несколько людей, статусы показывают активных участников задачи. Существует браузерная версия, а персональная подписка бесплатна.
• Framer X. Работает в React и предлагает UX/UI-дизайнеру тот же набор функционала, что и предыдущие приложения. Реализованы дополнительные плагины, интегрирующие каналы социальных сетей (в том числе Snapchat и Twitter), проигрыватели для воспроизведения популярных медиаформатов, другие компоненты.
• Origami Studio. Отличный инструмент от команды Facebook для сложных задач, выполняемых опытными специалистами. UX/UI-дизайнер может создавать законченные прототипы в редакторе патчей с интеграцией широкого функционала. Итог – прототипы, имеющие завершенный внешний вид, работают как готовые приложения и страницы.
• Webflow. Разработка с этим инструментом проходит без применения знаний по HTML и CSS. Построение интерфейсов реализовано через перетаскивание элементов. Вы получаете готовый продукт с автоматически сгенерированным кодом без переноса прототипа в дизайн.
• FlowMapp. UX/UI-дизайнер работает со структурой, потоками, картами проектирования, необходимыми на первом этапе проработки стратегии работы с пользователем. Это заточенный под UX инструмент, поэтому профессионалы будут рады узкоспециализированному функционалу.
• Balsamiq. Это хороший инструмент для создания каркасов, которым не нужно высокое качество воспроизведения. Функционал доступен даже если UX/UI-дизайнер имеет минимум опыта.
• VisualSitemaps. Специальное ПО умеет создавать файлы Sitemap с автоматизированным процессом, просмотром незапущенных веб-сайтов под парольной защитой, встроенным импортом в программу Sketch.
• Treejack. ПО качественно организует контент, делая его структурированным. UX/UI-дизайнер может этого добиться благодаря информационной архитектуре – специализации Treejack. Пользователи тестируют древовидную структуру сайта с имитацией работы участников. По итогу ПО генерирует результаты, позволяющие улучшить структуру разделов UX/UI-дизайнеру.
• Wireframe.cc. Сервис предлагает минималистичные инструменты для создания низкоточных каркасов с простой палитрой и прямоугольными элементами. Несложный интерфейс упрощает проектирование UX/UI-дизайнером, а встроенная демонстрация запускает процесс тестирования.
• Optimal Workshop. Платформа организована для создания UX, позволяя анализировать удобство клиента, определять информационную архитектуру. Встроенный аналитический модуль дает UX/UI-дизайнеру сведения о пользователях, взаимодействии с элементами дизайна. Сервис интегрируется с Treejack, Chalkmark, Reframer, позволяя образовать единый пакет инструментов.

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

Самые полезные книги для UI/UX дизайнеров

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

Мы проанализировали множество учебников, выделив 5 наиболее интересных:

1. Cliff Kuang “User Friendly”. В пособии говорится о воздействии дизайна на человеческое поведение, ментальные связи, мир в целом. Вы узнаете, как дизайн и общество связаны, чтобы получить мотивацию для работы в UX-направлении.
2. Adam Wathan & Steve Schoger “Refactoring UI”. Пара авторов в лице дизайнера и разработчика разбирают оформление интерфейсов, дают советы по проектированию идеального взаимодействия.
3. Стивен Прессфилд “Война за креатив. Как преодолеть внутренние барьеры и начать творить”. Автор рассказывает, как UX/UI-дизайнеру (и не только) бороться с прокрастинацией, неуверенностью в собственных силах, чтобы улучшить творческие проекты.
4. Нир Эяль “На крючке. Как создавать продукты, формирующие привычки”. Для UX/UI-специалистов поведенческий дизайн – определяющее направление, как и потребительская психология. Автор делит формирование привычек на четыре этапа, после которых UX/UI-дизайнер создает затягивающие продукты.
5. Саймон Синек “Начни с «Почему?»”. Еще одна книга о влиянии на человеческое поведение, но в ключе лидерского воздействия на коллектив.

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

Наиболее полезные сайты для UI/UX дизайнеров

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

• UX Magazine. Постоянные обновления идей, профессиональных комментариев от специалистов по CX, UX, а также EX.
• UX Journal. Статьи по узкой специализации в сфере психологии, продуктового дизайна, UX/UI.
• UX Movement. Отличный сайт с внушительным пластом опыта проектирования интерфейсов, улучшения пользовательского комфорта с 2010 года.
• UXmatters. Размещает реальные проверенные кейсы экспертов в области UX, на которые UX/UI-дизайнер может равняться.
• UX Mastery. Здесь всего 58 статей, но зато написанных и проверенных настоящими экспертами по UX.
• Boxes And Arrows. Отличный портал для UX/UI-дизайнера про тенденции в графическом дизайне и информационной архитектуре.
• HeyDesigner. Постоянное обновление лайфхаков в сфере фронтенда, дизайна иконок, UX/UI не оставит никого равнодушным.
• UXPUB. Шикарный журнал про моушн-дизайн, продуктивность и UX/UI.
• UX Collective. Имеет полумиллионную аудиторию подписчиков, является независимым изданием про UX.
• UX Planet. Ежедневно авторы добавляют несколько статей из разных областей дизайна интерфейсов.

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

• Интерфейсы без шелухи. Рассказывает о здравом смысле в дизайне, правильной разработке софта.
• UX Live. Публикует текущие тренды UX-направления, есть лонгриды.
• Кириллица.дизайн. Сборник лучших кириллических сайтов, оформлением которых UX/UI-дизайнер может вдохновиться.
• /designer. Постоянно рассказывает про инструменты, фишки дизайна, разбавляя поток советами для специалистов разного уровня.
• UI гуд. Еще один канал про талантливые работы UX/UI-дизайнеров.
• UI фэйл. Показывает на примерах, как не стоит делать.
• Хуикс. Неформальный блог UX/UI-дизайнера с полезными советами.
• Про удобство. Помимо UX, тут рассказывают про удаленку и реализацию собственных продуктов.
• dui. Переводят UX-статьи на язык, понятный даже новичкам, разбирают интерфейсы.
• Адовый UX. Помимо плохих проектов, публикуются связанные истории.

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

Профессии в геймдеве. Кто такой UI/UX-дизайнер и как им стать?

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

Наша новая статья из рубрики «Профессии в геймдеве» посвящена как раз UI/UX-дизайнерам. Чтобы разобраться во всех нюансах специальности, мы пообщались с UI/UX-лидом с многолетним опытом из студии Vizor Games Анной Передистой. Она успела поработать над многими известными играми, включая Deathloop от Arkane.

Из текста вы узнаете все, что необходимо для начала пути в сфере UI/UX, — и даже больше.

Если брать примеры из реальной жизни, то интерфейс, скажем, пистолета — это курок. Ведь именно нажатие на курок вызывает какое-то действие, без взаимодействия с ним ничего не произойдет. Интерфейсы преследует нас везде, даже в сказках. Так, фраза «Сезам, откройся!» — это тоже интерфейс для взаимодействия со входом в пещеру сокровищ. Без нее ничего не произойдет.

Ручка для чашки — это тоже интерфейс, с помощью которого мы берем саму чашку, чтобы не обжечься. А ведь изначально ручек у чашек не было. Тогда люди должны были просто хватать их рукой, что не очень удобно и потенциально опасно. Поэтому ручка у чашек — это еще и пример хорошего UX-дизайна (user experience, «пользовательский опыт»).

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

В игровой индустрии интерфейсы делятся на несколько категорий. Все, что касается самого геймплея, называется HUD (Heads-Up Display, термин появился благодаря всевозможным индикаторам на лобовых стеклах транспортных средств). А отдельно от HUD разрабатывают все меню, с которыми игрок взаимодействует вне основного игрового процесса. Например, ветки прокачки умений или панель настроек.

А иногда приходится заниматься более тонкими нюансами. Например, как дать игроку понять, что он поднял патроны для своего оружия? Проиграть определенный звук, подсветить панельку оружия в интерфейсе? Или как дать игроку понять, что его персонаж при смерти? Быть может, экран должен мигать красным, темнеть, терять цвета. Быть может, персонаж должен принять болезненную позу и тяжело дышать, как это сделано в последних частях Tomb Rider, — все это виды общения игры с игроком, и имеет непосредственное отношение к UX.

UX-дизайнер также просчитывает число переходов между окнами меню и старается сократить его до минимума. Например, от старта игры до экшен-фазы игроку нужно пройти семь разных меню. Это очень много, поэтому UX-дизайнер старается сократить количество шагов где-то до трех, например, совместив несколько меню в одно.

Как уже говорилось, UX может существовать без UI. Тот же wireframe — это UX без UI, голая схема без визуальной реализации.

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

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

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

Часть его работы — отрисовка ивентов в играх-сервисах. Ведь в них часто бывают особые режимы и события, приуроченные к какому-нибудь празднику вроде Рождества. Задача Ui-артиста тогда — перерисовать готовые элементы в стилистике текущего события.

То есть задача UI-артиста, как следует из названия профессии, — это буквально что-то рисовать. Особые иллюстрации, иконки, вообще что угодно. Например, на какой-то экран нужна тыква. UI-артист может нарисовать ее, создать 3D-модель или воплотить любым другим способом, чтобы было красиво. Умение рисовать — ключевое для UI-артиста.

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

С UI-дизайнером дела обстоят иначе. Вообще не стоит говорить, что UI именно рисуют. Ведь словно design означает «проектирование», а не «рисование». Так что и интерфейсы именно проектируют, а не рисуют. Конечно, некоторые вещи иллюстративного плана делать приходится, свой художественный аспект в работе есть, но главное все же проектирование. В некоторых компаниях у UI-дизайнеров даже есть возможность делегировать сложные с художественной точки зрения задачи артистам. Именно потому, что дизайнер должен делать в первую очередь удобный интерфейс, а красивый — уже не обязан.

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

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

Лучше всего UI делать векторными формами, ведь тогда его и удобнее использовать в разных программах, и проще интегрировать в игру. Также UI никогда не бывает про элементы отдельно. Думать «UI-дизайнер создает кнопки» — это ошибка.

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

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

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

На сайтах для поиска работы не существует вакансий в духе «UI-дизайнер/UI-девелопер». Только вот UI и UX довольно близки. Даже когда UX-дизайнер создает wireframe, он уже может планировать, как это будет выглядеть визуально.

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

Бывает и такое, что компании хотят сэкономить, поэтому объединяют UI и UX в одну вакансию. Правда, причины для этого не совсем стандартные.

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

Однако и это спорный момент, ведь разработка UI идет итеративно. Это самый итеративный процесс из всей разработки игры. Дело в том, что UI по ходу производства очень быстро устаревает.

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

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

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

Например, можно написать рядом с ценой «-50%». Можно написать старую цену и зачеркнуть ее, чтобы лучше выделить новую цену рядом. Можно показать какой-то выгодный набор из нескольких товаров. Все это и есть UX.

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

Чем отличается UI/UX-дизайнер в геймдеве от UI/UX-дизайнера просто в IT?

Если вы взглянете на любые сайты одной направленности, то заметите, что они все похожи друг на друга. То же самое касается и всех приложений. Дело в том, что сайты и приложения сильнее подвержены общим тенденциям, поэтому работают по схожим законам.

Например, интернет-магазины принято делать по определенным шаблонам: с витриной, категориями, фильтрами, корзиной и так далее. Поэтому абсолютно все интернет-магазины будут выглядеть схожим образом.

С играми подобное не работает, они все разные. Даже при разработке клона какой-то видеоигры, например, который ориентируется геймплеем на Divinity: Original Sin, студия наверняка привнесет в геймплей что-то свое. И из-за этого старый UI/UX-дизайн может уже не подойти.

Получается, в UX-дизайне видеоигр нет постоянных правил, чего не скажешь про UX сайты и приложения. Никак не выйдет создать список пунктов для достойного игрового UI/UX, чтобы делать всегда все по нему — и раз за разом получалось идеально. Даже малейшее изменение механик может существенно повлиять на потребности игрока в фокусе внимания. Тогда интерфейс нужно переделывать практически с нуля.

Впрочем, тоже не всегда. Например, в Diablo все кнопки красные — и это смотрится органично. А инфорармацию игроку сообщают уже другими способами. Все зависит от арт-дирекшена игры, подобные моменты разработчики рассматривают каждый раз в отдельном порядке.

Подобные знания помогут лучше направлять взгляд игрока по экрану и сообщать ему все необходимое. И они все как раз относятся к художественным дисциплинам. Причем наработать их довольно легко, если постоянно практиковаться.

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

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

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

Так что для прокачивания навыков UI/UX-дизайнеру следует регулярно играть в игры, при этом задавая себе вопросы и анализируя увиденное. Но и тут есть важный момент. Если вы запустите игру именно с целью изучить ее как профессионал — ничего не выйдет. Все следует делать от души, как обычный игрок. Это довольно сложный навык, которым нужно овладеть: делать что-то как пользователь, но одновременно смотреть на себя со стороны как исследователь.

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

Теперь обобщим. Чтобы быть UI/UX-дизайнером, нужно:

• иметь художественную базу;
• критическое мышление;
• аналитически склад ума;
• играть в игры.

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

Уже существуют компании, которые используют только Figma, но это пока лишь исключения. Дело в том, что в Figma нельзя рисовать. А в процессе создания UI порой нужно и скетчик набросать, и кистью мазнуть, и коллаж собрать. А Figma вообще не предназначена для растровой графики.

Еще одна возможная связка для UI/UX-дизайнера — это Photoshop и Adobe XD. Первое нужно для растровой графики, второе — для векторной. Причем и в Figma, и в XD можно делать классные кликабельные прототипы. Но лучше все-таки сосредоточиться на Figma, потому что она набирает все большую популярность у игровых студий.

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

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

Ведь необходимо не просто нарисовать элементы, но еще и правильно их нарезать. Чтобы все аккуратно выглядело на экранах. Также желательно, чтобы одинаковые элементы использовались на разных экранах. Это и задает общий стиль интерфейса, и упрощает работу программистам, которые будут просто тянуть условные кнопку 9×9 пикселей по разным меню.

Поэтому попробуйте для интереса открыть Unity, даже если до этого с движками вы вообще не работали, и собрать какой-то простенький интерфейс. В Unity это очень легко, код писать не нужно. Так вы сможете сэкономить себе время и потенциально повысить свою стоимость на рынке.

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

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

Также UI/UX-дизайнеру могут пригодиться знания программ для анимации. Это не обязательно, но вы ведь и сами понимаете, что современные интерфейсы почти всегда анимированные. Поэтому стоит уметь делать хотя бы простые анимации в Photoshop. А если вы владеете After Effects, то это будет существенным плюсом.

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

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

Как выглядит процесс разработки интерфейса?

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

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

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

Затем нужно сделать вайрфрейм и обозначить UX. То есть наброском показать рабочие области интерфейса, его основные элементы и предназначение. Впрочем, вайрфрейм можно сделать и более красочным, чтобы облегчить себе работу над следующими этапами и не собирать все по нескольку раз. В особенности это легко, когда общий стиль проекта уже разработан.

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

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

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

Есть еще и модульная сетка. В ней за шаг сетки используется какое-то заданное UI/UX-дизайнером значение — модуль. Все остальные значения тогда будут равняться двум модулям, трем модулям и так далее. Важный момент: никаких дробных значений вроде «3.4 модуля» быть не должно.

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

Все обычные сайты собирают как раз по модульной сетке. Но с видеоиграми подобное сделать сложнее, ведь интерфейсы игр часто бывают стилизованными и довольно навороченными. Например, в Persona 5 очень много декора и нестандартной верстки, потому хоть как-то измерить все элементы там очень сложно.

На стадии UI работа идет с подобными точечными вещами. Например, добавляя эффекты экрану победы, что тут выглядел более премиально и воодушевляюще.

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

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

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

Какие источники помогут обучиться UI/UX-дизайну?

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

Также можно пообщаться с другими игроками или просто последить, как они играют. Если в определенных экранах есть проблемы, они обязательно быстро проявят себя. К тому же так можно понять, как именно разные люди играют в игры. Ведь подход к геймплею от человека к человеку может отличаться очень сильно.

Еще регулярно стоит заходить на Pinterest. Это лучший сервис для поиска и сбора референсов. А чем больше у UI/UX-дизайнера насмотренность, тем лучше он как профессионал.

Очень полезным для UI/UX-дизайнера станет сайт Interface In Game. В нем собраны многочисленные UI из видеоигр, причем все поделено по жанрам. Благодаря сайту выйдет подсмотреть себе что-то интересное или отобрать грамотные референсы.

Если брать книги, то подойдут материалы и просто про дизайн. Они помогут выработать особый образ мышления, который пригодится в сфере UI/UX. Список для начинающих приблизительно такой:

• Алан Купер «Алан Купер об интерфейсе. Основы проектирования взаимодействия»
• Алан Купер «Психбольница в руках пациентов»
• Дональд Норман «Дизайн привычных вещей»
• Робин Уильямс «Дизайн. Книга для недизайнеров»
• Иттена Иоаханнеса «Искусство цвета»
• Иттена Иоаханнеса «Искусство формы»
• Эрик Шпикерманн «О шрифте»
• Стив Круг «Не заставляйте меня думать»

Но всегда помните, что в UI/UX нет советов, которые подойдут ко всем случаям. Так что не ищите в книгах и прочих учебных материалах прямые ответы. Последние скрыты лишь в ваших собственных вопросах к играм — и только там.

Как выглядит стандартный рабочий день UI/UX-дизайнера?

Тут все зависит от того, в какой именно компании работает UI/UX-дизайнер — в продуктовой или аутсорсной. Опыт в них принципиально разный.

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

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

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

После митингов начинается основной рабочий день. Если вы начинающий UI/UX-дизайнер, то лид обязательно выдаст вам набор задач, которыми и нужно заниматься. Если сеньор или лид, то задачи нужно придумать самостоятельно, учитывая потребности проекта.

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

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

Как-то так дни UI/UX-дизайнера и проходят.

Из каких профессий проще перейти в UI/UX-дизайн?

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

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

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

При некотором везении можно даже без опыта в UI/UX найти вакансию, где проектированием будет заниматься геймдизайнер. Или UX нужно будет максимально клонировать у другой популярной игры, а новоиспеченному дизайнеру поначалу необходимо будет только рисовать. А там и опыт для более сложной технической работы наберется.

В какие профессии можно пойти после UI/UX-дизайна?

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

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

На какие этапы можно разделить карьерный рост UI/UX-дизайнера?

В аутсорс компаниях все измеряют временем на одну задачу. Например, если один экран определенного качества вы делаете за три дня — вы джуниор. Затем на тот же экран у вас уходит уже день — и вот вы уже миддл. А если потом за день вы не просто сделали экран, но и его качество улучшили — то вы миддл+.

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

А дальше в ход вступают знания UI/UX-дизайнера, запас которых обязан постоянно расти. Скажем, он постепенно учится самостоятельно собирать иконки, комбинировать экраны, переносить их в Unity, анимировать — и так по возрастающей сложности задач.

Сеньор и лид — это люди, которые уже сами способны давать фидбэк другим людям. Грубо говоря, когда работу вы делаете уже не своими руками. А отличия между сеньором и лидом тут уже заключаются в объемах работы.

Только вот клиент запрашивал графику иного уровня. Иконка может банально не вписаться в общий дизайн игры — и от нее откажутся.

Однако может быть и обратная ситуация. Клиент окажется в восторге от иконки — и запросит еще двадцать таких же, чтобы переделать всю игру в таком стиле. Только вот лид формировал ценник и сроки как раз на основе первоначальных запросов клиента. А сделанная работа стоит дороже и требует больше времени.

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

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

Где искать работу UI/UX-дизайнеру?

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

Также подойдет сайт InGame Job. Даже на Rabota.ua и Work.ua иногда появляются вакансии. Но лучше всего все-таки использовать LinkedIn. Учитывая, что сейчас все студии работают удаленно, привязки к городу или стране уходят в прошлое. И это несколько облегчает поиски.

Какое портфолио нужно UI/UX-дизайнеру?

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

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

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

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

Так что выставляйте как можно больше разных работ. Не только по качеству, но и по направленности. Гиперказуалки, шутеры, RPG, какие-то свои жанровые сочетания. Когда вы начинаете, то подойдет вообще все. Ведь таким образом вы увеличиваете шансы, что заказчику подойдет что-то из ваших работ.

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

К примеру, вы обожаете мрачные хардкорные RPG в духе Dark Souls. Тогда старайтесь в портфолио все выкладывать в подобном стиле. Так вы и руку набьете, и повысите шансы, что будете заниматься проектом своей мечты. Со временем можно даже скрыть старые работы, если вы не хотите, чтобы вас оценивали по ним.

На какую зарплату может рассчитывать UI/UX-дизайнер?

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

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

Если обобщить зарплаты UI/UX-дизайнеров на full-time в Украине, то выйдет приблизительно так:

• junior — $600 (без опыта) и $800–1000 (хоть с каким-то опытом)
• middle — $1500–1700
• senior — $2000–2500
• lead — от $2000 до бесконечности

Известны даже случаи, когда UI/UX-лиду предлагали зарплату в $10 000 — и еще квартиру обещали купить в придачу.

В каких играх качественные или примечательные UI/UX?

Обе части Dishonored очень выделяются в плане UI. Там очень насыщенные, богатые художественным оформлением элементы. И все равно вся информация очень легко считывается, стиль не перебивает доступность.

К примеру, есть негласное правило, что в одном меню нельзя использовать больше двух шрифтов. В Dishonored в меню паузы встречаются сразу семь штук. И это все равно выглядит красиво. За подобную смелость разработчиками из Arkane стоит только восхищаться.

Еще один пример хорошего интерфейса — NieR Automata. Он не просто стильный, напоминающий интерфейс какой-то утилитарной военной техники. В какой-то момент ты узнаешь, что главная героиня 2B — андроид, а весь интерфейс — это ее собственная прошивка, с помощью которой она оперирует собственным состоянием, что делает UI очень иммерсивным.

Забавный момент — прокачка в игре выражена через программные модули, которые 2B интегрирует в свою систему. Количество модулей ограничено оперативкой андроида. Чтобы сэкономить немного оперативки, можно вырубить модуль, отвечающий за HUD, и играть без отображения своих очков здоровья и т. д.

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

Взять, например, My Time At Sandrock. Тут и action-сражения, и RPG-прокачка, и торговля, и квесты, и социальные взаимодействия с жителями города, и сложнейшая система крафта с кучей видов ресурсов, которые многократно конвертируются друг в друга, построек, которые потребляют и создают эти ресурсы, — в такой игре можно было бы сойти с ума от сложности, если бы не максимально дружелюбный и удобный UI/UX.

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

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

В Cyberpunk 2077 разработчики так и не определились, будут ли их игроки пользоваться мышью и клавиатурой или геймпадом — и сделали «не нашим и не вашим». Невозможно нормально управлять интерфейсом с помощью геймпада исключительно кнопками или «курсором» — обязательно придется использовать и то, и другое в зависимости от ситуации.

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

Многие еще любят ругать интерфейс Dark Souls и прочих игр от From Software. Но там в целом все сделано довольно неплохо. Гораздо проблемнее, когда игры пытаются копировать Dark Souls, но вносят существенные изменения в UX. Например, переносят уклонение с «кружочка» на «крестик». Подобное часто отпугивает и смущает игроков.

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

Что почитать UI/UX дизайнеру в геймдеве?

В последнее время стабильно по несколько раз в месяц спрашивают: “а что почитать про UI/UX новичку/не новичку/вообще?”. И вместо того, чтобы каждый раз скрести по сусекам и копошиться в памяти в поисках ответа, решил собрать самые интересные и, как мне кажется, важные линки в одном месте.

1. Азы и подборки подборок

Для начала определимся с понятиями (основанными на определяниях от бати Дона Нормана, а ещё отсюда и вот отсюда):

UI — User Interface, визуальное отображение инструментов через которые пользователь взаимодействует с продуктом.

Микроволновка умеет нагревать еду, но чтобы перевести ваше желание подогреть пельмени в понятные для неё действия — вам нужно нажать на несколько кнопочек на её приборной панели. Эти кнопочки и то, как они выглядят, и есть UI.

UX — User Experience, совокупность впечатлений от продукта до, во время и после его использования. Также включает в себя информацию о том как продукт работает, как им пользоваться и как понятно и дозировано донести эту информаицю до пользователя.

Продолжая аналогию с микроволновкой — продуманный UX означает, что приборная панель (UI) не будет засунута внутрь печки, а инструкцию по использованию вынесут в отдельный буклет, вместо того, чтобы печатать на дне микроволновки. В более широком смысле UX ещё будет ответственен за то, чтобы на кнопки было приятно нажимать, дверца интуитивно открывалась, на приборную панель был вынесен таймер, а форма микроволновки была бы удобной для вытаскивания из коробки, и сама она вписалась в интерьер.

Безусловно, есть разница между дизайном микроволновок, вебом, мобильными приложениями и играми для разных платформ. Но самые элементарные, базовые принципы неизменны везде, где ведётся работа с визуалом.

И тут я не буду первооткрывателем, а просто закину несколько крайне удачных подборок от авторов из UX Collective (о нём позже). Тут есть и про цветовую теорию, и про композицию, и гештальт-психологию и её влияние на UI. И всё это разбито на смысловые блоки с наборами практических примеров. В каждой статье есть ссылки на несколько обучающих материалов, поэтому удачного вам погружения.

«На адекватных заказчиков наткнуться очень сложно»: сколько зарабатывает UI/UX-дизайнер игр

Героиня этого выпуска с детства увлекалась рисунком и компьютерными играми и уже с третьего курса работает в геймдеве. Мы поговорили о том, как создаются игры, как много дизайнеру надо играть «по работе», где размещать портфолио и почему она предпочитает работать в команде, а не на фрилансе.

Это история из Сообщества. Редакция задала вопросы, бережно отредактировала и оформила по стандартам журнала.

Выбор профессии

рисует игровые интерфейсы

В детстве я была счастливой обладательницей разных игровых приставок: у папы был свой бизнес, правда не очень успешный. С того времени во мне зародилась любовь к играм — от казуальных платформеров до эпичных action-adventure. Еще я увлекалась рисунком, а в 14 лет мне купили маленький графический планшет, и я стала рисовать на компьютере — тогда это было чем-то невероятным.

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

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

Финансовая грамотность для взрослых
Как перестать беспокоиться о деньгах, наладить с ними отношения и двигаться к целям и мечтам

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

Зимняя стажировка была бесплатной, но летом со мной заключили договор с перспективой дальнейшего оформления в штат. Зарплата на испытательном сроке была 10 000 ₽ — уже неплохие деньги для студентки. В следующие три месяца я пыталась как можно лучше себя показать, чтобы остаться работать в компании, — тогда казалось, будто вся жизнь от этого зависит! После испытательного срока меня действительно оформили в штат с зарплатой 15 000 ₽. Считаю, что мне очень повезло.

На третьем курсе я перевелась на вечернее отделение и уже полноценно работала по графику с 08:00 до 17:00. В 17:15 убегала с работы, чтобы успеть на вузовский автобус. В 22:00 возвращалась домой после пар.

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

Компания выпускала несколько игр одновременно. Их постоянно банили за копирку, и мы рисовали те же игры, только по-другому . Это были маджонги, пазлы, раскраски, иногда пробовали что-то новое типа аэрохоккея. Тогда все это было популярно, но конкретно наши игры популярностью не пользовались. Они были быстрой дешевой копией без души. Начальство проверяло игры на прибыльность, создавая пустышку с красивой страничкой в магазине приложений и отслеживая, сколько людей кликнет на нее. Много людей — есть смысл делать полноценную игру, мало людей — нет смысла. Почему-то руководству компании казалось, что это хороший способ вести игровой бизнес.

Самым сложным было нарисовать полноценную игру за неделю, а разработчикам — запрограммировать механику и «натянуть» графику. То есть всей команде надо было оставаться после работы, чтобы выпустить игру в минимальный срок. А потом, естественно, она никому не нравилась, компания пыталась оживить проект, закупая отзывы на сторах, а сотрудники выгорали. Потом за такие недели нам стали выдавать премию — 1000 ₽ в месяц.

Еще в качестве повышения дизайнерам предложили параллельно быть менеджерами проектов на испытательном сроке — я согласилась. Дизайнеры обычно не используют метрики, они получают информацию о популярности игр от менеджеров проектов или маркетологов. Я научилась использовать сервис AppAnnie для отслеживания топа игр в разных жанрах и «Яндекс-метрику» как один из инструментов определения жизнеспособности проекта. Основные в этом случае — показатели ретеншена, то есть возвращения игрока, на второй и седьмой дни. У нас считалось, что если ретеншен второго дня 30%, то над проектом есть смысл работать дальше.

Потом мне предложили стать лидом, тестировали полгода, и только после повышения подняли зарплату до 25 тысяч. Но за два года работы даже толком нечего было показать: куски разных проектов, вечно незаконченных и выполненных наспех. Все эти фрагменты я собрала и в папке архивом и отправляла в качестве портфолио. И как только получила диплом, сразу ушла в другую компанию. Мой коллега гейм-дизайнер, с которым мы подружились на первой работе, порекомендовал меня как сильного дизайнера одному бизнесмену, разрабатывающему игру мечты на ПК. Зарплата выросла до 60 000 ₽.

Меня взяли в проект, в котором уже были игровые механики, но которому нужен был интерфейс. Создать его и стало моей обязанностью. Я изучила жанр, игровой процесс, аудиторию проекта и отрисовала визуальный стиль на одном из главных игровых экранов. Дальнейшие экраны заимствовали этот стиль. После этого работа состояла практически из одного процесса: гейм-дизайнер присылал мне макет игровой механики, а я насыщала его графикой, утверждала у начальства и нарезала элементы для программистов. Так я поняла, что мой профиль — это UI/UX-дизайн , что я сильна в интерфейсах и в анализе нужд игроков.

К тому времени сформировался рынок вакансий игровой индустрии в России, дизайнер интерфейсов появился как отдельная позиция, и по требованиям я поняла, что это мое. До этого был выбор только из веб- и графических дизайнеров, вакансии UI-дизайнеров тогда только появлялись. Я представить себе не могла, что эта профессия в будущем станет такой востребованной. Сейчас позиция графического дизайнера, мне кажется, интересна только малому бизнесу, где фирмам нужен один человек, отвечающий за всю графику в проекте.

Суть профессии

UI/UX-дизайнер — это специалист, создающий интерфейсы. User interface (UI) соединяет механику и функциональность продукта с человеком, его использующим. Поэтому дизайнер, который работает с интерфейсами, должен все время задавать себе вопросы: все ли понятно пользователю, зачем ему та или иная функция, что он ищет и в какой ситуации и так далее.

Иначе говоря, дизайнер встает на место пользователя, тестирует фичи — функции и особенности, пытается предугадать проблемы. Поэтому также существует понятие user experience (UX). В больших компаниях этим занимается отдельный специалист, который исследует целевую аудиторию вместе с продуктовым дизайнером, продюсером, гейм-дизайнером или директором — в зависимости от размера и сферы работы компании. UX-дизайнер продумывает интерфейсы, выстраивает схемы взаимодействия, устанавливает порядок экранов, работает с фокус-группами, пишет отчеты, защищает работу перед директорами, а затем отдает на отрисовку. Причем продуктами могут быть не только мобильные приложения, но и одежда, обувь, техника, игры, кабины пилотов, интерфейсы машин, зданий и так далее.

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