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

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

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

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

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

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

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

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

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

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

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

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

Для этого мы сразу заложили несколько принципов:

• работа UX и UI в тандеме;
• синхронная адаптация под мобильные устройства;
• минималистичный визуальный язык с контрастной типографикой и эмоциональными визуалами;
• привлечение нашей SEO-команды для формирования структуры и контента, которые одновременно работают на поисковую видимость и пользовательские сценарии.

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

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

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

Слева — концептуальные вайрфреймы, справа — финальное UI-оформление

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

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

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

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

Автоматизированный поиск и фильтры

1. При нажатии на поле появляются теги популярных товаров и блок с карточками-новинками.
2. При вводе пользователь видит автоподсказки (товары, категории, страницы).
3. Если точного результата нет, то система показывает максимально схожие товары.

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

Оформление заказа

1. Вход через Google или как гость.
2. Процесс разделен на три простых шага: доставка → контактные данные → оплата.
3. Такая структура упрощает взаимодействие с сайтом и уменьшает когнитивную нагрузку на пользователя, что делает оформление заказа быстрым и удобным.

Корзина

Есть оформление заказа по отдельным товарам, изменение цвета и размера, а также применение промокода.

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

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

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

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

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

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

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

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

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

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

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

Что дальше

Редизайн превратил фан-шоп УАФ из просто онлайн-магазина в интересное, удобное и эмоциональное пространство для фанов, одновременно поддерживающее бренд и увеличивающее потенциальную конверсию.

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

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

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

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

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

Кейс создан в соавторстве с Валерией Ивановой, UX Specialist в Netpeak Ukraine.