Étude de cas · Projet personnel

Forgerie Rambaux

Comment j'ai conçu un site qui rend au fer son caractère.
Une forge lorraine traduite en site web sans perdre la chaleur de l'enclume, le poids de la matière, ni l'honnêteté du geste.

Métier
Ferronnerie d'art
Lieu
Lorraine
Format
Site vitrine une page
Année
2026
I.
Aperçu du projet

Le contexte, les objectifs, les partis pris.

Le client

Un ferronnier d'art lorrain

Atelier installé en Lorraine depuis 1987. Portails et clôtures sur mesure, garde-corps et rampes forgées, mobilier en fer brut, restauration de ferronnerie ancienne et de pièces classées. Une clientèle de particuliers, d'architectes et de collectivités cherchant une pièce unique, forgée à la main, pensée pour traverser les décennies.

Les objectifs

Incarner le métal, pas le mimer

Rendre perceptible la force et la permanence du fer sans illustration explicite ni cliché. Donner à lire le procédé comme un argument de confiance : un artisan qui explique son travail étape par étape, c'est un artisan qui n'a rien à cacher. Conduire naturellement vers la prise de contact sans dissimuler que l'atelier est une structure à taille humaine.

Partis pris

Noir, acier, braise

Une palette sombre et restreinte (quasi-noir, gris acier, orange braise) qui évoque la forge sans l'illustrer. Une typographie industrielle condensée en contraste avec un corps serif. Une animation canvas d'étincelles discrète dans le hero, côté image. Des reveals directionnels plutôt que des fondus verticaux. Le design assume le métal : il ne l'explique pas, il le fait sentir.

II.
Le défi et la démarche

Transposer un métier de feu et de force.

Le défi

Rendre perceptible la chaleur du feu et le poids du métal dans un médium froid — l'écran. Éviter les pièges visuels habituels de la ferronnerie (rouge saturé, enclume clipart, fond brique) tout en restant immédiatement lisible pour un visiteur qui découvre l'atelier pour la première fois.

  • Distinguer clairement les quatre métiers de l'atelier sans que la page ressemble à un catalogue de services standardisé.
  • Donner une place centrale au procédé : c'est le principal argument de différenciation d'un ferronnier artisan face à la production industrielle.
  • Employer une typographie très condensée (Bebas Neue) sans perdre la lisibilité sur mobile, où les grands titres peuvent rapidement devenir illisibles.
  • Animer sans surcharger : une animation canvas d'étincelles est spectaculaire si elle reste discrète, pénalisante si elle devient décorative.
  • Maintenir la cohérence de la palette sombre sur l'ensemble de la page, y compris dans les sections de contact qui tendent naturellement vers le clair.
La démarche

Construire une page en deux registres alternés : sections quasi-noires (#070707) et sections fer (#101010), sans jamais basculer vers le clair. Structurer la lecture par des labels mono espacés plutôt que des numéros romains, pour une hiérarchie industrielle plutôt qu'éditoriale.

  • Hero asymétrique : texte dense à gauche, image forge à droite avec dégradé ember et animation canvas de 55 étincelles animées en JavaScript pur, desktop uniquement.
  • Grille Métiers 2×2 : bordure gauche ember au survol, numéros en grande taille (#1A1A1A), SVG illustratif discret par discipline.
  • Procédé en 5 étapes lisibles : pas de carousel, pas d'icônes lourdes — numéros condensés animés au survol, texte structuré en deux colonnes, séparateurs horizontaux fins.
  • Reveals directionnels via GSAP ScrollTrigger : les éléments entrent depuis la gauche ou la droite selon leur position, rupture avec les fondus verticaux classiques.
  • Mobile : panneau forge masqué, canvas désactivé, titres recalibrés avec clamp(), animations allégées.
III.
Aperçu visuel

Quelques pages, en passant.

Section d'accueil du site Forgerie Rambaux

Section d'accueil

Titre condensé, étincelles animées, image forge en contrepoint

Section Métiers en grille 2x2

Section Métiers

Grille 2×2, numéros en grande taille, bordure ember au survol

Section Procédé en 5 étapes

Section Métiers

Description des différentes activités, numéros en grande taille

Section contact avec email géant

Section Contact

Email en police "Bebas Neue" géant, informations structurées, cohérence sombre

IV.
Le site en vrai

Éprouver le site sur votre écran.

Passez de la théorie à la pratique. C'est l'occasion de ressentir le poids de la typographie, la chaleur des étincelles animées et la tenue de la mise en page sur votre propre écran.

Et pour vous ?

Votre atelier mérite la même présence.

Si ce que vous venez de lire fait écho à votre métier, à votre rapport à la matière, à votre exigence de l'ouvrage bien fait, parlons-en simplement.

Discutons de mon projet