LandingFitnessFormularzNext.jsUI

FORMA - trener personalny

Koncepcyjna obecność marki FORMA jako „coaching OS”, nie klasyczny landing. Pionowy spine zamiast menu, full-bleed kadry treningowe, programy jako ekspandujące panele fotograficzne, dzień w formie film-stripu i kontakt jako trzyetapowy sygnał (cel → tryb → dane).

2026

projekt koncepcyjny

Otwórz demo

// Demo

Zobacz produkt w działaniu

Interaktywna makieta kluczowych ekranów. Kliknij zakładki, żeby przełączać widoki, albo otwórz pełny ekran.

// Zakres

Co dokładnie zbudowaliśmy

Pełna lista funkcji oddanych w tym wdrożeniu, pogrupowana modułami.

UX flow

Pionowy spine 01–04 + dolny journey dock
Pulse: full-bleed hero i floating chip sesji
Path: jeden otwarty panel, reszta zwinięta

Treść i sesja

Trzy ścieżki: Siła, Masa, Cut z realnymi zdjęciami
Reel: bloki A/B/C z zegarem, RPE i ćwiczeniami
Galeria realnych ujęć treningowych na case study

Kontakt

3 kroki: cel → tryb → dane kontaktowe
Ekran potwierdzenia „Sygnał wysłany”
Zgoda RODO w ostatnim kroku

1Wyzwanie

Typowa strona trenera to stock + trzy karty + formularz. Potrzebny był oryginalny flow UI/UX, który prowadzi jak sesja - od impulsu do rezerwacji - i opiera się na realnych zdjęciach.

2Rozwiązanie

Zamiast klasycznego menu zrobiliśmy „coaching OS”: pionowy spine (01–04), journey dock i flow Pulse → Path → Reel → Signal. Programy to ekspandujące panele ze zdjęciami, dzień treningowy - film-strip z realnymi kadrami, kontakt - 3-krokowy booking zamiast długiego formularza. Paleta filmowa: czerń, krem, sygnałowy coral.