À propos de ce modèle
Kresna Footer est la référence pied de page pour un produit IA ou SaaS, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La couleur se réduit à blanc #FFFFFF en fond et bleu profond #111827 pour le texte, composée en DM Sans. L’ensemble est livré en un seul fichier HTML autonome, ce qui permet de transposer un design de pied de page dans un projet sans passation de design. L’animation se limite à 0.2s de transitions. Partez du brief capturé, puis retouchez le contenu de pied de page au lieu de repartir de zéro.
Conçu pour
- Transmettez un seul fichier HTML autonome à l’ingénieur avec le cadrage 800x586 joint, puis laissez-le reconstruire.
- Cette composition est prévue pour les studios qui doivent expliquer à un client le comportement à 560px sans construire de prototype.
- Ce design de pied de page sert aux designers qui doivent transmettre à un ingénieur un build en un seul fichier HTML autonome et veulent l’animation écrite noir sur blanc.
Ce qui est inclus
- La barre partage la grille. Une courte suite de liens et une seule action se posent au-dessus de pied de page, tenues à des pas d’espacement de 28px et des transitions de 0.2s pour ne jamais concurrencer la composition en dessous. Les libellés tiennent sur une ligne à 560px, et l’élément actif se signale par la graisse et non par une pastille.
- Des chiffres plutôt qu’une affirmation. Les chiffres sont composés en DM Sans à une taille plus proche du titre que du texte courant. Les libellés sont composés à une seule taille, un libellé long ne change donc pas la hauteur de la rangée.
- Le pied de page est une composition entière. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Le nom de marque occupe son propre bloc, ce qui garde lisible une longue liste de liens. Regroupez les liens, ne les déversez pas.
- L’inscription comme composition. Il n’y a qu’une décision à prendre ici, remplir le formulaire ou partir. Tout le reste de l’écran soutient cette décision. Les champs sont empilés sur une seule colonne, l’ordre de tabulation suit donc l’ordre de lecture. Spécifiez l’état de focus.
Animation et interaction
De la texture plutôt qu’un aplat
Une couche de grain recouvre blanc #FFFFFF, ce qui empêche les grandes surfaces plates de se lire comme de la couleur unie sans ajouter de dégradé. Le grain reste assez discret pour ne jamais concurrencer la typographie.
Des durées courtes et nommées
L’animation des contrôles est courte et répétable, 0.2s à chaque changement d’état. L’easing est spécifié avec la durée (0.2s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Le gain pour un produit IA ou SaaS
La plupart des pages SaaS ajoutent une section de plus quand le premier écran est faible. Celle-ci fait l’inverse et retire des options, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes dans cet ordre, sans rien qui répète l’offre. Kresna Footer énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de pied de page
Une échelle fluide et une échelle par paliers se ressemblent sur grand écran. Réduisez la fenêtre et la différence apparaît, un clamp entre 22px et 28px contre des sauts fixes. Rien d’important n’est supprimé en largeur étroite.
Les chiffres derrière pied de page
Une reconstruction commence d’habitude par une capture d’écran et une estimation. Ici, elle commence par 9 163 caractères de spécification, le cadre, les espacements et l’animation étant écrits avant la première ligne de code. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Questions fréquentes
Quelle est la longueur du prompt derrière Kresna Footer?
Comptez 9 163 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 un seul fichier HTML autonome pour reconstruire Kresna Footer?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Kresna Footer 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.
Que faire du brief de Kresna Footer une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 9 163 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
