• работы
  • бюро
  • услуги
  • статьи
  • контакты
  • фейсбук
  • ОСТАВИТЬ ЗАЯВКУ
ЗАКАЗАТЬ ПРОЕКТ
  • работы
  • бюро
  • услуги
  • статьи
  • контакты
  • фейсбук

Stopgame

01

Введение

Описание

Клиент

Stopgame

Задача

Проектирование, дизайн, вёрстка и разработка второй версии промо-страницы с голосованием «Игра года» по различным номинациям.

Stopgame

02

Главная страница

Введение

Спустя 4 года после создания первой версии голосования к нам вновь обратились ребята из Stopgame с просьбой разработать новую версию голосовалки.

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

03

Страница голосования

Главная страница

Главная страница разбита на две части: Игры и Номинации.

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

Во вкладке «Номинации» можно ознакомиться с номинантами в каждой номинации. Таким образом страницу интересно изучать и со стороны номинаций и со стороны игр.

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

04

Результаты голосования

Страница голосования

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

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

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

05

Эффекты и анимация интферфейса

Результаты голосования

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

А в карточках игр во вкладке всех игр обавляются победители.

06

Адаптив

Эффекты и анимация интферфейса

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

07

Результаты

Адаптив

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

Адаптив

08

Оставьте заявку

Результаты

Улучшение и доработка интерфейса

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

Проработка состояний

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

Адаптивная версия

В современных реалиях не иметь адаптивную версию ресурса — большая ошибка. Новый интерфейс голосования корректно отображается на всех экранах.

Современный дизайн, интересные эффекты и анимация

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

Хотите реализовать похожий проект?

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

отправить заявку

Спасибо, заявка успешно отправлена.

ДРУГИЕ РАБОТЫ

Swiet

Swiet

интернет-магазин, UI-набор
Континентальная Лига

Континентальная Лига

логотип
Look my Film

Look my Film

профессиональный портал
Tapis Rouge

Tapis Rouge

интернет-каталог
теплосток

теплосток

логотип, фирменный стиль
1КЛИК

1КЛИК

логотип, фирменный стиль
подписывайтесь на наши новости в фейсбуке: