AZ(ZZ)

Lavori

Alessandro Giovannini

Un sito che si lascia toccare.

Concept · Identità digitale · UI/UX · Sviluppo · Suono generativo2026Sito ↗

Il sito di un osteopata a Torino, Savigliano e Ronco Canavese. I siti del mestiere si somigliano, azzurro sanitario o verde wellness ed elenchi di patologie. Questo il tatto non lo illustra, lo fa: sotto il cursore lo schermo cede come pelle.

Identità

Il nome, come nell’hero
Il nome, come nell’hero
Per fondi scuri
Per fondi scuri
Il simbolo che Alessandro aveva già: solo favicon
Il simbolo che Alessandro aveva già: solo favicon

L’identità è tipografica e d’interazione: il nome composto come architettura della pagina, un colore che compare solo al tocco, una superficie che cede. Il simbolo a spirale era già di Alessandro: l’ho tenuto, ma solo nella scheda del browser.

Il lavoro

Il nome fa da architettura: due righe enormi in Ortica, viola su cappuccino. «Da cosa si capisce che è un osteopata?», ha chiesto un amico: da allora la parola sta in chiaro nell’intestazione e nell’hero.
Il nome fa da architettura: due righe enormi in Ortica, viola su cappuccino. «Da cosa si capisce che è un osteopata?», ha chiesto un amico: da allora la parola sta in chiaro nell’intestazione e nell’hero.
«Ascolto fluido» passa al viola: il cambio di fondo si sente scorrendo, prima ancora di leggere il titolo.
«Ascolto fluido» passa al viola: il cambio di fondo si sente scorrendo, prima ancora di leggere il titolo.
«Fermati un momento» apre una pausa a schermo intero, con un indirizzo suo. Qui nell’ambiente Aria: immagine e suono generati in tempo reale.
«Fermati un momento» apre una pausa a schermo intero, con un indirizzo suo. Qui nell’ambiente Aria: immagine e suono generati in tempo reale.
Su mobile la foto si incastra tra nome e cognome, e la campana lime segue lo scroll invece del cursore.
Su mobile la foto si incastra tra nome e cognome, e la campana lime segue lo scroll invece del cursore.
Il suono si sceglie: spento finché non lo accendi, poi Terra, Acqua o Aria, sintetizzati dal vivo senza un solo file audio.
Il suono si sceglie: spento finché non lo accendi, poi Terra, Acqua o Aria, sintetizzati dal vivo senza un solo file audio.
Il modulo chiede dove, i contatti e poche righe, e arriva per email ad Alessandro. Il suo numero non compare da nessuna parte: per scrivergli subito c’è WhatsApp.
Il modulo chiede dove, i contatti e poche righe, e arriva per email ad Alessandro. Il suo numero non compare da nessuna parte: per scrivergli subito c’è WhatsApp.

Movimento

Un tocco apre il campo
L’incavo sul nome
I titoli si accendono scorrendo
Un momento: terra, acqua, aria

Sistema

cappuccino#C8B09C
light#E9DDD2
violet#54266F
violet-deep#392046
violet-night#231428
lime#D8F24A

Una superficie calda e un viola per la voce. Il lime è l’unico colore che risponde a un gesto: compare sotto il cursore o con lo scroll e si spegne piano. Fermo non c’è mai.

Ortica LinearIl nome, i titoli, le frasi

Il corpo non è immobile.

Di Collletttivo, disegnata da Benedetta Bovani, con licenza OFL. Non ha corsivo: l’enfasi resta semantica, senza corsivi o grassetti finti.

Instrument SansTesto e interfaccia

01 — Approccio · 02 — Ascolto fluido · 03 — Un momento

Variabile, 400–700. Le etichette sono maiuscole, spaziate e numerate, come un indice.

Come è fatta

  • Astro, sito statico su Vercel: ogni push sul repository va online da solo.
  • Due shader WebGL scritti a mano: l’incavo sotto il cursore e il campo di «Un momento», che diventa terra, acqua o aria.
  • Il contesto WebGL nasce al primo gesto, non al caricamento: su mobile toglie circa 0,9 s dal percorso critico.
  • Suono generativo con la Web Audio API: rumori filtrati, drone, gocce algoritmiche, riverbero a convoluzione. Zero file audio, mai in autoplay.
  • La campana lime è una super‑gaussiana exp(−(d/r)⁴): segue il cursore su desktop e lo scroll su mobile.
  • prefers-reduced-motion spegne movimento, WebGL e smooth scroll; l’hover vale solo con un puntatore fine.
  • Lighthouse sul sito online: 100 in tutte e quattro le categorie su desktop, con LCP a 0,4 s. Su mobile la home pesa 234 KB al caricamento.
  • Il reel di lancio è fatto con lo stesso codice: gli shader del sito resi fotogramma per fotogramma in Remotion, musica sintetizzata da zero.

Online su alessandrogiovanniniosteopata.it. Il suono si accende dal disco viola in basso; «Fermati un momento» è a metà della home.