До змісту
Tvorum.
КонцептФітнес-клуб2026

PULSE — концепт сайту для фітнес-клубу

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

Це концепт, а не клієнтський проєктКонцепт-проєкт студії: демонстрація дизайну та функціоналу для ніші. Так ми бачимо сильний сайт для фітнес-клубу: структура, дизайн, тексти й функціонал. Замовте — і ваш сайт стане наступним кейсом.

PULSE — концепт сайту для фітнес-клубу — головний екран
Ніша
Фітнес-клуб
Тип сайту
Сайт-візитка
Рік
2026
Формат
Концепт студії

01 / Задача

Яку задачу вирішує сайт

Фітнес-клуб продає не тренажери, а звичку. Людина, яка шукає зал, порівнює 3–4 клуби поруч з домом і відсіює їх за кількома простими питаннями: чи зручний розклад, скільки коштує абонемент без «зірочок», хто тренери і чи не буде страшно прийти вперше. У великому прифронтовому місті додається ще одне: чи працює клуб, коли немає світла.

Сайт мав працювати на чотири цілі:

  • заявки на пробне тренування — головна конверсія для клубу: після першого візиту людина купує абонемент у рази частіше, ніж з холодного дзвінка;
  • розклад як інструмент, а не PDF-картинка — щоб людина за 10 секунд знайшла «сайкл у вівторок увечері» і одразу записалася;
  • прозорі ціни — порівняння абонементів і річна вигода без дзвінка менеджеру;
  • зняття страхів — новачок, нічні тренування, повітряні тривоги, блекаути. Кожен блок закриває одне заперечення.

02 / Рішення

Дизайн і UX-рішення

Ідея — сайт як пульсометр. У шапці живе ЕКГ-монітор: прокрутка «розганяє» пульс від 62 до 190 ударів, змінюється зона й колір інтерфейсу — від кислотно-зеленого спокою до рожевого максимуму. Розділи названі зонами Z1–Z5, а запис на пробне тренування стоїть на «максимумі» — саме там, де відвідувач уже найбільше залучений.

Візуальна мова. Чорний фон, неоновий лайм і рожевий, гігантська стиснута типографіка Roboto Flex з варіативною шириною (літери логотипа «скорочуються» в ритмі серця), стрічки-marquee і моноширинні HUD-підписи. У герої — живий HUD тренування: пульс, калорії й раунди інтервального заняття оновлюються щосекунди. Тренерів представляють неонові вивіски їхніх напрямів на цегляній стіні, а зони клубу — світні плани приміщень у перспективі: видно 12 силових рам, ринг 6×6 м і 24 байки сайкл-студії. Уся графіка — легкий інлайн-SVG.

Інтерактив, що продає:

  • тижнева сітка розкладу з фільтрами за напрямом, тренером і днем; на мобільному вона перетворюється на список дня, а клік по заняттю відкриває картку з вільними місцями й кнопкою «прийти безкоштовно», яка сама заповнює форму;
  • абонементи з перемикачем місяць/рік, анімованою зміною ціни, підрахунком річної економії й таблицею порівняння;
  • калькулятор ІМТ і калорій за формулою Міффліна — Сан-Жеора з розподілом БЖВ і рекомендацією занять, яка одним кліком фільтрує розклад;
  • блок «Світло зникло — тренування ні»: кнопка симулює блекаут і запуск генератора, а графік завантаженості показує, коли в залі вільно саме зараз;
  • форма пробного тренування з маскою телефону, валідацією й різною відповіддю вдень і вночі.

03 / Функціонал

Що є на сайті

  • Пульсометр у шапці: прокрутка змінює BPM, зону й колір інтерфейсу
  • Тижневий розклад із фільтрами й модалкою заняття, на мобільному — список дня
  • Абонементи з перемикачем місяць/рік і таблицею порівняння
  • Калькулятор ІМТ, калорій і БЖВ із рекомендацією занять
  • Симуляція блекауту: генератор, укриття, резервний інтернет
  • Графік завантаженості залу по годинах з позначкою «зараз»
  • Запис на пробне тренування з валідацією й автозаповненням із розкладу
  • Тренери — неонові вивіски напрямів із переходом до їхніх занять
  • Голографічні SVG-плани зон клубу з обладнанням і розмірами
  • Адаптив до 390 px, клавіатурна навігація, prefers-reduced-motion

04 / Екрани

Як сайт виглядає на компʼютері й телефоні

PULSE — концепт сайту для фітнес-клубу — головна сторінка повністю
Головна сторінка повністю — гортайте всередині рамки
PULSE — концепт сайту для фітнес-клубу — мобільна версія
Мобільна версія

Технології

Стек

Технології підбираємо під задачу: швидке завантаження, зручне редагування контенту та інтеграції з вашими сервісами.

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Пульсометр прокрутки: Canvas-ЕКГ і зони пульсу
  • Тижнева сітка розкладу з фільтрами та модалкою заняття
  • Калькулятор ІМТ і калорій (Міффлін — Сан-Жеор)
  • Тарифи з перемикачем місяць/рік і таблицею порівняння
  • Симуляція блекауту та графік завантаженості залу
  • Інлайн-SVG: неонові вивіски й голографічні плани зон
  • IntersectionObserver-анімації з prefers-reduced-motion
  • Готовий до інтеграції з CMS

Палітра

Кольори концепту

  • Колір #0a0a0b
  • Колір #ccff00
  • Колір #ff3ea5
  • Колір #ff7438
  • Колір #f3f3ee

Портфоліо

Інші роботи

Усі роботи

0 ₴ · 24h

Хочете такий самий — але під ваш бізнес?

Залиште контакт — за 24 години покажемо безкоштовний прототип головної сторінки: у стилі цього концепту або в зовсім іншому.

  • Прототип за 24 години — безкоштовно
  • Фіксована ціна, без «доплат» в процесі
  • Запуск від 5 днів
  • Гарантія та підтримка після здачі
Де відповісти?

Без спаму. Натискаючи кнопку, ви погоджуєтесь з політикою конфіденційності.