À propos de ce modèle
La capture de Wellness Devicex a été faite en 1460x1080 et conservée comme spécification, pas comme image de galerie. La palette se limite à noir #0A0A0A en fond et bleu sourd #64748B pour les accents, et la typographie est Inter. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se limite à 60ms de transitions, cubic-bezier(0.77, 0, 0.18, 1) et un fond vidéo en boucle. Si vous préparez un brief pour landing page santé, partez de cette composition et remplacez le sujet.
Conçu pour
- Des designers qui veulent d’abord les chiffres, des sections de 100vh et des pas d’espacement de 24px, tous cités depuis le brief.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte santé peut porter 4,4s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 6 903 caractères comme point de départ.
Ce qui est inclus
- Une barre de navigation discrète. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #64748B, dimensionnée pour rester discrète face au reste de la page. Une surcouche mobile prend le relais sous le breakpoint tablette. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #64748B est le seul élément de la barre à porter du gras.
- Chaque mesure est écrite. Rien dans la mise en page n’est laissé à l’impression, le brief cite des sections de 100vh, des pas d’espacement de 24px, des transitions de 60ms et un easing cubic-bezier(0.77, 0, 0.18, 1) et le build doit atteindre ces valeurs. La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée.
- Un seul média porte l’ambiance. Le fond est une seule boucle de 4,4s en 1460x1080, recadrée en cover et laissée sans voile. Tout le reste flotte au-dessus, sur un calque supérieur. Exportez en 1460x1080 ou plus large et le recadrage en cover continue de fonctionner. Exportez en 1460x1080 ou plus large pour garder un cadrage honnête.
- L’échelle chute nettement. Ici, la typographie est le système de style, avec Inter au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. Le texte d’interface reste sur une seule fonte, la page ne mélange donc jamais deux voix au même corps.
Animation et interaction
Assez rapide pour être voulu
Les changements d’état sont fixés à 60ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger. Les timings font partie du design, pas d’une passe de finition.
La position, pas un minuteur
Le contenu est lié à la position de scroll (les calques de fond se déplacent à une vitesse différente du premier plan), donc la composition change à mesure que le lecteur avance au lieu de s’animer sur un minuteur. Ce sont quelques lignes et non une bibliothèque de scroll, ce qui garde la reconstruction légère. Un seul comportement porte tout l’effet.
Le réagencement de landing page
Une mise en page étroite conçue demande plus de décisions qu’un simple écrasement. Le brief les assume en énonçant la section est tenue à 100vh et la navigation se replie en menu mobile plutôt qu’en les découvrant au build. La version mobile est une décision, pas un repli.
Par où commencer dans Wellness Devicex
La substitution directe a une limite, car si votre produit demande une autre hiérarchie, il se heurtera à des sections de 100vh et des pas d’espacement de 24px. Dans ce cas, changez l’ordre d’abord et les valeurs ensuite. Le sujet est la partie qui doit changer.
Comment Wellness Devicex ordonne la première lecture
Un écran, une action, et la navigation, le badge d’annonce, la ligne de statistiques, la liste de fonctionnalités et le clip de fond entre les deux. Le brief fixe cet ordre au lieu de confier le premier écran à une pile de sections. Un lecteur santé reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Wellness Devicex?
Comptez 6 903 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 React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Wellness Devicex 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.
Quelle part de Wellness Devicex est animée?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 60ms avec cubic-bezier(0.77, 0, 0.18, 1). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
