Studio
Un pipeline RAW non destructif dans un navigateur : la contrainte, c'était la couleur.
- Année
- 2026
- Conception
- 12 semaines
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Product design
- Design d'interface
- Développement
- Traitement d'image
Produit édité par Kayzen Web, servi sur une adresse de prévisualisation Vercel en attendant son domaine définitif.
- chaîne colorimétrique de bout en bout
- ICC
- accessibilité Lighthouse
- 97/100
- bonnes pratiques LighthouseNotre score le plus bas sur ce critère : le traitement RAW dans le navigateur s'appuie sur des API que Lighthouse signale ; nous l'affichons tel quel plutôt que de retirer la fonctionnalité, et la revue est planifiée.
- 73/100
Ce qu'il fallait résoudre.
Le contexte
Studio est une application de développement photographique en ligne : import RAW, corrections non destructives, gestion colorimétrique ICC de bout en bout et export multi-format.
La contrainte
Les photographes ne changent pas d'outil pour du confort. Deux points bloquants : la fidélité colorimétrique — un fichier qui ressort avec une dérive de teinte est inutilisable — et le caractère non destructif, c'est-à-dire la possibilité de revenir sur n'importe quel réglage six mois plus tard.
La réponse
La couleur a été traitée avant l'interface. Profil d'entrée du boîtier, espace de travail linéaire, profil de sortie choisi à l'export : la chaîne est explicite et affichée à l'utilisateur. Les réglages sont stockés comme une liste d'opérations, jamais appliqués au fichier source.
Les scores relevés à la livraison.
Scores Lighthouse du site en production. Nous les publions tels quels : quand l'un d'eux est bas, sa cause et son plan de correction sont écrits plus bas plutôt que passés sous silence.
Chaque parti pris, et sa raison.
Interface sombre neutre
Gris neutre strict autour de l'image, sans aucune dominante. Une interface teintée fausse la perception de la balance des blancs : c'est la première règle des logiciels de retouche, et elle prime sur toute considération esthétique.
Histogramme toujours visible
Fixé en haut du panneau de réglages, avec alerte d'écrêtage. C'est l'instrument de mesure du photographe ; le masquer derrière un onglet reviendrait à ranger le niveau à bulle dans la boîte à outils.
Raccourcis clavier du métier
Les raccourcis reprennent ceux des logiciels de référence. Imposer une nouvelle grammaire à un utilisateur expert, c'est lui demander de désapprendre — le coût de bascule devient supérieur au gain.
Palette du projet
Gris neutre 900
#18181B
Fond de l'espace de travail
Gris neutre 700
#3F3F46
Panneaux
Mauve
#A78BFA
Accent, sélection
Rouge écrêtage
#EF4444
Alerte hautes lumières
Système typographique
Titrage
Inter 600
Texte courant
Inter 400
Valeurs numériques en chasse fixe : un curseur dont la valeur saute de largeur est perçu comme imprécis.
Ce qu'il y a sous le capot.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Décodage RAW en WebAssembly
Le décodage des formats propriétaires (CR3, NEF, ARW) tourne en WebAssembly dans un worker. Le fil principal reste disponible : les curseurs répondent pendant le décodage d'un fichier de 60 mégapixels.
Rendu GPU par WebGL
Les corrections sont appliquées en shaders sur la carte graphique. Une passe CPU aurait rendu l'aperçu inutilisable à cette résolution.
Historique d'opérations, pas de pixels
Chaque réglage est une entrée dans une pile d'opérations sérialisable. Revenir en arrière, dupliquer un traitement sur une série, exporter un préréglage : tout découle de cette structure.
Comment le site se rend trouvable.
SEO d'acquisition, pas de produit
L'application elle-même n'est pas indexable, et n'a pas à l'être. Le référencement porte sur les pages de présentation et sur les comparatifs, où se joue la découverte.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
97/100 malgré une interface d'expert
Chaque curseur est un input natif avec libellé, valeur annoncée et pas au clavier. Les interfaces de retouche s'en dispensent presque toutes ; il n'y avait aucune raison technique de le faire.
Ce qui a été livré.
- Présentation
- Application de retouche
- Formats et compatibilité
- Tarifs
Le déroulé du projet.
Chaîne colorimétrique
Profils d'entrée, espace de travail, profils de sortie.
Décodage
WebAssembly, workers, aperçu rapide.
Rendu
Shaders WebGL, histogramme, écrêtage.
Interface
Panneaux, raccourcis, historique.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Cybersécurité offensive & SaaSSentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
Data & Service météoMétéo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.