À propos de ce modèle
Arceage Stats donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. « Maximize Your Yield » est la ligne que la mise en page doit porter. La palette repose sur noir #101010 en fond, et la page est composée en Instrument Serif. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Elle est surtout utile quand le texte de section fonctionnalités IA et SaaS change sans qu’une refonte soit nécessaire.
Conçu pour
- Empruntez la structure de section fonctionnalités telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un cadre 640x470.
- Si trois personnes doivent modifier ce design de section fonctionnalités, donnez aux responsables de contenu un corps display fixe de 56px et des pas d’espacement de 120px plutôt qu’une capture d’écran.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section fonctionnalités dont le titre doit rester aussi long que celui de Arceage Stats.
Ce qui est inclus
- Mesuré contre le viewport. Rien dans la mise en page n’est laissé à l’impression, le brief cite un corps display fixe de 56px et des pas d’espacement de 120px et le build doit atteindre ces valeurs. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- La preuve en haut de l’écran. 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 Instrument Serif que l’interface pour que l’ensemble se lise comme une donnée et non comme un ornement. L’accent est dépensé sur les chiffres qui portent une affirmation, pas sur toute la rangée. Alignez la taille des libellés sur le palier des légendes.
- 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 640x470, c’est pourquoi elle tient quand le texte change.
- Les pas d’espacement sont cités. Les espacements sont cités de la même façon (un corps display fixe de 56px et des pas d’espacement de 120px), et non comme une échelle qui grandit toute seule.
Animation et interaction
La page se construit au chargement
L’animation d’entrée est dépensée sur un seul élément (une passe de machine à écrire compose la ligne d’introduction), et c’est ce qui évite à un premier écran chargé de paraître surchargé. L’effet se joue une fois par élément au lieu de se répéter tant que la page est ouverte.
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 640x470 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. Gardez le mouvement sur les contrôles.
Les timings derrière section fonctionnalités
Le timing est explicite, un effet machine à écrire, le tout écrit dans le brief plutôt que réglé au ressenti. Des durées courtes et une seule entrée, c’est ce qui évite à la page de ressembler à un template livré avec un preset.
Adapter section fonctionnalités à votre marque
Le compromis porte sur ce qui reste reconnaissable. Gardez trop de Arceage Stats et la page se lit comme celle d’un autre, gardez les chiffres et changez le contenu, et elle se lit comme la vôtre. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
L’ordre de section fonctionnalités
Rien ici ne concurrence la première décision. « Maximize Your Yield » fait ce travail dès la première image. Le contenu d’appui attend sous la ligne de flottaison, et rien d’autre que le titre, la ligne de statistiques et le clip de fond n’occupe le haut de la page. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Arceage Stats?
Comptez 7 826 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.
Comment cette fiche de Arceage Stats est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 7 826 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Arceage Stats 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.
