Diatex

Création d’un site internet pour un groupe industriel spécialisé dans la fabrication de tissus techniques.

  • Webdesign
Visuel principal du projet Diatex

Contexte

Diatex conçoit et fabrique depuis plus de 35 ans des tissus techniques et des procédés pour la transformation des matériaux composites. Le groupe intervient sur des marchés exigeants comme l'aéronautique, l'éolien, le nautisme ou la défense, et exporte dans plus de 58 pays. Son image et son site ne reflétaient plus cette dimension : Diatex nous a confié la refonte de son identité visuelle et de son site internet.

Maquette du projet Diatex, visuel 1

Objectifs

En charge de la refonte du site internet, l'enjeu était de créer un nouveau site capable de présenter clairement les divisions du groupe, ses gammes de produits, ses marchés et sa vision. Face à un contenu très riche, tout reposait sur la structure et la hiérarchie de l'information. Un important travail a été mené sur le menu afin de séparer clairement le catalogue produits, les divisions, les marchés, etc.
Les pages produits ont également été repensées pour conserver le niveau de détail technique nécessaire, sans nuire à la lisibilité. Côté design, il fallait refléter la nouvelle identité, ses couleurs phares, ainsi que l'ancrage industriel et le positionnement fort de Diatex dans son secteur. Enfin, un espace privé devait permettre à certains clients d'accéder à des informations spécifiques.

Maquette du projet Diatex, visuel 2

Méthodes

  1. Atelier UX & arborescence : Avec le client, nous avons travaillé sur la structure du nouveau site afin de hiérarchiser l’information et de prioriser les besoins. Nous avons analysé ce qui ne fonctionnait plus sur l’ancien site, puis construit une nouvelle arborescence et un menu séparant clairement les divisions, les marchés et le catalogue produits.
  2. Wireframes : J’ai créé les premiers wireframes sur Figma, puis je les ai présentés au client. L’objectif était de valider l’essentiel : la navigation, les gabarits de pages (divisions, marchés, produits), le niveau de détail technique à afficher et le fonctionnement de l’espace privé.
  3. Webdesign : Une fois les wireframes validés, j’ai appliqué la nouvelle identité de Diatex sur les maquettes et construit le design system. J’ai conçu des sections sur-mesure pour valoriser l’expertise du groupe : tableaux, gammes de produits, carte interactive, certifications téléchargeables, partenaires, etc. avec une attention particulière portée à la lisibilité des contenus techniques.
  4. Passation designer × développeur : Après validation des maquettes, j’ai organisé mon fichier pour les développeurs en regroupant les sections et composants, ajouté des notes et exporté l’ensemble des assets nécessaires.
Maquette du projet Diatex, visuel 3
Maquette du projet Diatex, visuel 4

Résultats

Nous avons livré un site clair et structuré, qui renforce la crédibilité de Diatex. Les visiteurs trouvent facilement l'information recherchée, du catalogue produits aux différents marchés. Le design, épuré et impactant, met en valeur la nouvelle identité du groupe, tandis que l'espace privé offre aux clients concernés un accès dédié à leurs informations.

Maquette du projet Diatex, visuel 5