Refonte Novelis
Nvelis · Refonte du site novelis.frPropositions graphiques · Novembre 2026

Six directions pour ouvrir Novelis.

Le site actuel date de 2019. Il est fonctionnel, mais ressemble à un gabarit Joomla : carrousel plein écran, menu jaune sur une barre, textes rares. Voici six partis pris complets, chacun livré sous forme de maquette animée à parcourir, avec ses vrais contenus (gammes, chiffres, adresse). Les trois premiers travaillent l'image et le mouvement, les trois suivants l'interactivité produit.

01 · Diagnostic

Ce que montre l'analyse du site actuel

PrioritaireAucun message en page d'accueil

Le carrousel affiche « Menuiseries sur-mesure PVC et Aluminium… » puis trois vignettes. On ne sait pas en 5 secondes que Novelis est un fabricant de 140 personnes.

PrioritaireLes atouts sont cachés

40 000 m² d'usines, 100 000 menuiseries par an, atelier de cintrage : ces chiffres n'apparaissent que dans la page « Histoire ».

PrioritairePas d'appel à l'action clair

Ni devis, ni « trouver un installateur » visible. Le parcours s'arrête sur des catalogues PDF.

ImportantIdentité visuelle datée

Logo sur fond blanc en JPG, barre de menu jaune, Roboto Condensed + Open Sans, bleu et jaune utilisés sans hiérarchie.

ImportantImages génériques

Les visuels d'ambiance sont des rendus 3D de banque d'images en 1920×720. Aucune photo d'usine, d'équipe ou de chantier réel.

ImportantMobile et contenu secondaire

Menu à trois niveaux, numéro de fax en pied de page, actualités réduites à trois liens sans visuel.

02 · Directions

Trois partis pris, trois maquettes à parcourir

Aperçu direction LumièreFaites entrer
la lumière.Ouvrir la maquette →

Direction ALumière

Premium, aérien, très architectural. La fenêtre devient le cadre de toute la page. Pour un positionnement haut de gamme et les grandes baies aluminium.

Typographie
Archivo en largeur étendue, du fin au gras
Ton
Calme, lumineux, aspirationnel
  • Hero : une fenêtre à croisillons s'agrandit au scroll jusqu'au plein écran
  • Manifeste qui s'éclaire mot à mot
  • Défilement horizontal des usages (rénovation, neuf, formes spéciales)
  • Compteurs animés et parallaxe douce sur les réalisations
Voir la direction A →
Aperçu direction Atelier 7016Fabriqué
au mm
près.Ouvrir la maquette →

Direction BAtelier 7016

Industriel et technique, assumé. Fond gris anthracite RAL 7016, la teinte la plus vendue en menuiserie, et le jaune du logo en signal. Valorise la fabrication française et rassure les installateurs partenaires.

Typographie
Big Shoulders (condensée) + IBM Plex Sans et Mono pour les cotes
Ton
Précis, factuel, fier du savoir-faire
  • Hero : un volet roulant se lève lame par lame et révèle l'image
  • Coupe technique d'une fenêtre PVC 70 mm dessinée au scroll
  • Les 6 étapes de fabrication en défilement horizontal
  • Liste des gammes avec image qui suit le curseur
Voir la direction B →
Aperçu direction SeuilOuvrir la maquette →Tout commence
par un seuil.

Direction CSeuil

Éditoriale et chaleureuse, tournée vers le particulier. La porte d'entrée sert de fil rouge : elle s'ouvre dans le hero puis se configure plus bas. Pour générer des demandes de contact qualifiées.

Typographie
Gloock (serif de caractère) + Figtree
Ton
Accueillant, rassurant, conseil
  • Hero 3D : la porte pivote sur ses gonds et on entre dans la maison
  • Conseils « En rénovation / En neuf » en onglets
  • Configurateur de porte : teinte RAL, vitrage, matériau
  • Gammes en cartes empilées, réalisations révélées au scroll
Voir la direction C →
02 bis · Série 2

Trois directions où le produit se manipule

Ici, le visiteur ne se contente plus de regarder : il fait tourner la fenêtre, voit la lumière changer au fil de la journée, mesure la chaleur perdue ou écoute la rue. Chaque module peut aussi se greffer sur les directions A, B ou C.

Aperçu direction Showroom 3DVotre fenêtre,
sous tous les angles.Ouvrir la maquette →

Direction DShowroom 3D

Une fenêtre en 3D temps réel reste à l'écran pendant que le récit défile. Elle remplace la photo produit figée et sert de configurateur.

Typographie
Schibsted Grotesk + JetBrains Mono
Technique
WebGL (Three.js) + GSAP
  • Modèle 3D à faire tourner au doigt ou à la souris
  • Ouverture à la française et oscillo-battante, avec la poignée qui suit le geste réel
  • Vue éclatée au scroll : dormant, ouvrant, vitrage, poignée étiquetés
  • Teintes, double ou triple vitrage, récapitulatif mis à jour en direct
  • Carrousel des gammes à faire glisser, avec inertie
Voir la direction D →
Aperçu direction 24 heures20:45Ouvrir la maquette →

Direction E24 heures

Cinématographique. Le scroll fait passer une journée entière dans la maison, de l'aube à la nuit, puis un film en motion design raconte la fabrication.

Typographie
Bricolage Grotesque + Geist Mono
Technique
GSAP, SVG animé, filtres CSS
  • Hero : la lumière, l'horloge et la course du soleil suivent le scroll, et les volets roulants descendent à la nuit
  • Comparateur avant/après à faire glisser
  • Film motion design de 30 s par chapitres (profilé, cintrage, assemblage, livraison), sans fichier vidéo
  • Réalisations : les photos apparaissent sous le curseur
  • Texte géant découpé sur une image qui défile
Voir la direction E →
Aperçu direction LaboNe nous croyez pas.
Testez.Ouvrir la maquette →

Direction FLabo

Un banc d'essai en grille de modules. Chaque module prouve une qualité du produit, et la teinte choisie s'applique à tous les modules à la fois.

Typographie
Onest + Martian Mono
Technique
Canvas, Web Audio, SVG
  • Caméra thermique : simple, double ou triple vitrage, température extérieure réglable, mesure au survol, alerte condensation
  • Simulateur acoustique : bruit de rue généré en direct, filtré selon le vitrage
  • Cintrage, volet roulant et serrure multipoints à manipuler
  • Dimensions à l'échelle face à une silhouette de 1,75 m
  • Les réglages préremplissent la demande de devis
Voir la direction F →
À produireD · Showroom 3DE · 24 heuresF · Labo
ContenusModèles 3D tirés des plans CAO des profilés (format glTF)Une série photo d'un intérieur, prise à heure fixe, et des avant/après de chantiersValeurs Uw, Ug et Rw des fiches techniques, et un vrai enregistrement de rue
VidéoOptionnelle : rotation 360° filmée en studioFilm usine tourné en vrai, ou le motion design proposéCourtes boucles muettes pour les modules
ComplexitéÉlevéeMoyenneMoyenne, modulable
Point d'attentionPoids des modèles sur mobileBien doser la longueur du scrollValeurs affichées validées par le service technique
02 ter · Pages intérieures

Directions A, D et E déclinées : produit, devis, contact

Chaque direction garde sa grammaire jusqu'au formulaire. Les menus des pages d'accueil pointent désormais vers ces pages. Les envois de formulaire sont simulés, rien n'est transmis.

Direction ALumière

Fenêtres PVCCadre qui s'élargit au scroll, calcul du clair de vitrage selon le profil, ouvertures en onglets, teintes par face, FAQ. Devis en 5 étapesLes carreaux d'une fenêtre s'allument à chaque étape, quantités par produit, cotes, récapitulatif en direct. ContactPhoto éclairée par le curseur comme une lampe, statut ouvert ou fermé en temps réel, plan dessiné au scroll, recherche d'installateur.

Direction DShowroom 3D

Coulissant aluminiumBaie 3D ouverte sur un paysage, 2 ou 3 rails, la caméra va chercher seuil, poignée et montant central au scroll. Configurateur-devisLe modèle 3D se redimensionne aux cotes saisies, avec surface et clair de vitrage. Panier multi-produits. Portes d'entréePorte 3D : 4 modèles qui changent au scroll, serrure 5 points qui s'engage, seuil, ouverture sur l'intérieur. ContactFormulaire qui s'adapte au sujet (SAV, pro, candidature), pièces jointes, service destinataire affiché, plan d'accès. Showroom et rendez-vousChoix du jour et du créneau, billet de visite qui se remplit puis se retourne à la confirmation.

Direction E24 heures

L'usineUne fenêtre traverse les 6 postes de la chaîne au scroll, compteur de fabrication en direct, montage vidéo, arc cintré dessiné. Devis en conversationNeuf questions posées comme un conseiller. Le ciel passe du matin au soir au fil des réponses. ContactLa photo prend la lumière de l'heure réelle à Villefranche. Un curseur permet de voir une autre heure.

IdentitéLogo

Six pistes de logoSoleil levant, industriel, fenêtre, arche, ouverture, horizon : chaque piste montrée en grand, dans un menu, sur fond sombre et en icône.

Valeurs techniques, horaires et créneaux sont des exemples, à remplacer par les données Novelis.

03 · Comparatif

Choisir selon la cible prioritaire

CritèreA · LumièreB · Atelier 7016C · Seuil
Cible principaleParticuliers haut de gamme, architectesInstallateurs partenaires, B2BParticuliers en rénovation
Rupture avec 2019
Intensité des animations
Besoin en photos neuvesÉlevé : ambiances lumineuses de qualitéÉlevé : reportage usine et équipeMoyen : portes et façades réelles
Complexité JoomlaMoyenneÉlevée (SVG, sections épinglées)Moyenne à élevée (configurateur)
Notre recommandation

Partir de B pour la structure, emprunter le hero de A et le configurateur de C.

Le vrai différenciateur de Novelis, c'est l'usine : 140 personnes, 40 000 m², le cintrage en interne. La direction B le raconte le mieux. On peut l'adoucir avec l'ouverture lumineuse de A sur l'accueil, et garder le configurateur de C sur la page Portes d'entrée.

Pour la série 2, deux modules ont le meilleur rapport effort/effet : la caméra thermique de F sur les pages Vitrages, et le film motion design de E sur la page L'entreprise. Le showroom 3D de D est l'option la plus ambitieuse, à prévoir dans un second temps à partir des plans CAO.

04 · Mise en œuvre

Sur Joomla 5, sans changer de CMS

Template

  • Template sur-mesure (enfant de Cassiopeia) ou Helix Ultimate
  • Pages composées avec SP Page Builder 6 : chaque section des maquettes devient une ligne, les textes, images, boutons, onglets et FAQ restent des addons natifs éditables
  • Animations GSAP et modules 3D chargés une fois par le template, déclenchés par des classes CSS posées dans SPPB
  • Polices auto-hébergées pour le RGPD

Animations

  • GSAP + ScrollTrigger, gratuits y compris en usage commercial
  • Chargés uniquement sur les pages qui en ont besoin
  • Version sans mouvement si l'utilisateur la demande (accessibilité)

Contenus à prévoir

  • Reportage photo : usine, cintrage, équipe, livraison
  • Photos de chantiers réels pour « Nos réalisations »
  • Logo vectoriel (SVG) et charte simplifiée

Prochaines étapes

  1. ChoixValidation d'une direction avec le client
  2. ArborescenceSimplification du menu à deux niveaux
  3. MaquettesAccueil, gamme, produit, contact en desktop et mobile
  4. IntégrationTemplate Joomla 5 et pages SP Page Builder
  5. Mise en ligneRedirections 301, recette, suivi SEO