À propos de ce modèle
Data Signal est un exemple de landing page SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. Le titre affiché est « Abstract red and blue smoke », et le reste de landing page s’organise autour de lui. La palette repose sur sarcelle profond #050606 en fond et blanc #EDEDED pour le texte, et la page est composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1482x1080 pour que le cadre soit fixé avant la première ligne de code. Le budget d’animation est 520ms de transitions, cubic-bezier(.16,1.3,1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 12 007 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord un corps display fixe de 16px et des sections de 19vh et laissez la palette tranquille jusqu’à ce que la grille tienne.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 5,9s de vidéo en boucle.
- 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 Data Signal.
Ce qui est inclus
- Une navigation sur une seule ligne. La barre se superpose à landing page au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Les libellés tiennent sur une ligne à 619px, et l’élément actif se signale par la graisse et non par une pastille. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Un média sans surcouche. La vidéo occupe le calque inférieur de la composition 1482x1080, la typographie est disposée au-dessus, sans rien entre les deux. La boucle est assez courte (5,9s) pour que l’œil la lise comme une texture et non comme une timeline.
- Une pastille pour la seule nouveauté. Un badge, un message. La pastille se place au-dessus du titre en Inter au plus petit palier, et rien d’autre ne vient concurrencer cette position. La pastille occupe le plus petit palier du brief, elle se lit donc comme un libellé et non comme un second titre. Un badge, un seul message.
- Une barre sans superflu. Une seule action par barre. La référence a été capturée en 1482x1080.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Un clip de 5,9s 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 assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Le retour sur les contrôles
La couche interactive est petite et prévisible, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse.
Par où commencer dans Data Signal
S’il ne vous reste qu’un après-midi, changez le titre et le libellé d’action, ne touchez pas à un corps display fixe de 16px et des sections de 19vh, et vous avez une page qui semble voulue. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Ce qui fonctionne dans landing page
Le compromis porte sur la densité, car le design de landing page dit moins sur le premier écran qu’une mise en page pilotée par les fonctionnalités. Ce qu’il garde, c’est l’ordre de lecture, et le travail qu’une page plus longue étalerait revient à la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Ce qui bouge dans Data Signal
Le brief lie chaque transition à une valeur (520ms de transitions, une boucle média de 5,9s et des états de survol et de clic). C’est ce qui évite à la page de ressembler à un template sur lequel on aurait posé un preset d’animation. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Quelle part de Data Signal dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Data Signal 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.
Le prompt de Data Signal est-il une spécification aboutie ou un simple point de départ?
Comptez 12 007 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Comment se comportent les transitions de 520ms dans Data Signal?
Les entrées et les changements d’état se situent dans la plage de 520ms en cubic-bezier(.16,1.3,1) complétée d’une variante de mouvement réduit dans le brief. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
