À propos de ce modèle
Avant toute reconstruction de landing page pour un produit IA ou SaaS, lisez Signal ID, qui publie ensemble la composition et la spécification. Elle ouvre sur « YOUR VOICE ID TO THE E NETWORK » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette repose sur bleu profond #000003 en fond et #FFFFFF pour le texte, et la page est composée en Sora. La livraison est en React et Tailwind CSS, capturée en 1686x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 70ms de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 11 588 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si l’animation doit sauter, le design de landing page reste lisible, des sections de 100vh et des pas d’espacement de 20px assurant la hiérarchie.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 7s de vidéo en boucle derrière le texte.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de landing page dont le titre doit rester aussi long que celui de Signal ID.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Une courte suite de liens et une seule action se posent au-dessus de landing page, tenues à des sections de 100vh et des pas d’espacement de 20px pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 1686x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Des fontes à rôle unique. La typographie est Sora en haut de l’échelle, le texte secondaire tombe bien en dessous, la hiérarchie n’a donc pas besoin de couleur pour se lire. La fonte est associée à des tailles fixes, ce qui maintient le lien entre la ligne display et le texte d’interface.
- Une navigation sans fond. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Sora pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé.
- Une seule échelle, texte et cadre. La mise en page est résolue sur des valeurs fixes (des sections de 100vh, des pas d’espacement de 20px, des transitions de 70ms et un easing cubic-bezier(0.16, 1, 0.3, 1)), ce qui garde le premier écran composé à n’importe quelle largeur. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
Animation et interaction
Une durée pour les contrôles
Le budget d’animation est faible et explicite, 70ms avec cubic-bezier(0.16, 1, 0.3, 1), appliqué aux changements d’état plutôt qu’aux entrées. Les valeurs sont assez courtes pour se lire comme un retour d’information et non comme une animation.
Une ambiance sans bibliothèque de scroll
Un clip de 7s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction. Tournez ou exportez en 1686x1080 ou plus large.
Adapter landing page à votre marque
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 1686x1080 et l’échelle Sora tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. Votre accent doit passer le même test de contraste que celui de la référence.
Lire Signal ID comme une spécification
Le brief est une spécification, pas un moodboard. Il fixe des sections de 100vh, des pas d’espacement de 20px, des transitions de 70ms et un easing cubic-bezier(0.16, 1, 0.3, 1), puis nomme le média en 1686x1080 avec une boucle de 7s. Ce niveau de détail explique pourquoi le design survit à une reconstruction, changez le texte et les relations tiennent toujours. Rien dans le design de landing page ne dépend d’une valeur par défaut.
L’ordre de landing page
Vous pourriez mélanger ces blocs, la page se chargerait encore. Elle cesserait en revanche de se lire comme un argument, car ce qui porte la page est l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes, réglé par des sections de 100vh et des pas d’espacement de 20px. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Que recevez-vous en copiant le brief de Signal ID?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1686x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire Signal ID?
La fiche indique React et Tailwind CSS pour la provenance, parce que Signal ID 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.
D’où vient le design de Signal ID?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1686x1080.
