← Retour au site
Une marque d'artisan, bâtie pour faire sonner le téléphone. Voici la direction artistique, les vraies techniques de code, le pipeline d'images IA et les prompts. Tout est reproductible.
Cette page est une maquette de refonte adaptée pour un artisan réel, DOD Peinture (Ugur Dalgic, peintre plaquiste de Lyon à Aix-les-Bains), à partir d'une proposition de design initiale. Le brief, les coordonnées, le parcours et les avis sont réels. Le logo, les photos de chantiers et le portrait sont ceux de l'artisan ; les quelques illustrations d'ambiance issues de la maquette de départ sont générées par IA et signalées comme telles.
DOD Peinture est un artisan réel : Ugur Dalgic, peintre plaquiste installé à La Verpillière, qui intervient de Lyon à Aix-les-Bains. Le brief tenait en un mot : conversion frontale. Numéro de téléphone énorme, promesse de devis sous 24h, preuve concrète partout. Le risque, avec ce genre de commande, c'est le site criard et bon marché. La réponse : un maximalisme graphique exécuté avec précision. On emprunte le langage visuel du métier lui-même, le ruban de masquage, la peinture, le rouleau, et on le transforme en système d'interface. Le fil rouge du discours est sa propre phrase : un artisan se différencie par ses finitions, pas par ses prix, donc aucun prix n'est affiché.
La palette est rationnée, pas éparpillée. Le rouge DOD, extrait du vrai logo de l'artisan, possède les moments de marque : souligné du titre, bouton d'appel, tampons, cadre du formulaire. Le noir encre structure et porte les actions secondaires, le blanc cassé respire. Un rouge fort se dose : jamais de pleine page rouge, l'or est réservé aux étoiles d'avis.
Deux familles, deux rôles. Clash Display (700) pour les titres : une grotesque large, franche, qui monte à 15vw sans trembler. Archivo pour le texte, les étiquettes et surtout les chiffres, en tabular-nums pour que tous les prix et compteurs s'alignent au pixel. Jamais la même police pour titrer et pour lire.
La signature de la page. « UGUR PEINT. » est du vrai texte (pas une image), révélé comme s'il était passé au rouleau, en deux traits, en moins d'1,5 seconde. Le truc : un clip-path: inset() animé de droite à gauche sur le texte, pendant qu'un rouleau SVG rouge suit exactement le front de peinture. Le texte est déjà en gras dans une police de secours préchargée, donc aucun flash de fine graisse au chargement.
// pour chaque ligne, on peint le texte et on fait rouler le rouleau au front tl.fromTo(ink, {clipPath:'inset(0 100% 0 0)'}, {clipPath:'inset(0 0% 0 0)', duration:0.72, ease:'power3.inOut'}, at); gsap.set(roller,{left:'-3%', opacity:0}); tl.to(roller,{opacity:1, duration:0.12}, at) .to(roller,{left:'101%', duration:0.72, ease:'power3.inOut'}, at);
Un slider maison, sans dépendance, gardé comme démonstration ludique (les deux images sont générées par IA et signalées comme telles, sous la séquence de vraies photos). Deux images superposées ; celle du dessus est rognée par clip-path: inset() selon la position de la poignée. Il écoute les Pointer Events (souris, tactile, stylet dans un seul chemin de code) et reste pilotable au clavier : la poignée est un role="slider" qui répond aux flèches, à Home et à End.
// une seule source de vérité : la position en %, appliquée partout function apply(p){ pos = Math.max(0, Math.min(100, p)); before.style.clipPath = 'inset(0 ' + (100-pos) + '% 0 0)'; handle.style.left = pos + '%'; grip.setAttribute('aria-valuenow', Math.round(pos)); }
La demande de devis n'est pas un simple mailto : elle poste en JSON vers une fonction serverless (Vercel), qui envoie un email via Resend, avec un champ piège anti-robots. Les photos sont allégées côté client avant l'envoi : chaque image est redessinée dans un <canvas> à 1280 px maximum, ré-encodée en JPEG, puis transmise en base64 comme pièce jointe. Le tout reste accessible : labels, focus visibles, états d'envoi, de succès et d'erreur.
// on redimensionne dans un canvas, puis on sort le base64 sans prefixe var max = 1280, w = img.width, h = img.height; if (w > max || h > max) { if (w >= h) { h = Math.round(h*max/w); w = max; } else { w = Math.round(w*max/h); h = max; } } canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var data = canvas.toDataURL('image/jpeg', 0.72).split(',')[1];
Les grands chiffres montent depuis zéro quand la section entre à l'écran (via ScrollTrigger, une seule fois), avec une interpolation cubique et un séparateur de milliers ajouté à la volée. La bande noire des chiffres n'a pas un bord droit : une forme SVG preserveAspectRatio="none" dessine des gouttes de peinture qui coulent dans le blanc. Toutes les animations ne touchent que transform, opacity et clip-path, jamais la mise en page, donc tout reste à 60 images par seconde.
En prefers-reduced-motion, le rouleau disparaît, le titre s'affiche d'emblée, les compteurs affichent leur valeur finale et les révélations au défilement deviennent instantanées. Chaque élément cliquable a ses états hover, focus-visible et active distincts, et les grandes images de chantiers passent en loading="lazy".
La proposition de départ s'appuyait sur des visuels générés par IA, le temps de caler la direction avant d'avoir les vraies photos. Le duo avant / après était le plus délicat : il fallait exactement la même pièce, seulement rénovée. La méthode qui marche, c'est le image-to-image : on génère la scène « avant », puis on la repasse en entrée pour peindre le « après », en gardant la structure et en ne changeant que l'état.
Une fois l'artisan à bord, l'essentiel de ces illustrations a cédé la place à ses vraies photos de chantiers : la séquence cheminée avant / pendant / après, la grille de réalisations, l'artisan au travail en t-shirt DOD, et son vrai portrait. Sur un site pour une personne réelle, aucun visage généré n'est présenté comme le sien. Son logo vectorisé (pinceau et rouge DOD) remplace le lettrage et donne sa couleur de marque à toute la charte. Seul le comparateur avant / après reste en image-to-image, gardé pour son côté ludique et signalé comme illustration IA, sous les vraies photos qui portent la preuve. Chaque image est exportée en WebP pour le poids.
Le site a été conçu et codé de bout en bout par Claude Fable 5, dans Claude Code. Un seul fichier index.html autonome (CSS et JS inline), plus la page /guide, sans étape de build ni framework. Seules dépendances externes : les polices et GSAP, versions figées.
Une fois le site complet, il est passé par au moins trois passes d'itération pilotées par capture d'écran : on prend des screenshots à 1440 et 390 pixels, à plusieurs profondeurs de défilement, on les regarde vraiment, on note ce qui est faible, cassé ou générique, on corrige, on recommence. L'échelle typographique, le rythme des espacements, l'équilibre des couleurs, les recadrages maladroits, le comportement mobile : tout y passe. Chaque passe ajoute aussi un détail délibéré, pas seulement des corrections. Le déploiement se fait ensuite sur Vercel avec vercel deploy.
Côté conversion, la demande de devis n'est pas un simple mailto : le formulaire poste en JSON vers une fonction serverless (Vercel), qui envoie un email via Resend. Les photos jointes sont compressées côté client (canvas, 1280 px, JPEG) puis transmises en base64 comme pièces jointes, et un champ piège (honeypot) filtre les robots. En local, l'envoi échoue proprement et renvoie vers le téléphone ; le test réel se fait après déploiement.
clip-path animé plus un rouleau qui suit le front, pas une image.