À propos de ce modèle
La capture de JungleMind a été faite en 1920x1422 et conservée comme spécification, pas comme image de galerie. La couleur se réduit à #5C5C5C en fond et #111111 pour le texte, composée en Poppins. La construction repose sur vanilla JS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. La page s’en tient à 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 36 531 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design de landing page répond à celui qui construit et veut connaître le rôle exact de une typographie de 12px à 25px et des sections de 100vh dans la mise en page.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 6,9s 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 JungleMind.
Ce qui est inclus
- La barre partage la grille. La barre tient sur une rangée de texte et une action, mesurée à une typographie de 12px à 25px et des sections de 100vh pour se lire comme un filet et non comme un bandeau. Les libellés tiennent sur une ligne à 340px, 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.
- L’image d’attente compte. Le média fait un travail d’ambiance et non de récit, une seule boucle de 6,9s en 1920x1422 derrière tout le reste. Exportez en 1920x1422 ou plus large et le recadrage en cover continue de fonctionner.
- Chiffres sur la ligne de base. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer landing page en liste de fonctionnalités. Aucun séparateur à l’intérieur de la rangée, seul l’espacement sépare les chiffres.
- Un badge au-dessus de la ligne de flottaison. Un badge, un message. La pastille se place au-dessus du titre en Poppins 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.
Animation et interaction
Une petite surface interactive
Les états sont gérés composant par composant (des états de survol sur les boutons et les liens plutôt que sur chaque carte) plutôt que par une couche d’animation globale. Le survol et le focus sont spécifiés ensemble, donc la souris et le clavier reçoivent la même information. N’animez pas la mise en page au survol. La référence a été capturée en 1920x1422.
Des changements d’état minutés
Le brief fixe la transition à 70ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite. Ne livrez pas le défaut du navigateur.
Pourquoi le brief SaaS tient
Quand vous briefez pour landing page SaaS, le plus difficile est de décider ce que le premier écran refuse de dire. JungleMind y répond d’avance, une ligne d’affichage et la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes derrière elle. JungleMind énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière landing page
Presque chaque décision ici est une valeur vérifiable, une typographie de 12px à 25px, des sections de 100vh, des angles de 9px, des pas d’espacement de 16px et des transitions de 70ms. Le média est une boucle de 6,9s en 1920x1422. La typographie reste en Poppins, une substitution doit donc garder les mêmes proportions. Rien dans le design de landing page ne dépend d’une valeur par défaut.
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, la typographie est bornée entre 12px et 25px, la mise en page bascule à 340px et la section est tenue à 100vh, plutôt qu’une liste d’éléments masqués. La réorganisation garde l’action accessible à chaque largeur.
Questions fréquentes
Le prompt de JungleMind est-il une spécification aboutie ou un simple point de départ?
Comptez 36 531 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.
Pourquoi la fiche mentionne-t-elle vanilla JS?
La fiche indique vanilla JS pour la provenance, parce que JungleMind 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.
Puis-je garder les transitions de JungleMind en changeant les durées?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 70ms en cubic-bezier(0.16, 1, 0.3, 1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
