Сделали редизайн сайта с мобильной версией для ФК «Арсенал»

Арсенал — тульский профессиональный футбольный клуб.

Нужно было сделать глобальный редизайн сайта с адаптацией под mobile.

1. Обновить визуальную часть сайта, учитывая современные требования веб-дизайна.

2. Разработать верстку, которая будет легко адаптироваться под разные мобильные устройства. 

По просьбе клиента сохранили прежнюю структуру сайта, чтобы безболезненно перенести текущий контент. 

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

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

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

Одновременно верстали и десктоп, и mobile.

Вот что получилось. 

Проанализировали сайт

Выявили основные проблемы:

— типографика,

— оформление, 

— устаревшие фоны. 

Сделали и согласовали дизайн-проект

За референс взяли сайт французского футбольного клуба PSG. На него ориентируются многие футбольные клубы России, поэтому для болельщиков такая верстка понятная и привычная. 

Адаптировали интерфейсные элементы, сохранив айдентику и фирменные цвета клуба «Арсенал».

Привели типографику в порядок

Избавились от смешения текстовых шрифтов и размеров.

Стандартизировали размер шрифта под разные задачи + используем 2 основных шрифта. Для заголовков Roboto Slab, для основного текста — гротеск Montserrat.

Почистили лишние цвета

Оставили три основных в айдентике клуба — желтый, черный и красный.

Сделали векторную графику

Она масштабируется и выглядит качественно на любом экране — с телефона или десктопа. Растровая графика, которая была до этого, мылилась. 

Сделали меню «Бургер»

Это иконка, которая состоит из трех горизонтальных линий. 

Мы скрыли в главном меню все выпадающие пункты — теперь они выводятся по клику на «Бургер» и не создают лишнего визуального шума.

Осовременили карточки игроков

Было так:

Стало так: 

Переверстали турнирную таблицу

Вынесли ее наверх, расширили и визуально почистили, чтобы по ней было быстрее и проще считать информацию.

Добавили дизайнерскую фичу

Полоса в шапке сайта переливается — как небо на стадионе после файеров. 

Мы сравнили сезонные периоды до и после редизайна.

На главной странице качество трафика улучшилось и с телефона, и с десктопа. 

— Отказы — сократились с 16 до 13,3 %. Это пользователи, которые просматривают только одну страницу, не переходя на другие, после чего уходят с сайта.

— Глубина просмотра — увеличилась с 2,17 страниц за визит до 2,8. То есть за одно посещение сайта пользователи стали просматривать больше страниц.

— Время на сайте — увеличилось на 44 секунды, с 3:14 до 3:58. 

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

Например, так изменился мобильный трафик на странице команды: 

— Отказы — сократились с 22,5 % до 15,6 %.

— Глубина просмотра — увеличились с 1,52 страниц за визит до 2,48.

— Время на сайте — увеличилось с 1:40 минут до 3:31.