À propos de ce modèle
La capture de Dot a été faite en 800x588 et conservée comme spécification, pas comme image de galerie. La palette est blanc #DEF0FC en fond, noir #1A1A1A pour le texte et bleu vif #0871E7 pour les accents, composée en Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 800x588 pour que le cadre soit fixé avant la première ligne de code. L’animation se résume à 100ms de transitions. C’est la référence qu’il faut pour un design de section hero destiné à une marque lifestyle, quand le premier écran doit sembler intentionnel.
Conçu pour
- Des équipes qui construisent une section hero pour une marque lifestyle et veulent le détail mesuré (une typographie de 14px à 72px et des pas d’espacement de 14px) plutôt qu’une capture d’écran à copier.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 3 871 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Dot.
Ce qui est inclus
- Une navigation sans fond. Nom de marque, liens et action en #0871E7 partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #0871E7 est le seul élément de la barre à porter du gras. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Chaque mesure est écrite. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (une typographie de 14px à 72px, des pas d’espacement de 14px et des transitions de 100ms). Chaque valeur se vérifie contre le prompt capturé, ce qui rend une reconstruction vérifiable plutôt qu’approximative.
- Une structure en un seul écran. La composition est complète en 800x588, avec le texte, les médias et les contrôles tous nommés dans le brief. La page est une seule composition en 800x588, c’est pourquoi elle tient quand le texte change.
- Une ligne, aucun tiroir. La barre se pose sur la composition 800x588 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Des changements d’état minutés
Les timings sont courts et constants (100ms), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. La même durée est réutilisée sur tous les contrôles, ce qui garde les interactions dans un seul système.
Le pointeur là où il aide
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc rien d’autre sur la page ne bouge. Les états interactifs ne déplacent pas la mise en page, donc rien ne saute sous le pointeur. N’animez pas la mise en page au survol.
Les chiffres derrière section hero
Une capture d’écran dit à quoi ressemble la page, le brief dit pourquoi, et l’écart entre les deux se comble avec une typographie de 14px à 72px, des pas d’espacement de 14px et des transitions de 100ms. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Le gain pour une marque lifestyle
La promesse est faite une fois, à la taille d’affichage. Tout le reste de section hero s’ordonne autour d’elle, la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond, et aucune seconde promesse ne vient disputer la première lecture. Elle donne à un lecteur lifestyle le chemin le plus court vers l’offre.
Les timings derrière section hero
L’animation se limite à 100ms de transitions et des états de survol et de clic. Rien dans le design de section hero ne s’anime plus longtemps que le brief ne l’autorise. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que recevez-vous en copiant le brief de Dot?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x588, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire Dot?
La fiche indique React et Tailwind CSS pour la provenance, parce que Dot 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 utiliser Dot dans un projet client?
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 800x588.
