Un site vitrine élégant pour une chargée de projet audiovisuel.
Donner une vraie présence en ligne à une entrepreneuse qui lance son activité, avec un outil qu'elle peut faire vivre en autonomie.
En bref
- Type de projet · Site vitrine avec interface d'administration
- Rôle · Designer, développeur
- Année · 2025
- Statut · Livré, en ligne et géré en autonomie par la cliente
- Stack principale · Next.js, Sanity, Resend
- Lien · belvieproduction.com
Le contexte
Belvie Production lançait son activité de gestion de projets audiovisuels avec un besoin simple à formuler mais exigeant à satisfaire : avoir un site qui reflète son univers professionnel, sa personnalité, et la qualité de son travail. Dans un métier de l'image où la première impression compte énormément, un site vitrine n'est pas un accessoire, c'est le premier contact avec des clients potentiels qui jugent sur la forme autant que sur le fond.
Au-delà de l'esthétique, il y avait un vrai enjeu d'autonomie. Beaucoup d'indépendants se retrouvent prisonniers d'un site qu'ils ne peuvent pas modifier eux-mêmes, obligés de contacter leur développeur pour changer une photo ou ajouter un projet. Pour une chargée de projet audiovisuel qui enchaîne les productions, c'était impensable. Il fallait un site qu'elle puisse faire évoluer facilement, au rythme de son activité, sans dépendance technique.
Le projet avait donc deux exigences parallèles : une qualité visuelle haut niveau pour coller à son métier, et une simplicité d'administration qui lui permettrait d'être vraiment propriétaire de son outil.
La solution
Un design sur-mesure à son image
Plutôt que de partir d'un template, nous avons construit ensemble une identité visuelle propre qui correspond à son univers professionnel : esthétique moderne, mise en valeur du visuel, hiérarchie d'information claire, navigation intuitive. Chaque page est pensée pour qu'un visiteur (client potentiel, collaborateur, recruteur éventuel) trouve rapidement ce qu'il cherche et ait envie d'en savoir plus.
Les sections clés
Le site présente son parcours et sa démarche, la liste de ses projets avec pour chacun une page dédiée qui peut contenir visuels, descriptions et contexte, ses compétences professionnelles, les collaborations marquantes qu'elle a eues, ainsi qu'une galerie photo personnelle qui humanise le contact. Une page contact permet aux clients potentiels de la joindre directement.
Une administration via Sanity
L'interface d'administration est construite sur Sanity, un CMS headless moderne. Concrètement, la cliente peut se connecter à une interface claire depuis n'importe quel navigateur, modifier ses textes, ajouter ou retirer des projets, mettre à jour ses photos, changer les informations de contact. Aucune connaissance technique n'est requise : c'est conçu comme un éditeur de texte familier, avec des champs simples à remplir.
Le site se régénère automatiquement à chaque modification pour que les changements apparaissent en ligne rapidement, sans intervention manuelle.
Un formulaire de contact connecté
La page contact intègre un formulaire connecté à Resend, qui envoie directement les demandes dans la boîte mail de la cliente. Elle reçoit les messages des prospects comme des emails classiques, qu'elle peut traiter depuis son client mail habituel, sans avoir à se connecter à un espace d'administration pour consulter ses contacts.
Les défis techniques
Trouver l'équilibre entre liberté et simplicité dans l'admin
Le piège classique avec un CMS comme Sanity est de donner trop de liberté à l'utilisateur final, qui se retrouve alors face à des dizaines d'options et ne sait plus quoi faire. L'inverse est aussi vrai : une admin trop rigide empêche d'ajouter de nouveaux types de contenus. Le travail a consisté à définir des structures de contenu bien pensées (qu'est-ce qu'un projet, qu'est-ce qu'une collaboration, qu'est-ce qu'une photo) avec juste ce qu'il faut de champs pour être flexible sans être paralysant. La cliente peut ajouter un projet en remplissant cinq champs, pas vingt.
Performance avec beaucoup de contenu visuel
Un site dans le domaine de l'audiovisuel est naturellement chargé en images, parfois en vidéos. L'enjeu était de préserver une excellente performance malgré cette richesse visuelle. Le travail sur l'optimisation a porté sur le format des images (WebP et AVIF servis automatiquement), leur redimensionnement adaptatif selon l'appareil du visiteur, leur chargement différé intelligent, et la génération statique de toutes les pages pour un affichage quasi-instantané.
Design responsive exigeant
Les métiers visuels demandent un soin particulier sur l'affichage mobile, parce qu'une galerie qui fonctionne sur desktop peut être complètement ratée sur smartphone. Le design a été pensé mobile-first, avec une vraie réflexion sur les différences d'expérience entre les écrans, pour que le site soit agréable à consulter sur n'importe quel appareil.
Le résultat
Le site a été livré après quelques jours de développement effectif. La cliente dispose aujourd'hui d'une vitrine professionnelle à son image, qu'elle fait évoluer elle-même au fil de ses nouveaux projets. Les retours qu'elle a reçus sur son site sont positifs, aussi bien de la part de ses contacts professionnels que de ses prospects.
Ce projet illustre un positionnement clair : livrer un outil qui sert réellement la cliente dans la durée, pas juste une vitrine figée dans le temps. Elle n'a pas besoin de me recontacter pour la moindre modification, ce qui est exactement l'objectif.
Stack technique
- Next.js (App Router) pour le rendu statique performant et le SEO
- TypeScript pour la maintenabilité
- Sanity comme CMS headless pour la gestion de contenu par la cliente
- Resend pour la transmission des emails du formulaire de contact
- Déploiement continu avec régénération automatique à chaque modification de contenu
Témoignage
Témoignage client à venir.
Aller plus loin
- Site en ligne · belvieproduction.com