Concevoir un site capable d’incarner l’identité de l’AURBSE tout en rendant ses données territoriales plus lisibles, plus accessibles et plus simples à diffuser : un projet à la croisée du design éditorial, de la visualisation d’informations et de l’automatisation.
L’Agence d’Urbanisme de Rouen et des Boucles de Seine et Eure accompagne les collectivités dans la lecture et l’analyse des grandes mutations du territoire. Pour ce projet, l’enjeu était double : concevoir un site institutionnel à forte identité visuelle, tout en donnant une place centrale à la donnée, à sa compréhension et à sa diffusion.
Réalisé en collaboration avec l’agence Advitam et Pierre Patrault pour la direction artistique, le site de l’AURBSE a été pensé comme un outil de consultation, d’exploration et de valorisation des ressources de l’Agence. L’objectif n’était pas seulement de publier des contenus, mais de rendre lisibles des phénomènes complexes à travers une expérience claire, exigeante et techniquement solide.
Une page d’accueil conçue comme un point d’entrée dans les dynamiques du territoire
La page d’accueil tient une place structurante dans le projet. Elle donne immédiatement le ton avec une présence visuelle forte, un système d’animations soigné et une navigation pensée pour faire émerger les grandes thématiques de l’Agence.
Au-delà de sa fonction institutionnelle, cette page a été conçue comme une interface de lecture du territoire. Elle articule image, hiérarchie éditoriale, chiffres clés et accès directs vers les contenus d’analyse. Les graphes animés participent pleinement à cette ambition : faire sentir que les indicateurs ne sont pas de simples chiffres, mais l’expression de transformations concrètes, lisibles et comparables.
Rendre la donnée plus accessible et plus lisible
L’un des enjeux majeurs du projet consistait à rendre accessibles des informations parfois denses, techniques ou multi-scalaires, sans perdre en clarté. Nous avons donc porté une attention particulière à la présentation des indicateurs, aux niveaux de lecture et à la hiérarchisation des contenus.
Chaque visualisation s’inscrit dans une logique de médiation : permettre à l’utilisateur de comprendre rapidement un indicateur, d’en lire les évolutions, et d’en saisir les principaux enseignements pour le territoire. Le site donne ainsi une place centrale à une donnée contextualisée, utile et directement exploitable.
Des visualisations intégrées sur mesure avec ApexCharts et D3.js
Pour répondre à cette exigence, nous avons intégré plusieurs outils de visualisation, avec une répartition claire des usages selon les besoins. ApexCharts a été mobilisé pour les graphiques et les comparaisons chiffrées, avec une attention particulière portée à la lisibilité, à la réactivité et à l’intégration dans l’interface.
D3.js a surtout été utilisé pour la partie cartographique et les représentations territoriales plus spécifiques. Cette bibliothèque nous a permis de développer des cartes sur mesure, plus fines dans leur rendu et mieux adaptées à la nature des données manipulées. Ce travail d’intégration a permis de conserver une cohérence graphique forte entre les visualisations, les contenus éditoriaux et l’identité générale du site.
Une alimentation automatique via API
Le projet repose également sur une logique d’interconnexion avec les outils internes de l’Agence. Une API reliée à leur logiciel métier permet de faire remonter automatiquement certaines données dans le site, afin de limiter les doubles saisies, de fiabiliser les mises à jour et de fluidifier la publication.
Cette connexion donne au site une vraie dimension fonctionnelle : il ne se contente pas d’exposer des contenus, il s’inscrit dans une chaîne de production d’information plus large, directement connectée aux usages de l’Agence. La donnée publiée gagne ainsi en cohérence, en fraîcheur et en fiabilité.
Automatiser la génération des portraits en PDF
Autre dimension importante du projet : l’automatisation de l’export des portraits en PDF. Là encore, cette fonctionnalité s’appuie sur les données remontées via API afin de générer des documents structurés, homogènes et directement exploitables par les équipes.
Ce dispositif permet à la fois un gain de temps dans la production documentaire et une meilleure continuité entre consultation en ligne et diffusion de supports. Les contenus publiés sur le site peuvent ainsi être réutilisés dans des formats de travail ou de présentation sans ressaisie manuelle.
Un versant institutionnel sobre, clair et cohérent
Au-delà des pages liées aux données et aux visualisations, le projet comprenait également tout un ensemble de pages institutionnelles plus classiques : présentation de l’Agence, contenus éditoriaux, actualités, ressources et page de contact. L’enjeu était de leur donner un cadre sobre, lisible et pleinement cohérent avec l’identité graphique du site.
Ce travail d’équilibre était important : il fallait que ces pages plus éditoriales dialoguent naturellement avec les espaces plus techniques du site. Elles participent ainsi à installer une image claire de l’AURBSE, à valoriser ses missions et à proposer une navigation fluide entre information institutionnelle, contenus de fond et outils d’exploration.
Un projet technique au service de la lisibilité
Derrière l’élégance apparente de l’interface, le projet repose sur un développement sur mesure, pensé pour articuler design, contenus, visualisation d’informations et interconnexions techniques. C’est précisément cette articulation qui donne au site sa singularité : une présence institutionnelle forte, enrichie par de véritables outils d’accès, de lecture et de diffusion de la donnée.
Avec ce projet, lamp a conçu une plateforme capable de valoriser l’expertise de l’AURBSE tout en rendant plus visibles les dynamiques d’un territoire en transformation. Un site où le design, la clarté de lecture et la technique travaillent ensemble pour rendre l’information plus vivante et plus utile.
