Редизайн меню.
История позади редизайна глобального меню всех порталов вселенной Wargaming (Часть 1).
Не так давно, танковый онлайн-экшен World of Tanks удостоился третьего по счету «игрового «Оскара». На церемонии вручения одной из престижнейших премий в геймдеве Golden Joystick, игра взяла первое место в категории Still Playing.
Игры Wargaming играют на каждом континенте планеты в общей сложности более 150 миллионов человек. И именно это делает работу над дизайном еще более завораживающим и увлекающим. Поэтому дизайн должен быть прост и понятен для каждого игрока со всего мира.
Определение
Что же такое Common Menu?(далее CM) — это глобальное меню, основная задача которого дать пользователю удобную навигацию между разными сайтами одной тематики вселенной Wargaming. Но он также выполняет и ряд других функций, например, отображает личные уведомления, краткие досье по профилям пользователя в каждой из наших игр и еще многое другое.
Ключевые трудности
- Сайтов, на которые встраивается меню, довольно много, и все они имеют разный дизайн и верстку. Нужно чтобы от игры к игре меню выглядело гармонично и целостно с порталами всех игр Wargaming.
- Меню должно находиться в самом верху страницы, причем так, чтобы пользователь не замечал, что меню — это отдельный компонент.
- Меню должно открываться на множестве девайсов, поэтому дизайн должен быть гибким, хорошо смотреться и быть функциональным как на больших мониторах компьютеров, так и на мобильных телефонах и планшетах.
Старая версия CM
Каким образом выглядела предыдущая версия CM?
Меню состояло из сетки с играми, при наведении на которых появлялся фирменный арт и при нажатии на него пользователь уходил на портал игры. Оно выполняло свои функции для данного количества игр, было простым и лаконичным.
Старая версия СМ
Почему его функций стало не хватать?
Со временем начали появляться новые игры. Хотелось облегчить и ускорить пользователю доступ к информации, например не принуждать его переходить на неизвестную новую игру, а выдавать всю необходимую информацию сразу в меню, без посещения портала игры. Поэтому пришло время расширять функционал. При этом нельзя было уйти от стилистики старого меню.
Работа над старым дизайном
Подождите-ка. А давайте за основу возьмем дизайн старого CМ и к нему по возможности добавим новый функционал? (наверное много дизайнеров слышало аналогичное предложение :)
Почему бы и нет? Такой вариант был проработан, но показался неинтересным и очень загруженным информацией. Можете посмотреть ниже:
- блоков стало много
- если вывести все игры сразу, то нет физического места для новых ссылок
- данных в блоках слишком много, пользователю тяжело найти интересующую его информацию
Новый дизайн
Теперь мы решили попробовать сделать что-то совершенно другое и визуально новое. Так начал прорисовываться новый вариант дизайна. Было проведено несколько итераций, в результате которых получились такие изменения:
- каждая игра стала выводиться на всю ширину. Это дало возможность презентовать игру более персонально и ярко, увеличилась вместимость на описание игры и ссылки (на скачивание, форумы, мероприятия, акции и другие).
- переключение по играм теперь осуществляется горизонтальным списком. Этим достигалась другая цель — увеличение количества игр на n-ное количество в будущем.
Проба артов
Мы выбрали финальный вариант с наиболее логически удачной компановкой элементов в дизайне. Начался этап адаптирования его под разные игры. Для того, чтобы понять насколько рабочим является выбранный вариант дизайна, мы стали примерять различные арты. В данном случае отрабатывалась игра World of Tanks Blitz.
Примерка различных артов на дизайне
Арт-отдел
Следующим этапом стала передача работы отделу художников, которые отрисовывают арты под нужды компании. В результате, для фона были где-то задействованы уже существующие арты игр, а где-то были отрисованы новые, специально под меню.
Арты, используемые в СМ
Так же у каждой игры есть свой фирменный логотип и цвет, которые утверждаются маркетинговым отделом. Ниже малая часть артов, которые были в итоге переданы арт- и маркетинговым отделом.
Смотрите новый дизайн уже на сайтах игр Wargaming
Embedded content: Common Menu WG
Финальные арты и палитра цветов в дизайне
Адаптация
Далее мы начали адаптировать меню под разные девайсы с разными точками перестроения. Мы выбрали классическое перестроение, блоки слева направо (на ПК) просто перестраиваются сверху вниз (на девайсах) соответственно. Так же было решено сохранить персональность каждой игры и оставить арты на всех точках перестроения.
Горизонтальный список игр с уменшением ширины экрана перестраивается в закрытый вертикальный список.
Дизайн схлопнувшегося меню на мобильных девайсах
Для удобства пользователя решено не выводить все игру сразу, а открывать выбранную игру при нажатии на нее в списке. Логотипы игр трансформировались в svg-иконки и расположились возле названий игр в вертикальном списке.
Мобильная версия CM
Embedded content: Mobile Common Menu WG
Чему я научилась
Пройдя долгий путь по выполнению этой нелегкой, но очень интересной работы, я сделала несколько выводов для себя, которые надеюсь будут полезны и вам:
- Находи вдохновение.
Не бойся предлагать новые пути решения проблемы. Отойди полностью от старой верстки и сетки. Взгляни по-новому и свежим взглядом на задачу. Поиграй еще раз в игру компании (если вы работаете в гейм-компании), изучи гидлайны, посмотри, что делают коллеги, что делается в мире. Используй все наилучшее, что имеется в источниках, например: удачные тексты, иконки, арты и преврати все эти кусочки пазла во что-то цельное и полезное.
2. Будь упрямым … иногда.
Упрямство может быть одним из замечательных или пресловутых качеств дизайнера (в зависимости от его точки зрения). Если клиент/ команда/ задача настаивает на простом изменении старого дизайна, а ты точно знаешь, что можешь сделать лучше, то сделай. Но делай
как старые так и новые макеты, тогда будет наглядно видно разницу нового и старого. Не ленись, проделай может быть и лишнюю работу, но оно того стоит.
3. Принимай критику … большую часть времени.
Если дизайнер честно оценивает свою работу, он часто обнаруживает, что «хорошая работа», которую отклонил бизнес/ арт-директор/ команда, на самом деле не так «хороша ». В большинстве случаев критика благоприятно играет на продвижение и качество работы. Мы все люди, все устаем и перестаем думать и видеть трезво. В этот момент качественная критика только поможет. Не соглашайся на простые комментарии вроде: “Все плохо!” или “Что-то тут не так!”. Задавай конкретные вопросы, получая ответы начинаешь размышлять, куда теперь двигаться дальше.
4. Пойми политику.
Дизайн — это задача решения проблем. Но кроме решения прямых проблем, поставленных в задаче, необходимо понимать почему возникли эти потребности, например: будет ли дизайн в дальнейшем масштабироваться, будут ли увеличиваться требования к элементу? Куда двигается компания? Какие трудности могут возникнуть с дизайном? Будут ли пользователи говорить лишь на русском или нужно учитывать локализацию, а тем самым длину слов?
5. Придерживайся своих убеждений.
Чтобы творчески работать, дизайнер должен иметь мужество бороться за то, во что он верит. И это мужество его убеждений, наряду с его талантом, является источником силы.
Спасибо за прочтение!
Вся эта работа не могла бы быть проделана без нашей великолепной команды Common Menu. Благодарность всем нашим крутым ребятам!
Наша команда: 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 и другие команды, которые коснулись нашей работы. Так же большое спасибо Aliaksei Dashkevich, Julia Kasper, Marie Smith, Dzmiter Kutaphin за помощь в редактировании статьи.
Отдельное спасибо нашему крутому арт-директору
за вдохновение, своевременную критику а так же помощь в работе над СМ.
Во второй части статьи
Вы увидите как был сделан редизайн карточек игр CM, подписывайтесь, чтобы не пропустите выход второй части.👇
