Portfolio / Caso studio
KleinCASA: dal briefing al sito in linea
Un sito di una pagina, in tre lingue, per chi trasforma container navali in abitazioni. Qui raccontiamo come ci siamo arrivati: le direzioni provate, i colori, i caratteri, il risultato.
- Cliente
- KleinCASA, marchio di Uniko Sagl, Losone (TI)
- Settore
- Tiny house da container navali
- Lavoro
- Sito di una pagina e pannello di gestione su misura
- Lingue
- Italiano, tedesco, inglese
- In linea
- Dal 22 settembre 2026
- Indirizzo
- kleincasa.com
01
Il punto di partenza
KleinCASA trasforma container navali in abitazioni di alto livello, costruite in un'officina alle porte di Genova. Ci ha scritto con le idee chiare: un sito di una pagina sola, tre lingue, e un riferimento preciso per i colori e per la suddivisione degli spazi.
Un riferimento è un punto di partenza, non un modello da ricalcare. Il lavoro è stato capire che cosa piaceva davvero di quell'esempio (la carta chiara, i filetti sottili, le immagini incorniciate) e costruirci attorno un sito che fosse suo, con il suo prodotto e i suoi colori.
Una pagina, sei sezioni
Chi siamo, soluzioni, investimento, galleria, domande e contatti: tutto in una pagina che si scorre.
Tre lingue vere
Italiano, tedesco e inglese. Il tedesco non è una lingua in più: è quella del mercato principale.
Computer e telefono, separati
Due impaginazioni pensate ognuna per il suo schermo, non una sola che si restringe.
02
Quattro direzioni, una scelta
Prima di disegnare una pagina abbiamo scritto quattro direzioni diverse, ognuna completa: idea, colori, caratteri, movimento. Poi le abbiamo messe a confronto su tre domande. Piacerà al cliente? È la scelta giusta per il design? Si costruisce bene nei tempi?
-
La scelta
Editoriale svizzero
Una monografia di architettura: carta di lino, filetti da un pixel, un serif grande e leggero, un solo inchiostro.
-
Cinematografico
Un racconto guidato dallo scorrimento, con le fotografie che fanno da scene.
-
Catalogo di architettura
La più vicina al riferimento: due colonne, immagini incorniciate, schede che si aprono.
-
Officina
Il modulo abitativo come oggetto d'ingegneria, da guardare strato per strato.
Ha vinto la prima, di un soffio sulla terza. Dalle altre abbiamo tenuto le idee migliori.
03
La palette
I colori vengono dal prodotto, non da un campionario. Il lino è la carta su cui tutto poggia. Il navy è l'inchiostro, lo stesso blu scuro dei container. Il rosso è quello delle due barrette «//» che il cliente usa nei suoi documenti, e sul sito compare solo lì, come punteggiatura.
Ogni coppia di testo e fondo è stata misurata, non giudicata a occhio. Il numero accanto a un colore è il suo rapporto di contrasto sul lino: sopra 4.5 un testo si legge bene anche per chi vede poco.
-
Lino
#F3ECE4Fondo della pagina -
Lino scuro
#EAE1D6Due fasce di stacco -
Navy
#1C2733Titoli, pulsanti, chiusura 12.9 contrasto sul lino -
Grafite
#2B2B2BTesto corrente 12.1 contrasto sul lino -
Taupe
#645850Didascalie ed etichette 5.9 contrasto sul lino -
Pietra
#C9BDB1Filetti e cornici -
Rosso
#B8352ASolo le due barrette 5.0 contrasto sul lino
Quanto colore, e dove
Lino quasi ovunque, due fasce più scure per staccare, il navy in chiusura. Il rosso è una goccia.
04
I caratteri
Due famiglie, ognuna con un compito. Cormorant Garamond per i titoli: un serif leggero e grande, che dà alla pagina il passo di un libro di architettura. Jost per tutto il resto: un lineare pulito, che resta leggibile anche nelle etichette piccole.
// Svizzera, Losone
Le grandi tiny houses
Dove l'ingegneria svizzera incontra la maestria italiana.
05
Il sito finale
Quello che vedi qui sotto è il sito in linea, dalla prima schermata ai contatti, come lo trova chi arriva da computer e da telefono.
Scorri dentro la finestra per vedere tutta la pagina
Apri kleincasa.com (si apre in una nuova scheda)
Dal riferimento alla messa in linea
-
Il cliente ci indica il suo riferimento.
-
La prima anteprima navigabile, per computer e telefono.
-
Entrano testi e fotografie definitivi.
-
Si aggiungono tedesco e inglese.
-
kleincasa.com è in linea.
06
Dietro le quinte: il pannello
Il sito ha un pannello di gestione scritto su misura. Per cambiare una frase il cliente apre la pagina, clicca sul testo e lo riscrive lì dove lo vede. Lo stesso vale per le fotografie, in tutte e tre le lingue.
Niente sistemi pesanti e niente estensioni di terzi da tenere aggiornate: meno cose che si rompono, pagine più leggere, e il cliente tocca solo quello che gli serve.
Costruiamo anche applicativi su misura per il lavoro di ogni giorno
Siamo rimasti davvero colpiti dall'efficienza e dalla professionalità di Moesano Web. Lorenzo ha seguito con attenzione le nostre linee guida e ci ha consegnato esattamente il sito che volevamo.