Basanto Studio × Térence Mbu
Design, développement sur mesure, back-office Sanity et mise en ligne, pour un studio créatif franco-mexicain qui publie désormais son travail lui-même.
Sommaire
Le studio
Basanto Studio est un studio créatif franco-mexicain, installé entre Mexico et Paris. Il fait de la direction artistique, des campagnes photo et film, du contenu au long cours et de la couverture d'événements. 3 associés, 2 cultures, et une phrase qui résume leur façon de vendre : l'image est le résultat, le travail c'est la réflexion.
Le problème
Leur travail vivait sur Instagram. Instagram sert à être découvert, pas à être choisi. Une marque qui s'apprête à confier une campagne veut voir un ensemble et comprendre comment le studio travaille. Elle ne va pas le reconstituer en remontant un profil.
Le second point touche au métier même du studio. Sur Instagram, c'est la plateforme qui décide du cadre et de ce qui est rogné. Un studio dont le métier est le cadrage laissait quelqu'un d'autre recadrer son travail.
Il fallait donc un site qui présente le travail comme un ensemble cohérent, dans les 2 langues de leurs 2 marchés. Et que l'équipe puisse l'alimenter elle-même entre 2 tournages, sans repasser par un développeur.
Comment on a travaillé
4 temps, du cadrage au transfert des comptes.
| Étape | Ce qui s'est passé |
|---|---|
| 1. Cadrage et direction visuelle | L'identité du studio et ses références deviennent un système : palette, échelle typographique, espacements, composants |
| 2. Développement | Le site construit page par page sur ce système. Chaque décision prise une fois, appliquée partout |
| 3. Sanity et prise en main | Le back-office monté sur mesure, puis la formation de l'équipe en vidéo et un guide écrit en français |
| 4. Mise en ligne et transfert | Domaine, performance et accessibilité mesurées, comptes tiers ouverts au nom du studio |
Une règle qui a tenu tout le projet
Chaque information encore inconnue au démarrage a été sortie du code et rendue modifiable en une minute. Le site a donc pu être construit avant que les contenus définitifs existent, puis rempli sans réécrire une page.
Nous sommes passés par Térence pour créer le site de notre studio. Après lui avoir détaillé notre besoin, il a su s'adapter et être force de proposition pour réaliser le meilleur résultat. Notre site est ergonomique et performant. Térence a su être réactif et à l'écoute. Nous recommandons ses services avec plaisir.
Baptiste Soulé, co-fondateur, Basanto Studio
Un design qui tient pour les images qu'il n'a pas encore vues
C'est la vraie difficulté d'un site de studio créatif. Une page se compose avec 3 photographies choisies. Le site, lui, en recevra 300, dans des formats qu'on ne connaît pas encore, ajoutées par quelqu'un d'autre.
Le réflexe habituel consiste à poser chaque image dans un cadre de format fixe et à rogner ce qui dépasse. Ça donne une grille impeccable. Ça revient aussi à publier son propre recadrage sur le travail du client : un portrait vertical glissé dans un emplacement horizontal perd la tête et les pieds. C'est exactement ce que le studio venait de quitter en partant d'Instagram. Ici, chaque photographie garde les proportions dans lesquelles elle a été cadrée.
Reste le rythme. Une grille régulière produit une planche-contact, où tout se vaut et où rien ne se regarde. Le studio dispose donc d'un réglage par image pour en passer une en pleine largeur. C'est le seul contrôle qui transforme une page générée en page composée, et il lui appartient.
Tout le reste tient dans un système. Couleurs, tailles, espacements, rythme des marges : chaque valeur est décidée une fois et devient la seule source du site. Aucun composant ne porte de valeur écrite à la main. Une correction se fait à un endroit et s'applique partout, aujourd'hui comme le jour où la charte évoluera.
Sanity : un back-office que l'équipe a pris en main en une session
Le site tourne sur Sanity, un gestionnaire de contenu que l'on construit sur mesure au lieu de l'adapter. C'est ce qui permet de ne pas livrer un tableau de bord générique dans lequel le client doit se traduire lui-même.
L'équipe range déjà ses livraisons dans 3 dossiers : photos seules, photos et films, films seuls. Le back-office reprend ces 3 dossiers, avec les mêmes noms. Créer un projet depuis le bon dossier pré-remplit le format et fait disparaître les champs inutiles : un projet photo ne demandera jamais de lien vidéo. Un projet qui reçoit son film 6 mois plus tard change de dossier en un clic, sans rien perdre.
Chaque champ porte son explication sous son intitulé, dans le vocabulaire du studio et pas dans celui d'un développeur. Personne n'a jamais à deviner ce qu'un champ attend.
La passation ne s'est pas arrêtée à la livraison. L'équipe a été formée en vidéo, sur ses propres contenus, et dispose d'un guide écrit en français qu'elle peut rouvrir des mois plus tard. Depuis, elle ajoute ses projets, ses photographies, ses films et ses 2 langues elle-même, depuis n'importe quel fuseau horaire.
Ce que le studio fait seul aujourd'hui
Ajouter un projet, ses photographies et ses films. Écrire les 2 langues. Choisir l'ordre des images et celles qui passent en pleine largeur. Publier, dépublier, réorganiser. Sans développeur, et sans facture.
| Élément | Choix technique |
|---|---|
| Architecture | Next.js 16, pages pré-générées : le contenu est lisible par Google sans attendre le JavaScript |
| Gestion du contenu | Sanity, structuré selon les dossiers de livraison du studio et non selon la base de données |
| Photographies | Envoyées en pleine définition, converties et redimensionnées par le site pour chaque écran |
| Films | Hébergés sur YouTube, rejoués dans le lecteur du site, rien n'est chargé avant que le visiteur clique |
| Deux langues | Anglais à la racine, espagnol sur /es, adresses communes, liens entre versions lisibles par les moteurs |
| Animations | GSAP au défilement, désactivées si le visiteur a demandé moins de mouvement à son navigateur |
| Passation | Formation vidéo, guide écrit en français, et tous les comptes ouverts au nom du studio |
Deux langues posées au premier jour, parce qu'elles ne se rétro-installent pas
L'espagnol était demandé pour plus tard. La structure a été posée dès le premier jour. Un site bilingue ne s'ajoute pas après coup sans tout réécrire : c'est le genre de décision qui ne coûte rien au démarrage et une refonte 6 mois plus tard.
Le site est traduit en entier, 375 lignes de texte par langue. Chaque version renvoie vers l'autre par un vrai lien qu'un moteur de recherche peut suivre. C'est la différence entre un site bilingue et un site avec un sélecteur de langue.
Le reste tient dans des détails qu'un visiteur ne remarque que s'ils manquent. Changer de langue ne remet pas à zéro le filtre qu'il était en train de lire. Un projet garde la même adresse dans les 2 versions. Et la version espagnole est déclarée mexicaine plutôt qu'espagnole, parce que le studio et ses clients le sont.
Performance et accessibilité, mesurées en production
4 pages sur 5 obtiennent 100 en performance. L'accueil, la page la plus lourde du site, est à 95. Accessibilité, bonnes pratiques et référencement technique sont à 100. Ces chiffres sont relevés sur le site en ligne : n'importe qui peut les refaire.
Ce n'est pas un réglage de fin de projet. Les photographies d'un studio pèsent plusieurs mégaoctets. Envoyées telles quelles, elles laissent le visiteur devant une page blanche et consomment le forfait de qui les regarde sur son téléphone. Le site reçoit donc les fichiers en pleine définition et fabrique lui-même des versions plus légères, dans des formats que les navigateurs récents décodent mieux. Chaque écran reçoit celle qui lui correspond. Le studio, lui, n'a rien à alléger avant d'envoyer.
Même logique sur les films : rien n'est chargé tant que le visiteur n'a pas cliqué.
Côté accessibilité, 8 gris ont été remontés jusqu'aux seuils de contraste du standard WCAG 2.1 AA, sans toucher à la direction visuelle. La description des images est obligatoire dans le back-office, dans les 2 langues. Sur un site dont le sujet est l'image, décrire ce qu'on montre n'est pas une option.
Votre travail mérite mieux que la grille de quelqu'un d'autre
Vous dirigez un studio, une marque ou une structure créative. Vous voulez un site qui montre votre travail comme vous l'avez pensé, et que votre équipe fait vivre sans repasser par un développeur. Écrivez-moi. Celui de Basanto est en ligne : www.basantostudio.com.