Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
Intensa
Сделали редизайн сайта с мобильной версией для ФК «Арсенал»
Intensa
#Дизайн сайта

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

215 
Intensa
Intensa Россия, Тула
Поделиться:
Сделали редизайн сайта с мобильной версией для ФК «Арсенал»
Клиент

ФК Арсенал

Сфера

Спорт

Регион

Россия, Тула

Сдано

Апрель 2022

Задача

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было так:

Стало так: 

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

https://arsenaltula.ru

Стек технологий


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

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

Intensa с удовольствием обсудит вашу задачу

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