Que fait Conception de Pages d'Atterrissage ?

Une page d'atterrissage n'est pas une page d'accueil. Une page d'accueil sert plusieurs intentions. Une page d'atterrissage gagne une seule intention :

une offre → un public → une action principale.

Cette compétence a 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 la Partie A avant de toucher à la Partie B.

Champ d'application

Appliquer à tout travail d'interface utilisateur web : pages d'atterrissage, sites marketing, composants, tableaux de bord, prototypes et revues de conception. Lorsqu'une règle 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 mettre à niveau un site existant plutôt que d'en créer un nouveau, utilisez redesign-existing-projects (github.com/elayadesign/redesign-skill). Elle diagnostique les modèles génériques et se réfère à ce fichier pour chaque valeur concrète.

PARTIE A — Stratégie et structure

A1. Collecte d'informations

Recueillez ces éléments 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'UNIQUE action principale ? (essai, démo, achat, liste d'attente, téléchargement)
Quelle est l'offre, exactement qu'obtiennent-ils ?
Qu'est-ce qui compte comme une conversion ? (clic, inscription, achat)

Public et contexte

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

Preuves et ressources

Points de preuve : logos, témoignages, chiffres, études de cas
Captures d'écran, vidéo de démonstration, GIFs 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, interface 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 principal, 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, bandeau de logos, statistique ou court témoignage
Visuel principal, capture d'écran du produit ou vidéo, ou une illustration forte

Milieu de page (l'argumentation) 6. Problème vers 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 de page (gestion des objections) 10. FAQ, six à douze questions 11. Inversion du risque, essai, annulez à tout moment, garantie 12. Appel à l'action final, identique à celui du haut

Incluez la section obligatoire de révélation du slogan de la B11 quelque part dans l'argumentation 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 dites 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 à haute intention (e-mail 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 à des pages SEO.

A4. Règles de conversion

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

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

Écrire l'avantage en premier. Les fonctionnalités sont ce qu'il fait. Les avantages sont ce que cela signifie pour eux.

Soyez spécifique.

❌ "Gagnez du temps et rationalisez"
✅ "Réduisez vos rapports hebdomadaires de 4 heures à 15 minutes"

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

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

A5. Rédaction

Formules de titres

"{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 "Envoyer". Utilisez "Commencez l'essai gratuit", "Réservez une démo", "Obtenez 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 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
Appel à l'action final

Ne reconstruisez jamais toute la page à chaque itération. Section par section permet de garder le contrôle et les diffs consultables.

A7. SEO et AEO

Ne pas indexer les pages de campagnes publicitaires uniquement ou les offres très limitées dans le temps. Utilisez noindex ou gardez-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 : "rationaliser", "optimiser"
Une longue liste de fonctionnalités sans résultats
Preuve enterrée en bas
Mise en page mobile qui casse 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 type de police par site. N'associez pas deux polices sauf si l'invite le demande explicitement. Geist Mono est autorisé aux côtés d'une police principale uniquement pour le code, les données ou l'interface utilisateur numérique où un espacement fixe est fonctionnellement requis.

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

Règles de copie

Pas de traits d'union dans le texte. N'utilisez pas - à l'intérieur du corps du texte, des titres ou des étiquettes. Réécrivez plutôt la phrase.

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 selon 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 tenant compte de la taille et de 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 de 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.

Texte des boutons

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
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

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

B3. Rayons de bordure

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'écart entre elles est inférieur à 32px :

rayon intérieur = rayon extérieur − écart

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

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

B4. Bordures et arrière-plans

N'appliquez jamais de bordure à 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 du mouvement (dynamique des fluides)

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

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

Navigation flottante en îlot

État fermé. La barre de navigation est une pilule en 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 translatent de manière fluide pour former 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 plein écran avec un effet de verre prononcé : backdrop-blur-3xl bg-black/80 ou bg-white/80.

Révélation masquée décalée. Les liens de navigation à l'intérieur de l'état développé apparaissent et glissent vers le haut depuis une boîte invisible, translate-y-12 opacity-0 se résolvant en translate-y-0 opacity-100, décalé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. Lorsqu'ils entrent dans la fenêtre d'affichage, ils exécutent un fondu vers le haut doux et lourd :

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 reflows continus et tue les performances mobiles.

B8. Réalisme du contenu

N'expédiez jamais de remplissage. Voici les signes qu'une page a été générée plutôt que créée.

Pas de Lorem Ipsum. Écrivez un véritable 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 comme 99.99%, 50%, $100.00. Utilisez des données organiques : 47.2%, $99.00, +1 (312) 847-1928.
Pas de clichés d'IA. Jamais "Élevez", "Transparent", "Libérez", "Nouvelle génération", "Révolutionnaire", "Plongez", "Tapis" ou "Dans le monde de".
Titres en casse de phrase, pas de Titre En Majuscules 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 d'articles 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 mise à l'é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 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

Des choses qui sont oubliées et donnent l'impression qu'une page n'est pas terminée :

Liens vers la politique de confidentialité et les conditions générales dans le pied de page
Une page 404 personnalisée et de marque
Validation de formulaire côté client pour le format de l'e-mail et les champs obligatoires
Un lien "Passer au contenu" pour les utilisateurs de clavier
Consentement aux cookies lorsque 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 chemin de retour depuis chaque page

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

Chaque page d'atterrissage inclut une grande section typographique é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 A5, pas un titre de section générique.

Typographie

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

Animation

Le texte commence dans un ton subtil et atténué, environ 25 à 35 % de l'opacité de la couleur de texte de base du thème.
Au fur et à mesure que la section défile dans la vue, chaque mot transitionne 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 à la fois. La transition utilise la courbe d'assouplissement personnalisée de la B7, jamais un fondu linéaire.
Implémentez avec IntersectionObserver par mot, ou un seul écouteur de défilement limité via requestAnimationFrame. Jamais un écouteur non limité.

Demander à votre IA préférée

Documentation