Atelier Metal Art

Avant toute ligne de code ou de pixel, j'ai pris le temps de comprendre le métier du client : techniques de soudure, types de pièces réalisées (mobilier sur mesure, garde-corps, ouvrages d'art), interlocuteurs visés (particuliers, architectes, entreprises). Cette phase a permis d'identifier les arguments différenciants à mettre en avant et le ton de voix juste — précis, concret, ancré dans le savoir-faire. Un rapide audit de la concurrence locale a confirmé une opportunité : la plupart des sites du secteur sont vieillissants, peu mobiles et faibles en SEO. Un site moderne, rapide et bien référencé pouvait donc faire une vraie différence en termes d'acquisition.

Le client n'avait pas d'identité formalisée. J'ai construit une direction artistique qui mêle codes industriels (palette sombre, accents métalliques, typographies condensées) et sensibilité artisanale (textures discrètes, mises en page aérées laissant respirer les réalisations). Le design system regroupe palette, typographies, composants UI et règles d'usage. L'objectif : une signature reconnaissable, déclinable sur le site mais aussi sur les futurs supports (devis, signature mail, réseaux sociaux).

Les maquettes UI/UX ont été conçues sur Figma autour d'un parcours simple : convaincre rapidement, montrer les réalisations, faciliter le contact. Une attention particulière a été portée à la hiérarchie de l'information sur la page d'accueil (proposition de valeur claire, preuve sociale, CTA visibles) et à la fluidité du parcours mobile, qui représente la majorité du trafic local. Des prototypes interactifs ont permis de valider les transitions et micro-interactions avant le développement, et d'arbitrer rapidement avec le client sur les choix structurants.

Pour mettre en valeur les réalisations sans tomber dans l'effet gratuit, des animations subtiles ont été intégrées : apparitions au scroll, effets de parallaxe légers sur les visuels, transitions soignées entre les pages. Ces motions renforcent l'impression de qualité et soutiennent la perception haut-de-gamme du savoir-faire artisanal. Les animations respectent systématiquement la préférence `prefers-reduced-motion` pour rester accessibles aux utilisateurs sensibles au mouvement.

Le site a été développé avec Next.js, Tailwind CSS et TypeScript pour combiner rapidité de chargement, maintenabilité et bonne base SEO. Les images sont servies via le composant `Image` de Next pour le format AVIF/WebP et le sizing adaptatif, et toutes les pages sont pré-rendues statiquement (SSG) pour un Time to First Byte minimal. L'architecture modulaire facilite l'ajout de futures pages (réalisations détaillées, blog, devis en ligne) sans dette technique.

Le travail SEO a été pensé en deux temps : technique (balises sémantiques, métadonnées, sitemap, robots, images optimisées, données structurées `LocalBusiness`) et éditorial (titres calibrés sur les recherches locales, contenu riche autour des prestations, maillage interne). Un suivi via Google Search Console a été mis en place pour mesurer les impressions, les clics et les positions sur les requêtes ciblées (chaudronnerie, métallerie, ferronnerie + ville) et ajuster le contenu au fil du temps.