À propos de ce modèle
Growth Decisions donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. La couleur se réduit à #FFFFFF en fond, #0A0A0A pour le texte et bleu #006CD2 pour les accents, composée en Inter. La livraison est en un seul composant, capturée en 1468x1080 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 0.16s 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 164 caractères est la partie qui se transfère à votre page.
Conçu pour
- Cette composition convient aux agences qui défendent des projets SaaS et doivent citer un seul composant dès la première réponse au client.
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un breakpoint à 821px au lieu de laisser le modèle décider.
- La page sert aux développeurs front-end qui reconstruisent un design de landing page pour un produit IA ou SaaS en un seul composant et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Les liens tiennent sur une ligne à un seul corps, et l’action en #006CD2 ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Sous 821px, les liens se replient au lieu de passer sur une seconde ligne. Une seule action par barre.
- Vidéo plein cadre, aucun panneau. Le cadre 1468x1080 est rempli par une seule boucle qui tourne derrière le texte et ne réclame aucun contrôle. Une image d’attente en 1468x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Une seule fonte, employée avec rigueur. La typographie est Inter 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. Le palier de légende est assez petit pour se placer sous un chiffre sans changer le rythme de la page. L’échelle est citée, servez-vous en.
- Le comportement est défini par largeur. Le haut de l’échelle est fluide (un clamp entre 28px et 18px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. L’échelle étant bornée, la ligne display ne saute jamais d’un breakpoint à l’autre.
Animation et interaction
Le timing reste dans le brief
Le budget d’animation est faible et explicite, 0.16s avec cubic-bezier(0.16, 1, 0.3, 1), appliqué aux changements d’état plutôt qu’aux entrées. L’easing est spécifié avec la durée (0.16s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
L’entrée sert de signature
Une révélation de ligne masquée est la seule entrée de la page, donc il n’y a qu’une idée d’animation à maintenir. L’entrée est terminée avant que l’œil du lecteur n’atteigne le texte secondaire. La référence a été capturée en 1468x1080.
Ce qui fonctionne dans landing page
Comptez les décisions de landing page, elles remontent toutes à un seul document, 11 164 caractères qui nomment le cadre en 1468x1080, la typographie et le rythme. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Comment Growth Decisions ordonne la première lecture
La page suit un ordre délibéré. La navigation installe le produit et donne au visiteur de retour des repères familiers. Le titre prend le corps display, la ligne de soutien explique la promesse, et l’accent bleu #006CD2 marque l’action principale, donc l’étape suivante ne fait aucun doute. Rien d’autre ne concurrence cette première décision, aucune grille de cartes en amont, ce qui évite à une landing page de paraître lourde dans un travail SaaS. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de landing page
Si vos breakpoints ont été choisis pour faire tenir les choses plutôt que pour changer la mise en page, lisez cette fiche, qui décrit ce qui change, l’échelle est fluide plutôt que par paliers, la mise en page bascule à 821px et la section est tenue à 100vh, plutôt qu’une liste d’éléments masqués. C’est la hiérarchie qui survit à la réorganisation.
Questions fréquentes
Puis-je reconstruire ce type de landing page de Growth Decisions avec une autre stack?
La fiche indique un seul composant pour la provenance, parce que Growth Decisions 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.
Que recevez-vous en copiant le brief de Growth Decisions?
Comptez 11 164 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.
Puis-je garder les transitions de Growth Decisions en changeant les durées?
Les entrées et les changements d’état se situent dans la plage de 0.16s avec cubic-bezier(0.16, 1, 0.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.
