Conception de Page d'Atterrissage

Aperçu

Créez des pages d'atterrissage qui convertissent ET captivent. Cette compétence allie une structure axée sur la conversion à un design visuel distinctif pour créer des pages qui se démarquent dans un monde saturé d'IA. L'objectif : des pages d'une valeur de 50 à 100 $ dont vous seriez fier de vendre.

OBLIGATOIRE : Découverte de l'Ambiance (À faire en premier)

AVANT d'écrire le moindre code, vous DEVEZ exécuter le processus de Découverte de l'Ambiance. Ce n'est pas une table de correspondance - c'est une invite créative qui génère une direction esthétique UNIQUE à chaque fois.

L'objectif : Aucune page d'atterrissage ne devrait se ressembler, même pour des produits similaires.

Le Processus de Découverte de l'Ambiance

Posez ces questions à l'utilisateur, puis SYNTHÉTISEZ une direction unique. Ne vous contentez pas de faire correspondre les réponses à des préréglages.

Étape 1 : Recueillir le Contexte (Posez ces questions)

Q1 : Quel est un lieu ou un objet du monde réel que cette marque incarnerait ?

Pas "quelle industrie" - une chose spécifique et concrète. Un konbini de Tokyo à 2h du matin. La cuisine d'une grand-mère. Un parking brutaliste. Un récif corallien. Le cockpit d'un 747. Un marché aux puces à Marrakech. Un studio d'enregistrement des années 1970.

Q2 : Quelle est l'UNIQUE émotion que quelqu'un devrait ressentir dans les 3 premières secondes ?

Choisissez UNE : Calme. Énergisé. Curieux. Confiant. Ravi. Impressionné. Rebelle. Nostalgique. Inspiré. Amusé. Sophistiqué. Accueilli. Intrigué. Sûr de lui.

Q3 : Choisissez DEUX influences inattendues à faire se rencontrer :

Exemples : "emballage médical + graphisme de skateboard", "tableurs + art de rue", "hôtel de luxe + fanzine punk", "centre de contrôle de mission NASA + jardin d'enfants", "konbini japonais + bibliothèque victorienne"

Q4 : Avec quoi cette page ne devrait-elle JAMAIS être confondue ?

Nommez 2 à 3 choses spécifiques à éviter activement. "Un projet crypto", "Une application bien-être", "Quelque chose fait par une banque", "Tout ce qui a des dégradés de violet"

Étape 2 : Inventer l'Esthétique (Ne pas chercher - Créer)

Basé sur les réponses, CRÉEZ une ambiance unique en décidant :

INVENTION DES COULEURS (N'utilisez pas de palettes mémorisées - dérivez du lieu/de l'objet)

Quelles couleurs existent dans ce lieu/objet réel de la Q1 ?
Extrayez 3-4 couleurs qui semblent authentiques par rapport à cette référence
Inventez des codes hexadécimaux spécifiques à neuf - ne réutilisez pas les codes de projets précédents
Nommez votre palette de manière évocatrice (pas "bleu et orange" mais "Épicerie de Minuit" ou "Matin de la Ceinture de Rouille")

INVENTION TYPOGRAPHIQUE (Faire correspondre la voix à la collision)

À quoi ressemblerait le texte dans cet endroit ?
Trouvez une police d'affichage qui incarne la collision de la Q3
Ne vous rabattez pas sur vos choix habituels - parcourez Google Fonts avec un œil neuf
Considérez : le poids, la largeur, le contraste, les particularités

INVENTION DE LA MISE EN PAGE (Dérivée de l'espace physique)

Comment l'espace est-il organisé dans le lieu de la Q1 ?
Est-il exigu ou spacieux ? En grille ou organique ? Vertical ou horizontal ?
Quel choix de mise en page inattendu incarnerait la collision de la Q3 ?

INVENTION DU MOUVEMENT (Correspond à l'émotion)

Comment l'émotion de la Q2 se déplace-t-elle ?
Calme = à peine perceptible. Énergisé = cinétique. Sophistiqué = lent et délibéré.
Quel est le MOUVEMENT signature unique qui définit cette page ?

Étape 3 : Rédigez votre Spécification d'Ambiance

Avant de coder, écrivez cela explicitement :

NOM DE L'AMBIANCE : [Inventez un nom de 2-3 mots]
RÉFÉRENCE : [Le lieu/l'objet de la Q1]
ÉMOTION : [De la Q2]
COLLISION : [De la Q3]
ANTI-PATRONS : [De la Q4]

COULEURS :
- Primaire : [hex] - [pourquoi cette couleur]
- Secondaire : [hex] - [pourquoi]
- Fond : [hex] - [pourquoi]
- Accent : [hex] - [pourquoi]
- Nom de la palette : [nom évocateur]

TYPOGRAPHIE :
- Affichage : [nom de la police spécifique] - [pourquoi elle convient]
- Corps : [nom de la police spécifique] - [pourquoi]
- Caractère : [décrire la voix]

MISE EN PAGE :
- Densité : [clairsemée/équilibrée/dense]
- Formes : [angulaires/arrondies/organiques/mélangées]
- Élément signature : [un choix de mise en page inhabituel]

MOUVEMENT :
- Niveau : [immobile/subtil/modéré/dynamique/chaotique]
- Animation signature : [une animation spécifique qui définit cette page]

ÉLÉMENT SURPRISE :
- Un détail inattendu qui ne "correspond" pas mais qui le rend mémorable

Étape 4 : Le Test de Fraîcheur

Avant de continuer, vérifiez :

Je n'ai PAS réutilisé les codes hexadécimaux de mes 3 derniers projets
Je ne me suis PAS rabattu sur mes polices "confortables" (vérifiez : est-ce que j'utilise Inter ? Nunito ? Space Grotesk ? Si oui, trouvez autre chose)
La collision de la Q3 est réellement visible dans mes choix
Quelqu'un ne pourrait PAS confondre cela avec mes pages d'atterrissage précédentes
J'ai inclus un élément surprise qui me surprend même moi

Exemple de Découverte d'Ambiance

Q1 - Lieu/Objet : "Une gare japonaise à l'heure de pointe"

Q2 - Émotion : "Confiant"

Q3 - Collision : "Signalétique de transport + haute couture"

Q4 - Ne jamais confondre avec : "Une application de méditation, quoi que ce soit de fantaisiste, le style tech startup"

Spécification d'Ambiance Générée :

NOM DE L'AMBIANCE : Piste Shinjuku
RÉFÉRENCE : Gare japonaise à l'heure de pointe
ÉMOTION : Confiant
COLLISION : Signalétique de transport + haute couture
ANTI-PATRONS : Pas de dégradés doux, pas d'illustrations ludiques, pas de formes arrondies amicales

COULEURS :
- Primaire : #1a1a1a - le noir des portes de train
- Secondaire : #f5f5f0 - le béton du quai, usé et lisse
- Fond : #fafaf8 - le blanc de la lumière fluorescente
- Accent : #e60012 - le rouge de la ligne JR, qui attire l'attention
- Nom de la palette : "Bord de Quai"

TYPOGRAPHIE :
- Affichage : Darker Grotesque - confiant, légèrement condensé, touche européenne
- Corps : Noto Sans JP - utilitaire propre, inspiré du transport
- Caractère : Autoritaire mais pas froid. Clair. Directionnel.

MISE EN PAGE :
- Densité : Riche mais organisée - comme un plan de gare
- Formes : Angulaires avec des exceptions arrondies intentionnelles (comme les fenêtres de train)
- Élément signature : Des bandes horizontales fortes qui divisent les sections comme les horaires de train

MOUVEMENT :
- Niveau : Subtil mais précis
- Animation signature : Les éléments glissent depuis le côté comme des trains qui arrivent - horizontaux, fluides, avec un timing exact

ÉLÉMENT SURPRISE :
- Un élément utilise une superposition de texture semblable à du tissu - la collision haute couture

Amorces d'Inspiration (Quand on est bloqué sur Q1)

Les Règles Anti-Convergence

Pas de mémoire de code hexadécimal - Générez des couleurs fraîches à partir de la référence, ne rappelez pas "mon bleu habituel"
Rotation de polices obligatoire - Impossible d'utiliser la même police d'affichage dans des projets consécutifs
La collision doit se voir - Si quelqu'un ne peut pas voir LES DEUX influences de la Q3, insistez davantage
L'élément surprise est obligatoire - Chaque ambiance a besoin d'un élément qui ne "correspond" pas mais qui la rend unique
Nommez-la - Une ambiance sans nom devient générique. Une ambiance nommée a une identité.

Questions Rapides de Contexte (Version Minimale)

Si l'utilisateur dit simplement "faites-moi une page d'atterrissage" sans contexte, demandez :

"Quel est le lieu ou l'objet qui capture l'énergie de cette marque ?"
"Quelle émotion devrait dominer ?"
"À quoi cela ne devrait-il JAMAIS ressembler ?"

Ensuite, synthétisez une ambiance à partir de ces trois réponses.

OBLIGATOIRE : Stratégie de Copie (À faire avec la Découverte de l'Ambiance)

Exécutez cela EN PARALLÈLE avec la Découverte de l'Ambiance. La Découverte de l'Ambiance vous donne l'apparence. La Stratégie de Copie vous donne les mots. Les deux doivent être faits avant tout code.

L'Équation de Conversion

Chaque décision de copie découle de ceci :

Taux d'Achat = Désir - (Effort + Confusion)

Augmenter le désir → communiquer la valeur clairement et spécifiquement
Diminuer l'effort → concision, structure facile à parcourir, actions suivantes évidentes
Diminuer la confusion → dire exactement ce que c'est, rendre les boutons immanquables

Si vous êtes bloqué sur une décision de copie, demandez : "Cela augmente-t-il le désir ou diminue-t-il l'effort/la confusion ?"

Étape 1 : Découverte des Objections

Avant d'écrire le moindre titre, identifiez les objections d'achat. Demandez à l'utilisateur :

"Qu'est-ce qui a presque empêché vos clients d'acheter ?" "Pourquoi les non-clients n'ont-ils pas encore acheté ?"

Catégories d'objections courantes :

"Je n'ai pas les compétences/le temps pour ça"
"Cela ne fonctionnera pas pour ma situation spécifique"
"C'est trop cher pour ce que ça offre"
"Je n'ai pas encore assez confiance"
"Je ne comprends pas ce que ça fait réellement"

Notez les 3 principales objections. Celles-ci guideront votre accroche de titre, le texte des fonctionnalités et le cadrage de l'appel à l'action.

Étape 2 : Formule du Titre

Chaque titre principal suit : Proposition de Valeur + Accroche

La proposition de valeur doit passer ce test décisif :

Si un visiteur voit UNIQUEMENT le titre et rien d'autre, saura-t-il exactement ce que vous vendez ?

❌ "Améliorez votre flux de travail" (blabla d'entreprise - flux de travail pour quoi ?) ❌ "L'avenir de la productivité" (ne dit rien de concret) ✅ "Courses livrées en 1 heure" (spécifique, concret, clair) ✅ "Concevez des sites web visuellement - sans code requis" (ce que ça fait + objection clé traitée)

L'accroche est de deux types :

Type A — Affirmation audacieuse et spécifique (déclenche la curiosité) :

"Réduisez le temps de déploiement de 4 heures à 12 minutes"
"10 000 équipes ont livré plus rapidement le mois dernier"

Type B — Objection traitée (supprime la barrière d'achat n°1) :

"Aucune carte de crédit requise" (traite l'objection de confiance)
"Fonctionne avec vos outils existants" (traite l'objection du coût de changement)
"Configuration en 5 minutes" (traite l'objection d'effort)

Utilisez votre objection principale de l'étape 1 pour choisir le type d'accroche.

Étape 3 : Règles du Sous-titre

Le sous-titre fait exactement deux choses :

Explique ce qu'est le produit (si le titre était axé sur les avantages)
Explique comment l'affirmation audacieuse est possible (si le titre a fait une affirmation)

Max : 1-2 phrases. Restez léger. Si vous avez besoin de trois phrases, votre titre ne fait pas assez son travail.

Étape 4 : Structure du Texte des Fonctionnalités

Chaque fonctionnalité obtient exactement trois éléments :

Élément	Règles
En-tête de fonctionnalité	Proposition de valeur courte uniquement. Soyez direct. ❌ "Autonomisez votre équipe" ✅ "Collaboration en temps réel"
Paragraphe de fonctionnalité	Description concise + traite UNE objection critique. Liez aux détails si nécessaire - pas de murs de texte.
Image de fonctionnalité	Montrez le produit EN ACTION. Pour les logiciels : GIFs > captures d'écran > art abstrait. Pour les biens physiques : cas d'utilisation + gros plans de la qualité de fabrication.

Chaque fonctionnalité doit renvoyer à la proposition de valeur dominante du titre. Les fonctionnalités ne sont pas aléatoires - elles sont des preuves pour l'affirmation que vous avez faite au-dessus de la ligne de flottaison.

Étape 5 : Texte de l'Appel à l'Action (CTA)

Les CTA doivent continuer le récit du titre, ne pas être génériques.

❌ "Commencer" / "Demander une démo" / "S'inscrire" (paresseux, sans contexte) ✅ "Trouver de la nourriture près de chez moi" (continue un récit de livraison) ✅ "Commencer à concevoir" (continue un récit d'outil de conception) ✅ "Voir vos économies" (continue un récit financier)

Le texte du bouton CTA doit ressembler à la phrase naturelle qui suit la lecture du titre.

Étape 6 : Stratégie de Preuve Sociale

Si vous avez des clients/une presse notables :

Affichez les logos dans un défilant - crée un FOMO ("tout le monde est déjà au courant")
Mettez en avant des métriques impressionnantes (nombre de clients, chiffre d'affaires traité, etc.)

Si vous n'avez PAS encore de preuve sociale notable (démarrage à froid) :

Proposez un accès gratuit à 3-5 entreprises reconnaissables, puis affichez leurs logos
Utilisez des témoignages spécifiques avec de vrais noms et photos (même d'utilisateurs bêta)
Montrez des statistiques agrégées ("Utilisé par plus de 500 équipes" bat une barre de logo vide)
Envisagez "Comme vu dans" avec toutes les mentions presse, podcasts ou newsletters

Ne simulez pas. Une section de preuve sociale vide est pire que pas de section du tout.

Étape 7 : Routage Multi-Audience

Si votre produit dessert des personas distincts (par exemple, particuliers vs. équipes, développeurs vs. designers) :

Ajoutez un élément "choisissez votre propre aventure" près du haut de la page qui achemine les visiteurs vers les sections pertinentes. Exemples :

Onglets à bascule : "Pour les développeurs" / "Pour les designers"
Titre divisé : "Je suis [rôle A]" / "Je suis [rôle B]"
Pages d'atterrissage segmentées liées depuis le titre

Ne forcez pas tout le monde à passer par le même entonnoir s'ils ont des besoins différents.

Spécification de la Stratégie de Copie

Écrivez ceci en parallèle de votre Spécification d'Ambiance :

3 PRINCIPALES OBJECTIONS :
1. [objection] → traitée dans : [titre/fonctionnalité/CTA]
2. [objection] → traitée dans : [titre/fonctionnalité/CTA]
3. [objection] → traitée dans : [titre/fonctionnalité/CTA]

TITRE :
- Proposition de valeur : [ce que vous vendez, concrètement]
- Type d'accroche : [affirmation audacieuse / objection traitée]
- Titre complet : [le texte réel]
- Test décisif : Quelqu'un saurait-il ce que nous vendons rien qu'avec cela ? [oui/non]

SOUS-TITRE : [1-2 phrases - ce que c'est + comment l'affirmation fonctionne]

TEXTE CTA : [continuation narrative du titre]

PUBLIC : [unique / multi-persona]
- Si multi : [comment nous les acheminons]

La Règle des 50%

Passez 50% de votre temps sur la section titre. C'est l'image de couverture pour les réseaux sociaux, la première impression, l'accroche. Tout le reste découle du fait de bien réussir le titre.

Composition des Sections (De Haut en Bas)

1. Section Titre (Focus Principal)

L'élément qui fait ou défait tout. Doit contenir :

Titre : Proposition de Valeur + Accroche de votre Spécification de Stratégie de Copie (voir ci-dessus). Doit passer le test décisif - si quelqu'un voit UNIQUEMENT cela, sait-il ce que vous vendez ?
Sous-titre : Explique ce que c'est + comment l'affirmation fonctionne. 1-2 phrases max, restez léger.
Bouton(s) CTA : Continuation narrative du titre (pas "Commencer" - voir les règles de Copie CTA ci-dessus). CTA secondaire optionnel.
Preuve sociale : Défilant de logos, témoignages ou badges de confiance. En cas de démarrage à froid, voir la Stratégie de Preuve Sociale ci-dessus.
Élément Visuel : Photo du produit, illustration ou fond animé

Variations du Titre :

Mise en page divisée (texte à gauche, visuel à droite)
Centré avec des éléments flottants
Fond à fond perdu avec texte en superposition
Asymétrique avec des éléments décoratifs

2. Section Fonctionnalités/Avantages

Montrez ce que fait le produit. Chaque fonctionnalité a besoin de trois éléments : en-tête (proposition de valeur courte, pas "Autonomisez/Révolutionnez"

…

[tronqué pour la traduction]

Landing design — Vibe Discovery + anti-AI-slop

Qu'est-ce que Landing design — Vibe Discovery + anti-AI-slop ?

Demander à votre IA préférée

Documentation