Structure: l'architettura è un linguaggio, il sito web ne è la grammatica

Uno studio di architettura a Torino specializzato in residenze private e spazi commerciali. Ogni loro progetto è un dialogo tra materia e vuoto, tra funzione e forma. Serviva un portfolio che parlasse lo stesso linguaggio — rigoroso, preciso, senza una riga di troppo.

Cliente
Structure Studio
Settore
Architettura
Servizi
Sito Web, UI/UX Design

La sfida

Structure è uno studio fondato dall'architetto Alessandro Ferro, con sede a Torino e progetti in tutto il Nord Italia. Il suo lavoro si distingue per un approccio che lui definisce "architettura sottrattiva": ogni elemento superfluo viene rimosso fino a quando resta solo l'essenziale. Le sue case sembrano semplici — ma quella semplicità è il risultato di centinaia di decisioni progettuali.

Alessandro aveva un sito costruito su WordPress con un tema per architetti. Funzionava, ma era identico a quello di ogni altro studio di architettura in Italia. Stessa griglia, stesse animazioni, stessa navigazione. Per uno studio che costruisce la propria reputazione sull'unicità, questo era un problema serio.

La richiesta era chirurgica: "Voglio un sito che un architetto guarda e pensa: questo non l'ho mai visto prima."

Il nostro approccio

1. Layout orizzontale come metafora spaziale

L'architettura si vive camminando, non scrollando. Abbiamo rotto la convenzione del portfolio verticale: il sito di Structure si naviga orizzontalmente su desktop, come una passeggiata attraverso gli spazi. Ogni progetto è una stanza che si apre lateralmente, con transizioni che richiamano il movimento fisico attraverso un edificio.

2. Tipografia monospace come codice

JetBrains Mono per le annotazioni tecniche, Space Grotesk per i titoli. La scelta del monospace non è decorativa: richiama i disegni tecnici, le specifiche dei materiali, il linguaggio preciso dell'architettura. I numeri di progetto ("01/", "02/") compaiono come codici di classificazione, non come decorazione.

3. Palette calda e terrosa

Sfondo beige caldo (#e8e4df) — il colore della carta da disegno. Testo nero profondo (#0a0a0a). Un unico accento: rosso arancio (#ff3c00) che compare solo nei dettagli interattivi. L'intera palette è un omaggio ai materiali naturali che Alessandro usa nei suoi progetti: legno, pietra, cemento grezzo.

Il processo creativo

Immersione nel metodo

Abbiamo visitato tre cantieri di Alessandro. Abbiamo osservato come parla di un muro, di una finestra, di un rapporto tra luce e ombra. La cura per il dettaglio costruttivo è la stessa che abbiamo applicato al codice: ogni proprietà CSS è stata scelta con la stessa precisione con cui Alessandro sceglie un materiale.

Design e sviluppo

  • Scroll orizzontale nativo — su desktop, lo scroll del mouse si traduce in movimento laterale. Un'esperienza che il 99% dei siti non offre
  • Griglia tecnica visibile — linee sottili che attraversano la pagina come un foglio millimetrato. Non sono decorative: sono la struttura stessa del layout
  • Numerazione progressiva — ogni sezione porta un numero di progetto ("01/", "02/") che richiama la catalogazione degli studi tecnici
  • Dettagli materici nei testi — i materiali dei progetti (rovere, acciaio corten, cemento armato) sono elencati come specifiche tecniche, non come descrizioni

Il dettaglio tecnico più sottile: su desktop, abbiamo nascosto la scrollbar orizzontale ma mantenuto lo scroll funzionante. Il risultato è un'esperienza "senza bordi" — lo spazio del progetto si estende oltre i limiti dello schermo, esattamente come uno spazio architettonico che invita a esplorare oltre ciò che si vede.

Esplora il progetto

Naviga il sito completo direttamente qui, in versione desktop o mobile.

webnovis.com/portfolio/Structure-Arch.html

I risultati

1
Colore d'accento usato
Scroll H
Navigazione orizzontale
<1.5s
Tempo di caricamento
100%
Codice custom

Alessandro ha presentato il nuovo sito durante un evento di settore a Torino. La reazione è stata unanime: "Sembra un progetto architettonico, non un sito web." Per Structure, non esisteva complimento più preciso. Il sito non descrive l'architettura — la incarna.

Cosa abbiamo imparato

Structure ci ha insegnato che progettare per professionisti della progettazione è un esercizio di umiltà e di coraggio. Umiltà perché devi ascoltare prima di disegnare. Coraggio perché devi proporre soluzioni che il cliente non ha mai visto — come lo scroll orizzontale — e difenderle con argomenti solidi.

La lezione tecnica più importante: lo scroll orizzontale su web è considerato un anti-pattern. Ma come in architettura, le regole esistono per essere comprese prima di essere violate. L'abbiamo implementato solo dove aggiunge valore — nella navigazione dei progetti — e lo abbiamo reso opzionale su mobile, dove il verticale è più naturale.

Risultati Misurabili — Structure Architecture

Confronto performance e business metrics prima e dopo il lancio del nuovo sito.

MetricaPrimaDopoVariazione
PageSpeed Mobile36/10095/100+164%
Peso pagina portfolio12.4 MB1.8 MB-85%
LCP6.8s1.3s-81%
Richieste di progetto/mese211+450%
Visite da Google Immagini/mese15210+1300%

Portfolio con immagini architettoniche ottimizzate (WebP, srcset, lazy loading). Dati GA4 e GSC a 90 giorni.

Hai uno studio che merita un portfolio unico?

Raccontaci il tuo progetto. Il preventivo è gratuito e senza impegno.

Richiedi Preventivo Gratuito