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

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

Legalbet — cайт o ставках на спорт, один из крупнейших в Рунете.
14 мая 2019
www.legalbet.ru

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

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

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

Модульная структура

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

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

Навигация

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

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

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

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

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

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

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

 

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