PROGETTOSoftware e automazione

La presenza di una società industriale, ricostruita da zero

Sito web e brochure A4 di una società di ingegneria per l'industria pesante, rifatti a partire dal suo stesso elenco di referenze: cifre contate anziché arrotondate, schemi disegnati anziché fotografie di archivio, un documento stampato dagli stessi contenuti.

343

incarichi, contati e non arrotondati

37

fogli A4 dagli stessi contenuti

0

richieste esterne di font e CDN

ANNO
2026
TEAM
Aashwin Shrivastava
TECH-STACK
Astro 5, TypeScript, Canvas 2D, SVG, Zod, Playwright
LUOGO
India
PUBBLICATO
19 ago 2026

Diciassette anni di lavoro, e nulla che lo mostrasse

Pagina iniziale del nuovo sito: titolo, globo orientabile e quattro cifre contate

Il vecchio sito era un tema WordPress con sopra un costruttore di pagine. I titoli stavano nel carattere predefinito, il titolo nella scheda del browser sbagliava il nome dell'azienda e sotto una rubrica intitolata Our Customer Stories non c'era assolutamente nulla. Nessun progetto, nemmeno una riga. La navigazione portava una voce Projects e chi la cliccava finiva nel modulo di contatto.

Il tutto era illustrato con fotografie acquistate che sarebbero andate bene per qualsiasi azienda: persone davanti a portatili, riunioni attorno a tavoli chiari. Per una società che dimensiona forni rotativi, redige la gara e resta in cantiere finché la linea non gira, questo non è soltanto generico: contraddice l'oggetto.

E le cifre che avrebbero dovuto reggere l'insieme erano tonde: 12+ anni, 50+ clienti, 200+ progetti, 14 paesi. Su una pagina di referenze le cifre tonde sono la forma di prova più debole, perché nulla in esse è verificabile e per questo non costano nulla.

Realizzato per Colleagues Consultants Private Limited.

Schema disegnato di una linea del cemento dalla cava alla spedizioneDiagramma di processo: sei pilastri di servizio su un'unica spinaTassonomia dei servizi dei pilastri Implementation e Support, per estesoPlanisfero calcolato da dati di confine, con i paesi dell'elenco di referenzeEsploratore di progetti con filtri per settore, servizio, paese, stato e annoQuindici fogli della brochure A4 disposti uno accanto all'altroMenu principale aperto sopra la pagina inizialePagina settori in schema scuro, con un disegno isometrico di un cementificio

Le prove esistevano già, ma non in rete

Il cliente tiene un proprio elenco di referenze fin dall'anno di fondazione: ogni incarico, con cliente, luogo, disciplina ed esercizio. Esisteva come file di presentazione e non era mai stato pubblicato. La domanda non era quindi più come far suonare credibile il sito, ma soltanto come portare quel file dentro un sito web senza ribatterlo.

Uno script legge il file direttamente, con un proprio piccolo lettore di archivi scritto sulla libreria standard e senza pacchetti di terzi, e ne scrive la raccolta da cui il sito si costruisce. L'elenco dei clienti e quello dei paesi vengono poi contati da quella raccolta anziché mantenuti a fianco. Una nuova revisione dell'elenco di referenze diventa così un comando e non un progetto redazionale.

Ciò che compare poi sul sito è contato: 343 incarichi, 55 committenti citati per nome, 16 paesi, 18 esercizi consecutivi. Le cifre tonde del vecchio sito sono state tolte e non sostituite.

C'era per questo una ragione che va oltre l'ordine. Il confronto ha mostrato che una parte del vecchio elenco di paesi non era sostenibile. Le voci errate erano sopravvissute a cinque giri di revisione, perché un elenco dall'aspetto plausibile non rivela nulla a chi lo rilegge. Proprio per questo clienti e paesi oggi sono derivati e non più scritti: un dato calcolato dal registro non può discostarsene.

Nessuna immagine che non mostri l'impianto

Le fotografie di archivio non sono state sostituite da fotografie di archivio migliori, ma da dieci schemi disegnati a mano: la linea del cemento dalla cava alla spedizione, il flusso degli inerti, la filiera dell'acciaio, il ciclo di vita del progetto e quattro tavole isometriche di settore. È il linguaggio visivo di un disegno tecnico e non quello di una banca immagini, e ognuno di essi dice qualcosa sull'oggetto.

Le regole che li governano sono tenute strette perché l'insieme si legga come una sola mano: esattamente due spessori di tratto, etichette nel livello a spaziatura fissa con le loro linee di richiamo, e rosso soltanto dove significa qualcosa, cioè su frecce di flusso, zone calde e nodi attivi. Il colore non è dipinto nel disegno ma viene da variabili, per cui lo stesso file è corretto nello schema chiaro e in quello scuro senza esistere due volte.

Le etichette di un disegno sono il punto in cui un insieme del genere si sfalda: una scivola oltre un bordo, due si sovrappongono, e nessuno se ne accorge, perché nessuno guarda tutti e dieci i file affiancati. Per questo un controllo misura a ogni compilazione ogni etichetta rispetto alle vicine e rispetto alla cornice. Sono oggi 106 etichette, tutte libere.

Il planisfero non è affatto disegnato. Viene calcolato da dati aperti di confine: anelli spacchettati, ricomposti attraverso l'antimeridiano, semplificati e proiettati in piano. Lo stesso script scrive, dalle stesse costanti, la conversione con cui vengono posati i segnaposto. Mappa e segnaposto non possono divergere, perché entrambi vengono da un'unica fonte.

Pagina settori in schema chiaro, con un disegno isometrico di un cementificio

Un globo che smette di calcolare

La pagina iniziale non porta un'immagine di apertura ma il registro stesso: una sfera su cui ogni paese è un punto, pesato in base al numero di incarichi svolti lì. La si gira, si estrae un paese e si legge la cifra accanto. La prova non è una frase sulla prova: è il comando.

Sotto c'è un motore di disegno, non un framework. La linea di costa è precalcolata, codificata a differenze e pesa circa 56 KB compressa; viene caricata solo dopo il primo disegno, ragione per cui la pagina iniziale compilata resta intorno ai 42 KB compressi e l'elemento più grande al caricamento è il titolo, non la tela. Sotto, come immagine di partenza, sta un disegno statico della stessa sfera, così nulla lampeggia e nulla salta prima che i dati arrivino.

Il ciclo si ferma appena non ha più nulla da fare. Se non si gira nulla, se nulla è selezionato, se la sfera è uscita dall'inquadratura o la scheda è in secondo piano, non prosegue: si arresta e riparte al prossimo evento. Una pagina iniziale che per ore disegna sessanta immagini al secondo in una finestra che nessuno guarda è un difetto che si nota solo dalla ventola.

Lo stesso motore serve due consumatori, la pagina iniziale e un file dimostrativo autonomo, e un controllo pretende che resti un file con una sola esportazione. Altrimenti sarebbe presto comparsa la seconda sfera, a contraddire sottovoce la prima.

Il globo da vicino: un paese selezionato e il suo numero di incarichi accanto

Due schemi, due attributi

Il chiaro è l'impostazione predefinita, lo scuro è una decisione. Il sito deliberatamente non segue l'impostazione di sistema finché il visitatore non ha scelto nulla: una società di ingegneria si legge prima su bianco carta, e chi la vuole altrimenti lo dice una volta.

A reggerlo sono due attributi distinti. Uno tiene la scelta, l'altro lo schema che ne deriva, e ogni componente interroga soltanto lo schema. Sembra un attributo di troppo, ed è la ragione per cui un terzo insieme di colori sarebbe qui un'aggiunta in un solo punto e non una modifica in diciotto componenti. Entrambi vengono posti dallo stesso script prima del primo disegno. Scriveteli separatamente e otterrete una pagina che per un fotogramma dipinge testo scuro su fondo scuro.

Una superficie si comporta diversamente da tutte le altre, quella invertita: il suo fondo si ribalta con lo schema, quindi si ribalta anche la leggibilità dell'accento su di essa. Porta perciò un proprio valore di accento, preso per ciascuno schema dall'estremità adatta della rampa dei rossi. Senza, il rosso aziendale starebbe lì poco sopra 2:1 e su un portatile in treno sarebbe invisibile.

Misurato anziché stimato: la tabella dei contrasti dello schema chiaro è calcolata, tutte le 28 coppie verificate soddisfano AA, e la più debole sta a 4,90:1.

Una larghezza di pagina, e un difetto che nessuna schermata mostra

Il sito ha girato per un periodo su due larghezze, una stretta per la testata e le aperture e una larga per le fasce fotografiche. Questo mette due spigoli verticali sulla stessa pagina e, una volta che lo si è visto, lo si vede ovunque. Oggi c'è esattamente una larghezza di pagina, testata compresa.

Il margine è legato a quella larghezza anziché scelto: il suo tetto è il tasso con cui cresce, moltiplicato per la larghezza massima. Fissate liberamente uno dei due numeri e vi costruite un difetto che non sembra nulla. Il margine sta infatti dentro la larghezza massima. Se continua a crescere quando la larghezza è già limitata, il contenuto diventa più stretto quanto più larga è la finestra. È esattamente ciò che è successo qui una volta, con un massimo poco prima del limite e una caduta oltre.

Una schermata non lo mostra mai, perché ogni singola immagine è plausibile per conto suo. Un controllo lo mostra subito: misura la larghezza del contenuto per pagina e per dimensione di finestra, la stampa come riga, e un avvallamento in un punto qualsiasi della riga è la prova. La stessa esecuzione percorre ogni elemento su tre larghezze di telefono e nomina tutto ciò che sporge oltre il bordo del documento.

Due reperti sono abbastanza generali da portarsi via. Un elemento di griglia centrato è dimensionato sul suo contenuto massimo, per cui una didascalia lunga fa saltare la griglia finché non la si limita esplicitamente. E l'overflow non si applica a una scatola di tabella, ragione per cui la classe di servizio che nasconde contenuti agli screen reader non ritaglia una tabella nuda ma la lascia in vista.

Gli stessi contenuti, stampati

Accanto al sito sta una brochure di 37 fogli A4, e non è una copia. È un unico file HTML con caratteri e immagini incorporati, che si legge nel browser e da lì si stampa. Ciò che vi compare viene dai file di contenuto del sito. Cambiate una riga di descrizione di servizio e cambiano entrambe le edizioni.

L'impaginazione è calcolata, non composta. Il passo di costruzione valuta ogni riga in unità di stampa e riempie i fogli finché non sono pieni. Le costanti che servono non sono stimate ma misurate: un controllo disegna il documento finito e rilegge i riquadri. Il primo tentativo le aveva indovinate a occhio, e dodici fogli consecutivi sono andati in eccedenza.

Per questo alla fine c'è un varco che deve passare. Un foglio A4 in eccedenza sembra innocuo a schermo e in stampa perde il margine inferiore, senza che da nessuna parte compaia un messaggio. Un difetto che si vede solo sulla carta si vede troppo tardi. Accanto c'è un'esportazione in un documento modificabile, verificata contro la composizione dell'originale, con uno scarto residuo di due centesimi di pixel.

Nulla di tutto questo impone da sé la sincronia. I contenuti vengono riportati nella brochure deliberatamente e non recuperati in esecuzione, perché una modifica al sito non alteri retroattivamente un documento già stampato.

La redazione resta in casa

Le schede di progetto sono l'unica parte del sito destinata a crescere, e l'unica per cui serva un'interfaccia. Esiste, sta a un indirizzo proprio e gira solo sulla macchina di chi redige: un elenco dei record esistenti, un modulo per ogni campo e accanto un'anteprima della scheda e della pagina finita.

Ciò che modifica sono gli stessi file da cui il sito si costruisce, senza banca dati e senza account. Ogni campo viene validato al salvataggio contro lo stesso schema contro cui valida la compilazione. Un record che passa qui non rompe la compilazione: è tutto il senso dell'esercizio, e il percorso è provato in oltre trenta controlli.

Dove una scheda non ha dietro di sé un documento firmato, è contrassegnata come rappresentativa, in modo visibile sull'indice e su ogni singola voce. Ciò che è documentato sta nel registro; ciò che sta accanto non si presenta come atto contrattuale. Questa separazione è la condizione perché quella metà del sito valga qualcosa.

La consegna è statica da un contenitore: file compilati dietro un server leggero, e una spinta sul ramo principale ricostruisce. Un piè di pagina ci nomina come autore, nel corpo più discreto della pagina.

L'interfaccia di redazione locale: elenco dei record, modulo e anteprima affiancati
Copertina della brochure A4Foglio della brochure con il diagramma dei sei pilastri di servizioFoglio della brochure sul settore cemento, con schema d'impianto e legendaFoglio della brochure con una scheda di progetto contrassegnata come rappresentativaLa pagina iniziale su telefono, a una colonnaLa tassonomia dei servizi su telefonoLa pagina settori su telefonoL'esploratore di progetti con i suoi filtri su telefono

Scopri di più

AVETE UN'IDEA COMPLESSA CHE VORRESTE REALIZZARE CON NOI?
PARTITE CON UN PILOTA DI DESIGN THINKING O UNA CALL DI CONSULENZA.

Contattateci

Alan Kay

“Il modo migliore per prevedere il futuro è inventarlo.”