Website Design Match Page
Technical task (TT) for the designer to create the website design
This technical task covers the entire project, but right now we only need to create the Match Page!!!
1. General information about the project
Type of website: Informational website about football matches.
Number of pages: 2 pages – Home page and Match Page.
Main goal of the website: To provide users with information about football matches, including schedules, results, statistics, and analytics.
Target audience: Football fans, analysts, journalists, as well as sports enthusiasts.
2. Design requirements
2.1. General style and design
Design style: Modern, minimalist, with a focus on user-friendliness.
Color scheme: Fresh, dynamic – predominance of blue, green, and white colors (association with sports).
Typography: Simple, readable, yet modern. Sans-serif fonts (e.g., Roboto or Open Sans).
Iconography: Use clear icons for navigation and functional elements.
Interactivity: Add hover effects for buttons and interactive elements.
Technology: Figma
Technological features: demonstration of hover effects in the prototype, UI Kit, component-based design, auto layouts, and flexible elements to showcase the page's functionality on different devices
3. Home page
Reference example: tips.gg
3.1. Page structure:
Header (top panel):
Logo (on the left).
Navigation menu: "Home", "Matches", "News", "Contacts".
Social media icons and search button (on the right).
Main block:
Large banner announcing the most important match (image, date, teams).
Call to action: “Learn more”.
Match list:
Display the list of matches in card format (like on tips.gg).
Each card contains:
Team names and logos.
Date and time of the match.
Key indicators (e.g., number of wins or statistics).
Filters to select matches by date, league, or tournament.
Sidebar (on the right):
Ranking of football teams
List of bookmakers where bets can be placed (see photo)
Most popular matches (trends).
Latest predictions
Footer (bottom panel):
Logo
Copyright text.
4. Match page (The match page must contain all the information available at https://oddspedia.com/football/oman-saudi-arabia-2137 except for betting and other information about bookmakers, but all information on statistics must be MANDATORY)
Reference example: oddspedia.com
4.1. Page structure:
Header:
The same as on the home page.
Main block of match information:
Information about the teams (names, logos).
Date, time, and location of the match.
Current score (if the match has already started or ended).
Statistics table for the teams (shots, possession, cards, etc.).
Comparison of results from previous meetings between the teams.
Team form (results of the last 5 matches).
Sidebar (on the right):
Other matches that may interest the user.
News, analytics, or interesting facts about the teams.
Analytics and statistics block:
Graphs and charts about team performance.
Comparison of key players (goals, assists, cards).
Reviews and comments:
Space for user comments or discussions about the match.
Footer:
As on the home page.
ONLY the Match Page NEEDS TO BE CREATED!!!
Технічне завдання (ТЗ) для дизайнера на створення дизайну сайту
Це технічне завдання по всьому проекту, але зараз потрібно зробити лише Сторінку матчу!!!
1. Загальна інформація про проєкт
Тип сайту: Інформаційний сайт про футбольні матчі.
Кількість сторінок: 2 сторінки – Головна сторінка та Сторінка матчу.
Основна мета сайту: Надання користувачам інформації про футбольні матчі, включаючи розклад, результати, статистику та аналітику.
Цільова аудиторія: Футбольні вболівальники, аналітики, журналісти, а також любителі спорту.
2. Вимоги до дизайну
2.1. Загальний стиль та оформлення
Стиль дизайну: Сучасний, мінімалістичний, з акцентом на зручність користувача.
Кольорова гама: Свіжа, динамічна – переважання синіх, зелених та білих кольорів (асоціація зі спортом).
Типографіка: Проста, читабельна, але сучасна. Шрифти без зарубок (наприклад, Roboto або Open Sans).
Іконографіка: Використовувати зрозумілі іконки для навігації та функціональних елементів.
Інтерактивність: Додавати hover-ефекти для кнопок та інтерактивних елементів.
Технологія: Figma
Технологічні фічі: демонстрація ефектів при наведені в прототипі, UI Kit, компонентнісь, auto layouts і flexible елементи для демонстрації роботи сторінки на різних девайсах
3. Головна сторінка
Приклад для референсу: tips.gg
3.1. Структура сторінки:
Хедер (верхня панель):
Логотип (зліва).
Меню навігації: "Головна", "Матчі", "Новини", "Контакти".
Іконки для соціальних мереж та кнопка пошуку (праворуч).
Головний блок:
Великий банер із анонсом найголовнішого матчу (зображення, дата, команди).
Заклик до дії: “Дізнатися більше”.
Список матчів:
Відображення списку матчів у вигляді карток (як на tips.gg).
Кожна картка містить:
Назви команд і логотипи.
Дата та час матчу.
Основні показники (наприклад, кількість виграшів або статистика).
Фільтри для відбору матчів за датою, лігою або турніром.
Сайдбар (праворуч):
Рейтинг команд футбольних
Список букмекерів де можна зробити ставки (див. фото)
Найбільш популярні матчі (тренди).
Остані прогнози
Футер (нижня панель):
Лого
Копірайт текст.
4. Сторінка матчу (На сторінці матча має бути вся інфа яка є на https://oddspedia.com/football/oman-saudi-arabia-2137 окрім беттінга і іншої інформації про букмекерські контори, але вся інфа по статистиці має бути ОБОВ’ЯЗКОВО)
Приклад для референсу: oddspedia.com
4.1. Структура сторінки:
Хедер:
Такий самий, як на головній сторінці.
Основний блок інформації про матч:
Інформація про команди (назви, логотипи).
Дата, час та місце проведення матчу.
Поточний рахунок (якщо матч уже почався або закінчився).
Таблиця статистики команд (удари, володіння м'ячем, картки тощо).
Порівняння результатів попередніх зустрічей між командами.
Форма команд (результати останніх 5 матчів).
Сайдбар (праворуч):
Інші матчі, які можуть зацікавити користувача.
Новини, аналітика або цікаві факти про команди.
Блок аналітики та статистики:
Графіки та діаграми про ефективність команд.
Порівняння ключових гравців (голи, асисти, картки).
Відгуки та коментарі:
Місце для користувацьких коментарів або обговорень матчу.
Футер:
Як на головній сторінці.
ПОТРІБНО ЗРОБИТИ ТІЛЬКИ Сторінку матчу!!!
Client's feedback on cooperation with Katerina T.
Website Design Match PageAs always, Kateryna performed the work at the highest level, a talented designer who always does everything excellently!!!
Freelancer's feedback on cooperation with Serhii Troyan
Website Design Match PageIf all clients were like this, designers would forget the word "burnout." Clear stable communication, detailed specifications, only constructive feedback.
-
1080 10 0 Sergiy, hello. I have already developed user-friendly interface designs in these projects
Behance
Behance
I have 5 years of experience in digital design. Here is my portfolioBehance I develop everything individually for the client. I analyze competitors and the target audience to highlight you and your product in the market. Shall we get in touch?
Сергій, вітаю. Я вже розробляла дизайн зручних інтерфейсів у цих проєктахBehance
Behance
У діджитал дизайні 5 років. Ось моє портфоліоBehance Все розробляю індивідуально під клієнта. Аналізую конкурентів та ЦА, щоб виділити вас та ваш продукт на ринку. Давайте спишемося?
Current freelance projects in the category Corporate Style
Identa
648 USD
Create a visual identity for a new dental clinic, several key steps need to be taken: study how the visual identity of other dental offices in the region looks and determine what distinguishes this practice. How the visual identity must correspond to , increasing brand… Logo Design, Corporate Style ∙ 18 hours 49 minutes ago ∙ 38 proposals |
It is necessary to create 2-3 posts on Instagram with a carousel.
24 USD
It is necessary to create 2-3 posts on Instagram Theme: SMM blog One post will have from 5 to 7 slides Examples will be sent in private It is important to attach examples of your graphic design work. Social Media Page Design, Corporate Style ∙ 23 hours 45 minutes ago ∙ 25 proposals |
Full Stream-Design for Twitch and other platforms
120 USD
Hello! I am launching a streaming project under the pseudonym Moysha — this is a sarcastic, ironic Jewish character. I am working for an audience on Twitch / YouTube / Kick. I am looking for a designer to create a complete stream design package that will combine:Jewish… Social Media Page Design, Corporate Style ∙ 1 day ago ∙ 4 proposals |
Design of YouTube channel layout (logo + banner, psychology)Looking for a designer for the branding of an English-speaking YouTube channel without a face. The theme is dark psychology, cognitive traps, thinking. What is needed: — Create a stylish logo (possibly a meaningful sign) — Channel banner (minimalism, clean structure, focus on… Social Media Page Design, Corporate Style ∙ 1 day 14 hours ago ∙ 9 proposals |
Looking for a graphic designer (part-time / full-time / ongoing collaboration on various projects)
571 USD
Hello, My name is Stanislav. I run a wedding agency in Germany. We provide artist services — hosts, DJs, and other performers — for weddings. We are currently looking for a graphic designer for long-term collaboration who will become part of our team and take on regular… Social Media Page Design, Corporate Style ∙ 1 day 19 hours ago ∙ 22 proposals |