SuperDuperGym

Context

Il sito del coaching di bodybuilding di Lorenc, online e in presenza fra Brescia e Bergamo. Non un contatto rapido: una candidatura. Il tono è quello che il coach usa davvero — diretto, e selettivo fino a dire in pagina chi non prende.

The design problem

Un sito di coaching fitness ha una forma prevista: foto in palestra, tre pacchetti affiancati, un pulsante per scrivere subito. Il problema non era distinguersi con la grafica. Era che quella forma promette il contrario di quello che questo coach fa: prende poche persone, e sceglie. Un sito che invita tutti avrebbe smentito il servizio nella prima schermata.

The idea

La selezione è il prodotto. La pagina è costruita come un percorso di candidatura e non come un listino: prima il metodo per intero, poi chi non viene preso, e soltanto dopo i percorsi e il modulo. Chi arriva in fondo ha già capito se è il caso suo.

The world

Un solo icosaedro di materia digitale condiviso fra le scene — lo statement, il metodo, i dati, i bilancieri — invece di un effetto per sezione. La stessa forma cambia comportamento a seconda di dove si è nella pagina: è il modo di dire, senza scriverlo, che le sezioni sono un discorso solo.

The experience

Il prezzo non sta dentro la card: il prezzo è la card, e lo è letteralmente. Le cifre escono dal margine interno e prendono una fascia propria, in un carattere stretto, larghe circa tre quarti della colonna; il simbolo dell'euro sta in alto a sinistra in mono e «/mese» corre verticale lungo il fianco, perché una didascalia orizzontale ruberebbe larghezza alla cifra. Il percorso consigliato ha la cifra piena, gli altri due a contorno: la gerarchia la fa il pieno contro il vuoto, non la dimensione.

Motion language

Sotto ogni percorso c'è un bilanciere lungo quanto la card, e fra un percorso e l'altro cambia solo nel numero di dischi. Il livello si legge dalla quantità, non da un'etichetta che lo dichiara. Durate e curve hanno nomi e stanno in un file solo: il ritmo si cambia lì.

Development

1. Vite e TypeScript. Il «chrome» di pagina e l'esperienza GSAP/WebGL si avviano come due gruppi indipendenti: se il secondo fallisce, il sito resta intero e usabile.
2. Le misure delle card dei percorsi sono in container query e non in unità di finestra. Fra 760 e 900 px la griglia diventa una colonna sola da 640 px, e con una misura legata alla finestra la cifra restava al 22% della card invece che a tre quarti.
3. Fotografie reali del coach, mai d'archivio: è un sito che vende una persona.
4. Applicazione installabile con service worker; il modulo di candidatura passa da un servizio esterno, dichiarato come sub-responsabile nell'informativa privacy.
5. La richiesta di meno movimento del sistema azzera tutto, e si animano solo trasformazioni e opacità — mai proprietà che causano un ricalcolo di layout.