01
Описание
Stopgame
Проектирование, дизайн, вёрстка и разработка второй версии промо-страницы с голосованием «Игра года» по различным номинациям.
Спустя 4 года после создания первой версии голосования к нам вновь обратились ребята из Stopgame с просьбой разработать новую версию голосовалки.
На разработку был дан картбланш, но с несколькими условиями: новая версия должна получиться более универсальной, удобной и легкой в настройке контента и администрировании. Также требовалось сделать дизайн интерфейса более трендовым и современным.
Главная страница разбита на две части: Игры и Номинации.
Во вкладке «Игры» пользователи могут изучить номинантов, которые участвуют в голосовании, и посмотреть в каких номинациях они выставлены. В дополнение к этому, если пользователю игра не знакома, можно перейти на видеоролики и статьи об игре на портале Stopgame.
Во вкладке «Номинации» можно ознакомиться с номинантами в каждой номинации. Таким образом страницу интересно изучать и со стороны номинаций и со стороны игр.
Для того, чтобы пользователи не голосовали только за свои любимы игры, игнорируя остальные игры и номинации, мы выключили переход с карточки игры в конкретную номинацию.
В старой версии интерфейса голосования существовала одна главная проблема: страница номинации не была универсальной и адаптивной. Не было возможности добавить рандомное число игр, а также нельзя было без глобальных изменений добавить любой тип номинанта (видео, музыка, просто игра).
В новой версии можно добавлять бесконечное число номинантов, а тип номинанта выбирается изменением одного параметра. Таким образом всё получилось универсально и удобно.
Также мы изменили формат отображения полосы навигации по номинациям. В прошлой версии полоса была вертикальной, сейчас стала горизонтальной. Главный плюс в том, что при уменьшении ширины экрана и адаптации до мобилок, полоса навигации всегда находится под рукой и прилеплена к низу экрана, никуда не исчезает и всегда на виду. При этом, как и было сказано выше, основной контент скролится без проблем и может содержать абсолютно любое количество номинантов.
По окончании голосования на главной странице вкладка номинаций заменяется на вкладку результатов, где представлены все номинации с учётом голосования.
А в карточках игр во вкладке всех игр обавляются победители.
06
Для упрощения работы с интерфейсом была добавлена анимация смены состояний. А для того, чтобы сайт смотрелся интересней, некоторым деталям были добавлены эффекты.
07
Все страницы голосования корректно отображаются на любых устройствах. Пользователи без проблем могут проголосовать за любимую игру на любом мобильнике.
Улучшение и доработка интерфейса
Были учтены ошибки и недоработки первой версии интерфейса голосования. На основе этого анализа разработан удобный, универсальный и адаптивный интерфейс.
Проработка состояний
В зависимости от разных ключевых параметров (к примеру, зарегистрирован пользователь или нет, завершено голосования или нет, проголосовал пользователь или нет...) было проработано порядка 200 состояний разных страниц на основе 2 главных шаблонов.
Адаптивная версия
В современных реалиях не иметь адаптивную версию ресурса — большая ошибка. Новый интерфейс голосования корректно отображается на всех экранах.
Современный дизайн, интересные эффекты и анимация
Чтобы пользователю захотелось проголосовать за игру, корректно работающего механизма голосования — не достаточно. Необходимо создать также и интересную атмосферу вокруг. Исходя из отзывов, нам это удалось.