Case study · Sito web · Studio di architettura
Marra Bettini
Uno studio che recupera edifici esistenti non vende rendering: vende metodo. Marra Bettini è il concept di uno studio torinese che lavora su caserme, conventi e manifatture, e il sito è costruito come un rapporto tecnico: griglia rigorosa, righe, etichette in maiuscolo, un solo colore d'accento e i dati prima delle foto.
- Progetto
- Marra Bettinibrand concept, progetto dimostrativo
- Settore
- Studio di architetturarecupero e rigenerazione, Torino
- Tipo
- Sito webhome, progetti, schede, servizi, chi siamo, contatti
- Cosa abbiamo fatto
- Concept, testi, design, svilupposistema tipografico e griglia
- Tecnologie
- HTML, CSS e JavaScript puriun solo file, router a hash
Il punto di partenza
Uno studio che misura prima di disegnare
I siti degli studi di architettura sono spesso gallerie di rendering: belli, uguali, e muti su come si lavora. Uno studio che fa recupero, però, si sceglie per il metodo: cosa regge, cosa si può togliere, cosa dice il vincolo. Il sito doveva dimostrare quel rigore prima di mostrare una foto.
Abbiamo costruito Marra Bettini come un impaginato tecnico: una griglia a colonne fisse per l'archivio dei progetti, le schede con i dati tecnici in righe, un nastro con i servizi, i tasti che invertono al passaggio. Tre schede di progetto raccontano ogni cantiere con numeri e scelte, non con aggettivi.
01
Il metodo in prima pagina
Prima di disegnare, misuriamo: la frase sta nella seconda schermata, con i quattro numeri dello studio.
02
L'archivio che si consulta
Quarantadue interventi in una lista filtrabile per tipo, con luogo, anno e metri. Si scorre come un indice.
03
Portare al sopralluogo
Il primo sopralluogo è gratuito e dura un'ora: la chiamata è questa, ripetuta in fondo a ogni pagina.
Cosa abbiamo costruito
Un rapporto tecnico che si naviga
Nove pagine in un solo file: home, archivio, tre schede di progetto, servizi, chi siamo, contatti.
01
L'apertura che dice cosa fa
Tre etichette in maiuscolo, un titolo a caratteri grandi e stretti, due tasti: uno nero, uno vuoto. Sotto, la foto dell'ex caserma recuperata e i quattro numeri: progetti conclusi, metri quadri, anni, persone.
Poi il metodo: prima di disegnare, misuriamo. E il nastro con i sei servizi che scorre.
02
L'archivio filtrabile
Otto progetti in una lista a colonne fisse: numero, nome, luogo e tipo, anno e metri, freccia. Quattro filtri in alto tolgono le righe che non c'entrano. Al passaggio la riga si inverte in nero e il numero diventa arancione.
Sotto, tre foto con la didascalia nera e una fascia nera: il tuo progetto non è in questa lista, ancora.
03
La scheda con i dati tecnici
Ogni progetto ha la sua pagina: titolo, tre righe di descrizione, la foto grande. Poi i dati tecnici in righe, luogo, anno, superficie, committente, edificio, vincoli, incarico, e il racconto delle scelte: il muro aperto, il corten che non finge.
Le foto hanno la didascalia nera in basso a sinistra e si ingrandiscono appena al passaggio.
04
I servizi e il processo
Quattro servizi numerati, ognuno con la descrizione e le voci di dettaglio in una lista puntata. Poi come si svolge un progetto in quattro passaggi: sopralluogo e fattibilità, rilievo, esecutivo e permessi, cantiere.
Numeri arancioni grandi, testi corti, niente icone.
05
Le persone e i contatti
Chi siamo: cinque persone, otto cantieri per volta, la storia dal 2016. I due soci con le foto in bianco e nero, il gruppo e i riconoscimenti in una lista con gli anni.
I contatti: indirizzo, telefono, orari e un modulo che chiede dove si trova l'immobile e cosa vorresti farne, così il sopralluogo parte già preparato.
Da telefono la griglia si chiude in una colonna ma tiene numeri, etichette e righe: il sistema resta riconoscibile.
Come è fatto
Sotto il cofano: una griglia e un colore
Sei meccanismi scritti a mano, uno alla volta. Dall'archivio ai tasti.
- HTML
- CSS
- JavaScript puro
- Router a hash
- CSS Grid
- Nessun tracker
hover: la riga si inverte · filtro: le altre spariscono
L'archivio con i filtri e le righe che invertono
Cosa vedi. Passi su una riga: diventa nera, il numero si accende in arancione, il testo si sposta di poco. Clicchi un filtro: le righe che non c'entrano spariscono.
Come è fatto. Ogni riga porta un attributo con la categoria. Il filtro confronta l'attributo e nasconde le altre; il tasto scelto diventa pieno, gli altri vuoti. L'inversione al passaggio è una transizione di 120 millisecondi lineare su sfondo, colore e rientro: veloce e secca, come un interruttore.
sei servizi ripetuti due volte · 34 s · traslazione del 50%
Il nastro dei servizi
Cosa vedi. Sotto il metodo, i sei servizi scorrono da destra a sinistra senza fine, separati da righe sottili.
Come è fatto. La lista è ripetuta due volte e trasla del 50% in 34 secondi: quando la prima copia esce, la seconda è al suo posto. Se il sistema chiede meno movimento, l'animazione è spenta e la lista resta ferma.
- Luogo
- Como
- Anno
- 2021 – 2025
- Superficie
- 9.800 mq
- Committente
- Amministrazione comunale
- Edificio
- Caserma, 1887
- Vincoli
- Monumentale su tre corpi
- Incarico
- Concorso, progetto, direzione lavori
dati tecnici in righe · foto con didascalia e zoom 1,04
I dati tecnici e le foto con didascalia
Cosa vedi. Nella scheda del progetto i dati tecnici stanno in righe con l'etichetta a sinistra. Le foto hanno la didascalia nera nell'angolo e si ingrandiscono al passaggio.
Come è fatto. I dati sono una lista di definizioni in una griglia a due colonne fissa, che da telefono si chiude in una. La didascalia è posizionata sull'angolo con uno sfondo pieno; la foto sta in un contenitore che taglia e passa a scala 1,04 in 400 millisecondi.
I tasti che invertono
Cosa vedi. Il tasto nero diventa arancione, quello vuoto diventa nero, la freccia dei link di testo scatta a destra, le voci del menu si invertono.
Come è fatto. Tre tipi di tasto e un solo tempo: 120 millisecondi, lineare. Il primario passa al colore d'accento, il ghost si riempie di nero, il testo sposta solo la freccia di sei pixel. Niente ombre, niente arrotondamenti: il sistema è fatto di bordi e inversioni.
Le pagine e le sottopagine dei progetti
Cosa vedi. Clicchi un progetto: l'indirizzo diventa progetti/ex-caserma, la pagina cambia, il titolo della scheda del browser si aggiorna e nel menu resta acceso «Progetti».
Come è fatto. Un router legge la parte dopo il cancelletto e attiva la pagina giusta. Le schede dei progetti sono sottopagine: una mappa dice che appartengono all'archivio, così la voce corrente nel menu resta «Progetti». Ogni pagina ha il suo titolo per il browser e per la condivisione.
seconda vita
agli edifici.
La griglia e il sistema tipografico
Cosa vedi. Numero, nome, luogo, dati, freccia: le colonne dell'archivio hanno misure fisse. Due caratteri, etichette da 11,5 pixel e un solo colore d'accento.
Come è fatto. L'archivio è una griglia CSS con colonne di 56 pixel, 1,5, 1, 0,8 frazioni e 90 pixel: tutte le righe si allineano senza tabelle. Il sistema ha un carattere per i titoli, uno per i testi, etichette in maiuscolo con spaziatura di 0,11 em, righe sottili e l'arancione solo dove serve un'azione.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni studio tecnico
Architetti, ingegneri, geometri, studi di progettazione: se vendi metodo, il sito deve mostrarlo.
01
Il metodo prima delle foto
Un cliente sceglie chi misura prima di disegnare. Dillo in seconda schermata, con i numeri.
02
Un archivio, non una galleria
Una lista con luogo, anno e metri si consulta; una griglia di rendering si guarda e si dimentica.
03
I dati in righe
Committente, vincoli, incarico, superficie: una scheda tecnica per progetto vale più di dieci aggettivi.
04
Un colore per l'azione
L'arancione compare solo dove si clicca. Il resto è nero, bianco e grigio: così la chiamata si vede.
05
Chiedi il sopralluogo, non il contatto
Una richiesta precisa, con indirizzo dell'immobile e intenzione, filtra chi chiama e prepara l'incontro.
Il prossimo potrebbe essere il tuo
Vuoi un sito che mostri il tuo metodo?
Architetti, ingegneri, studi di progettazione: se il tuo sito è una galleria di rendering, ripartiamo dal modo in cui lavori. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti