Aller au contenu

Saint-Laurent d'Aigouze

Saint-Laurent d'Aigouze

Un site web qui dévoile l'histoire de chaque rue de Saint-Laurent d'Aigouze via des QR codes placés dans les rues.

À Propos du projet

Du ProjetÀ Propos

Problème

Ce projet a été réalisé en collaboration avec la mairie de Saint-Laurent d'Aigouze. Le défi consistait à créer un site web capable d'afficher des informations détaillées sur chaque rue de la ville, tout en étant facile d'accès et consultable à tout moment. Étant donné que la plupart des utilisateurs consulteraient le contenu directement depuis leur smartphone après avoir scanné un code QR dans la rue, le site web devait offrir une expérience claire, réactive et légère, optimisée pour une consultation rapide dans un environnement mobile.

Solution

Pour répondre à ces besoins, j'ai conçu un site web hautement réactif qui s'adapte parfaitement à toutes les tailles d'écran, en privilégiant une approche axée sur les appareils mobiles. La structure a été simplifiée afin de permettre aux visiteurs de trouver rapidement et sans distraction les informations pertinentes sur chaque rue. Une attention particulière a été accordée aux temps de chargement et à la garantie que le contenu reste accessible même avec une connectivité limitée, ce qui est souvent le cas dans les espaces publics.

Colorimétrie du projet

Du ProjetColorimétrie
  • Cliquer pour copier
  • Bourgogne
  • Noir
  • Blanc

En détails

EnDétails

Contrainte

La principale contrainte était de garantir une expérience utilisateur optimale sur les smartphones, qui constituent le principal moyen de consultation via les codes QR. Il s'agissait donc de privilégier une mise en page réactive, une typographie lisible et un système de navigation qui reste intuitif même en extérieur, où les reflets ou une mauvaise couverture réseau peuvent rendre la navigation plus difficile.

Technologies

Pour ce projet, j'ai utilisé des technologies web standard : HTML et CSS pour une structure claire et efficace, et JavaScript vanilla pour des interactions minimales. Le style s'appuie sur une architecture CSS « mobile first », utilisant des systèmes flexbox et grid modernes pour garantir la flexibilité. Les meilleures pratiques en matière de performances, telles que l'optimisation des images et la minification du code, ont été appliquées afin d'offrir l'expérience la plus rapide possible aux utilisateurs qui scannent les codes QR.