Structure Arch: concept di sito per uno studio di architettura
Uno studio di architettura immaginario che presenta un singolo progetto come se fosse una tavola tecnica. Il concept esplora una navigazione orizzontale, a pannelli, per chi progetta spazi e vuole che il sito si percorra un po’ come un edificio.
Progetto dimostrativo realizzato dal nostro studio per mostrare metodo e livello di dettaglio: il marchio è inventato e non rappresenta un cliente reale.
L’idea
Structure è un marchio inventato. La demo racconta un solo progetto, ambientato a Tokyo, in sette pannelli: dati principali, una vista dell’esterno, i numeri del progetto, un breve manifesto sui materiali, le quattro fasi di lavoro, una galleria e il contatto.
Molti siti di architettura si somigliano: griglia di foto, scheda progetto, contatti. Il concept prova un’alternativa per studi che vogliono distinguersi con il linguaggio del disegno tecnico: numerazioni, etichette in monospace, una griglia da foglio millimetrato sullo sfondo.
Le scelte di design
Navigazione orizzontale
La rotella del mouse e lo scorrimento su touch muovono la pagina in orizzontale, con un’andatura ammorbidita. Una barra di avanzamento con la percentuale e sette punti, uno per pannello, dicono sempre dove ci si trova; già nella prima schermata un’indicazione invita a scorrere.
Tipografia
Space Grotesk per i titoli, JetBrains Mono per etichette, numeri e coordinate: il monospace richiama le specifiche tecniche e la numerazione delle tavole.
Palette
Fondo grigio caldo color carta da disegno (#E8E4DF), inchiostro quasi nero (#0A0A0A) e un solo accento arancio (#FF3C00), con una variante più scura (#CC3000). Il pannello dei dati si inverte su fondo nero.
Dettagli
Una griglia tecnica appena visibile, la grana della carta, le coordinate del cursore aggiornate in tempo reale e i dati di progetto che si contano da zero quando il pannello entra in vista. Le foto della galleria sono leggermente desaturate e prendono colore al passaggio del mouse.
Le scelte tecniche
La demo è costruita su misura in HTML, CSS e JavaScript, senza framework né template. Sono le stesse regole che seguiamo nei siti per i clienti:
- Scorrimento orizzontale gestito in JavaScript: rotella e trascinamento su touch diventano movimento laterale, con un’interpolazione che rende il passo morbido e si ferma ai bordi del contenuto.
- Animazioni leggere: le comparse durante lo scorrimento usano solo transform e opacity, che il browser anima senza ricalcolare l’impaginazione.
- Effetti solo dove servono: il cursore personalizzato è attivo solo da desktop; su smartphone i pannelli occupano quasi tutta la larghezza e si scorrono con il dito.
- Responsive: dimensioni di titoli, numeri e pannelli si adattano a tablet e smartphone.
Sulle immagini: le fotografie della demo sono immagini di repertorio usate come segnaposto. In un progetto reale si usano foto dell’attività, fornite dal cliente o scattate per l’occasione, salvate in WebP o AVIF e nelle dimensioni adatte a ogni schermo.
Cosa mostra a chi cerca un sito simile
Se hai uno studio di architettura, ingegneria, interior o design industriale, il concept mostra come presentare un progetto con il rigore di una tavola tecnica: dati, processo e immagini in sequenza, senza testi superflui. Lo scorrimento orizzontale però non è per tutti: funziona per raccontare un progetto alla volta, meno per siti con molte pagine e contenuti.
Cosa ci interessava esplorare
Lo scorrimento orizzontale è spesso sconsigliato perché disorienta. Volevamo capire quali riferimenti servono per renderlo comprensibile: barra di avanzamento, punti di sezione, pannelli numerati e un invito esplicito a scorrere fin dalla prima schermata.
Esplora il progetto
Naviga la demo completa direttamente qui, in versione desktop o mobile. Testi, numeri e fotografie sono di fantasia o di repertorio: servono solo a dare forma al concept.
Anteprima non visibile? Apri la demo →
Servizi WebNovis coinvolti nel progetto
Per uno studio reale, un portfolio come questo unisce sviluppo su misura e progettazione grafica:
- Sviluppo web su misura Progettazione e sviluppo completo, dal design al codice proprietario senza template.
- Graphic design Materiali visivi coordinati con l’identità del progetto.
Domande frequenti su un progetto simile
Structure Arch è un cliente reale?
No. È un concept dimostrativo del nostro studio: marchio, progetto, luoghi e dati che compaiono nella demo sono inventati, e le fotografie vengono da una libreria di immagini libere. Serve a mostrare un linguaggio visivo e il livello di cura che proponiamo anche ai clienti.
Lo scorrimento orizzontale va bene per ogni sito?
No. È adatto a raccontare un progetto alla volta o una presentazione breve; per un sito con molte pagine, servizi e contatti conviene una struttura verticale classica, magari con una sola sezione orizzontale. Lo valutiamo insieme durante l’analisi iniziale, che è gratuita.
Quanto costa e quanto tempo serve?
Un sito vetrina WebNovis parte da €1.200, con tempi stimati di 3–4 settimane; una landing page parte da €500 e richiede 1–2 settimane. Il preventivo gratuito fissa costi e date prima di iniziare.
I prezzi di partenza di tutti i servizi sono nella pagina Prezzi.
Vuoi un sito con questo livello di cura per il tuo studio?
Raccontaci il tuo progetto: il preventivo è gratuito e senza impegno.
Richiedi un preventivo