Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря

Если бы игра 22 летней давности вышла сегодня.

Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря

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

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

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

Мне не хотелось ударяться в совсем уж неоновые киберпанк цвета, ведь оригинальная Deus Ex — довольно приземлённая игра. Поэтому для основных цветов я остановился на бледно-синем цвете, который довольно близок к серому, а для выделений и активных элементов — ярко-синий, который как мне кажется имеет очень сильную ассоциацию с первой игрой. Конечно, во много я ориентировался на интерфейс Mankind Divided, потому что там авторы решали те же проблемы.

В качестве шрифтов я выбрал Video, как основной, и DIN для текстов. Все 3D ассеты сделал в Blender, дизайн — в Figma, а финальные штрихи в Photoshop и After Effects.

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

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

Выбор имени и внешности JC
Выбор имени и внешности JC
Выбор умений. Всплывающее окошко с описанием и уровнем мастерства справа появляется при наведении на навык
Выбор умений. Всплывающее окошко с описанием и уровнем мастерства справа появляется при наведении на навык
Игровой HUD
Игровой HUD

Одно из изменений что я сделал — ограничение до четырёх аугментаций в слотах быстрого доступа, в силу ограниченного количества кнопок на геймпаде. Не думаю, что это как-то сказалось бы на игре, потому что в Deus Ex я никогда не пользовался больше, чем двумя аугментациями одновременно.

Активированная аугментация
Активированная аугментация
Выбор реплик во время диалогов
Выбор реплик во время диалогов
Диалог с уведомлением о добавленном в инвентарь предмете
Диалог с уведомлением о добавленном в инвентарь предмете
Колесо инвентаря
Колесо инвентаря
Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря

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

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

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

Описание предмета
Описание предмета
Вкладка с заданиями
Вкладка с заданиями
Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря

В оригинальной Deux Ex логи, разговоры и картинки были отдельными табами, при этом задания и записки были в одной вкладке, что, на мой взгляд, не очень логично. Поэтому я отделил задания от записок, а всё это объединил в одну вкладку «База данных». Плюс добавилась вкладка с наноключами, как я описывал выше. И ещё я убрал логи, потому что в играх от них в целом давно отказались.

Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря

Вкладки аугментаций и умений я тоже объединил в одну — «Персонаж». Всё работает как и в оригинале, но описания аугментаций я тоже убрал в отдельное под-меню. Модель анатомии взял тут.

Умения
Умения
Вкладка с жизненными показателями игрока
Вкладка с жизненными показателями игрока
Экран логина на компьютерном терминале
Экран логина на компьютерном терминале
Экран почты на компьютерном терминале
Экран почты на компьютерном терминале
Управление камерой
Управление камерой
И самая важная штука в игре!
И самая важная штука в игре!

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

Два месяца рисовал подробный редизайн UI в первой Deus Ex — всё от меню и диалогов до HUD и быстрого инвентаря
2K
353 комментария

Somebody PLEEEEEASE

Give

This man

A Job

624

Это пересказ подтекста поста?

9

Некоторое тело пазялюстя даешь этот чиловак неопределенную джаботу

Я этот кружок-курсор вижу и у меня сразу зубы скрепят, и злость такая. Раковый рак просто.

172

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

110