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

Перспективы роста в нише 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 референсов

• gameuidatabase. com
• interfaceingame.com
• dribbble.com
• behance.net
• artstation.com
• pinterest.com

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, щоб не пропустити найважливіші статті і новини.

Теми: artist, gamedev, junior, UI, UX

Работа художника интерфейсов в 13 вопросах

Блог xyz school

Как заставить пользователя нажать туда, куда тебе нужно.

Мы пообщались с художником интерфейсов Арвидасом Браздейкисом: раньше он принимал участие в работе над такими франшизами, как Mass Effect и Dragon Age, а сейчас занимает должность ведущего UI/UX-дизайнера в Game Insight. Узнали, как устроена работа UI-художника, и в чём секрет хорошего интерфейса.

Вопросы задал Артемий Леонов

Чем UI отличается от UX?

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

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

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

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

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

Откуда приходят в UI?

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

Какие навыки необходимы UI-специалисту?

Из прикладных нужны навыки работы во всех программах, связанных с UI. Это Photoshop, Figma, Miro и другие программы — зависит от компании. Ещё нужны чёткое понимание композиции, теории цвета, типографики, а также понимание юзабилити, поведенческих паттернов, законов психологии.

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

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

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

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

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

Иногда всё ограничивается просто видеозаписью. Иногда это видеозапись плюс опросник. Иногда рядом ещё сидит человек, который наблюдает, как пользователь играет.

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

Источник

Насколько дизайн UI — творческая работа? Получается ли на ней самовыражаться?

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

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

Чем UI для игр принципиально отличается от UI для сайтов или программ?

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

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

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

Какими способами можно объяснить пользователю какую-либо сложную концепцию при помощи интерфейса?

Нужно начинать с чего-то простого. Если есть сложная концепция, — например, нетривиальное управление или нетипичная игровая механика, — то её нужно расщепить на самые базовые элементы и понять, что из всего это массива ближе всего пользователю.

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

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

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

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

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

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

Как заставить пользователя нажать туда, куда нужно?

Это вечный вопрос. Чёткого ответа на него нет, есть только рекомендации.

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

Источник

Как заставить игрока почувствовать себя комфортно, когда он впервые включил незнакомую игру?

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

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

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

Мне очень понравился радикальный стиль интерфейса в Persona 5. Они очень удачно совместили экстремальный арт-дирекшен с читабельностью. С одной стороны интерфейсы невероятно пёстрые, с другой — очень легко воспринимаемые с точки зрения читабельности информации.

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

Какие вещи точно недопустимы в дизайне UI — вне зависимости от проекта?

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

Второй момент — это уже художественная сторона. Попадает ли UI в арт-дирекшен? Придерживается ли он заданной темы и тона? Например, очень люблю интерфейс в Nier: Automata и в Diablo III, — при этом понятно, что интерфейс из Nier будет неуместно смотреться в Diablo, и наоборот.

По каким ошибкам можно вычислить новичка?

Самая частая ошибка — начинать сразу с чистовика. Не с простой схемы, не с блокаута — а прямо с “финального варианта”. Такой подход часто выдаёт новичков.

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

Бывают композиционные ошибки: например, предоставил слишком мало места под текст, не учёл локализацию, расположил смысловые блоки слишком далеко друг от друга и прервал логическую близость.

Понравилась статья?

Хочешь получать лучшие статьи
от XyZ раз в неделю?

Подпишись на рассылку XyZ

Нажимая на кнопку, вы соглашаетесь с условиями обработки данных

Интервью: как создавали симулятор короля Yes, Your Grace

Геймдизайнеру и художнику Рафалю Бриксу понадобилось шесть лет, чтобы довести до ума визуальный стиль Yes, Your Grace — изначально ему недоставало навыков рисования, и…

Алексей Луцай задал вопросы Елене Альт, художнице уровней в «Мор» (2019) и Atomic Heart

Елена Альт рассказала о пути в индустрию, задачах, необычных дизайн-документах Ice-Pick Lodge, работе с Дыбовским и повествовании через окружение.

Чем на самом деле занимается UI-дизайнер? Руководство эксперта на 2023 год

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

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

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

1. Что такое дизайн пользовательского интерфейса?
2. Визуальный аспект дизайна пользовательского интерфейса
3. Человеческий аспект дизайна пользовательского интерфейса
4. Какие навыки необходимы дизайнеру пользовательского интерфейса?
5. Какие задачи могут ожидать дизайнера пользовательского интерфейса?
6. Дальнейшее чтение

Итак, что же на самом деле делает дизайнер пользовательского интерфейса ?

Прежде всего — что такое дизайн пользовательского интерфейса?

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

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

Если вы предпочитаете более аудиовизуальный подход, посмотрите наше видео, в котором ведущий дизайнер Зею Ю подробно рассказывает о том, на что дизайнеры пользовательского интерфейса обращают внимание в течение своего обычного рабочего дня:

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

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

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

Как так?

Посмотри на это с этой стороны. Хороший интерфейс практически не требует от пользователя никаких размышлений. Возьмем ваше любимое приложение: оно приятно для глаз и просто в использовании, верно? Когда вы впервые установили его, вы не потратили целую вечность на то, чтобы понять, как добраться из точки А в точку Б — это было просто очевидно.

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

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

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

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

В двух словах: UX рисует карту, голые кости. Затем пользовательский интерфейс дополняет их визуальными интерактивными точками соприкосновения, которые максимально интуитивно проводят пользователя по его путешествию. Хотите сделать еще один шаг вперед? Узнайте о Zero UI, который переносит дизайн пользовательского интерфейса с графических интерфейсов в будущее.

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

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

Навыки межличностного общения

• Коммуникация является ключевой в дизайне пользовательского интерфейса. Когда вы передаете свои проекты разработчикам, вам необходимо эффективно сообщить предполагаемую функцию каждого элемента, который вы разработали. Общение с вашим клиентом и заинтересованными сторонами является важной частью любой роли в дизайне пользовательского интерфейса. Часто вам нужно как можно подробнее объяснить и даже обосновать свои проектные решения.
• От дизайнеров пользовательского интерфейса до веб-разработчиков, от заинтересованных сторон до клиентов — дизайнеры пользовательского интерфейса сотрудничают на всех уровнях. Хорошая работа в команде — важный навык, который включает в себя умение слушать и устранять неполадки вместе, чтобы добраться до корня проблемы. Дизайнерам пользовательского интерфейса должно быть так же комфортно как брать творческие направления, так и давать их. Вы, как правило, преследуете общую цель, и работа в команде действительно воплощает мечту в жизнь!
• Помните, мы говорили о человеческом аспекте дизайна пользовательского интерфейса? Чтобы поставить себя на место пользователей, требуется сочувствие . Постоянное внимание к доступности и инклюзивности жизненно важно для создания интерфейсов, которые понравятся всем пользователям. Если вы поставите эстетику и творческие визуальные эффекты выше удобства использования, вы не продвинетесь далеко!

Специальные навыки

• Даже на должности дизайнера пользовательского интерфейса начального уровня требуется знание хотя бы одного из стандартных инструментов проектирования и прототипирования , таких как Sketch, Adobe XD и инструментов прототипирования, таких как InVision. Как только вы освоите один из них, разобраться с другими будет намного проще. Полный список популярных инструментов дизайна пользовательского интерфейса см. в нашем обзоре семи основных инструментов, о которых должен знать каждый начинающий дизайнер пользовательского интерфейса.
• Дизайнерам пользовательского интерфейса требуется твердое понимание основных методов, теорий и практик, которые составляют основу дизайна пользовательского интерфейса. К ним относятся теория цвета, типографика и шаблоны дизайна пользовательского интерфейса, а также фундаментальные подходы к дизайну, такие как гештальт-принципы, которые помогут вам глубже понять, как пользователи воспринимают и интерпретируют вашу работу.

Итак, задача UI-дизайнера — воплотить в жизнь видение UX-дизайнера. Но как они это делают?

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

Однако почти каждый дизайнер пользовательского интерфейса может рассчитывать на следующее:

Совместная работа

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

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

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

Дизайн

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

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

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

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

Прототипирование

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

Существует три различных типа прототипов:

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

Дизайнеры пользовательского интерфейса часто используют комбинацию инструментов для создания своих прототипов. Например, такие программы, как InVision, отлично подходят для разработки базовых взаимодействий для низкокачественных прототипов, тогда как такие инструменты, как Principle, полезны, когда дело доходит до уточнения конкретных переходов и анимации. Другие популярные инструменты для создания прототипов включают Proto. io, Adobe XD и Figma.

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

Заключительные слова

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

Надеюсь, теперь у вас есть четкое представление о том, чем занимается дизайнер пользовательского интерфейса. Все еще не уверены, подходит ли вам карьера в пользовательском интерфейсе? Зарегистрируйтесь в нашей программе дизайна пользовательского интерфейса и узнайте!

Если, прочитав все о роли дизайнера пользовательского интерфейса, вы почувствуете желание стать им, не забудьте изящно перейти к пошаговому руководству старшего дизайнера пользовательского интерфейса Эрика Биллера о том, как именно это сделать, или посмотреть видеоруководство ниже, в котором наставник по дизайну пользовательского интерфейса Элиз дает вам практическое практическое введение в мир дизайна пользовательского интерфейса. Чтобы получить доступ ко всем ее руководствам, просто зарегистрируйтесь здесь или подпишитесь на канал CareerFoundry на YouTube.

5. Дополнительная литература

• 9-шаговое руководство, как начать заниматься дизайном пользовательского интерфейса
• Руководство по лучшим учебным курсам по дизайну пользовательского интерфейса и как их выбрать
• 5 больших различий между UX и дизайном пользовательского интерфейса
• Заменят ли голосовые технологии экраны?

Как стать художником пользовательского интерфейса для видеоигр

Это одно из более чем 30 интервью с профессиональными разработчиками игр. Для получения дополнительной информации посетите страницу Какая игровая работа подходит именно вам?.

Познакомьтесь с Тамарой Кносс, UI/UX художником

Это Тамара, и она надеется, что вы не заметите ее работу.

Тамара активно работает в игровой индустрии более десяти лет. Ее ранняя работа была связана с Nintendo Game Boy Advance в качестве 2D-аниматора. Совсем недавно она была ключевым художником по взаимодействию с пользователем (UI) и дизайнером пользовательского опыта (UX) в ряде игр, включая Battle Nations , Deer Hunter Reloaded , Samurai vs Zombies Defense 2 и Shinobi 3DS . .

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

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

Всего несколько предложений? Жестко, мужик!

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

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

• Ранняя разработка: создание концепт-арта внешнего вида пользовательского интерфейса.
• Основа разработки: создание каркасов, затем настройка графики в игровом движке, чтобы инженеры могли сделать ее функциональной.
• Поздняя разработка: полировка изображения, добавление анимации и доведение пикселей до совершенства.

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

Как вы пришли к работе UI/UX Artist?

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

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

Что вам больше всего нравится в работе?

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

Что насчет самой нелюбимой части?

Ощутимая боль от разочарования от того, что ваша работа «почти, но не совсем» соответствует вашим представлениям.

Это тот волшебный момент, когда вы смотрите на экран и он впервые становится «настоящей игрой».

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

Какой аспект работы может удивить людей, наблюдающих за ней со стороны?

Многочисленные и длительные дискуссии с большими группами людей о том, «какой именно оттенок красного подходит для этого бренда?»

Пользовательский интерфейс имеет чрезвычайно высокий профиль для мгновенной критики на всех этапах разработки, и у КАЖДОГО есть ДЕЙСТВИТЕЛЬНОЕ мнение. Каждый, кто дает вам обратную связь, говорит о своем опыте пользователя, и они не ошибаются. (Хотя они могут быть в 1 процентиле пользователей, и они могут представить это как придурок, но они не ошибаются.) Вы должны принимать много критики от людей, которые не научились правильно критиковать , и вы должны научиться принимать это изящно. Задача состоит в том, чтобы найти гармоничные компромиссы, подходящие для продукта.

Какие таланты и личность необходимы для успеха на этой работе?

Эмпатия, мужество убеждений, всплеск ОКР (идеальный пиксель!), и толстая кожа.

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

Какой совет вы бы дали школьникам, которые думают о UI/UX Art как о своей карьере?

Если вы заинтересованы в создании пользовательского интерфейса, я бы порекомендовал вам, помимо традиционных занятий изобразительным искусством, графическим дизайном и даже анимацией, изучить UX-дизайн. Взаимодействие человека с компьютером. Изучайте CSS, HTML, JavaScript — возможно, даже некоторые полнофункциональные языки программирования. Чем большей универсальностью и силой вы обладаете, тем больше у вас будет возможностей для реализации своего видения. Не говоря уже о том, что вы будете более желанны для потенциальных работодателей.

Что бы вы порекомендовали для образования, книг или другого обучения, чтобы начать карьеру в искусстве UI/UX?

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

Обращайте внимание на UI/UX во всем, что видите. Это действительно везде.

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

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

Есть множество книг, эссе и блогов, которые можно читать.