Всем привет! На связи Настя, фаундер международного digital-агентства AZ Agency. Сегодня хочу рассказать о технической стороне одного из наших самых масштабных проектов — выходе на рынок США нового бренда детских футбольных школ “Sportika Labs”.
В апреле в комьюнити предпринимателей R-Founders я увидела запрос от Руслана, основателя крупной сети детских футбольных школ. Он рассматривал агентства, которые могли бы разработать многостраничный сайт и цифровую инфраструктуру для запуска бренда в США.Задача полностью совпадала с нашими компетенциями в разработке сайтов на WordPress и Webflow, и я решила откликнуться.
Спустя несколько дней команда выбрала нас из нескольких агентств, и мы приступили к работе над проектом, который впоследствии вырос в полноценную цифровую экосистему: корпоративный сайт на WordPress, франшизный лендинг на Webflow и целый набор технических решений, необходимых для масштабирования бренда в десятках городов США.
О проекте
Sportika Labs — новый американский бренд детских футбольных школ, которому для выхода на рынок США требовалась полноценная цифровая система: корпоративный сайт, сайт школы, франшизный лендинг и инфраструктура, готовая к масштабированию.
Если первая статья была посвящена дизайну и визуальной системе проекта, то здесь мы делимся внутренней кухней разработки, сложными техническими решениями и особенностями продакшена.
Многостраничный корпоративный сайт на WordPress
Основным продуктом стал большой корпоративный сайт на WordPress. Проект включал десятки страниц, многоуровневую архитектуру, систему городов, динамический контент и сложные пользовательские сценарии.
Старт проекта
Клиент пришёл с уже подготовленным списком кастдев-персон, которые нужно учесть при разработке карты сайта.Это немного усложнило этап, потому что: — нужно было учитывать разные типы пользователей; — продумывать сценарии на уровне реального поведения родителей; — строить структуру с учётом будущих продуктов и масштабирования.
Этот этап стал одним из самых трудоёмких, но и обеспечил точность всей дальнейшей разработки.
Карта сайта — большой многоэтапный процесс
Первоначальная структура включала отдельные страницы для каждой школы в каждом городе.Позже, по итогам анализа и обсуждений, часть решений была оптимизирована:
- убрали лишние уровни вложенности;
- упростили структуру переходов;
- переработали навигацию под аудиторию США;
- внесли изменения уже на стадии UI, что потребовало гибкости от команды разработки.
По мере работы и уточнения бизнес-задач структура упрощалась и трансформировалась.
На этапе UI-дизайна некоторые решения были пересмотрены, поэтому команда разработки работала гибко, адаптируя будущую верстку под обновлённую модель продукта.
Прототипы + вычитка нэйтивами
На этапе прототипов клиент предоставлял исходные тексты. После финального дизайна всё содержание проходило:
- вычитку нэйтив-редактором,
- адаптацию под американский культурный контекст,
- корректировку под коммуникационный стиль бренда.
Это позволило сделать сайт не просто переведённым, а органичным для рынка США.
Особенности разработки и верстки (WordPress)
Каждый блок создан послойно
Мы сделали сайт так, чтобы каждый визуальный блок состоял из отдельных анимируемых слоёв.
Например: — фото футболиста, отдельный слой, — текстуры и фоны, отдельные, — графика, отдельная.
Это позволило:
- анимировать элементы отдельно,
- создавать лёгкое ощущение движения,
- удержать баланс между динамикой и минимализмом,
- поддерживать высокую производительность.
Таблица достижений учеников
Мы разработали интерактивный блок со статистикой учеников, который отображает индивидуальные показатели и достижения.По сути — это кастомная модульная таблица с динамическими данными.
Интерактивная карта локаций
Добавили карту с точками школ и системой фильтров.Карта работает как полноценный интерфейс для выбора города и школы.
Динамический контент под город пользователя
На сайте есть функционал, который позволяет подстраивать контент под город входа пользователя. Если человек из Нью-Йорка — он видит один набор данных; из Лос-Анджелеса — другой.
Резиновая верстка (adaptive responsive)
Мы сделали сайт полностью резиновым, чтобы он корректно подстраивался под ширины любых экранов.
Важно:Клиент хотел добавить zoom in/out, но при резиновой верстке это технически невозможно без ломки структуры. Мы корректно объяснили ограничения и нашли компромисс.
Минимальные анимации — по запросу клиента
Клиент сразу обозначил предпочтение к минимализму.Поэтому:
- анимации точечные,
- без «вылетающих» элементов,
- без перегрузки интерфейса.
Результат — чистая и профессиональная динамика, комфортная для американской аудитории.
Франшизный лендинг на Webflow
Параллельно мы разрабатывали отдельный лендинг — более маркетинговый, экспертный и визуально насыщенный.
Что сделали:
- создали структуру лендинга под франшизную модель,
- встроили реальные материалы клиента: графики, таймлайны, скриншоты,
- адаптировали дизайн под Webflow, сохранив весь фирменный стиль,
- подключили CRM (Kommo),
- заверстали сайт на Webflow примерно за 1,5 недели, благодаря тому что дизайн уже был полностью готов.
Адаптивы и работа с разными разрешениями
Отдельным направлением в разработке стал продуманный адаптив под все устройства: от широкоформатных десктопов до маленьких мобильных экранов. Для проекта с большим количеством графики, слоёв и динамических элементов это был один из самых технически сложных этапов.
Мы проработали адаптив так, чтобы:
- каждый блок корректно перестраивался, не теряя своей структуры;
- слойные элементы анимировались без визуальных искажений — независимо от устройства;
- типографика оставалась читаемой, а иерархия контента понятной;
- фото и иллюстрации не искажались при переходе на планшеты и мобильные;
- нагрузка на устройство не увеличивалась при уменьшении экрана.
Сроки проекта на WordPress и Webflow
- Начало проекта: май 2025 г.
- UI дизайн: 350 часов
- WordPress-сайт: 111 часов
- Webflow-лендинг: 1,5 недели
- Общее время разработки: около 4 месяцев (включая дизайн-концепции, прототипы, пересогласования и верстку) 461 час
Итоги
Проект Sportika Labs стал примером комплексной разработки цифровой экосистемы:
- два сайта на разных платформах: WordPress и Webflow,
- адаптивная архитектура под десятки городов,
- динамические данные и интерактивные карты,
- послойные блоки для мягких анимаций,
- локализация под рынок США,
- CRM-интеграция на лендинге,
- глубокий кастдев и сложная карта сайта.
Это один из тех проектов, где разработка стоит в одном ряду с дизайном по уровню сложности и значимости — и показывает, как продуманный технический фундамент помогает бренду уверенно выходить в новую страну.
Ссылка на сайт Wordpress: https://sportikalabs.com/
Ссылка на сайт Webflow : https://partner.sportikalabs.com/
Хотите обсудить проект?
Свяжитесь с нами удобным для вас способом — мы с удовольствием обсудим ваши идеи:
- Email: team@azstudio.agency
- Telegram: @anastasiiaa_zh
- WhatsApp: +393457638642
Мы разрабатываем нейминг, брендинг, UX/UI-дизайн, дизайн мобильных и web приложений, motion-дизайн, Pitch Deck, а также сайты на Tilda, Webflow, WordPress, Framer и интернет-магазины на Shopify.