À propos de ce modèle
Lumina conserve sa trace de décision, puisque le brief de pied de page fait 5 113 caractères. Elle ouvre sur « Lumina provides premium clarity on global events and cosmic wonders - shared with all for free » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à bleu #2F4458 en fond et gris #CFC2B7 pour le texte, composée en Helvetica. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de pied de page dans un projet sans passation de design. Gardez-la ouverte pendant la rédaction, car le brief de 5 113 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design de pied de page sert aux équipes qui doivent justifier un cadre 800x585 auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Équipes internes qui étendent ce design de pied de page et ont besoin de retrouver des sections de 115vh et des pas d’espacement de 10px à l’identique dans les nouveaux blocs.
- Équipes produit qui rédigent leurs propres textes de Pied de page et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
Ce qui est inclus
- Des valeurs vérifiables. Rien ici n’est estimé à l’œil. La spécification fixe des sections de 115vh et des pas d’espacement de 10px, et le reste de la mise en page découle de ces valeurs. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- L’échelle chute nettement. Les fontes reçoivent des rôles au lieu d’être mélangées, Helvetica porte à la fois le display et l’interface. Les paliers de taille sont des valeurs fixes, c’est ce qui permet de changer de fonte en gardant la même hiérarchie.
- La composition est le contenu. Toute la composition tient sur un écran et est livrée en React et Tailwind CSS, avec le texte, les médias et les contrôles nommés dans le brief. La page est une seule composition en 800x585, c’est pourquoi elle tient quand le texte change.
- Mesuré, pas estimé à l’œil. Les espacements sont cités de la même façon (des sections de 115vh et des pas d’espacement de 10px), et non comme une échelle qui grandit toute seule.
Animation et interaction
Statique par choix
Le brief laisse l’animation de côté et laisse la mise en page en 800x585 porter la page, les états de survol et d’appui étant les seuls changements. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait.
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 800x585 reste immobile et seuls les éléments qui vous répondent bougent.
Les chiffres derrière pied de page
Le brief est une spécification. Il énonce des sections de 115vh et des pas d’espacement de 10px et nomme le cadre média en 800x585 avant qu’on dessine quoi que ce soit autour. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Comment Lumina ordonne la première lecture
Le brief fait 5 113 caractères et nomme explicitement l’ordre de lecture, la ligne de statistiques, le clip de fond et le pied de page, avec des sections de 115vh et des pas d’espacement de 10px entre eux. Un lecteur éducation reçoit l’offre avant les options.
Ce qui fonctionne dans pied de page
Supposez que votre média soit plus fort que votre texte. C’est le cas pour lequel cette composition est faite. Le média est une image fixe en 800x585. Le cadre reste sobre et le lecteur reste sur le texte grâce à des sections de 115vh et des pas d’espacement de 10px. Elle donne à un lecteur éducation le chemin le plus court vers l’offre.
Questions fréquentes
Que contient réellement le brief derrière Lumina?
Comptez 5 113 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 React et Tailwind CSS pour reconstruire Lumina?
La fiche indique React et Tailwind CSS pour la provenance, parce que Lumina 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 Lumina?
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 800x585.
