Étude de cas 06 / 06
DataGem
Studio logiciel · Site web
Ce site, repensé et reconstruit autour des lignes mêmes du logo
- Ingénierie logicielle
- Cloud et infrastructure
Chiffres clés
- Score de performance Lighthouse sur ordinateur
- 100
- Décalage de mise en page au chargement
- 0
- JavaScript compressé pour charger une page (contre 440 ko auparavant)
- 130 ko
En bref
L’enjeu
Notre ancien site : un design sombre sur un fond 3D permanent, des bibliothèques d’animation et de défilement fluide, et un rendu entièrement côté navigateur. Chaque page chargeait environ 440 ko de JavaScript compressé et n’affichait rien avant son exécution, et Google Fonts comme Google Analytics se chargeaient sans demander de consentement.
Notre réalisation
Un nouveau design, Current (papier, encre et le bleu du logo, en Bodoni Moda, Archivo et IBM Plex Mono), et un moteur WebGL qui dessine en temps réel les 12 lignes du logo, du haut de la page d’accueil à son parcours au défilement, jusqu’à la page 404. Chaque page est pré-rendue en HTML statique et servie par nginx sur Cloud Run, avec Google Analytics seulement après consentement.
Le résultat
Un site plus léger, dont le texte est là avant toute exécution de script et ne bouge pas pendant le chargement, utilisable au clavier et avec le mouvement réduit, et qui n’envoie rien à Google tant que le visiteur n’a pas accepté.
Services associés : Développement full stackInfrastructure cloud
Savoir-faire
Ce qu’il a fallu.
Ingénierie logicielle
- Un moteur de lignes WebGL sur three.js : les 12 lignes du logo, extraites en vecteurs exacts de son fichier source Illustrator, dessinées en temps réel en haut de la page d’accueil, portées à travers les quatre chapitres de son parcours au défilement et déchirées sur la page 404, avec des ondulations qui suivent le pointeur.
- Des pages React pré-rendues en HTML statique au build puis hydratées dans le navigateur : le texte s’affiche avant toute exécution de JavaScript, et chaque page a son propre titre, sa description et son URL canonique.
- Accessibilité : axe ne relève aucune non-conformité, sur aucune page ; le parcours, les menus et les fiches projet fonctionnent au clavier ; avec le mouvement réduit, ou sur un appareil sans accélération graphique, le site affiche des images fixes.
Cloud et infrastructure
- nginx sur Google Cloud Run, construit et déployé par Cloud Build à chaque push sur main.
- De vraies 404, des redirections permanentes pour les anciennes adresses, une mise en cache longue durée des fichiers à empreinte (hash) et des en-têtes de sécurité.
- Polices auto-hébergées et bandeau cookies conforme aux règles de la CNIL : aucune requête ne part vers Google avant que le visiteur accepte la mesure d’audience.
Projet 01
Design : Current
Design system · Tailwind CSS
Un nouveau design pour le site du studio, tiré du logo lui-même : papier, encre et le bleu du logo, Bodoni Moda pour les titres, Archivo pour le texte et IBM Plex Mono pour les étiquettes. Les pages se lisent comme des documents, avec des sections numérotées, des filets fins et des fiches projet qui s’ouvrent par-dessus la liste, et le dernier chapitre du parcours fait passer la page en mode nuit.
- Objectif
- Remplacer un site sombre et chargé d’effets par un site qui se lit d’abord et porte la marque dans chaque détail.
- Points clés
- Un seul jeu de tokens pour la couleur, la typographie, les espacements et le mouvement, avec une palette de nuit
- Polices auto-hébergées avec des polices de secours aux métriques ajustées : le texte ne saute pas quand elles arrivent
- Fiches projet : l’enjeu, la réalisation et les chiffres clés de chaque client dans une boîte de dialogue, à un clic de la liste
- Captures d’écran clients prises sur les vraies applications avec des données de démo, et signalées comme telles
- Technologies
- Tailwind CSS
- Bodoni Moda
- Archivo
- IBM Plex Mono
Projet 02
Le logo vivant
three.js · WebGL2 · GLSL
Les 12 lignes du logo, extraites en vecteurs exacts de son fichier source Illustrator et dessinées en temps réel par un moteur WebGL. Dans le parcours de la page d’accueil, elles quittent le logo et passent de gauche à droite entre Cadrer, Penser, Bâtir et Piloter tandis que le texte apparaît de l’autre côté, puis se referment en logo à la nuit tombée. Sur la page 404, la ligne extérieure est déchirée et ses extrémités libres dérivent vers le pointeur ; partout, le pointeur laisse des ondulations.
- Objectif
- Faire du logo le mouvement du site, sans rien coûter aux visiteurs en vitesse ni en confort.
- Points clés
- Un seul contexte WebGL et un seul canvas, qui passe du haut de la page d’accueil au parcours
- three.js et le moteur (139 ko compressés) dans un chunk à part, téléchargé une fois la page chargée et lancé au premier défilement, mouvement du pointeur ou appui sur une touche
- Images fixes en cas de mouvement réduit, d’animations désactivées (bouton Animations), de Save-Data ou d’appareil sans accélération graphique
- Une frise des chapitres utilisable avec les flèches du clavier, et un lien pour passer le parcours
- Technologies
- three.js
- WebGL2
- GLSL
- React 18
Projet 03
Pré-rendu, servi par Cloud Run
React 18 · Vite · nginx · Cloud Run
Chaque route, études de cas comprises, est rendue en HTML statique au build puis hydratée : le texte est sur la page avant tout JavaScript, et les moteurs de recherche comme les aperçus de liens reçoivent le titre, la description et les données structurées propres à chaque page, avec une image de partage par étude de cas. nginx sur Cloud Run sert le tout avec de vraies 404, une mise en cache longue durée des fichiers à empreinte et des en-têtes de sécurité, et Cloud Build déploie chaque push sur main.
- Objectif
- Un site rapide sur mobile, facile à trouver et à partager, accessible et respectueux de la vie privée par défaut.
- Points clés
- Routes et sitemap générés à partir des mêmes données d’études de cas que les pages
- Un build qui échoue si une page n’a pas son titre, sa description ou son URL canonique
- Google Analytics seulement après « Accepter » dans le bandeau cookies, selon les règles de la CNIL
- Aucune non-conformité relevée par axe, sur aucune page ; navigation au clavier et focus gérés sur tout le site
- Technologies
- React 18
- Vite
- nginx
- Cloud Run
- Cloud Build
