À propos de ce modèle
La capture de Vela Ul a été faite en 1920x1418 et conservée comme spécification, pas comme image de galerie. La palette est #16120C en fond et #F7F5F2 pour le texte, composée en Arial, Helvetica. L’ensemble est livré en un seul fichier HTML autonome, ce qui permet de transposer un design de section fonctionnalités dans un projet sans passation de design. L’animation se résume à 720ms de transitions, cubic-bezier(.22,1.36,1) et un fond vidéo en boucle. C’est la référence qu’il faut pour un design de section fonctionnalités destiné à un produit IA ou SaaS, quand le premier écran doit sembler intentionnel.
Conçu pour
- Les chefs de produit qui doivent chiffrer la reconstruction liront un easing cubic-bezier(.22,1.36,1) comme le périmètre du travail.
- Ce design de section fonctionnalités sert aux équipes qui doivent justifier un seul fichier HTML autonome auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Si la référence n’est qu’un point de départ, les designers peuvent garder un breakpoint à 410px et reconstruire le reste du design de section fonctionnalités.
Ce qui est inclus
- En haut, marque, liens et action unique. La barre se superpose à section fonctionnalités au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Les libellés tiennent sur une ligne à 410px, et l’élément actif se signale par la graisse et non par une pastille.
- La vidéo est le fond, pas un panneau. Le clip tourne 4,7s en 1920x1418 et boucle sans coupe visible, il se lit donc comme une surface et non comme une séquence filmée. La boucle est assez courte (4,7s) pour que l’œil la lise comme une texture et non comme une timeline.
- Le corps display porte le ton. La ligne display est composée en Arial, Helvetica à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. L’interlettrage se resserre à mesure que le corps grandit, c’est pourquoi la ligne display tient sur toute la plage 25px.
- Fluide là où il faut. La typographie est dimensionnée avec un clamp entre 14px et 20px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. Le menu mobile fait partie du même brief, l’état replié est donc dessiné lui aussi.
Animation et interaction
Tout le budget d’animation
Ici, l’animation se mesure en millisecondes, 720ms en cubic-bezier(.22,1.36,1). 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. Les durées sont assez courtes pour que le retour se lise comme une réponse et non comme une animation. Conservez les durées quand vous changez l’habillage de la page.
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 4,7s en 1920x1418 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Par où commencer dans Vela Ul
Quand vous intégrez vos propres médias, gardez le cadrage et l’ordre des calques. Le média est une boucle de 4,7s en 1920x1418. C’est ce placement qui garde le texte lisible. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
Pourquoi cette composition fonctionne pour SaaS
Vous pourriez reconstruire ceci en pile de cartes séparées et ne perdre que l’argument. Le design de section fonctionnalités se lit plutôt comme une seule décision, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes dans une séquence unique. Vela Ul énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de section fonctionnalités
Comparé à une mise en page mobile qui masque des sections, cet exemple les garde et change leur forme, l’échelle est fluide plutôt que par paliers, la mise en page bascule à 410px et la section est tenue à 100vh. Rien d’important n’est supprimé en largeur étroite.
Questions fréquentes
Le prompt de Vela Ul est-il une spécification aboutie ou un simple point de départ?
Comptez 25 889 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 un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Vela Ul 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 Vela Ul est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 25 889 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
