Официальный сайт в его прежней версии устраивал и администрацию клуба, и болельщиков. Но время не стоит на месте. В оформлении сайтов происходят перемены. И интерфейс данного портала стал нуждаться в переменах. Именно поэтому было принято решение создать новый дизайн сайта, который бы отвечал всем требованиям времени и отличался ярким стилевым решением.
Что получилось
Основная информация вынесена на супер-главную, чтобы пользователи могли увидеть самые важные разделы (их важность и востребованность была определена с помощью анализа активности и интересов пользователей ресурса).
Плоская главная страница построена на интерактивных блоках. Во главе – большой баннер и в дополнение к нему ссылки на основные проекты ХК «Трактор», интернет-магазин, систему покупки билетов (разработанную также нашими специалистами) и другие важные разделы.
Внутренние страницы раскрывают историю клуба. Здесь можно найти информацию о каждой игре, проведенной клубом во всех чемпионатах, включая молодежную и высшую лигу. Можно забронировать и купить билеты на предстоящие матчи. А также есть фан-зона, где болельщики могут обсудить «наболевшее».
По каждому игроку на сайте можно найти исчерпывающую информацию – биографию, интервью, статистику, фотографии, видео.
Интересным нововведением стал интерфейс турнирной таблицы. Пользователь может смотреть расписание матчей, как с помощью привычного списка, так и с помощью инструмента «шахматка» – календарь, на каждой дате которого отображаются либо предстоящие события, либо прошедшие игры с результатом.
Как это происходило
Для начала дизайнерская группа проанализировала сайты с подобной тематикой и определила общие черты, присущие всем им: псевдообъем в элементах (подложки, кнопки), большая плотность информации, фоновые картинки. В итоге мы решили пойти совершенно иным путем – создать абсолютно плоский сайт, без бликов, теней, градиентов и с минимальным количеством линий и рамок.
Для встречи с клиентами был сделан быстрый набросок.
На совещание с руководством клуба было принято решение разрабатывать дизайн именно в этом направлении. Мы начали прорабатывать блоки, соблюдая заданный стиль. Макет переделывали несколько раз, подбирая самую оптимальную схему расположения контента.
Параллельно идет проработка внутренних страниц. Очень важно понимать – как информация будет отображаться на этих страницах, оценить, что важнее для пользователя, а чем можно пожертвовать, как расставить акценты.
Мы получили от клиента фото всех игроков и привели их к общему виду, в новом стиле сайта.
Когда основная часть макетов готова, мы приступили к прототипированию. Чтобы опробовать страницы в работе.
Пробуем прототип в действии, выявляем недостатки взаимодействия элементов, вносим корректировки, верстаем уже готовые макеты. При программировании, мы регулярно заглядываем в мониторы наших коллег, чтобы оценить – что получается. Когда программисты говорят – готово. Дизайнеры еще раз пробегаются по всему сайту, пишут список замечаний, по которому делают правки. Такая командная работа (а не только формальная проверка менеджером проекта и отделом тестирования) помогает сделать проект по-настоящему качественным. И вот – сайт готов к запуску.
Комментарий от руководителя проекта, арт-директора компании Dextra Виталия Латыпова: «Мы построили новый интерфейс Трактора в стиле «Метро». Плоские элементы, яркие иллюстрации, отсутствие отвлекающих деталей – всё это призвано донести максимум интересной и полезной информации до пользователя, повысить читабельность и улучшить визуальное восприятие материалов сайта. Динамичность и интерактивность элементов (в частности видео- и фото-галерея) с первого взгляда увлекает пользователя уже на главной странице сайта и заставляет его смотреть всё больше и больше материалов, а приятная анимация делает интерфейс живым и интересным. К слову сказать, мы обновили не только основной сайт, но и его мобильную версию и приложения для Android и iOS».
Мобильная версия сайта
Мобильное приложение
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.