À propos de ce modèle
Wellness Companion conserve sa trace de décision, puisque le brief de landing page fait 4 095 caractères. La palette se limite à bleu profond #1A1A1E en fond, et la typographie est Helvetica, Arial. La livraison est en React et Tailwind CSS, capturée en 1440x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se résume à 0.5s de transitions, cubic-bezier(0.22, 1, 0.36, 1) et un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de landing page pour un produit de santé ou de bien-être et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte santé peut porter 5,9s de vidéo en boucle.
- 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 Wellness Companion.
- Cette page est destinée aux développeurs front-end qui veulent le timing 0.5s et la courbe cubic-bezier(0.22, 1, 0.36, 1) fixés avant d’écrire une keyframe.
Ce qui est inclus
- Rien n’est hérité ici. Le brief fixe des pas d’espacement de 12px, des transitions de 0.5s et un easing cubic-bezier(0.22, 1, 0.36, 1) et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur. Emportez les valeurs avec la mise en page.
- La vidéo est le fond, pas un panneau. Un unique clip muet en boucle remplit le cadre en 1440x1080 sur 5,9s, cadré en cover avec le texte empilé par-dessus. Le brief écarte toute surcouche du fond vidéo pour ne pas en ternir les couleurs. La boucle est assez courte (5,9s) pour que l’œil la lise comme une texture et non comme une timeline.
- Une idée par panneau. La grille fait la structure, des panneaux de même taille, composés en Helvetica, Arial, disposés pour que l’œil aille vers la droite plutôt que vers le bas. Les panneaux partagent la fonte d’interface à un seul corps, ce qui évite que la grille ne devienne une seconde mise en page.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (des pas d’espacement de 12px, des transitions de 0.5s et un easing cubic-bezier(0.22, 1, 0.36, 1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
Le retour sur les contrôles
Le retour d’information se limite à un slider qui fait défiler le contenu par pages à la demande, et c’est ce qui évite à un premier écran dense de paraître surchargé. Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse.
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 5,9s en 1440x1080 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Les timings derrière landing page
Le brief lie chaque transition à une valeur (0.5s de transitions et une boucle média de 5,9s). C’est ce qui évite à la page de ressembler à un template sur lequel on aurait posé un preset d’animation. Rien ne s’anime pour lui-même dans le design de landing page.
Les chiffres derrière landing page
On ne règle pas une composition à l’œil quand deux personnes la reconstruisent. Le brief tranche en énonçant des pas d’espacement de 12px, des transitions de 0.5s et un easing cubic-bezier(0.22, 1, 0.36, 1) une seule fois. Rien dans le design de landing page ne dépend d’une valeur par défaut.
L’argument de landing page
Wellness Companion fonctionne parce que sa hiérarchie est décidée plutôt que décorée. Le brief fixe des pas d’espacement de 12px, des transitions de 0.5s et un easing cubic-bezier(0.22, 1, 0.36, 1), donc un nouveau texte se pose dans le cadre au lieu de le rouvrir. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
Questions fréquentes
Quelle est la longueur du prompt derrière Wellness Companion?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1440x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Wellness Companion 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.
D’où vient le design de Wellness Companion?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1440x1080.
