Vincent RodriguezDesigner

Contexte

Jusqu'ici, les construire demandait de vraies connaissances d'expert front-end, à tel point que même les IA ont du mal à aller aussi loin. Grâce à Shaders, en quelques clics, on peut créer des shaders magnifiques et performants.

Challenge

Simon avait un prototype fonctionnel et quelques pistes graphiques, mais il avait besoin d'un support de réflexion. Rien sur le marché ne faisait ce que fait l'outil, il n'existait aucun schéma établi à emprunter, seulement des outils graphiques assez proches comme Figma ou Photoshop. Le travail relevait donc davantage de la R&D que du design d'interface, puisqu'il fallait imaginer la meilleure expérience possible pour ce produit avant même sa sortie.

Le problème central était la hiérarchie. Les effets s'appliquent aux éléments, mais les éléments portent eux-mêmes des effets, et ces effets peuvent s'empiler, se masquer et se mélanger. Si l'interface ne rend pas cette frontière évidente au premier regard, les utilisateurs perdent le fil de ce qu'ils éditent et tout se transforme en devinette.

Approche

Les éditeurs visuels ont déjà résolu une partie de ces questions. La gestion des groupes, les flux d'édition de contenu et la logique de calques sont devenus des standards que les utilisateurs connaissent par cœur. Le vrai enjeu a donc été de reprendre cette base et de l'adapter pour y intégrer la couche propre aux shaders. Après des années à utiliser ces outils tous les jours, en concevoir un moi-même avait quelque chose d'assez grisant.

Sur l'aspect graphique, j'ai créé un design system complet de composants, avec le niveau de finition qu'on attend d'un outil destiné aux développeurs.

Résultat

Ce travail a énormément aidé l'équipe à finaliser l'expérience utilisateur avant la sortie du produit, qui est ensuite passé de zéro à plusieurs milliers d'utilisateurs en quelques mois. On y retrouve des équipes de chez Vercel, Shopify, Adobe, Microsoft et Framer.