Per Digital Communication
Ho rifatto la home di Zambaiti Parati. Non per rubartelo: per farti vedere come puoi farlo tu.
Il sito di Zambaiti l’avete rinnovato voi (è nel vostro portfolio: «Ha affidato a Digital Communication il compito di rinnovare la sua immagine digitale»), ed è un sito vivo: la home è stata ritoccata ad aprile, le due carte di Trussardi Casa 9 sono state caricate a ottobre. Dentro c’è un lavoro che si vede poco e vale tanto: un catalogo vero di più di cinquecento carte con i loro codici, filtrabile per marchio e per collezione, in italiano e in inglese, e le pagine di R&D e di Sostenibilità coi fatti dell’azienda.
Zambaiti Parati non sa niente di questa pagina: nessuno l’ha contattata.
Il materiale è il loro, ed è splendido: le stanze costruite attorno alla parete, i rotoli goffrati fotografati da vicino, le licenze delle grandi firme. Il cuore della home rifatta sono quelle foto e quelle parole: i fatti vengono tutti dal sito di oggi (prodotti, marchi e collezioni anche dall’API del vostro WordPress), e i testi nuovi (il titolo per Google, la descrizione, i titoli di alcune sezioni) stanno in un elenco, da far approvare al cliente se la usi. Quello che pesa sulla pagina di oggi non è il progetto: sono le foto da 2000 pixel servite intere, quattordici nel carosello d’apertura, e il tempo che passa da quando un sito si consegna.
Il prima e il dopo, dal telefono
Con Lighthouse, l’esame di PageSpeed (dal telefono)
Lo stesso esame che rifai in un minuto su PageSpeed Insights, dove gira sulle macchine di Google e i numeri cambiano un po’ da un giro all’altro. La rete e il processore lenti li simula con un calcolo: per questo i suoi secondi non coincidono con quelli della sonda qui sotto. Due passaggi: del sito di oggi tengo il migliore, dell’anteprima il peggiore.
- Il voto delle prestazioni
- 97 su 100invece di 58
- La prima schermata (LCP)
- 2,5 sinvece di 9,8 s
Con la sonda, in una rete rallentata davvero
Apre la pagina come un telefono senza cache, col processore lento e la rete di un 4G, o di una rete lenta: tre giri, e la mediana. Il peso e le richieste li conta lei.
- La prima schermata (LCP), in 4G
- 0,7 sinvece di 29,1 s
- La stessa, in una rete lenta
- 4,3 sinvece di oltre 120 s (la pagina non finisce di caricare)
- Il peso al primo caricamento
- 661 KBinvece di 26,2 MB
- Le richieste ad altri siti
- 0invece di 7 (i caratteri da Google Fonts)
Misurato il 26 ottobre 2026 dalla VM di Federico, con le stesse due sonde sul sito di oggi e sull'anteprima pubblicata. Quelli della sonda li ritrovi, a occhio, dal tuo telefono. La luce sulla goffratura è un programma di 2,4 KB che arriva solo quando ci si avvicina e usa la foto che la pagina ha già: non entra in questi numeri.
Che cosa ho cambiato, e perché
La parete che cambia la stanza
Oggi l’apertura è un carosello di quattordici foto che gira da solo: bellissime, ma chi guarda non fa niente e la carta resta uno sfondo. Qui scorrendo la stanza si riveste: la carta nuova scende dall’alto a bande oblique, una dopo l’altra, come i teli che il posatore stende sul muro, con l’inclinazione delle bande del loro simbolo. Quattro stanze vere, ognuna col nome e il codice della carta. È il principio con cui lavoro, «feel, don’t tell»: invece di scrivere che una carta dà personalità a un ambiente, lo fai vedere fare.
La goffratura, sotto la luce
Sul sito la goffratura sta in R&D, in poche righe: «a caldo ed a registro, la più sofisticata da realizzare, con tolleranze nell’ordine di un solo decimo di millimetro». Qui il rotolo Elie Saab è a tutta larghezza e una luce radente segue il dito o il mouse: le volute fanno ombra dove la sposti. Il rilievo è stimato dalla foto stessa, nessun pixel aggiunto; il disegno è WebGL scritto da zero, senza librerie, e arriva quando ti avvicini: prima c’è la foto ferma. Chi ha chiesto meno movimento vede la foto.
Le carte, da vedere grandi
Il carosello di miniature da 300 pixel, che a ogni visita pesca dodici carte, diventa un campionario a mosaico: la foto grande, la collezione, il codice che usa chi ordina, il marchio. Il filtro per marchio viene dai vostri dati, letti dall’API del WordPress, e ogni tessera porta alla scheda vera. Sotto, tutte le 26 collezioni a portata di dito.
Le grandi firme, con la loro data
I loghi di Trussardi Casa, Automobili Lamborghini, Elie Saab e Philipp Plein, mostrati come li mostrate voi, con l’anno in cui è cominciata ogni licenza preso dalla loro Storia; e Studio Fuksas con le parole della pagina Contract. Cinquant’anni di carta italiana che vestono le case delle grandi firme: per un architetto è un motivo per fermarsi.
Google, l’anteprima del link e la lingua
Il titolo in italiano, una descrizione con le parole con cui si cerca (carta da parati, Made in Italy, i nomi delle licenze), la lingua dichiarata giusta, i dati strutturati dell’azienda e dello showroom con i suoi orari, un solo titolo principale, l’anteprima del link con la stanza della prima schermata.
La velocità
Niente tema, niente plugin, nessuna richiesta ad altri siti: le foto in AVIF nelle misure che servono a ogni schermo, la prima stanza subito e le altre quando il telefono è libero, Poppins (il loro carattere) servito dal sito stesso. Niente banner dei cookie, perché la pagina non ne usa. Il confronto non è alla pari su tutto: l’anteprima non ha il catalogo intero, l’inglese, la ricerca, i moduli che spediscono. Se si rimettono, il conto si rifà con loro.
Il loro segno, dappertutto
Il simbolo di Zambaiti sono quattro bande oblique nere e rosse: la banda è diventata il gesto della pagina (i teli dell’apertura, i cartellini dei codici, la storia che si svolge come un rotolo, la 404 con un telo che manca). Il colore pieno lo portano le loro carte; l’interfaccia resta grigio carta (il grigio delle fasce del loro sito), nero e il loro rosso, solo per le azioni.
Su misura, senza un modulo finto
La pagina Custom è la più forte del sito, e dalla home oggi ci si arriva solo dal menu. Qui ha la sua sezione con le loro parole, i supporti, le realizzazioni e un modulo «Chiedi un progetto su misura», che nell’anteprima si compila ma non spedisce e dice a chi scrivere davvero. Accanto, un gioco piccolo che spiega il «rapporto» del disegno meglio di un paragrafo (il P.S. in fondo dice dov’è).
Tre cose, intanto, si sistemano già domani sul sito di oggi, senza aspettare il resto: la home italiana dichiara la lingua inglese (lang="en") e ha il titolo in inglese; non ha una descrizione per Google né un’immagine per l’anteprima del link; e le foto si possono servire in AVIF (Lighthouse 12 stima 21 MB risparmiabili su 26, 17 solo nelle quattordici foto del carosello). Poi due domande per il cliente: la pagina Azienda dice 1973 in un capoverso e 1974 nella Storia, e Sostenibilità scrive S.p.A. dove il piede scrive Srl.
Quanto tempo, e con che cosa
Lunedì 26 ottobre, dalle 17:04 alla prima pubblicazione, alle 17:56. Prima c’era stata la ricerca: un altro agente aveva scelto Digital Communication e Zambaiti fra le agenzie della Lombardia, e scritto che cosa doveva sentire chi visita il sito. Poi l’ha costruita un agente di intelligenza artificiale (Claude) che lavora con Linus, il metodo con cui lavoro: ha studiato e misurato il sito di oggi, ha scritto l’analisi e il progetto, e alle 17:32 le prime schermate di prova. Un secondo agente, che fa da regia per me, le ha giudicate prima che si disegnasse il resto; un terzo, che non l’ha costruita, la collauda e rilegge ogni fatto sulla fonte. Il mio lavoro sta nel metodo che seguono. Prima di chiudere, un quarto agente, nel ruolo del direttore creativo di uno studio, ha guardato sei fotogrammi e ha chiesto qualche ritocco (il pannello dell’apertura più leggero, i titoli senza il simbolo accanto, le carte senza il riquadro della freccia). I rilievi del collaudo sono stati corretti e riprovati, e alle 18:47 è uscita questa versione.
Next.js, pubblicata su Vercel. Le decisioni (la parete che cambia, la luce sulla goffratura, la banda del simbolo) le hanno prese gli agenti col metodo, sul loro materiale guardato tutto: è per questo che non somiglia a un tema. La decisione resta il lavoro; quello che è cambiato è quanto costa la manodopera, dopo.
Che cosa puoi portare a Zambaiti
- Il catalogo intero così, veloce: le oltre cinquecento schede come pagine statiche che si rifanno da sole quando caricate una carta nuova, con WordPress che resta dov’è, come archivio, e la pagina che ne legge i dati.
- La scheda di ogni carta con la foto grande, la luce sulla goffratura dove c’è un rilievo, i supporti e la richiesta di informazioni.
- L’elenco dei rivenditori con la mappa: oggi sul sito non c’è, e chi ha visto una carta vuole sapere dove andare a toccarla.
- La versione inglese con la stessa cura (esportano il 98% della produzione), e poi le lingue dei mercati che contano.
- Le collezioni in licenza raccontate come qui le firme, una pagina per ognuna, se i contratti lo permettono.
Se vuoi vedere come si lavora così
Giovedì 29 ottobre, dalle 14 alle 17, sono alla 24ORE Business School di Milano con le agenzie, insieme a Marco Santonocito, che costruisce prodotti digitali. Organizza Alleniamo Imprese, la scuola ci ospita.
Partecipa al corso (si apre in un’altra scheda)
Federico Vitiello
Alleniamo Imprese: formazione sull’intelligenza artificiale per le imprese
P.S.Nell’anteprima di Zambaiti ci sono tre cose che quasi nessuno trova da solo. Se le hai già trovate, le ho nascoste male; se no, apri qui.
La luce in mano
Nella home, scendi fino al rotolo color acqua di «La goffratura, sotto la luce». La luce passa da sola, piano, da un lato all’altro. Al computer muovi il mouse sul rotolo; al telefono appoggia il dito e trascinalo: la luce segue la tua mano e le volute in rilievo fanno ombra dove la sposti.
PerchéIn showroom una carta goffrata si inclina sotto la lampada per vedere il rilievo. Qui lo fa la mano: è il modo più breve per far capire che cosa vuol dire «goffratura a caldo ed a registro», senza spiegarlo.
Accosta i teli
Nella sezione «Su misura», sotto i due capoversi, ci sono due strisce del pannello del pavone (H086), una accanto all’altra, e la seconda è fuori registro. Trascinala su o giù col dito, o con i tasti Su e Giù, finché il pavone continua da una striscia all’altra.
PerchéÈ il rapporto del disegno, quello che il posatore cerca a ogni telo. Quando combacia, la pagina ti dice perché Zambaiti sviluppa il soggetto «in rapporto alla superficie da rivestire»: l’allineamento lo risolve il reparto stile, prima della posa.
Qui manca un telo
Nella barra degli indirizzi scrivi per-dcom
.alleniamoimprese .it /contatti, un indirizzo che il sito di oggi ha e l’anteprima no. Si apre la pagina che compare quando un indirizzo non esiste: una parete di sette teli con quello al centro che manca, «Qui manca un telo.», e sopra la ricerca la strada per i contatti e lo showroom. PerchéSe andasse online, chi arriva da un vecchio indirizzo del sito o da un link salvato troverebbe la strada invece di un errore.