Un designer qui code conçoit les interfaces et les intègre lui-même, en tout ou partie : prototypes en code réaliste, intégration HTML/CSS/React fidèle au pixel, sites statiques performants, et accompagnement technique des développeurs. L'écart entre la maquette et le produit livré se réduit, les délais aussi.
Pourquoi je code
Trois raisons, toutes pratiques.
- Prototyper juste : un prototype en code se teste avec de vraies données, de vrais défilements, de vraies latences. Il révèle ce qu'une maquette cache.
- Intégrer fidèlement : la typographie, les espacements, les états et le mouvement sont ce qui fait la qualité perçue. Les intégrer moi-même garantit qu'ils survivent au développement.
- Parler la même langue : je sais ce qu'un composant coûte, comment un design system se branche sur du code, et quand un détail de design va créer un cas limite technique.
Ce que je livre
| Besoin | Livrable | Technologies |
|---|---|---|
| Prototype réaliste | Application cliquable avec données, états, responsive | Vite, React, CSS moderne |
| Intégration d'un design system | Composants codés, tokens CSS/JSON, thèmes, documentation | CSS variables, React, Code Connect |
| Site vitrine ou landing page | Site statique complet, SEO technique, performance, mise en ligne | HTML, CSS, JS, générateur statique |
| Front-end d'une application | Écrans intégrés dans la base de code de l'équipe | React, Next.js, PHP selon la stack |
| Recette visuelle | Revue écran par écran du rendu intégré, corrections précises | Navigateur, outils de comparaison |
Exemples
- Reformer Society : plateforme complète conçue et développée de A à Z : espace public, admin studio, super-admin, lecteur vidéo HLS, kiosque tablette, paiements Stripe. Design et code par la même personne, ce qui a permis une cohérence rare et des itérations très rapides.
- WeeFizz : widget e-commerce intégré dans Shopify, WooCommerce, PrestaShop et Magento, mini-sites de dotation, démos clients. Le widget doit être fidèle sur quatre CMS et des centaines de thèmes : c'est un travail de design autant que de code.
- Climeet : maquettes Figma portées en React avec un design system partagé, puis site vitrine multi-pages généré statiquement.
- Ce site : HTML, CSS et JavaScript sans dépendance, pipeline d'effets visuels en temps réel, pages SEO générées par un script Python.
Performance et qualité
Je livre des pages rapides parce que la performance fait partie de l'expérience et du référencement : images WebP dimensionnées, polices maîtrisées, CSS sans framework superflu, JavaScript minimal, en-têtes de cache, accessibilité vérifiée. Les scores Lighthouse sont un contrôle, pas un objectif en soi.
Comment je travaille avec une équipe technique
- J'adopte la base de code et ses conventions plutôt que d'imposer les miennes.
- Je livre par petites unités revues, jamais une refonte monolithique.
- Je documente ce que je touche et pourquoi.
- Je fais la recette visuelle de chaque écran intégré, par moi ou par l'équipe.
Le design system est le contrat entre nous : mêmes noms dans Figma et dans le code, mêmes variantes, mêmes états.
Pour qui
Les startups qui n'ont pas encore de front-end dédié, les équipes produit qui veulent un prototype crédible avant d'investir, les agences qui ont besoin d'un designer capable de livrer une landing page complète, et les équipes qui cherchent à réduire l'écart entre maquette et produit.
