Il lusso è quello che manca

Ci sono siti che ti raccontano tutto, e siti che ti lasciano lo spazio per pensarci. Stamattina, alle sei passate, ho studiato uno del secondo tipo: Sobha Privy Collection, scelto come Website of the Day su CSS Design Awards. È la vetrina di una collezione di residenze di lusso, e già questo mette sull’avviso. Il lusso, sul web, di solito urla. Qui sussurra.

La parte che mi è piaciuta di più è quella della schermata qui sopra. In apertura c’è un video quasi nero, nastri lucidi che si avvolgono piano. Poi si scende e arriva il bianco, all’improvviso, senza sfumature. Poche righe al centro: un’etichetta minuscola, maiuscola e spaziata, poi un titolo serif grande, e sotto una galleria di tre immagini che non stanno in fila. Quella centrale è più alta, le laterali partono più in basso e il bordo dello schermo le taglia. Sembra un errore, e non lo è: è il ritmo di una frase musicale con una nota tenuta.

Mi ha colpita perché è il contrario di quello che faccio d’istinto. Quando costruisco una pagina tendo a riempire: un titolo, un sottotitolo, un pulsante, due righe di spiegazione per sicurezza. Qui hanno tolto tutto quello che si poteva togliere, e il risultato pesa di più. Lo stacco fra nero e bianco funziona come una pausa in una conversazione: ti accorgi di quello che è stato detto proprio perché per un attimo nessuno parla.

Due voci nello stesso titolo

L’altra cosa che mi porto via è il titolo dell’hero. Sopra, un corsivo calligrafico, quasi una firma; sotto, un maiuscolo serif spaziato, come un’incisione su pietra. Due registri, uno personale e uno monumentale, che si tengono per mano. Più giù il trucco si ripete in piccolo: etichetta sans in grassetto, titolo serif. Ho capito che non serve un carattere spettacolare per avere un titolo memorabile: serve un contrasto ben dosato fra due caratteri normali.

Con una regola che mi sono scritta subito: il corsivo calligrafico solo nei titoli grandi. Sotto una certa misura smette di essere eleganza e diventa fatica per gli occhi.

Quello che finisce nel quaderno

Nel quaderno di design, alla voce CSS moderno, ho messo l’hero che si ritira mentre il bianco sale. Sul sito probabilmente è fatto con una libreria; io l’ho rifatto con un’animazione legata allo scorrimento e un clip-path che chiude il riquadro dal basso. Lavora tutto il compositor, il processore resta tranquillo e i punteggi di velocità non ne soffrono. Dove il browser non lo capisce, la sezione resta ferma e nessuno se ne accorge: è il tipo di effetto che mi piace, quello che non punisce chi non lo vede.

Poi la galleria sfalsata: una griglia di tre colonne di larghezza diversa, allineate in basso, con le dispari spostate di un pezzetto. Quattro righe di CSS al posto di un plugin.

E una nota per il futuro: il sito usa una libreria per le transizioni fra pagine senza ricaricare. Oggi i browser principali lo sanno fare da soli, con le view transitions native e una riga di CSS. Quando proporrò un sito che deve sembrare un unico respiro, partirò da lì.

Per i siti che farò in WordPress, quindi: titolo a due registri con il carattere calligrafico ospitato in casa; video scuro in apertura sotto i due mega, muto, con un fotogramma fisso al posto del video sul telefono; stacchi di sezione con margini generosi in clamp(); animazioni nel CSS e non negli effetti pesanti del costruttore di pagine. E sempre il rispetto di chi ha chiesto al suo sistema di muovere meno le cose.

La lezione vera, però, non sta nel codice. È che a volte il modo migliore per far vedere una cosa è lasciarle intorno il vuoto. Lo appunto anche per me, che di parole ne uso sempre una di troppo.