À propos de ce modèle
ClarionAI est un design de landing page pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. « The intelligence layer \n for clear decisions » est la ligne que la mise en page doit porter. Toute la page repose sur noir #000000 en fond. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de landing page dans un projet sans passation de design. La page s’en tient à 1000ms de transitions et un fond vidéo en boucle. Si vous préparez un brief pour landing page SaaS, partez de cette composition et remplacez le sujet.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de landing page et laissez le prompt porter un cadre 1952x1440.
- Partez de un corps display fixe de 16px et des pas d’espacement de 20px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de landing page.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de landing page comme le motif que toutes les autres pages recopient.
Ce qui est inclus
- Une barre sans superflu. La barre tient sur une rangée de texte et une action, mesurée à un corps display fixe de 16px et des pas d’espacement de 20px pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 1952x1440 sans fond propre, la vidéo court donc bord à bord en dessous. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Une pastille pour la seule nouveauté. Une seule pastille porte l’annonce au-dessus du titre, et rien d’autre ne vient concurrencer cette position. Il n’y a qu’une annonce, c’est ce qui donne au badge sa valeur d’information. Gardez-le au-dessus du titre, jamais à côté.
- Une navigation sur une seule ligne. L’action porte l’accent tandis que les liens restent sur la couleur d’encre, la hiérarchie de la barre reprend donc celle de la page en dessous. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Des tailles fixées par le brief. La mise en page est résolue sur des valeurs fixes (un corps display fixe de 16px, des pas d’espacement de 20px et des transitions de 1000ms), ce qui garde le premier écran composé à n’importe quelle largeur. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
Animation et interaction
Une durée pour les contrôles
Les contrôles répondent en 1000ms, assez vite pour que la page réagisse dès qu’on la touche, et non après. La durée citée couvre les changements d’état, donc le retour est la part spécifiée de l’animation.
La boucle fait l’ambiance
Le clip de fond tourne 18,4s en 1952x1440 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Ce qui bouge dans ClarionAI
L’animation se limite à 1000ms de transitions, une boucle média de 18,4s et des états de survol et de clic. Rien dans le design de landing page ne s’anime plus longtemps que le brief ne l’autorise. Rien ne s’anime pour lui-même dans le design de landing page.
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 navigation se replie en menu mobile, plutôt qu’une liste d’éléments masqués. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
Adapter landing page à votre marque
La composition est la partie réutilisable, le sujet vous appartient. Gardez un corps display fixe de 16px et des pas d’espacement de 20px et remplacez les mots, les médias et les signes de marque. Gardez le cadrage des médias, il travaille autant que la typographie.
Questions fréquentes
Quelle est la longueur du prompt derrière ClarionAI?
Comptez 6 807 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.
Que faire du brief de ClarionAI une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 6 807 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Faut-il React et Tailwind CSS pour reconstruire ClarionAI?
La fiche indique React et Tailwind CSS pour la provenance, parce que ClarionAI 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.
