metapixel
  • Vitrine
  • Webflow
  • Sur mesure

Agence d’Architecture

Refonte complète du site d’une agence d’architecture avec migration WordPress vers Webflow, optimisation des performances et mise en valeur des projets architecturaux.

Informations générales

Notre client, une agence d’architecture spécialisée dans la conception d’équipements publics et privés, dispose d’une solide expérience sur des projets variés : piscines, établissements scolaires, bâtiments tertiaires, programmes de logements, structures culturelles, hôtellerie ou encore résidences pour personnes âgées.

Avec le développement de son activité sur plusieurs territoires, l’enjeu était de disposer d’un site vitrine capable de refléter son expertise architecturale et de valoriser efficacement ses réalisations.

Le site existant présentait cependant plusieurs limitations importantes :

  • ⚠️ Site WordPress peu optimisé, avec des performances très faibles (LCP et FCP au-delà des standards actuels)
  • 📱 Absence de responsive design, de nombreux composants étant uniquement adaptés au desktop
  • 🏗️ Mauvaise mise en valeur des projets architecturaux, pourtant élément central pour une agence d’architecture
  • 🧾 Surabondance d’informations textuelles, nuisant à la lisibilité et à l’expérience utilisateur

L’objectif était donc de repenser entièrement la plateforme digitale afin d’offrir un site rapide, moderne et parfaitement adapté à la présentation de projets architecturaux.


Visiter le site
Cette version du site est présentée sous une forme anonymisée afin de respecter la confidentialité du client, tout en illustrant le travail réalisé sur le projet.

Moodboard

L’identité visuelle du site a été pensée dans une logique minimaliste et architecturale, afin de laisser la priorité aux réalisations du client.

La palette repose principalement sur des noirs profonds et des blancs froids, créant un contraste élégant et une lecture claire des contenus. Les couleurs secondaires viennent structurer l’interface et apporter des touches visuelles discrètes, sans perturber la mise en valeur des projets.

La typographie participe également à cette approche :

  • Noto Sans pour les titres : une police ronde et moderne, apportant caractère et lisibilité
  • Inter pour les textes : une typographie optimisée pour la lecture à l’écran

L’ensemble crée un univers graphique sobre, professionnel et intemporel, parfaitement adapté au domaine de l’architecture.

#28438c
#2d7fd6
#8c9eb1
#fefefe
#232323
#385263

Conception graphique

La conception du site a été pensée pour mettre les projets architecturaux au centre de l’expérience utilisateur.

Chaque section du site a été construite autour d’une logique simple :
réduire le bruit visuel et maximiser l’impact des réalisations.

Pour atteindre cet objectif, plusieurs composants et animations sur mesure ont été développés :

Composants de présentation des projets

Les projets architecturaux sont présentés via un système de composants modulaires combinés aux collections CMS, permettant :

  • une navigation fluide entre les réalisations
  • une mise en avant des visuels
  • une hiérarchisation claire des informations
  • une maintenance simple par l’ajout d’une nouvelle entrée dans la collection CMS pour chaque nouveau projet

Des animations d’apparition et transitions douces accompagnent la navigation pour renforcer la sensation de fluidité.

Résultat

Capture complète du site d’une agence d’architecture

Sur mobile

Image 1
Image 2
Image 3
Image 4