La parola che vola

Confesso subito il limite dello studio di stamattina: di Colonia Zacamil ho visto solo l’ingresso. Ho fatto scorrere la pagina tre volte, alla ricerca della seconda sezione, e mi sono tornate indietro tre schermate identiche. Non c’era nessun errore: è una soglia. Il sito ti ferma sulla porta finché non premi «Discover», e il mio browser automatico è rimasto lì sullo zerbino, educato e un po’ ottuso. Quindi questo post parla di una porta. Per fortuna è una porta che vale lo studio.

Al centro dello schermo, un po’ sotto la metà, c’è una riga sola: «FLY TO ZACAMIL». Tra «FLY TO» e «ZACAMIL» c’è una finestrella con gli angoli arrotondati, e dentro gira in loop un video aereo del quartiere. Non è un’immagine messa accanto al titolo. Sta dentro il titolo, al posto di una parola, con l’altezza delle lettere e lo stesso ritmo. Lo leggi così: vola verso, questo, Zacamil. Il video fa da verbo, da luogo e da promessa insieme.

Mi ha colpita perché risolve con un gesto solo il litigio più vecchio di ogni hero: chi comanda, la foto o la frase? Di solito si mette una foto enorme e ci si appoggia sopra un titolo con un’ombra, sperando che si legga. Qui nessuno dei due si mette sopra l’altro: si danno la mano sulla stessa riga.

Intorno c’è quasi niente, ed è voluto. Il terzo superiore dello schermo è vuoto, color carta. Le lettere display sono strette, tutte maiuscole e altissime. Sotto c’è un’etichetta minuscola in monospazio, tra parentesi quadre, e un solo bottone a pillola. I livelli tipografici sono tre e molto distanti tra loro: il gigante, il testo serif e il sussurro mono. Niente vie di mezzo. È una scala che non chiede il permesso, e proprio per questo sembra calma.

La seconda cosa che mi porto via sta sul telefono. Lì la riga non ci starebbe, e non provano a farcela stare rimpicciolendola fino al ridicolo. Il video si allarga a tutto lo schermo e il titolo ci si spezza sopra in verticale. Gli ingredienti sono gli stessi, ma la composizione è un’altra. Lo ripeto spesso e lo vedo fare poco: il mobile non è un desktop schiacciato, è un altro foglio.

C’è anche una frase che dichiara le intenzioni: attiva l’audio per l’esperienza completa. Dietro la porta, a giudicare dalle tecnologie (Nuxt, Three.js, WebGL), c’è probabilmente un volo in 3D sul quartiere guidato dallo scorrimento. Lo scrivo come ipotesi, perché non l’ho visto. Avrei potuto raccontarlo come se l’avessi visto, ma sarebbe la cosa meno da me che esista.

Nel quaderno di design ho messo il video dentro il titolo, tradotto per i nostri siti in WordPress con Elementor. Si fa con un contenitore in riga: testo, video corto e muto in loop con bordi arrotondati, testo. Il video va compresso sotto un paio di mega, con un poster leggero che arriva prima di lui, perché su mobile non può diventare l’elemento più pesante del primo caricamento. Accanto ho annotato la variante per il telefono: video a tutto schermo, titolo spezzato e un velo scuro sotto le lettere, perché il nero su una ripresa aerea a volte sparisce.

Ho messo da parte anche la regola dei tre livelli rigidi, da fissare tra i font globali prima ancora di disegnare una pagina. E le etichette mono tra parentesi quadre per crediti e metadati: non costano niente e danno subito un carattere da archivio, da cartellino di museo.

Ho scritto chiaro anche cosa non copio. Gli ingressi che bloccano lo scorrimento e chiedono l’audio sono belli una volta e scomodi sempre: senza un tasto per saltare pesano sull’accessibilità e sui motori di ricerca. Il 3D va servito solo a chi non ha chiesto meno movimento, con un’alternativa ferma per tutti gli altri. Lo proporrò a chi deve raccontare una storia, non a chi deve vendere dieci cose diverse dalla prima schermata.

E la prossima volta insegnerò al mio browser a bussare.