Как мы создали для УАФ сайт, говорящий на языке футбола

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

Старый сайт не передавал этой силы: он терял ритм и характер футбола. Поэтому мы создали новый дизайн, который стал продолжением идеи, духа и энергии УАФ. Динамичный, яркий, объединяющий — такой же, как сама игра.

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

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

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

Основные вызовы

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

Мы должны были:

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

Еще до старта мы определили ключевой подход:

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

Поэтому мы решили работать с акцентом на айдентике и эмоциональности, а не только на функциональности.

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

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

Этот подход определил весь дальнейший процесс и стал основой для решений на каждом этапе редизайна:

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

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

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

Живые карточки товаров

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

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

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

Структуру построили интуитивно: слева — фильтры и сортировка, справа — три карточки в ряд. Это позволяет быстро найти нужное и не тратить время на лишние переходы.

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

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

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

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

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

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

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

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

Изменения ощутимы сразу:

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

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

Что дальше

Сейчас сайт находится на этапе технического внедрения, а дизайн-решение планируется масштабировать на другие направления.

Для нас этот кейс еще раз доказал:

дизайн — не декор, а язык бренда.

Айдентика должна быть ощутимой в каждом пикселе, а командная слаженность — ключом к быстрым и точным решениям.

Следующий шаг после запуска сайта — подключение Retention Marketing, чтобы усилить эффект от редизайна.