Corset-Roche & Associés : une vitrine digitale à la hauteur d’un grand portfolio d’architecture
Créer un site pour une agence d’architecture, c’est concevoir un espace digital capable de refléter une posture, une rigueur et une vision du projet.
Pour Corset-Roche & Associés, il s’agissait d’imaginer une présence en ligne à la hauteur de l’ampleur de leur travail : plus de 200 références à structurer, valoriser et rendre accessibles dans un cadre clair et cohérent.
Le site a été pensé comme une véritable vitrine éditoriale, capable de soutenir l’image de l’agence, d’organiser son vaste portfolio et d’offrir un outil de communication durable, administrable au quotidien.
Rendre visible, structurer, durer
Dès le cadrage, trois ambitions se sont imposées :
1. Offrir une vitrine crédible et contemporaine :
Un site à la hauteur du niveau des projets, aligné avec les codes de l’architecture : précision, sobriété, maîtrise.
2. Structurer un volume important de références :
Transformer un portfolio massif en une bibliothèque claire et filtrable, compréhensible en quelques secondes.
3. Créer une base autonome et évolutive :
Permettre à l’agence de publier projets, actualités et offres d’emploi sans dépendance technique.
Une direction artistique éditoriale, minimaliste et maîtrisée
Le parti pris graphique repose sur une idée simple :
l’architecture doit rester au centre.
J'ai développé une direction éditoriale minimaliste :
- grilles nettes et structurées
- typographie soignée
- hiérarchie claire
- espaces généreux
Des micro-animations douces accompagnent la navigation : transitions propres, interactions discrètes, rythme fluide. Elles guident la lecture sans jamais détourner l’attention des projets.
Structurer 200+ projets
La vraie complexité du projet résidait dans la volumétrie.
Comment rendre consultables des centaines de projets sans créer une expérience lourde ?
La réponse a été architecturale :
penser le portfolio comme un système.
- Mise en place d’un CMS Projets dynamique
- Structuration par champs personnalisés
- Logique de filtres
- Template flexible capable d’absorber des contenus variables
Chaque page projet est indépendante, cohérente, et maintient un niveau de qualité constant, même lorsque le contenu évolue.
La même logique a été appliquée à la section Actualités et aux Offres d’emploi, afin de créer un site vivant et évolutif.
Processus : construire avant de dessiner
Cadrage & arborescence
Définition des objectifs stratégiques et structuration des pages clés : Agence, Démarche, Projets, Actualités, Contact.
Zoning & wireframes
Nous avons commencé le projet par la définition d’objectifs stratégiques clairs et par la cartographie du parcours utilisateur.
Avant toute réflexion visuelle, je me suis concentré sur le user flow; en identifiant la progression naturelle entre découverte, exploration, compréhension et prise de contact.
J’ai ensuite développé l’architecture de l’information et l’ai traduite en propositions de zoning. À ce stade, j’ai travaillé la hiérarchie des contenus, l’enchaînement des sections et l’équilibre des mises en page afin que chaque page remplisse un rôle précis au sein de l’expérience globale.
Lors de la phase de wireframing, je n’ai pas considéré les layouts comme de simples structures neutres. J’ai posé les bases du futur design en construisant une logique éditoriale : grilles maîtrisées, proportions équilibrées, espaces respirants et rythme de lecture structuré.
Même sans typographie définitive ni habillage graphique, les wireframes traduisaient déjà l’intention; minimaliste, rigoureuse et architecturale. Cette approche a permis à la phase de design d’évoluer naturellement à partir d’un cadre solide et intentionnel, plutôt que d’une page blanche.
En validant la structure avant le design visuel, j’ai garanti un résultat final intuitif, scalable et stratégiquement cohérent.
Exploration créative
Deux directions créatives ont été proposées afin d’explorer différentes interprétations visuelles du positionnement de l’agence. L’objectif n’était pas seulement esthétique, mais stratégique : trouver le juste équilibre entre sobriété, lisibilité et impact.
Une fois la direction validée, j’ai décliné le design sur l’ensemble des pages en construisant un véritable design system sur Figma. Grilles cohérentes, échelle typographique maîtrisée, rythmes d’espaces constants et composants réutilisables ont permis d’assurer une continuité visuelle sur tout le site.
La phase de maquettage a été profondément itérative. Chaque écran a évolué au fil des ajustements : affinage des proportions, hiérarchisation des blocs, précision des alignements et équilibre entre texte et image.
Un soin particulier a été apporté au choix des visuels. Les images ont été sélectionnées et intégrées comme des éléments structurants du layout. Leur cadrage, leur respiration et leur interaction avec la typographie ont fait l’objet d’une réflexion détaillée.
La typographie a joué un rôle central. Le travail sur la hiérarchie, le contraste et le rythme de lecture a permis de renforcer le caractère éditorial et architectural du projet.
Chaque détail a été pensé pour servir la clarté, la cohérence et la précision de l’ensemble.
Développement Webflow & CMS
Le site a été développé sur Webflow avec une intégration pixel-perfect, en traduisant les maquettes validées en un système digital structuré et évolutif.
J’ai construit une architecture CMS robuste en utilisant des champs dynamiques pour structurer les projets, les actualités et les autres contenus clés. La visibilité conditionnelle a été mise en place afin de permettre des mises en page flexibles qui s’adaptent automatiquement au contenu disponible, garantissant cohérence et stabilité sans ajustements manuels.
J’ai également personnalisé l’interface back-office en fonction des besoins du client, en organisant les collections et les champs de manière claire et intuitive pour faciliter la gestion quotidienne des contenus.
Enfin, j’ai assuré une formation ainsi qu’un accompagnement afin de garantir une autonomie complète. L’objectif n’était pas seulement de livrer un site finalisé, mais de fournir à l’agence un outil qu’elle puisse gérer et faire évoluer en toute confiance.
Responsive, performance & qualité d’exécution
Un design minimaliste exige une exécution irréprochable.
Au-delà de l’esthétique, le site a été optimisé pour offrir :
- une navigation fluide
- un chargement performant
- une expérience sans bug
- une cohérence totale entre desktop, tablette et mobile.
L’UX a guidé chaque décision technique : réduire les frictions, clarifier les parcours et garantir une expérience stable et durable.
Animations subtiles & mise en avant des projets
L’animation n’a jamais été pensée comme un effet, mais comme un outil de lecture.
Des transitions douces, des apparitions maîtrisées, un rythme fluide : chaque micro-interaction accompagne le regard sans perturber la concentration. L’objectif était simple : créer de la fluidité, jamais du bruit.
En page d’accueil, un slider dédié aux projets à la une permet de mettre en avant certaines réalisations stratégiques. Il structure la première impression, donne du dynamisme à la page et valorise immédiatement la qualité du portfolio, tout en restant sobre et cohérent avec l’identité éditoriale.
SEO, contenu & pilotage stratégique
Dès le départ, le projet a intégré une dimension SEO structurante : architecture sémantique claire, hiérarchie Hn cohérente, optimisation des contenus clés et structuration des pages projets pour favoriser leur indexation.
L’intervention de Raphaël Seran a été déterminante sur cette dimension :
SEO stratégique, accompagnement en copywriting et gestion de projet globale. Son travail a permis d’aligner le fond et la forme, structurer les messages, clarifier le positionnement et assurer une cohérence éditoriale sur l’ensemble du site.
Résultat
Un site Webflow conçu comme une véritable vitrine éditoriale :
- une identité claire et contemporaine
- un portfolio massif rendu simple à explorer
- un CMS robuste et autonome
- une expérience fluide et maîtrisée
- une base évolutive pensée pour durer
Plus qu’un site, une structure digitale capable d’accompagner la croissance de l’agence.
.jpg)
