Редизайн портала спортивной аналитики Legalbet

Редизайн портала спортивной аналитики Legalbet

Один из крупнейших сайтов в Рунете, посвященных теме спортивных ставок.

С момента релиза предыдущей версии сайта прошло 4 года. Все это время мы плотно и плодотворно сотрудничали с Legalbet по вопросам поддержки сайта и впоследствии заметили, что текущий дизайн не справляется с ростом функциональности и изменениями, которые происходят на сайте. 

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

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

Структура
Мы применили модульную структуру, в которой каждый смысловой блок выделен в отдельный модуль и имеет границы. Фон модулей — белый, а общий фон сайта — серый, что повышает читаемость и визуально отделяет блоки друг от друга. Такая структура позволяет делать рекламные или конверсионные блоки с ярким цветным фоном, что заметно выделяет их на фоне других.
Вид аналитических таблиц, которыми буквально усыпан сайт, стал более читабельным и аккуратным.
Благодаря модульной структуре стало возможным переиспользовать одни и те же блоки в разных разделах.

Навигация

Боковое меню старого сайта занимало несколько экранов с изображением крупного массива ссылок. Оно было доступно только из верхней части страницы и не поддавалось беглому анализу. Решением этой проблемы стал перенос навигации в горизонтальное меню.

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

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

Мобильная версия

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

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