Дизайн сайта Страница матча

Техническое задание (ТЗ) для дизайнера на создание дизайна сайта 
Это техническое задание по всему проекту,  но сейчас нужно сделать только Страницу матча!!!

1. Общая информация о проекте

Тип сайта: Информационный сайт о футбольных матчах.
Количество страниц: 2 страницы – Главная страница и Страница матча.
Основная цель сайта: Предоставление пользователям информации о футбольных матчах, включая расписание, результаты, статистику и аналитику.
Целевая аудитория: Футбольные болельщики, аналитики, журналисты, а также любители спорта.

2. Требования к дизайну

2.1. Общий стиль и оформление

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

• Цветовая гамма: Свежая, динамичная – преобладание синих, зеленых и белых цветов (ассоциация со спортом).

• Типографика: Простая, читаемая, но современная. Шрифты без засечек (например, Roboto или Open Sans).

• Иконография: Использовать понятные иконки для навигации и функциональных элементов.

• Интерактивность: Добавлять hover-эффекты для кнопок и интерактивных элементов.

• Технология: Figma

• Технологические фичи: демонстрация эффектов при наведении в прототипе, UI Kit, компонентность, auto layouts и flexible элементы для демонстрации работы страницы на различных устройствах

3. Главная страница

Пример для референса: tips.gg

3.1. Структура страницы:

1. Хедер (верхняя панель):

   • Логотип (слева).

   • Меню навигации: "Главная", "Матчи", "Новости", "Контакты".

   • Иконки для социальных сетей и кнопка поиска (справа).

2. Главный блок:

   • Большой баннер с анонсом самого важного матча (изображение, дата, команды).

   • Призыв к действию: “Узнать больше”.

   • 

3. Список матчей:

   • Отображение списка матчей в виде карточек (как на tips.gg).

   • Каждая карточка содержит:

     • Названия команд и логотипы.

     • Дата и время матча.

     • Основные показатели (например, количество побед или статистика).

   • Фильтры для отбора матчей по дате, лиге или турниру.

4. Сайдбар (справа):

   • Рейтинг команд футбольных

   • Список букмекеров, где можно сделать ставки (см. фото)

   • Наиболее популярные матчи (тренды).

   • Последние прогнозы

5. Футер (нижняя панель):

   • Лого

   • Копирайт текст.

4. Страница матча (На странице матча должна быть вся информация, которая есть на https://oddspedia.com/football/oman-saudi-arabia-2137, кроме беттинга и другой информации о букмекерских конторах, но вся информация по статистике должна быть ОБЯЗАТЕЛЬНО) 

Пример для референса: oddspedia.com 

4.1. Структура страницы:

1. Хедер:

   • Такой же, как на главной странице.

2. Основной блок информации о матче:

   • Информация о командах (названия, логотипы).

   • Дата, время и место проведения матча.

   • Текущий счет (если матч уже начался или закончился).

   • Таблица статистики команд (удары, владение мячом, карточки и т.д.).

   • Сравнение результатов предыдущих встреч между командами.

   • Форма команд (результаты последних 5 матчей).

3. Сайдбар (справа):

   • Другие матчи, которые могут заинтересовать пользователя.

   • Новости, аналитика или интересные факты о командах.

4. Блок аналитики и статистики:

   • Графики и диаграммы о эффективности команд.

   • Сравнение ключевых игроков (голы, ассисты, карточки).

5. Отзывы и комментарии:

   • Место для пользовательских комментариев или обсуждений матча.

6. Футер:

   • Как на главной странице.
     
     НЕОБХОДИМО СДЕЛАТЬ ТОЛЬКО Страницу матча!!!