À propos de ce modèle
Health Portal conserve sa trace de décision, puisque le brief de landing page fait 16 908 caractères. La page affiche son propre titre, « Trusted Dentist in West New York », et la composition est construite autour de ces mots exacts. La palette est blanc #F9F8F9 en fond, orange profond #1D110C pour le texte et rouge #990A09 pour les accents. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. L’animation se cantonne à 2000ms de transitions et cubic-bezier(0.16,1,0.3,1). Elle est surtout utile quand le texte de landing page Santé change sans qu’une refonte soit nécessaire.
Conçu pour
- Équipes growth qui rhabillent un design de landing page pour un produit de santé ou de bien-être et veulent garder le cadre 640x472 pendant que le texte de l’offre change.
- Cette composition est prévue pour les studios qui doivent expliquer à un client le comportement à 767px sans construire de prototype.
- Cette base est calibrée pour un fondateur seul qui livre un design de landing page pour un produit de santé ou de bien-être, sans design system derrière.
Ce qui est inclus
- Rangée du haut, une action. Les liens tiennent sur une ligne à un seul corps, et l’action en #990A09 ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les libellés tiennent sur une ligne à 767px, et l’élément actif se signale par la graisse et non par une pastille.
- Une grille de cartes porte le milieu. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de landing page balayable. L’espacement entre les panneaux tient à une seule valeur, c’est ce qui évite qu’une grille dense ne paraisse surchargée. Laissez le nombre de panneaux suivre le texte.
- Le texte d’abord, la décoration ensuite. La construction de landing page fait arriver le texte avant tout le reste, la typographie porte la hiérarchie, le cadre 640x472 tient la composition, et les valeurs secondaires restent discrètes. La page est une seule composition en 640x472, c’est pourquoi elle tient quand le texte change.
- La barre partage la grille. Sous 767px, les liens se replient au lieu de passer sur une seconde ligne.
Animation et interaction
Une durée pour les contrôles
Les transitions sont fixées à 2000ms avec cubic-bezier(0.16,1,0.3,1), et c’est la durée à laquelle les contrôles sont tenus. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition. Une durée par comportement.
De l’animation sur le texte seul
L’animation d’entrée est dépensée sur un seul élément (les sections se révèlent à leur entrée dans le viewport), et c’est ce qui évite à un premier écran chargé de paraître surchargé. Ce sont quelques transitions et non une bibliothèque d’animation, donc le portage coûte peu. N’ajoutez pas de seconde entrée.
Lire Health Portal comme une spécification
16 908 caractères de brief produisent une spécification complète. La partie porteuse est courte, des pas d’espacement de 200px, des transitions de 2000ms, un easing cubic-bezier(0.16,1,0.3,1) et un breakpoint à 767px. Rien dans le design de landing page ne dépend d’une valeur par défaut.
L’ordre de landing page
À lire dans l’ordre, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes. Chaque élément a un seul rôle, et l’accent rouge #990A09 est dépensé uniquement sur l’élément que vous devez presser. Un lecteur santé reçoit l’offre avant les options.
Le gain pour un produit de santé ou de bien-être
16 908 caractères de brief produisent un écran sans remplissage. Les valeurs y sont explicites (des pas d’espacement de 200px et des transitions de 2000ms), et c’est pourquoi la composition tient encore quand les mots changent. Health Portal énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Que contient réellement le brief derrière Health Portal?
Comptez 16 908 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 Health Portal 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.
Puis-je garder les transitions de Health Portal en changeant les durées?
Les entrées et les changements d’état se situent dans la plage de 2000ms avec cubic-bezier(0.16,1,0.3,1). Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
