À propos de ce modèle
Lisez Kova Mobile App comme une spécification de parcours d’onboarding, dont les valeurs ont été écrites avant la construction de la page. « Turn your ideas into cinematic scenes » est la ligne que la mise en page doit porter. La palette est blanc #FFFFFF en fond, noir #000000 pour le texte et indigo #2E1065 pour les accents, composée en Helvetica Neue. L’ensemble est livré en un seul composant, ce qui permet de transposer un design de parcours d’onboarding dans un projet sans passation de design. Le budget d’animation est 800ms de transitions et un fond vidéo en boucle. Empruntez la structure et pas le sujet, car les valeurs de parcours d’onboarding passent à votre marque sans modification.
Conçu pour
- Transmettez un seul composant à l’ingénieur avec le cadrage 1252x864 joint, puis laissez-le reconstruire.
- Équipes qui reprennent un design de parcours d’onboarding SaaS repéré chez un concurrent et veulent un seul composant dans le brief avant que quiconque choisisse un framework.
- Si la reconstruction part de un seul composant, relevez d’abord des sections de 100vh et des pas d’espacement de 24px et laissez la palette tranquille jusqu’à ce que la grille tienne.
Ce qui est inclus
- La barre partage la grille. La rangée concentre son contraste sur un seul élément, l’action en #2E1065, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #2E1065 est le seul élément de la barre à porter du gras. Dessinez l’état replié avant d’ajouter un sixième lien.
- Une seule échelle, texte et cadre. Les tailles sont citées plutôt qu’héritées, des sections de 100vh, des pas d’espacement de 24px et des transitions de 800ms. Changez la fonte ou le texte, ces relations tiennent toujours. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition. Changez le sujet, gardez les pas.
- L’image d’attente compte. Le média est un seul clip de 8s recadré en cover dans le cadre 1252x864, il ne laisse donc jamais de bandes noires, quelle que soit la largeur. Exportez en 1252x864 ou plus large et le recadrage en cover continue de fonctionner.
- La typographie porte le ton. Ici, la typographie est le système de style, avec Helvetica Neue au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même.
Animation et interaction
La scène est le visuel
La pièce maîtresse est rendue en direct (un canvas WebGL) plutôt que livrée en image, donc la composition en 1252x864 réagit au viewport au lieu de rester derrière lui. La scène est dessinée à la taille de son conteneur, donc elle ne dépend pas d’une résolution de rendu fixe.
Le timing reste dans le brief
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 800ms. Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. La même durée est réutilisée sur tous les contrôles, ce qui garde les interactions dans un seul système.
L’ordre de parcours d’onboarding
Lisez le premier écran d’un seul passage et l’offre est déjà claire, car l’ordre de la navigation, le titre, la ligne de statistiques et le clip de fond se suit d’un bout à l’autre, avec des sections de 100vh et des pas d’espacement de 24px comme séparation plutôt que des traits décoratifs. Un lecteur SaaS reçoit l’offre avant les options.
Pourquoi cette composition fonctionne pour SaaS
Il n’y a qu’une promesse sur cette page, maintenue en place par des sections de 100vh et des pas d’espacement de 24px. « Turn your ideas into cinematic scenes » fait ce travail dès la première image. Rien sous la ligne de flottaison n’a à porter l’offre en plus. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Ce qui bouge dans Kova Mobile App
Comparez l’animation d’ici avec une page pilotée par le scroll. Les deux bougent, mais celle-ci bouge là où le brief l’indique (800ms de transitions, une boucle média de 8s et des états de survol et de clic), donc le texte reste devant. Rien ne s’anime pour lui-même dans le design de parcours d’onboarding.
Questions fréquentes
Que contient réellement le brief derrière Kova Mobile App?
Comptez 3 523 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.
Faut-il un seul composant pour reconstruire Kova Mobile App?
La fiche indique un seul composant pour la provenance, parce que Kova Mobile App 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 brief de Kova Mobile App est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 3 523 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
