Portfolio / Étude de cas
KleinCASA : du brief au site en ligne
Un site d'une seule page, en trois langues, pour une entreprise qui transforme des conteneurs maritimes en habitations. Voici comment nous y sommes arrivés : les directions essayées, les couleurs, les caractères, le résultat.
- Client
- KleinCASA, une marque de Uniko Sagl, Losone (TI)
- Secteur
- Tiny houses à partir de conteneurs maritimes
- Travail
- Site d'une page et panneau de gestion sur mesure
- Langues
- Italien, allemand, anglais
- En ligne
- Depuis le 22 septembre 2026
- Adresse
- kleincasa.com
01
Le point de départ
KleinCASA transforme des conteneurs maritimes en habitations haut de gamme, construites dans un atelier aux portes de Gênes. La demande était claire : un site d'une seule page, trois langues, et une référence précise pour les couleurs et la répartition des espaces.
Une référence est un point de départ, pas un modèle à décalquer. Le travail a consisté à comprendre ce qui plaisait vraiment dans cet exemple (le papier clair, les filets fins, les images encadrées) et à construire autour un site qui soit le sien, avec son produit et ses couleurs.
Une page, six sections
Qui sommes-nous, solutions, investissement, galerie, questions et contact : tout sur une page que l'on fait défiler.
Trois vraies langues
Italien, allemand et anglais. L'allemand n'est pas une langue en plus : c'est celle du marché principal.
Ordinateur et téléphone, séparément
Deux mises en page, chacune pensée pour son écran, et non une seule qui rétrécit.
02
Quatre directions, un choix
Avant de dessiner une page, nous avons écrit quatre directions différentes, chacune complète : idée, couleurs, caractères, mouvement. Puis nous les avons comparées sur trois questions. Est-ce que cela plaira au client ? Est-ce le bon choix de design ? Peut-on bien le construire dans les délais ?
-
Le choix
Éditorial suisse
Une monographie d'architecture : papier de lin, filets d'un pixel, un grand sérif léger, une seule encre.
-
Cinématographique
Un récit guidé par le défilement, où les photographies font office de scènes.
-
Catalogue d'architecture
La plus proche de la référence : deux colonnes, images encadrées, panneaux qui se déplient.
-
Atelier
Le module d'habitation comme objet d'ingénierie, à regarder couche par couche.
La première l'a emporté, d'un cheveu sur la troisième. Des autres, nous avons gardé les meilleures idées.
03
La palette
Les couleurs viennent du produit, pas d'un nuancier. Le lin est le papier sur lequel tout repose. Le navy est l'encre, le même bleu foncé que les conteneurs. Le rouge est celui des deux barres « // » que le client utilise dans ses documents, et sur le site il n'apparaît que là, comme une ponctuation.
Chaque paire de texte et de fond a été mesurée, pas jugée à l'œil. Le chiffre à côté d'une couleur est son rapport de contraste sur le lin : au-dessus de 4.5, un texte se lit bien même pour les personnes malvoyantes.
-
Lin
#F3ECE4Fond de la page -
Lin foncé
#EAE1D6Deux bandes de contraste -
Navy
#1C2733Titres, boutons, bande finale 12.9 contraste sur le lin -
Graphite
#2B2B2BTexte courant 12.1 contraste sur le lin -
Taupe
#645850Légendes et étiquettes 5.9 contraste sur le lin -
Pierre
#C9BDB1Filets et cadres -
Rouge
#B8352AUniquement les deux barres 5.0 contraste sur le lin
Combien de couleur, et où
Du lin presque partout, deux bandes plus foncées pour marquer la pause, le navy pour conclure. Le rouge est une goutte.
04
Les caractères
Deux familles, chacune avec un rôle. Cormorant Garamond pour les titres : un sérif léger et grand, qui donne à la page le rythme d'un livre d'architecture. Jost pour tout le reste : une linéale nette, qui reste lisible même dans les petites étiquettes.
// Suisse, Losone
Le grandi tiny houses
Là où l'ingénierie suisse rencontre le savoir-faire italien.
05
Le site final
Ce que vous voyez ci-dessous est le site en ligne, du premier écran aux contacts, tel que le découvre celui qui arrive depuis un ordinateur ou un téléphone.
Faites défiler dans la fenêtre pour voir toute la page
Ouvrir kleincasa.com (s'ouvre dans un nouvel onglet)
De la référence à la mise en ligne
-
Le client nous indique sa référence.
-
Le premier aperçu navigable, pour ordinateur et téléphone.
-
Les textes et les photographies définitifs arrivent.
-
L'allemand et l'anglais s'ajoutent.
-
kleincasa.com est en ligne.
06
En coulisses : le panneau de gestion
Le site dispose d'un panneau de gestion écrit sur mesure. Pour changer une phrase, le client ouvre la page, clique sur le texte et le réécrit là où il le voit. Il en va de même pour les photographies, dans les trois langues.
Pas de système lourd ni d'extensions tierces à tenir à jour : moins de choses qui cassent, des pages plus légères, et le client ne touche qu'à ce dont il a besoin.
Nous construisons aussi des applications sur mesure pour le travail de tous les jours
Nous avons été vraiment impressionnés par l'efficacité et le professionnalisme de Moesano Web. Lorenzo a suivi nos directives avec soin et nous a livré exactement le site que nous voulions.