Як ми створили для УАФ сайт, що говорить мовою футболу

Українська асоціація футболу — це не просто наш партнер. Це бренд, що уособлює голос нації та впливає на емоції мільйонів.

Старий сайт не передавав цієї сили: він губив ритм і характер футболу. Тому ми створили новий дизайн, що став продовженням ідеї, духу та енергії УАФ. Динамічний, яскравий, єднальний — такий, як сама гра.

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

Хто наш партнер

Українська асоціація футболу (УАФ) — головна організація, що координує розвиток футболу в Україні: від національних збірних і клубів до масових проєктів.

Основні виклики

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

Ми мали:

Стратегія роботи

Ще до старту ми визначили ключовий підхід:

дизайн має говорити мовою бренду, а не бути просто обгорткою.

Тому ми вирішили працювати з акцентом на айдентиці й емоційності, а не лише на функціональності.

Основна ідея — створити інтерфейс, який передає характер УАФ: сучасний, динамічний, спортивний.

Для цього ми одразу заклали кілька принципів: робота UX і UI в тандемі, синхронна адаптація під мобільні пристрої, мінімалістична візуальна мова з контрастною типографікою та емоційними візуалами.

Цей підхід визначив увесь подальший процес і став основою для рішень на кожному етапі редизайну:

Головна як вітрина бренду

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

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

Живі картки товарів

Каталог товарів був одним із найпроблемніших блоків у старій версії сайту: сірі, невиразні картки без інтерактиву й підказок, що ускладнювали орієнтацію.

Ми змінили це кардинально. Картки стали «живими»:

• користувач може вибрати колір чи розмір товару прямо з каталогу;
• видно кількість відгуків і ключові дії;
• велика кнопка з кошиком чітко веде до покупки;
• на картці одразу є статус товару (новинка, акція, рекомендоване).

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

Візуальні меседжі УАФ

Банери ми перетворили на повноцінні візуальні меседжі. Вони задають тон усьому сайту:

«УАФ — це стиль і характер».

Ми зберегли стилістику брендбуку, але створили авторське втілення. Використали бруталістичні шрифти, контрастні кольори, великі CTA-кнопки та чіткий ритм із візуальними паузами.

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

Читайте, як ми оновлювали дизайн Zavezu: простіша форма — більше заявок.

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

Адаптацію під мобільні ми робили паралельно з десктопом — це дало змогу зберегти цілісність стилю і логіки. Ми не просто «стиснули» екрани, а переосмислили структуру, акценти й відступи для малого формату.

Зміни відчутні одразу:

• типографіка залишилася великою і виразною, але стала компактнішою;
• фільтри винесені в зручну кнопку;
• меню спрощене;
• всі CTA — у зоні великого пальця.

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

Що далі

Наразі сайт перебуває на етапі технічного впровадження, а дизайн-рішення планується масштабувати на інші напрями.

Для нас цей кейс ще раз довів:

дизайн — не декор, а мова бренду.

Айдентика має бути відчутною в кожному пікселі, а командна злагодженість — ключем до швидких і точних рішень.

Наступний крок після запуску сайту — підключення Retention Marketing, щоби посилити ефект від редизайну.