À propos de ce modèle
IntelligentX donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. La palette repose sur blanc #EDEEF5 en fond, noir #1A1A1A pour le texte et vert anis vif #9FFF00 pour les accents, et la page est composée en Inter. La livraison est en React et Tailwind CSS, capturée en 640x462 pour que le cadre soit fixé avant la première ligne de code. Gardez-la ouverte pendant la rédaction, car le brief de 4 182 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design est taillé pour les agences qui facturent à la série et veulent valider des sections de 110vh et des pas d’espacement de 16px avant la première.
- 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 IntelligentX.
- Sur ce design de section hero, les responsables marketing ont à défendre #9FFF00 devant le responsable de la marque.
Ce qui est inclus
- Une ligne, aucun tiroir. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #9FFF00, dimensionnée pour rester discrète face au reste de la page. Une surcouche mobile prend le relais sous le breakpoint tablette. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #9FFF00 est le seul élément de la barre à porter du gras.
- Chaque mesure est écrite. Typographie et espacements sortent ici de la même liste, des sections de 110vh et des pas d’espacement de 16px. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- 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. Un changement de fonte reste sûr tant que les tailles et les graisses restent là où le brief les a placées. Une famille aux rôles clairs vaut mieux que deux qui se concurrencent.
- Une barre de navigation discrète. La barre se pose sur la composition 640x462 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Presque aucune animation
Il n’y a aucune bibliothèque de scroll ici, la composition en 640x462 reste immobile et seuls les éléments qui vous répondent bougent. Seuls les éléments qui répondent au pointeur bougent.
Statique par choix
Le mouvement est traité comme un retour d’information et non comme une décoration. L’immobilité est un choix valable.
Ce qui bouge dans IntelligentX
L’animation est ici un ensemble de décisions et non une bibliothèque, des états de survol et de clic, et rien ne s’anime au scroll. Le résultat est une page qui semble écrite, des durées courtes, une seule entrée et des changements d’état qui confirment une action au lieu de la décorer. Des durées courtes et une seule entrée, c’est ce qui évite à la page de ressembler à un template livré avec un preset.
L’ordre de section hero
Une mise en page pilotée par les fonctionnalités énumère ce que fait le produit, celle-ci conduit le lecteur vers une seule décision. Le trajet se voit dans la navigation, le badge d’annonce, la ligne de statistiques, le formulaire et le clip de fond et dans l’espacement réglé par des sections de 110vh et des pas d’espacement de 16px. Un lecteur SaaS reçoit l’offre avant les options.
Adapter section hero à votre marque
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 640x462 et l’échelle Inter tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Questions fréquentes
Que recevez-vous en copiant le brief de IntelligentX?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 640x462, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de section hero de IntelligentX avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que IntelligentX 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.
Comment gérer les médias de IntelligentX 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 640x462.
