À propos de ce modèle
Avant toute reconstruction de landing page pour une entreprise industrielle, lisez Cordex, qui publie ensemble la composition et la spécification. La page affiche son propre titre, « We protect transport safer across all industries », et la composition est construite autour de ces mots exacts. La palette est noir #0A0A0B en fond, #F7F7F8 pour le texte et rouge #E23B32 pour les accents, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1920x1416 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 0.7s de transitions et un fond vidéo en boucle. Si vous préparez un brief pour landing page industrie, partez de cette composition et remplacez le sujet.
Conçu pour
- Des designers qui veulent d’abord les chiffres, une typographie de 12px à 21px et des sections de 100vh, tous cités depuis le brief.
- Équipes qui reprennent un design de landing page industrie repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
- La page sert aux développeurs front-end qui reconstruisent un design de landing page pour une entreprise industrielle en un seul fichier HTML autonome et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Une ligne, aucun tiroir. La barre porte le nom de marque, les liens de la section et un bouton en #E23B32, mesurée à une typographie de 12px à 21px et des sections de 100vh pour ne jamais devenir un second header. Les libellés tiennent sur une ligne à 480px, et l’élément actif se signale par la graisse et non par une pastille. Tenez la rangée sur une seule ligne.
- Un clip plein cadre derrière la typographie. Le brief spécifie la vidéo en 1920x1416 avec une boucle de 6,8s, et chaque élément de texte est placé contre ce cadre. Exportez en 1920x1416 ou plus large et le recadrage en cover continue de fonctionner.
- Des panneaux, pas des paragraphes. La grille fait l’ordre de lecture à votre place, avec des panneaux de même poids, une idée chacun, composés en Inter à petite taille pour que la structure reste visible. Chaque panneau associe une idée à une icône, le parcours de lecture reste donc horizontal.
- En haut, marque, liens et action unique. Sous 480px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Un clip de 6,8s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis.
Des durées en millisecondes
Les timings sont courts et constants (0.7s), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. L’easing est spécifié avec la durée (0.7s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Comment Cordex ordonne la première lecture
Le brief fait 29 696 caractères et nomme explicitement l’ordre de lecture, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes, avec une typographie de 12px à 21px et des sections de 100vh entre eux. Un lecteur industrie reçoit l’offre avant les options.
Lire Cordex comme une spécification
Le brief est une spécification. Il énonce une typographie de 12px à 21px, des sections de 100vh, des pas d’espacement de 14px, des transitions de 0.7s et un breakpoint à 480px et nomme le cadre média en 1920x1416 avant qu’on dessine quoi que ce soit autour. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Le réagencement de landing page
Là où un template s’effondre en une seule colonne en espérant que ça tienne, ce brief énonce ce qui se passe (la typographie est bornée entre 12px et 21px, la mise en page bascule à 480px et la section est tenue à 100vh) et garde l’ordre intact. La lecture automatique et l’animation sont traitées honnêtement, la page communique donc encore quand elles sont indisponibles.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Cordex a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Comment cette fiche de Cordex est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 29 696 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Cordex est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1416, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
