service

Сервіс спортивної статистики та прогнозів CheckLive

Дизайн головної сторінки проєкту Сервіс спортивної статистики та прогнозів CheckLive

Задача

Розробити UX/UI дизайн та адаптивну версію спортивно-аналітичного сервісу CheckLive з live-результатами матчів, статистикою, прогнозами експертів і рейтингами букмекерів.

Зроблено

Дизайн

Адаптиви

Головна

Головний дашборд об'єднує результати матчів у реальному часі з розбивкою за лігами, індивідуальні налаштування звукових сповіщень про голи та стрічку найближчих прогнозів. Права колонка містить актуальний рейтинг букмекерів, символічну збірну тижня на футбольному полі, відеоогляди та останні трансфери.

Головна сторінка

Сторінка чемпіонату

Сторінка турніру демонструє останні результати ігор та розширену таблицю статистики гравців за вкладками (резюме, атака, захист, паси, воротарі). Додатково реалізовано інтерактивні поп-апи швидкого перегляду форми та оцінки конкретного футболіста при наведенні на схему збірної тижня.

Сторінка чемпіонату

Сторінка ліги та трансферів

Розширений вигляд ліги включає турнірну таблицю з індикаторами форми останніх 5 матчів, розклад поєдинків і зведення трансферів (прихід та відхід гравців із сумами контрактів). Нижче наведено повний склад команд із фізичними даними, віком та ігровою статистикою кожного футболіста.

Таблиця та склади

Сторінка команди

Профіль футбольного клубу містить стрічку новин команди, графік форми у вигляді кольорової гістограми, календар майбутніх матчів і турнірне становище. Також на сторінці зібрано заявку гравців за амплуа, історію трансферів та зведену статистику сезону.

Профіль команди

Сторінка гравця

Картка спортсмена візуалізує його сильні та слабкі сторони через радарну діаграму навичок, мапу позицій на полі та динаміку середнього рейтингу за 12 місяців. Окремий блок відображає графік зміни трансферної вартості за кар'єру, історію переходів між клубами та оцінки за останні матчі.

Профіль гравця

Сторінка футбольного матчу

Екран матчу поєднує таймер зворотного відліку, плеєр відеотрансляції, інтерактивне розташування складів на полі (5-3-2) та живий чат уболівальників. У нижній частині розташовані аналітичні прогнози на гру та порівняльна таблиця коефіцієнтів від різних букмекерів.

Огляд матчу та склади

Статистика особистих зустрічей (H2H)

Вкладка H2H на сторінці матчу наочно порівнює історію очних протистоянь двох клубів, останні ігри кожної команди та середню результативність. Вертикальні діаграми показують співвідношення забитих і пропущених м'ячів за інтервалами часу, допомагаючи оцінити ймовірний тотал матчу.

Статистика H2H

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Прогнози та ставки на спорт

Каталог спортивних прогнозів дозволяє фільтрувати поради за видом спорту, типом ставки, автором, показником ROI та розміром коефіцієнта. У сайдбарі виведено таблицю найприбутковіших прогнозистів («Top stable») із відсотком доходу та добірку матчів із високими коефіцієнтами.

Каталог прогнозів

Експерт і гандикапер

Особиста сторінка експерта демонструє прозору статистику його прогнозів: загальну кількість ставок, співвідношення виграшів і поразок, прибутковість за місяцями та видами спорту. Користувачі можуть переглянути активні поради аналітика, почитати відгуки з плюсами й мінусами та підписатися на розсилку його прогнозів.

Профіль експерта

Сторінка експертного прогнозу

Детальна сторінка конкретного прогнозу поєднує картку матчу, статистику прибутковості автора за 7 і 30 днів та розгорнуту аргументацію вибору ставки. Нижче наведено порівняння коефіцієнтів букмекерів на обраний результат, статистику очних зустрічей команд і голосування користувачів щодо проходу ставки.

Сторінка прогнозу

Букмекери

Рейтинг букмекерських компаній структуровано за вкладками (легальні, без ідентифікації, найбільші) з можливістю сортування за оцінкою, надійністю та розміром бонусу. Інтерактивна нижня панель дозволяє додати обрані контори до списку та порівняти їхні умови між собою.

Рейтинг букмекерів

Сторінка огляду букмекера

Детальний огляд букмекера розкриває оцінки за 6 критеріями (надійність, лінія в прематчі та лайві, коефіцієнти, зручність платежів, служба підтримки). Сторінка містить структуровані списки плюсів і мінусів, відгуки гравців та актуальні акційні пропозиції компанії.

Огляд букмекера

Букмекерські бонуси

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

Каталог бонусів

Сторінка огляду бонусу

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

Огляд бонусу

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

Для проєкту розробили 23 адаптивні мобільні екрани, що охоплюють усі розділи порталу: від live-табло та радарних діаграм гравців до таблиць коефіцієнтів і профілів гандикаперів. Складні багатоколонкові таблиці спортивної статистики оптимізовано під компактні вкладки та горизонтальний скрол на смартфонах.

Мобільна версія - мобільний інтерфейс 1
Мобільна версія - мобільний інтерфейс 2
Мобільна версія - мобільний інтерфейс 3
Мобільна версія - мобільний інтерфейс 4
Мобільна версія - мобільний інтерфейс 5
Мобільна версія - мобільний інтерфейс 6
Мобільна версія - мобільний інтерфейс 7
Мобільна версія - мобільний інтерфейс 8
Мобільна версія - мобільний інтерфейс 9
Мобільна версія - мобільний інтерфейс 10
Мобільна версія - мобільний інтерфейс 11
Мобільна версія - мобільний інтерфейс 12
Мобільна версія - мобільний інтерфейс 13
Мобільна версія - мобільний інтерфейс 14
Мобільна версія - мобільний інтерфейс 15
Мобільна версія - мобільний інтерфейс 16
Мобільна версія - мобільний інтерфейс 17
Мобільна версія - мобільний інтерфейс 18
Мобільна версія - мобільний інтерфейс 19
Мобільна версія - мобільний інтерфейс 20
Мобільна версія - мобільний інтерфейс 21
Мобільна версія - мобільний інтерфейс 22
Мобільна версія - мобільний інтерфейс 23