À propos de ce modèle
La capture de Scaling Platform a été faite en 1916x1080 et conservée comme spécification, pas comme image de galerie. La palette repose sur blanc #F2F1F0 en fond, noir #3A3A3A pour le texte et sarcelle vif #15BCDF pour les accents, et la page est composée en Quantico. L’ensemble est livré en un seul composant, ce qui permet de transposer un design de landing page dans un projet sans passation de design. Le brief consacre son budget d’animation à 1s de transitions et un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de landing page pour un produit IA ou SaaS et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Ce design de landing page sert aux équipes qui doivent justifier un seul composant auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Équipes qui reprennent un design de landing page SaaS repéré chez un concurrent et veulent un seul composant dans le brief avant que quiconque choisisse un framework.
- Écrivez votre propre titre, puis reconstruisez ce design de landing page en un seul composant avec les mesures intactes.
Ce qui est inclus
- En haut, marque, liens et action unique. Les liens tiennent sur une ligne à un seul corps, et l’action en #15BCDF ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #15BCDF est le seul élément de la barre à porter du gras.
- Mesuré, pas estimé à l’œil. Rien dans la mise en page n’est laissé à l’impression, le brief cite des sections de 100vh, des pas d’espacement de 20px et des transitions de 1s et le build doit atteindre ces valeurs. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
- L’interlettrage se resserre. Les fontes reçoivent des rôles au lieu d’être mélangées, Quantico porte à la fois le display et l’interface. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build. Une seule fonte, des rôles clairs.
- La composition est le contenu. La construction de landing page fait arriver le texte avant tout le reste, la typographie porte la hiérarchie, le cadre 1916x1080 tient la composition, et les valeurs secondaires restent discrètes. La page est une seule composition en 1916x1080, c’est pourquoi elle tient quand le texte change.
Animation et interaction
Des durées courtes et nommées
Ici, l’animation se mesure en millisecondes, 1s. C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. L’easing est spécifié avec la durée (1s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Des changements d’état rapides, aucune timeline de scroll.
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance est un clip de 5,1s en 1916x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Les timings derrière landing page
Portez l’animation en dernier. Le brief la fixe à 1s de transitions, une boucle média de 5,1s et une apparition de ligne masquée, ce qui est plus facile à reproduire une fois la mise en page en place. Rien ne s’anime pour lui-même dans le design de landing page.
L’ordre de landing page
Rien ici ne concurrence la première décision. Le contenu d’appui attend sous la ligne de flottaison, et rien d’autre que la navigation, le titre, la ligne de statistiques, le clip de fond et le pied de page n’occupe le haut de la page. Un lecteur SaaS reçoit l’offre avant les options.
Adapter landing page à votre marque
Changez le contenu d’abord et vérifiez le cadre ensuite. Les valeurs à protéger pendant le remplacement du texte sont des sections de 100vh, des pas d’espacement de 20px et des transitions de 1s. Une autre marque peut réutiliser tout le cadre.
Questions fréquentes
Puis-je reconstruire ce type de landing page de Scaling Platform avec une autre stack?
La fiche indique un seul composant pour la provenance, parce que Scaling Platform 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.
Pourquoi le prompt de Scaling Platform n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 5 231 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Quelle est la longueur du prompt derrière Scaling Platform?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1916x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
