Редизайн карточек игр.

История позади редизайна глобального меню всех порталов вселенной (Часть 2).

В первой части своего рассказа я описала работу над редизайном глобального меню Wargaming, а именно вкладки “Игры”.

Определение

Вторая часть моей истории посвящена карточкам пользователя:

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

Ключевые трудности

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

Старая версия Карточек Игр

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

Старая версия Карточек Игр

Работа над старым дизайном

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

Информационная путаница заключалась в том, что “Премиум аккаунт” един для трех игр: World of Tanks, World of Warplanes и World of Warships. А “Золото” едино только для двух игр, а у третьей игры есть своя валюта. В дальнейшем при добавлении новых игр возможно появлялась бы и новая валюта, игроки благодаря этому путались. Как видно из первого варианта редизайна, ниже ссылки на покупку премиум аккаунта прорисованы иконки игр для уточнения игр. Прорисованы направляющие, чтобы обозначить для какой игры можно пополнить счет.
Во втором варианте было решено рассмотреть дизайн без информации об опыте и кредитах. Дизайн визуально стал выглядеть разгружено, но такое решение не подходило концептуально, так как игрок нуждался во всей необходимой информации о своем аккаунте.
Так же решение с направляющими очень странно смотрелось на мобильной версии Карточек Игр.

Далее были проработаны варианты с разделением информации по играм: стала намечаться “Карточка игры” как таковая.

Новый дизайн

Следующей итерацией было решено все-таки отойти от старого дизайна и попробовать применить новый дизайн глобального меню на карточках игр (описание в первой части):

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

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

Поэтому следующим этапом стало то, что нужно было сделать именно визуально “Карточки”. С маленьким изображением героя игры и всей необходимой статистикой. Снизу вариант такой карточки игр:

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

Такой вариант оказался наиболее интересный и оптимальный, поэтому дальше работа велась над ним.

Так как изначально эта версия была реализована на скорую руку, чтобы просто апробировать вариант “Карточки” как таковой. Следующим шагом в работе стало применение в карточке не арты игр, а именно самих героев (например танк, корабль, самолет и т.д), как было задумано изначально. Поэтому ниже можете увидеть разновидности карточек с разными “Героями игр”.

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

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

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

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

Аналогичным способом был проработан дизайн различных кейсов:

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

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

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

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

Если вам понравилась статья, спасибо большое за 50 клапсов 👏🏻. Это будет мотивировать меня писать больше! Так же, если есть вопросы и просто хотите пообщаться, оставляйте комментарии, буду рада общению!

Еще раз, вся эта работа не могла бы быть проделана без нашей великолепной команды Common Menu. Благодарность всем нашим крутым ребятам!

Наша команда:

Constantine Gavrykov

, Aleksandr Karaban, Ann Kotovskaya, Andrey Velent, Dmitry Burakov, Igor Silakov, Ilya Tregubov, Kirill Nenakhov, Kirill Shikhanov, Kristina Zholik, Maks Zylitski, Marina Malyavko, Marina Polozok, Mikhail Martinevskiy, Pavel Korol, Viachaslau Rymarchyk, Yaroslav Budyanskiy и другие команды, которые коснулись работы.

Первая часть

Если вы пропустили первую часть истории о СМ, ссылка ниже. 👇

[## Wargaming Common Menu

История позади редизайна глобального меню всех порталов вселенной Wargaming (Часть 1).

designpub.ru](https://designpub.ru/wargaming-cm-part1-52cc3bdd13d9?source=post_page-----89c7fdf1bab1---------------------------------------)