01 · Контекст проекта
Ориентация и Исходная точка
FitHub Sport Club — это продуктовая концепция современного фитнес-клуба. Целью было создать полноценную многостраничную платформу: от главной страницы до интернет-магазина, с UX-решениями, основанными на реальных потребностях пользователей.
Концепция клуба включает персональные и групповые тренировки, несколько тарифных планов, protein bar, раздевалки с бесплатными полотенцами, профили тренеров, merch-магазин и активное Instagram-сообщество.
Отрасль
Produktkonzept · B2C
Задача
UX/UI Design · Multi-Page
Роль
UX Strategie · Design · System
02 · Требования
Что должна обеспечить платформа
→Показать и персональные, и групповые тренировки с сертифицированными тренерами
→Несколько ценовых моделей: Test Drive, Basic, Premium и VIP
→Разные тренировочные программы: Strength, Fitness, CrossFit, Yoga и Pilates
→Инфраструктура клуба: раздевалки, душевые, бесплатные полотенца и protein bar
→Секция сообщества и интеграция Instagram
→Каталог тренеров с отдельными профилями
→Merch-раздел с футболками, аксессуарами и добавками
→Понятная коммуникация локации: всего 5 минут до метро
→Lead-capture форма для заявок на обратный звонок
03 · UX Анализ
Структура вместо сложности
Ключевой UX-вопрос звучал так: как разместить расписание, тарифы, магазин, тренеров и инфраструктуру на одном сайте, не перегрузив пользователя? Ответом стала чёткая информационная архитектура с отдельными страницами и сильной визуальной системой.
// 01
Понятная структура страниц
Home, Schedule, Coaches, Shop и Gym
// 02
Sticky-навигация для быстрого доступа к бронированию и корзине
Sticky-навигация для быстрого доступа к бронированию и корзине
// 03
Разделение между знакомством на главной и действием на внутренних страницах
Разделение между знакомством на главной и действием на внутренних страницах
// 04
Визуальная иерархия
teal для CTA, orange как акцент энергии
Информационная архитектура и структура макета
04 · Design System
Teal & Orange Identity
Название FitHub и визуальная айдентика были разработаны специально для этой концепции. Логотип объединяет иконку dumbbell и геометрическую типографику. Teal отвечает за ощущение доверия и действия, а orange-red добавляет энергию и динамику на контрасте тёмных hero-блоков и более светлых контентных секций.
Основной цвет — Доверие и Действие
Бирюзовый — CTA бронирования, навигация, элементы доверия
Акцентный цвет — Энергия и Динамика
Оранжево-красный — Хайлайты, тренировочные программы, бейджи
Логотип
Иконка гантели + геометрическая типографика. Сильный, узнаваемый, спортивный.
Ритм фона
Темные Hero-секции чередуются со светлыми контентными блоками — визуальный ритм дыхания.
Дизайн-система и UI-компоненты
05 · Стратегия
User Journey как основа
Стратегия строилась по принципу пользовательского пути: вдохновить, объяснить, убедить, сконвертировать. У каждой страницы есть своя чёткая роль внутри этой воронки.
01Hero-секция с сильным позиционированием и понятным CTA
02Отдельные страницы для Schedule, Coaches, Shop и Gym вместо перегруженной главной
03Ценовая логика на основе четырёх моделей членства с ясным различием ценности
04Элементы сообщества, social proof и точки контакта на всём пути пользователя
06 · Процесс дизайна
От концепта к платформе
01
Определение информационной архитектуры и структуры страниц
Определение информационной архитектуры и структуры страниц
02
Проработка desktop-макетов и визуальной иерархии в Figma
Проработка desktop-макетов и визуальной иерархии в Figma
03
Создание переиспользуемой дизайн-системы для всех страниц
Создание переиспользуемой дизайн-системы для всех страниц
04
Параллельная проработка мобильных экранов и паттернов взаимодействия
Параллельная проработка мобильных экранов и паттернов взаимодействия
07 · Финальное решение
Платформа во всю ширину
Конверсионный лендинг, структурированное расписание, интегрированный магазин и доверительные профили тренеров — всё как единая система.
Интерактивное расписание занятий
Интегрированный интернет-магазин
08 · Мобильный опыт
Мобайл как самостоятельный путь
Мобильная версия проектировалась не как урезанное дополнение, а как полноценный основной пользовательский сценарий.
Hamburger menu, компактные product cards и overlay-модули бронирования дают тот же полный путь на смартфоне без потери функциональности.
Quick-action иконки для wishlist и cart прямо в header
Интерактивные карточки товаров с add-to-cart и detail popups
Overlay-сценарий записи на занятия без жёстких переходов между страницами
Lead generation через модальную форму для newsletter и callback requests
09 · Результаты
Что было доставлено
Не MVP-фрагмент — а полноценный, цельный продукт. Каждая страница с собственной целью, все вместе — система.
5+
Полноценный многостраничный дизайн
5+ связанных страниц: Schedule, Coaches, Shop, Gym и Contact — каждая с чёткой пользовательской задачей.
4
Спроектированы 4 модели подписки
Тарифы Test Drive, Basic, Premium и VIP с ясной визуальной иерархией и логикой конверсии.
2×
Mobile-First прототип
Полностью адаптивный Figma-прототип для desktop и smartphone.
✓
Полная дизайн-система
Единые UI-компоненты, типографика и палитра teal/orange, применённые на всей платформе.
