Que fait Conception de page d'atterrissage ?

Une page d'atterrissage n'est pas une page d'accueil. Une page d'accueil sert plusieurs intentions. Une page d'atterrissage en remporte une :

une offre → un public → une action principale.

Cette compétence comporte deux parties. La partie A décide ce que la page dit et comment elle est structurée. La partie B est le système visuel non négociable. Travaillez sur la partie A avant de toucher à la partie B.

Périmètre

S'applique à tous les travaux d'UI Web : pages d'atterrissage, sites marketing, composants, tableaux de bord, prototypes et révisions de conception. Lorsqu'une règle ici entre en conflit avec une valeur par défaut du framework, ce fichier prévaut. Lorsque l'invite explicite de l'utilisateur entre en conflit avec une règle, l'utilisateur prévaut.

Compétence complémentaire. Pour améliorer un site existant plutôt que d'en construire un nouveau, utilisez redesign-existing-projects (github.com/elayadesign/redesign-skill). Il diagnostique les modèles génériques et renvoie à ce fichier pour chaque valeur concrète.

PARTIE A — Stratégie et structure

A1. Accueil

Recueillez ces informations avant de concevoir ou d'écrire. Ne demandez que ce qui manque, et demandez en un seul lot plutôt qu'une question à la fois.

Objectif

Quelle est l'action principale UNIQUE ? (essai, démo, achat, liste d'attente, téléchargement)
Quelle est l'offre, exactement ce qu'ils obtiennent ?
Qu'est-ce qui est considéré comme une conversion ? (clic, inscription, achat)

Public et contexte

Qui est le client idéal (ICP) ?
Quel problème essaient-ils de résoudre ?
Les trois principales objections, c'est-à-dire pourquoi ils ne convertissent pas aujourd'hui
Source de trafic : publicités, recherche, réseaux sociaux, email
Que savent déjà les visiteurs lorsqu'ils arrivent ?

Preuves et actifs

Points de preuve : logos, témoignages, chiffres, études de cas
Captures d'écran, vidéo de démonstration, GIF du produit
Garanties, conditions de remboursement, conditions d'annulation

Contraintes

Ton de la marque : décontracté ou professionnel
Direction de conception : éditorial minimaliste, 3D ludique, UI en verre
Priorité mobile ?

Si l'utilisateur ne peut pas répondre, faites une hypothèse raisonnable, énoncez-la en une ligne et continuez. Ne bloquez pas la construction.

A2. Structure de la page

Au-dessus de la ligne de flottaison (obligatoire)

Titre, résultat plus public
Sous-titre, clarifie comment et ajoute de la spécificité
Appel à l'action principal, verbe clair plus ce qu'ils obtiennent
Un signal de preuve, bande de logos, statistique ou court témoignage
Visuel du héros, capture d'écran du produit ou vidéo, ou une illustration forte

Milieu de page (l'argumentaire) 6. Problème à solution, une section 7. Avantages, trois à cinq, axés sur les résultats 8. Comment ça fonctionne, trois étapes 9. Preuve sociale, témoignages ou une étude de cas

Bas (gestion des objections) 10. FAQ, six à douze questions 11. Inversion du risque, essai, annulation à tout moment, garantie 12. Dernier appel à l'action, identique à celui du haut

Incluez la section obligatoire de révélation du slogan de la partie B11 quelque part dans l'argumentaire du milieu de page, généralement juste après le héros ou après les avantages.

A3. Sélection de la mise en page

Choisissez-en une et expliquez pourquoi.

Type	Quand l'utiliser
A. Héros classique plus sections	Le produit est compréhensible à partir d'une capture d'écran du héros. Le plus courant.
B. Histoire longue	Vous devez éduquer et surmonter le scepticisme.
C. Page de conversion minimale	Trafic à forte intention (email vers des utilisateurs connus), ou une offre courte comme un téléchargement ou une liste d'attente.
D. Page de comparaison	L'intention de recherche inclut des alternatives ("X vs Y", "meilleur pour"). Généralement associée aux pages SEO.

A4. Règles de conversion

Faire correspondre le message à la source. Si le trafic provient de publicités, reflétez le titre de l'annonce dans le héros et conservez la même promesse et le même ton visuel.

Rendre l'étape suivante évidente. Un seul appel à l'action principal. Ne placez jamais d'appels à l'action concurrents au-dessus de la ligne de flottaison.

Écrivez d'abord l'avantage. Les fonctionnalités sont ce que ça fait. Les avantages sont ce que cela signifie pour eux.

Soyez précis.

❌ "Gagnez du temps et optimisez"
✅ "Réduisez votre reporting hebdomadaire de 4 heures à 15 minutes"

Réduisez le risque. Choisissez au moins un : essai gratuit, forfait gratuit, pas de carte de crédit, annulation à tout moment, garantie de remboursement.

Traitez les objections comme une section, pas une note de bas de page. Déplacez la FAQ plus tôt pour les offres à forte friction. Mettez la preuve directement à côté de l'affirmation qu'elle soutient.

A5. Rédaction

Formules de titre

"{Résultat} sans {douleur}"
"Le {catégorie} pour {public}"
"Livrez {résultat} en {temps}"

Sous-titre. Une ou deux phrases. Clarifiez ce que c'est et à qui cela s'adresse.

Appel à l'action. Verbe plus ce qu'ils obtiennent. Jamais "En savoir plus" ou "Soumettre". Utilisez "Démarrer l'essai gratuit", "Réserver une démo", "Obtenir la liste de contrôle".

Puces d'avantages. Avantage en gras, puis la preuve ou le détail. Exemple : Itération plus rapide — générez trois variantes de mise en page en un clic.

Remarque : les règles de rédaction de la partie B1 s'appliquent toujours. Pas de traits d'union à l'intérieur des phrases, pas de mots orphelins.

A6. Ordre de construction

Travaillez section par section, dans cet ordre :

Héros
Avantages
Comment ça fonctionne
Preuve
FAQ
Dernier appel à l'action

Ne reconstruisez jamais la page entière à chaque itération. Section par section garde le contrôle et les diffs révisables.

A7. SEO et AEO

N'indexez pas les pages de campagnes publicitaires uniquement ou les offres très limitées dans le temps. Utilisez noindex ou conservez-les derrière un chemin non indexé.

Indexez les offres permanentes et les pages où l'intention de recherche correspond à la promesse. Ajoutez un titre et une méta-description clairs, des liens internes depuis la page d'accueil et les pages de fonctionnalités, et la FAQ sous forme de questions et réponses simples pour l'AEO. Ajoutez un schéma FAQ si approprié.

A8. Pièges

Trop d'appels à l'action au-dessus de la ligne de flottaison
Proposition de valeur vague : "optimiser", "rationaliser"
Une grande liste de fonctionnalités sans résultats
Preuve enterrée en bas
Mise en page mobile qui brise la lisibilité
Aucune prochaine étape claire

PARTIE B — Système visuel

Chaque valeur visuelle doit être résolue via ces règles plutôt que d'être inventée ad hoc.

B1. Typographie

Polices

À utiliser : Geist, Manrope, Geist Mono, Poppins.

À ne jamais utiliser : Inter, Roboto, Arial, Open Sans, Helvetica.

Ne jamais utiliser de polices italiques n'importe où dans l'interface.

Un seul jeu de caractères par site. N'associez pas deux polices à moins que l'invite ne le demande explicitement. Geist Mono est autorisé aux côtés d'une police principale uniquement pour le code, les données ou l'UI numérique où une police à chasse fixe est fonctionnellement requise.

Ne jamais utiliser de poids ultra-gras (900 / noir). Limitez-vous au semi-gras ou au gras.

Règles de rédaction

Pas de traits d'union dans le texte. N'utilisez pas - dans le corps du texte, les titres ou les étiquettes. Reformulez la phrase à la place.

Pas de mots orphelins. Un seul mot ne doit jamais rester seul sur la dernière ligne. Appliquez text-wrap: balance pour les titres et text-wrap: pretty pour le corps du texte.

Échelle typographique

Résolvez toujours les tailles de police avec l'échelle de type par défaut de Tailwind. Ne laissez jamais de valeurs arbitraires en place, y compris text-[19px], font-size: 22px ou 1.4rem.

Si une taille existante ne tombe pas exactement sur un palier, ajustez-la au palier inférieur le plus proche, en prenant à la fois la taille et sa hauteur de ligne associée.

Classe	Taille	Hauteur de ligne
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

Ne combinez pas l'ajustement à l'échelle avec des hauteurs de ligne personnalisées définies indépendamment ailleurs dans un audit. Le suivi et la hauteur de ligne ne peuvent être ajustés qu'à l'intérieur de la valeur que le palier correspondant fournit déjà, de sorte que les deux règles ne se contredisent jamais.

Type de bouton

Boutons principaux : text-base (16px), semi-gras.
Boutons d'en-tête plus petits : text-sm (14px), semi-gras.

B2. Espacement

Seulement ces valeurs. Rien entre elles, rien en dehors d'elles.

Jeton	Valeur
Espacement-0	0
Espacement-25	2px
Espacement-50	4px
Espacement-75	8px
Espacement-100	12px
Espacement-200	16px
Espacement-300	24px
Espacement-400	32px
Espacement-500	40px
Espacement-600	48px
Espacement-700	64px
Espacement-800	80px
Espacement-900	96px

Boutons principaux : 8px de remplissage vertical, 12px de remplissage horizontal.

B3. Rayon de coin

Utilisez uniquement les valeurs de rayon de Tailwind.

Formule de rayon imbriqué. Lorsqu'une forme se trouve à l'intérieur d'une autre forme et que l'espace entre elles est inférieur à 32px :

rayon intérieur = rayon extérieur − espace

Appliquez ceci uniquement lorsque le résultat est supérieur à 2. En dessous, laissez la forme intérieure carrée ou inchangée.

Exemple : une carte extérieure avec rounded-2xl (16px) avec 8px de remplissage interne donne à l'élément intérieur un rayon de 8px (rounded-lg).

B4. Bordures et arrière-plans

N'appliquez jamais une bordure sur un seul côté d'une carte. Les bordures font tout le tour ou pas du tout.
N'utilisez jamais de dégradés dans les arrière-plans. Les arrière-plans sont unis.

Couleurs d'arrière-plan en mode sombre

Utilisez uniquement celles-ci :

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. Section héros

Couleur du titre

Thème sombre : dégradé de gauche à droite sur le texte du titre, #FFFFFF → #9B9B9B.
Thème clair : dégradé de gauche à droite sur le texte du titre, #000000 → #666666.

C'est le seul endroit où les dégradés sont utilisés, et uniquement sur le texte, jamais sur l'arrière-plan.

Mise en page

Le titre et le sous-titre ont tous deux une largeur maximale de 680px.
Lisez le texte du titre et insérez des sauts de ligne à des endroits significatifs.
Ne coupez jamais une ligne d'une manière qui coupe une phrase de façon maladroite ou qui rend la phrase plus difficile à lire. Coupez là où la pensée se coupe.

B6. Icônes

À utiliser : Phosphor, Solar ou Iconamoon.

À ne jamais utiliser : Material Icons, Material Symbols.

B7. Chorégraphie de mouvement (dynamique des fluides)

N'utilisez jamais les transitions par défaut. Tout mouvement simule la masse et la physique des ressorts du monde réel via des courbes de Bézier cubiques personnalisées.

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Navigation fluide en îlot

État fermé. La barre de navigation est une pilule de verre flottante détachée du haut : mt-6, mx-auto, w-max, rounded-full.

Morphisme du hamburger. Au clic, les lignes du hamburger tournent et se traduisent de manière fluide en un X parfait en utilisant rotate-45 et -rotate-45 avec un positionnement absolu. Elles ne doivent jamais simplement disparaître.

Expansion modale. Le menu s'ouvre comme une superposition pleine écran avec un effet de verre prononcé : backdrop-blur-3xl bg-black/80 ou bg-white/80.

Révélation masquée échelonnée. Les liens de navigation dans l'état développé apparaissent progressivement et glissent vers le haut depuis une boîte invisible, translate-y-12 opacity-0 se résolvant en translate-y-0 opacity-100, échelonnés par élément avec delay-100, delay-150, delay-200, et ainsi de suite.

Interpolation de défilement

Les éléments n'apparaissent jamais statiquement au chargement. En entrant dans la fenêtre d'affichage, ils exécutent une légère et lourde apparition progressive :

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

sur 800 ms ou plus.

Pour les révélations pilotées par JavaScript, utilisez IntersectionObserver ou whileInView de Framer Motion. N'utilisez jamais window.addEventListener('scroll') — cela provoque des reflux continus et tue les performances mobiles.

B8. Réalisme du contenu

Ne livrez jamais de contenu de remplissage. Voici les signes qu'une page a été générée plutôt que fabriquée.

Pas de Lorem Ipsum. Rédigez un vrai brouillon de copie.
Pas de "Jean Dupont". Utilisez des noms diversifiés et réalistes.
Pas de marques génériques comme "Acme Corp", "Nexus" ou "SmartFlow". Inventez des noms contextuels et crédibles.
Pas de chiffres ronds fictifs comme 99.99%, 50%, $100.00. Utilisez des données organiques : 47.2%, $99.00, +1 (312) 847-1928.
Pas de clichés IA. Jamais "Élevez", "Sans couture", "Libérez", "Nouvelle génération", "Changeur de jeu", "Plongez", "Tapisserie" ou "Dans le monde de".
En-têtes en casse de phrase, pas de Titre En Cas Sur Tout.
Voix active. "Nous n'avons pas pu enregistrer vos modifications", pas "Des erreurs ont été commises".
Pas de points d'exclamation dans les messages de succès, et pas de "Oups !" dans les erreurs. Soyez direct : "La connexion a échoué. Veuillez réessayer."
Avatars uniques par personne, et dates de billets de blog variées.

B9. États

Chaque élément interactif est livré avec son ensemble d'états complet :

Survol — changement d'arrière-plan, légère échelle ou translation
Actif — scale(0.98) ou translateY(1px) pour un retour physique
Focus — un anneau de focus visible. Exigence d'accessibilité, pas facultative.
Chargement — squelettes de chargement en forme de la mise en page réelle, pas de spinners circulaires
Vide — une vue "pour commencer" composée, jamais un panneau vide
Erreur — en ligne et spécifique. Jamais window.alert().

Pas de liens morts. Un bouton pointant vers # est soit lié, soit visuellement désactivé. La page actuelle doit être indiquée dans la navigation.

B10. Exigences de livraison

Les choses qui sont oubliées et qui donnent l'impression qu'une page n'est pas finie :

Liens vers la politique de confidentialité et les conditions d'utilisation dans le pied de page
Une page 404 personnalisée et de marque
Validation de formulaire côté client pour le format d'email et les champs obligatoires
Un lien "Passer au contenu" pour les utilisateurs de clavier
Consentement aux cookies là où la juridiction l'exige
Un favicon de marque
Balises <title>, méta-description, og:image et balises de partage social
Texte alternatif sur chaque image significative
HTML sémantique : <nav>, <main>, <article>, <aside>, <section>
Un moyen de revenir depuis chaque page

B11. Section de révélation du slogan (obligatoire)

Chaque page d'atterrissage inclut une section en gros caractères énonçant l'avantage principal ou le slogan, séparée du héros. Elle se trouve plus bas sur la page comme un moment à part entière, pas empilée directement sous le héros.

Copie

Minimum deux lignes de texte.
Un énoncé d'avantage ou un slogan, écrit dans le ton de la partie A5, pas un titre de section générique.

Typographie

Taille text-4xl à text-6xl selon le nombre de lignes, en suivant l'échelle de type de la partie B1.
Largeur maximale plafonnée comme le héros, de sorte que les lignes se coupent à des points significatifs conformément à la partie B5.

Animation

Le texte commence dans un ton subtil et atténué, environ 25 à 35 % d'opacité de la couleur de texte de base du thème.
Lorsque la section défile dans la vue, chaque mot passe individuellement de ce ton atténué à la couleur de texte complète, dans l'ordre de lecture.
Les mots s'activent un par un lorsqu'ils franchissent une ligne de déclenchement, pas tout le bloc qui bascule en même temps. La transition utilise la courbe d'assouplissement personnalisée de la partie B7, jamais une atténuation linéaire.
Implémentez avec IntersectionObserver par mot, ou un seul écouteur de défilement limité via requestAnimationFrame. Jamais un scroll non limité.

B12. Écran de chargement (obligatoire)

Avant que la page ne soit prête, affichez un écran de chargement plein écran.

Comportement

Couvre toute la fenêtre d'affichage.
Affiche un logo de marque ou une marque de l'entreprise.
Optionnellement, une courte phrase d'accroche ou indicateur de progression.
Disparaît en fondu dès que la page est entièrement rendue (onLoad du contenu principal ou DOMContentLoaded).
Ne reste jamais bloqué. Si le contenu met plus de 4 secondes à se charger, le fondu se produit quand même.

Mise en page

Centré, couche de fond unie avec la couleur de fond du thème (sombre ou clair selon la configuration).
Logotype ou icône à text-6xl ou plus, suivie du nom de l'entreprise en text-2xl ou text-3xl, semi-gras.
Aucun spinner de chargement visible. L'écran de chargement est un écran de présentation, pas une roue de progression.

B13. Composants et UI

Tous les composants (boutons, cartes, formulaires, modales, listes) doivent suivre les règles de typographie, d'espacement et de rayon ci-dessus. Aucune exception, sauf si l'invite de l'utilisateur l'emporte explicitement.

Boutons

Remplissage : Spacing-75 (8px) verticalement, Spacing-100 (12px) horizontalement. Pas de rembourrage variable.
Rayon : rounded-xl (12px) par défaut. rounded-lg (8px) pour les petits boutons. Pas de rounded-full sauf pour les actions de type pilule (par exemple, fermeture de badge).
Typographie : text-base (16px) semi-gras pour les boutons principaux. text-sm (14px) pour les boutons secondaires ou d'en-tête.
États : survol, actif, focus par B9.

Cartes

Rayon : rounded-2xl (16px) par défaut. rounded-xl (12px) pour les variantes plus petites.
Remplissage : Spacing-400 (32px) minimum à l'intérieur. Spacing-300 (24px) pour les cartes denses.
Bordures : entièrement autour ou pas du tout par B4.

Formulaires

Champs : remplissage Spacing-200 (16px) sur tous les côtés. Rayon rounded-xl (12px).
Étiquettes : text-sm (14px), semi-gras.
Messages d'erreur : texte text-sm (14px), rouge, en ligne sous le champ. Pas de fenêtre contextuelle.

Navigation

Liens : text-sm (14px), graisse normale. Survol : léger changement de couleur ou soulignement.
Pas de soulignement par défaut. Utilisez la couleur ou la graisse pour indiquer la page active.

PARTIE C — Flux de travail de construction

C1. Commandes et outils

Framework UI : Tailwind CSS, avec les jetons ci-dessus.
Bibliothèque de composants : Aucune. Construisez des composants à partir de zéro ou étendez des primitives de base (par exemple, Button, Card).
Générateur de site : Next.js, Remix, ou HTML statique. Ne présumez pas d'un framework sans demande.
Gestion d'état : React Context ou Zustand si nécessaire. Évitez Redux pour des pages simples.

C2. Processus de construction

Accueil (Partie A1) — Recueillez les exigences.
Structure (Partie A2) — Esquissez les sections.
Mise en page (Partie A3) — Choisissez un modèle.
Copie (Partie A5) — Rédigez tous les textes.
Maquette (Partie B) — Appliquez les règles visuelles.
Contenu (Partie B8) — Remplissez avec du contenu réaliste.
Animations (Partie B7) — Ajoutez du mouvement.
États (Partie B9) — Gérez tous les états des composants.
SEO (Partie A7) — Balises, méta-description, schéma.
Test et révision — Vérifiez les pièges de la partie A8.

C3. Révision et audit

Avant de finaliser, parcourez cette liste de contrôle :

ANNEXE — Référence rapide

Règle	Valeur
Polices	Geist, Manrope, Poppins, Geist Mono
Aucune police en italique	Obligatoire
Poids max	Semi-gras ou gras
Espacement	Jetons 0 à 900
Rayon	Échelle Tailwind, formule imbriquée
Arrière-plans	Unis, pas de dégradés
Icônes	Phosphor, Solar, Iconamoon
Animation	`cubic-bezier(0.32,0.72,0,1)`
Appel à l'action	Un seul principal
Contenu	Réaliste, sans remplissage
Écran de chargement	Obligatoire, plein écran
Section de révélation du slogan	Obligatoire, milieu de page

Demander à votre IA préférée

Documentation