À propos de ce modèle
Neo Museum est un design de landing page pour une marque éducative ou communautaire, livré avec les instructions qui l’ont produit. « Step into the natural world and discover the stories written millions of years ago » est la ligne que la mise en page doit porter. La palette est blanc #FCFCFC en fond et noir #0A0A0A pour le texte, composée en Inter. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. Le brief consacre son budget d’animation à 2800ms de transitions et cubic-bezier(0.16,1,0.3,1). Traitez-la comme le brief de landing page pour une marque éducative ou communautaire, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Ce design de landing page est fait pour les agences qui ont besoin que le cadre 640x468 survive à trois séries de retours client.
- Si trois personnes doivent modifier ce design de landing page, donnez aux responsables de contenu une typographie de 12px à 15px et des sections de 75vh plutôt qu’une capture d’écran.
- Cette base est calibrée pour un fondateur seul qui livre un design de landing page pour une marque éducative ou communautaire, sans design system derrière.
Ce qui est inclus
- Une ligne, aucun tiroir. La navigation tient sur une seule rangée, sans second niveau en dessous. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 640x468 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré, pas estimé à l’œil. Le brief fixe une typographie de 12px à 15px, des sections de 75vh, des pas d’espacement de 10px et des transitions de 2800ms et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. 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.
- La preuve sur une seule rangée. La rangée de chiffres est la preuve, avec trois ou quatre valeurs sur une ligne, un petit libellé sous chacune, dans la même Inter que l’interface pour que l’ensemble se lise comme une donnée et non comme un ornement. Les chiffres reposent sur la même ligne de base que le texte autour, la rangée se lit donc comme un seul objet.
- Une navigation sans fond. Dessinez l’état replié avant d’ajouter un sixième lien. La référence a été capturée en 640x468.
Animation et interaction
Des durées en millisecondes
Le brief fixe la transition à 2800ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. La durée citée couvre les changements d’état, donc le retour est la part spécifiée de l’animation.
Le chiffre compte à l’entrée
Les chiffres comptent à leur entrée dans le viewport, composés en Inter à la taille d’affichage. Le comptage est assez court pour se lire comme une révélation et non comme un état de chargement.
Le réagencement de landing page
Comparé à une mise en page mobile qui masque des sections, cet exemple les garde et change leur forme, la section est tenue à 75vh et la navigation se replie en menu mobile. La largeur change les mesures, pas le parcours de lecture.
Pourquoi cette composition fonctionne pour éducation
Un écran signifie une décision pour le lecteur, et c’est le prix de cette mise en page, tout le reste passe sous la ligne de flottaison. Le brief énonce une typographie de 12px à 15px, des sections de 75vh, des pas d’espacement de 10px, des transitions de 2800ms et un easing cubic-bezier(0.16,1,0.3,1) pour que les sections basses gardent le même rythme. Elle donne à un lecteur éducation le chemin le plus court vers l’offre.
L’ordre de landing page
Lisez le premier écran d’un seul passage et l’offre est déjà claire, car l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond se suit d’un bout à l’autre, avec une typographie de 12px à 15px et des sections de 75vh comme séparation plutôt que des traits décoratifs. Un lecteur éducation reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Neo Museum?
Comptez 15 036 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.
Que faire du brief de Neo Museum une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 15 036 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Puis-je reconstruire ce type de landing page de Neo Museum avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Neo Museum 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.
