À propos de ce modèle
Lisez Email Landing Page comme une spécification de landing page, dont les valeurs ont été écrites avant la construction de la page. La palette se limite à bleu profond #091020 en fond, sarcelle sourd #A4F4FD pour le texte et sarcelle vif #00D2FF pour les accents, et la typographie est Inter. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se limite à 0.3s de transitions et cubic-bezier(.22,1.36,1), assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 19 431 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 640x478 comme critère de recette pour la première série.
- Des équipes Studio qui briefent un build et cherchent un breakpoint à 1024px pour avoir une matière sur laquelle réagir.
- 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 Email Landing Page.
Ce qui est inclus
- La barre partage la grille. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #00D2FF, dimensionnée pour rester discrète face au reste de la page. Sous 1024px, les liens se replient dans une surcouche plein écran. Les libellés tiennent sur une ligne à 1024px, et l’élément actif se signale par la graisse et non par une pastille.
- Deux fontes, des rôles clairs. Les fontes reçoivent des rôles au lieu d’être mélangées, Inter porte à la fois le display et l’interface. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build. N’ajoutez pas de taille sans rôle.
- La composition est le contenu. La construction de landing page fait arriver le texte avant tout le reste, la typographie porte la hiérarchie, le cadre 640x478 tient la composition, et les valeurs secondaires restent discrètes. La page est une seule composition en 640x478, c’est pourquoi elle tient quand le texte change.
- Une navigation sans fond. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande. La référence a été capturée en 640x478.
Animation et interaction
Des changements d’état minutés
Une seule durée couvre les interactions (0.3s en cubic-bezier(.22,1.36,1)), et c’est ce qui fait que survol et pression se lisent comme un seul système. L’easing est spécifié avec la durée (0.3s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Du survol, mais avec parcimonie
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte et des onglets ou un accordéon qui échangent le contenu sur place), donc rien d’autre sur la page ne bouge. Le survol et le focus sont spécifiés ensemble, donc la souris et le clavier reçoivent la même information.
Le réagencement de landing page
La plupart du travail responsive s’arrête à masquer des éléments. Ici, la mise en page change de forme, la mise en page bascule à 1024px, et rien d’important n’est supprimé pour faire tenir le premier écran. La largeur change les mesures, pas le parcours de lecture.
Adapter landing page à votre marque
Refaire la palette en premier est l’erreur habituelle. Cela change l’ambiance sans toucher à la composition, alors que la mise en page tient encore à une grille de 3 colonnes et des angles de 44px, donc faites le texte et les médias d’abord, la palette en dernier. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Comment Email Landing Page ordonne la première lecture
Le design de landing page a un parcours de lecture énoncé. La navigation installe le produit et donne au visiteur de retour des repères familiers. Ensuite, l’œil parcourt la navigation, le titre, le badge d’annonce, la ligne de statistiques et la ligne de clients dans l’ordre, ce qui évite qu’un écran unique se lise comme une liste. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Le prompt de Email Landing Page est-il une spécification aboutie ou un simple point de départ?
Comptez 19 431 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 Email Landing Page 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 Email Landing Page est animée?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 0.3s en cubic-bezier(.22,1.36,1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
