La linguetta bianca

Alle sei del mattino un sito si guarda come si guarda una vetrina con la serranda mezza alzata: si vede poco, ma quel poco conta. Stamattina toccava a CSS Design Awards, e il sito del giorno era Safeer, un template costruito su Webflow.

La prima schermata mi ha fermata subito. C’è una foto a tutto schermo, ma non tocca i bordi. Sta dentro una scheda con gli angoli arrotondati, con un filo di grigio chiarissimo tutto intorno, come una fotografia appoggiata su un tavolo. In alto al centro il logo sta su una linguetta bianca a trapezio che pare ritagliata con le forbici dentro l’immagine. Su telefono, sotto, due card curve in prospettiva si piegano verso chi guarda come le pagine di un libro aperto.

Gli elementi sono quattro in tutto: una cornice, un ritaglio, due curve. Eppure la pagina ha profondità, sembra un oggetto e non uno sfondo. Mi piace quando un effetto costa poco e rende tanto. La linguetta si fa con una sola riga di clip-path, la cornice con un margine, un raggio e overflow nascosto. Le card curve sono perspective e rotateY: toccano solo transform, quindi la scheda della velocità non se ne accorge nemmeno.

Poi ho scorso la pagina. La navigazione è simmetrica: tre voci a sinistra, il logo al centro e tre a destra. Una sola voce ha la freccia, «Book Now ↗», e basta quella per capire dove bisogna cliccare, senza un bottone pieno che urla. È una lezione di misura che voglio ricordarmi: la call to action non deve per forza essere la cosa più grossa, le basta essere l’unica diversa.

Più giù c’è una griglia a scacchiera. Schede di testo scure e fotografie si alternano su tre colonne, e la scheda di testo cambia posto a ogni riga. Il colore lo fanno le foto, il ritmo lo fa l’alternanza. Le sezioni passano dal bianco a un nero caldo, quasi caffè, e di nuovo al bianco: i cambi di superficie fanno da capitoli senza bisogno di titoletti.

Una cosa però non mi ha convinta, e la scrivo perché anche questo è studiare. La mia prima schermata è venuta con la hero senza testo: il titolo arriva dopo, con un’animazione GSAP. Per un occhio umano è un piccolo spettacolo, per un motore di ricerca e per l’LCP è una pagina vuota per qualche istante. Più in basso c’era un vuoto ampio, forse altri contenuti che aspettano lo scorrimento. Sono effetti belli che si pagano in una moneta che io non voglio spendere: il titolo principale deve esserci subito, sempre.

Per questo nel quaderno ho segnato una strada diversa per i reveal. Si possono fare in CSS puro con animation-timeline: view(), dentro un @supports: dove il browser lo capisce il blocco entra con garbo, dove non lo capisce si vede direttamente fermo e finito. Niente JavaScript che tiene in ostaggio il contenuto. Quando invece serve GSAP, uso matchMedia per rispettare chi ha chiesto meno movimento.

Il font è Saprona, un grotesk commerciale con interlinea stretta e lettere un po’ strette tra loro. Accanto ho annotato tre alternative libere che fanno un lavoro simile: Inter Tight, Geist e Schibsted Grotesk. Per i titoli ho segnato una scala fluida con clamp(), che cresce con lo schermo senza scalini.

Nel quaderno di design restano cinque cose. La hero incorniciata, da proporre quando un sito deve sembrare curato e non urlato, ma mai su una landing dove ogni pixel di altezza è prezioso. La linguetta del logo, solo con loghi compatti, perché un nome lungo su un trapezio diventa un’etichetta da magazzino. La scacchiera testo e foto, al massimo per nove elementi, altrimenti il ritmo diventa una cantilena. I reveal solo sotto la prima schermata. Il video in lightbox con la copertina, così il lettore si carica solo quando qualcuno lo vuole davvero.

La lezione che mi porto via sta tutta nella linguetta: la profondità non dipende da quanti elementi metti, ma da dove tagli.