Étude de cas · Maisons d’architecte

Création du site internet Surplomb, maisons d’architecte.

Surplomb est une création de démonstration en code pour un studio d’architecture fictif. La visite s’ouvre sur une villa imaginée, puis rejoue seize mois de chantier fictif au défilement, du terrain nu à la lumière du soir. Site Web Montpellier a conçu le parcours, les visuels, le film et le code ; ce projet ne représente pas une commande client ni un chantier réel.

Parlons de mon projetRendez-vous · 30 minutes Voir le site en ligne

5,0/5 sur Google41 avis · Site Web Montpellier · relevé du 21/10/2026

Réalisé par Site Web Montpellier

Sur téléphone

Surplomb Ce film est le site internet lui-même, filmé pendant qu’on le fait défiler : rien n’est monté après coup.

Secteur: Maisons d’architecte
Type de site: Site vitrine animé
Site en ligne: Surplomb
Résultat mesuré: 92 sur 100 en performance Lighthouse, sur mobilemesure du 29/09/2026

Création du site vitrine : le parti pris

L’idée de départ
du site vitrine.

Le point de départ du site vitrine et ce qu’il devait réussir, tel que l’a pensé Site Web Montpellier, agence web à Montpellier.

Le point de départ

Une maison d’architecte se vend sur un résultat que le client ne voit pas encore. Le site devait montrer d’emblée la maison livrée, puis rendre lisibles seize mois de chantier sans perdre le visiteur, et rester rapide à ouvrir sur téléphone.

Le site vitrine Surplomb, conçu par Site Web Montpellier

Du parti pris
au site vitrine en ligne.

Conception, visuels, animations et code : Site Web Montpellier a tout réalisé, comme pour chaque création de site internet de l’agence.

Direction artistique.

Typographies d’architecte, cartouche et cote de plan, palette de pierre, de béton et de bois brûlé.

Visuels et film du chantier.

Villa, terrain, intérieurs et matières créés pour le site ; film de 113 images, du terrain nu à la remise des clés.

Animation au défilement.

Le chantier avance avec la page, en 7 étapes nommées et cliquables, puis se fond dans la photo de la maison livrée ; défilement adouci sur ordinateur.

Formulaire qui oriente la demande.

Trois étapes dans le formulaire du site vitrine : projet et terrain, budget et calendrier, coordonnées et créneau de visite.

Version mobile.

Ouverture plein écran sur le porte-à-faux de la maison d’architecte, film en bandeau collant, menu en rideau animé.

Vitesse de chargement.

Polices servies par le site web, film chargé après la photo d’ouverture, animations à l’arrêt quand la page ne bouge pas.

Captures du site vitrine

Le site vitrine,
rubrique après rubrique.

Des parties du site vitrine Surplomb que le film ne montre pas. Sélectionnez une vue pour l’agrandir.

Rubrique « Méthode » : titre « De l’esquisse à la remise des clés » et les six phases de la mission avec leur durée indicative, de l’esquisse à la réception des travaux. — 01La méthode par phases

Rubrique contact « Parlons de votre terrain » sur fond de garrigue, avec le formulaire à l’étape 1 sur 3 (type de projet, état du terrain, commune) et le pied de page du site. — 02Le contact en 3 étapes

Menu plein écran ouvert sur téléphone : quatre rubriques numérotées en grands caractères, une carte « Villa Garrigue, livrée en 2026 » et le bouton « Parler de votre terrain ». — 03Le menu plein écran

3 vues du siteVisiter Surplomb

Les résultats du site vitrine

Les chiffres du site vitrine.
Avec leur période.

Résultats mesurés

Chiffres sourcés, avec leur période.

92sur 100 en performance Lighthouse, sur mobile

Périodemesure du 29/09/2026SourceLighthouse 12.8 (Google), page en ligne, moins bonne de deux mesures

100sur 100 en performance Lighthouse, sur ordinateur

Périodemesure du 29/09/2026SourceLighthouse 12.8 (Google), page en ligne, deux mesures

Pour aller plus loin sur la création de site

Un site vitrine
dans le même esprit ?

Agence web Montpellier

Création site internet Montpellier.
La même méthode pour votre projet.

Surplomb explore une présentation d’architecture en code : montrer d’abord le résultat imaginé, puis rendre le chantier lisible au défilement. Les visuels et le film servent cette démonstration. Les mesures Lighthouse datées décrivent un test de laboratoire de la version mesurée ; elles ne sont pas un résultat commercial.

Vous souhaitez présenter un projet architectural ou un savoir-faire visuel ? Notre offre de création de site internet permet de cadrer les contenus, les interactions et le choix entre un site en code et WordPress. La réalisation présentée ici est en code ; WordPress constitue une autre approche à comparer selon vos besoins d’édition.

Autres réalisations de l’agence web

D’autres créations de sites
dans le même esprit.

D’autres sites web conçus par Site Web Montpellier, chacun avec son étude de cas.

Site de restaurant burger

Restaurant de smash burgers

Parlons de votre site internet

Votre site web
commence ici.

Un site vitrine comme Surplomb vous parle ? Décrivez votre activité : nous vous rappelons sous 48 h pour en parler, puis nous vous proposons un devis détaillé, sans engagement, pour votre site et son référencement SEO.

Réserver ma visio de 30 minGoogle Meet · gratuit