Conception de Pages d'Atterrissage

Que fait Conception de Pages d'Atterrissage ?

Aperçu

Créez des pages d'atterrissage qui convertissent ET captivent. Cette compétence combine une structure axée sur la conversion avec 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 dollars 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 doit ressembler à une autre, 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 réel de ce monde que cette marque serait ?

Pas « quelle industrie » - une chose spécifique et réelle. Un konbini à 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 70.

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é. Bienvenu. Intrigué. Confiant.

Q3 : Choisissez DEUX influences inattendues à faire entrer en collision :

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

Q4 : Pour quoi cette page ne devrait-elle JAMAIS être prise ?

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

Étape 2 : Inventez l'Esthétique (Ne Cherchez Pas - Créez)

Sur la base des réponses, CRÉEZ une ambiance unique en décidant :

INVENTION DE 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 Q1 ?
• Extrayez 3-4 couleurs qui semblent authentiques par rapport à cette référence
• Inventez des codes hexadécimaux spécifiques fraîchement - 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 (Faites correspondre la voix à la collision)

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

INVENTION DE MISE EN PAGE (Dérivez de l'espace physique)

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

INVENTION DE MOUVEMENT (Faites correspondre l'émotion)

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

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

Avant de coder, écrivez ceci explicitement :

NOM D'AMBIANCE : [Inventez un nom de 2-3 mots]
RÉFÉRENCE : [Le lieu/objet de Q1]
ÉMOTION : [De Q2]
COLLISION : [De Q3]
ANTI-MODÈLES : [De Q4]

COULEURS :
- Primaire : [hex] - [pourquoi cette couleur]
- Secondaire : [hex] - [pourquoi]
- Arrière-plan : [hex] - [pourquoi]
- Accent : [hex] - [pourquoi]
- Nom de la palette : [nom évocateur]

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

MISE EN PAGE :
- Densité : [peu dense/équilibré/dense]
- Formes : [tranchantes/arrondies/organiques/mixte]
- Élément signature : [un choix de mise en page inhabituel]

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

JOKER :
- Un détail inattendu qui ne « correspond » pas mais qui le rend mémorable

Étape 4 : Le Contrôle 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 suis PAS revenu par défaut à mes polices « confortables » (vérifiez : est-ce que j'utilise Inter ? Nunito ? Space Grotesk ? Si oui, trouvez autre chose)
• La collision de Q3 est réellement visible dans mes choix
• Quelqu'un ne pourrait PAS confondre ceci avec mes pages d'atterrissage précédentes
• J'ai inclus un joker 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 prendre pour : « Une appli de méditation, tout ce qui est fantaisiste, la tech startup-bro »

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

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

COULEURS :
- Primaire : #1a1a1a - le noir des portes de train
- Secondaire : #f5f5f0 - béton du quai, usé lisse
- Arrière-plan : #fafaf8 - blanc sous lumière fluorescente
- Accent : #e60012 - rouge 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 : Tranchantes avec des exceptions arrondies intentionnelles (comme les fenêtres de train)
- Élément signature : Bandes horizontales fortes qui divisent les sections comme des horaires de train

MOUVEMENT :
- Niveau : Subtil mais précis
- Animation signature : Les éléments glissent du côté comme des trains arrivant - horizontaux, lisses, avec un timing exact

JOKER :
- Un élément utilise une superposition de texture semblable à du tissu - la collision haute couture

---

Amorces d'Inspiration (Quand Vous Êtes Bloqué sur Q1)

Espaces : Marché de nuit à Bangkok | Musée vide à la fermeture | Salon d'aéroport à 4h du matin | Magasin de disques vintage | Salle d'attente d'hôpital | Sol de casino | Serre en hiver | Quai de métro | Dôme d'observatoire | Usine abandonnée | Intérieur de yacht de luxe | Laverie automatique 24h/24 | Salle des livres rares de bibliothèque | Atelier de carrosserie | Module de station spatiale

Objets : Synthétiseur des années 80 | Instruments chirurgicaux | Bagages vintage | Moto de course | Boussole ancienne | Métier à tisser industriel | Enseigne au néon | Machine à écrire | Verrerie scientifique | Livre relié en cuir | Circuit imprimé | Vaisselle en porcelaine

Époques/Mouvements : Constructivisme soviétique | Design Memphis | Style international suisse | Art nouveau | Bauhaus | De Stijl | Architecture Googie | Streamline Moderne | Brutalisme | Métabolisme japonais | Modernisme scandinave | Futurisme italien

---

Les Règles Anti-Convergence

1. Aucune mémoire de code hexadécimal - Générez les couleurs fraîchement à partir de la référence, ne vous souvenez pas de « mon bleu habituel »
2. Rotation de police requise - Impossible d'utiliser la même police d'affichage dans des projets consécutifs
3. La collision doit se voir - Si quelqu'un ne peut pas voir LES DEUX influences de Q3, insistez davantage
4. Le joker est obligatoire - Chaque ambiance a besoin d'un élément qui ne « correspond » pas mais qui le rend unique
5. Nommez-le - 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 « fais-moi une page d'atterrissage » sans contexte, demandez :

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

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

---

La Règle du 50%

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

Composition des Sections (De Haut en Bas)

1. Section Héros (Focus Principal)

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

• Titre : Accroche percutante axée sur les avantages (référencez la Galerie H1 pour vous inspirer)
• Sous-titre : Contexte d'accompagnement, 1-2 phrases maximum
• Bouton(s) d'Appel à l'Action : Action principale + secondaire optionnelle
• Preuve Sociale : Bandeau de logos, témoignages ou badges de confiance
• Élément Visuel : Photo du produit, illustration ou arrière-plan animé

Variations du Héros :

• Mise en page divisée (texte à gauche, visuel à droite)
• Centré avec des éléments flottants
• Arrière-plan à fond perdu avec texte superposé
• Asymétrique avec des éléments décoratifs

2. Section Fonctionnalités/Avantages

Montrez ce que le produit fait. Options :

• Grille Bento : Cartes dans une mise en page asymétrique (popularisé par Apple)
• Lignes Alternées : Image + texte, en alternant les côtés
• Grille d'icônes : Icônes simples avec de courtes descriptions
• Cartes Interactives : États de survol, micro-animations

3. Section de Preuve Sociale

Construisez la confiance grâce à :

• Carrousel de logos (animation de bandeau défilant)
• Cartes de témoignages avec photos
• Statistiques/métriques avec compteurs animés
• Extraits d'études de cas

4. Section Comment Ça Marche

Explication étape par étape :

• Étapes numérotées (01, 02, 03 motif ajoute de la sophistication)
• Défilement fixe avec dévoilement progressif
• Visualisation de chronologie ou de diagramme de flux

5. Section Tarifs (le cas échéant)

• Comparaison de 2-3 niveaux
• Niveau « recommandé » mis en évidence
• Tableau comparatif des fonctionnalités
• Accordéon FAQ en dessous

6. Section Appel à l'Action

Dernière poussée à la conversion :

• Répétez la proposition de valeur
• Titre fort
• Action unique ciblée
• Éléments d'urgence (si authentiques)

7. Pied de Page

• Liens de navigation
• Icônes sociales
• Liens juridiques
• Inscription à la newsletter (optionnelle)

Principes Anti-AI-Slop

Icônes : Évitez Lucide (Trop Utilisé)

Utilisez à la place :

• Iconify Solar : Styles multiples (contour, brisé, duo-ton)
• Heroicons : Quand vous avez besoin d'une simplicité à la Apple
• Phosphor : Système de poids flexible
• SVG personnalisés : Pour la différenciation de marque

Polices : Supprimez Inter/Roboto

Alternatives distinctives :

• Affichage : Newsreader, Playfair Display, Space Grotesk, Clash Display
• Corps : Outfit, Plus Jakarta Sans, Manrope, Satoshi
• Mono : JetBrains Mono, IBM Plex Mono, Fira Code

Couleurs : Pas de Dégradés Violets

Alternatives audacieuses :

• Bleu marine profond + accent électrique
• Neutres chauds + une seule couleur d'appoint
• Monochromatique avec profondeur tonale
• Mode sombre avec accents néon
• Palettes terreuses/organiques

Mises en Page : Brisez la Grille

• Éléments qui se chevauchent
• Sections diagonales
• Espacement asymétrique
• Éléments du héros qui sortent du conteneur
• Espace négatif comme élément de design

Vocabulaire d'Animation

Animations d'Entrée

• fade-in : Transition d'opacité simple
• blur-in : Commence flou, se nettoie
• slide-in : Entrée basée sur la direction
• scale-in : Passe de petit à taille réelle
• stagger : Dévoilement séquentiel des éléments enfants

Animations Continues

• marquee : Défilement horizontal infini (logos, témoignages)
• beam : Lumière voyageant le long d'un chemin/contour
• pulse : Respiration subtile d'échelle/d'opacité
• float : Mouvement doux de haut en bas
• rotate : Rotation continue (icônes, décorations)

Animations Interactives

• hover-lift : Translation Y subtile + ombre
• hover-glow : Changement de couleur du contour/ombre
• hover-reveal : Apparition d'un élément caché
• click-ripple : Retour d'information de style Material

Éléments Décoratifs

• Lignes de grille verticales (basées sur la taille du conteneur)
• Nouilles/connecteurs courbes entre les éléments
• Orbes/dégradés d'arrière-plan
• Superposition de texture de grain/bruit
• Formes géométriques (cercles, rectangles aux coins arrondis)

Ressources de Design

Inspiration pour le Héros

• Superhero (superhero.design) : Sections héros organisées
• Dribbble : Recherchez « hero section », « landing page »
• Awwwards : Designs primés

Modèles de Sections

• Mobin : Vrais sites web avec décomposition des sections
• Bento Grids : Inspiration pour la mise en page des cartes
• CTA Gallery : Modèles d'appels à l'action

Typographie

• Google Fonts : Polices gratuites, accessibles à l'IA
• Fontshare : Polices gratuites de qualité
• H1 Gallery : Inspiration pour les titres

Icônes et Logos

• Iconify : API d'icônes unifiée (Solar, Heroicons, etc.)
• Simple Icons : Logos de marques (SVG)
• Heroicons : Ensemble d'icônes de Tailwind

Flux de Travail de Mise en Œuvre

Phase 1 : Recherche & Collecte

1. Rassemblez 5 à 10 captures d'écran de héros comme maquettes
2. Identifiez les modèles de sections nécessaires
3. Choisissez l'ensemble d'icônes et l'association de polices
4. Définissez la palette de couleurs

Phase 2 : Développement du Héros

1. Générez le héros à partir de la meilleure capture d'écran de référence
2. Itérez : changez les couleurs, les polices, les mises en page
3. Ajoutez des animations (beam, fade-in, etc.)
4. Ajoutez des éléments décoratifs (nouilles, grilles, chiffres)
5. Affinez jusqu'à ce que ce soit distinctif

Phase 3 : Construction des Sections

1. Ajoutez les sections une par une (pas toutes à la fois)
2. Référencez des composants/captures d'écran spécifiques par section
3. Maintenez la cohérence des couleurs/polices du héros
4. Ajoutez des animations spécifiques à chaque section

Phase 4 : Polissage

1. Corrigez les points de rupture réactifs (mobile, tablette, bureau)
2. Remplacez les images factices par des ressources réelles/de qualité
3. Optimisez les animations pour les performances
4. Testez tous les éléments interactifs

Phase 5 : Présentation

1. Créez une capture d'écran de couverture avec une mise en page sur toile infinie
2. Montrez le héros bien en évidence
3. Incluez les vues mobile et bureau
4. Ajoutez un arrière-plan subtil (dégradé flou, motif)

Modèles d'Invites

Génération du Héros

Créez une section héros pour [TYPE DE PRODUIT].
Changez le texte, les noms et les chiffres pour correspondre à [MARQUE].
Utilisez les icônes Iconify Solar (style duo-ton).
Utilisez [POLICE] pour les titres.
Ajoutez des lignes de grille verticales de la taille du conteneur.
Ajoutez des indicateurs d'étape 01, 02, 03 pour la sophistication.
Utilisez [COULEUR] comme primaire, mode sombre.

Ajout de Section

Adaptez une nouvelle section [TYPE DE SECTION].
Faites correspondre la palette de couleurs et la typographie du héros.
Utilisez l'animation de bandeau défilant pour les logos.
Ajoutez une animation d'entrée avec fondu et flou.
Gardez le héros exactement tel quel.

Amélioration de l'Animation

Ajoutez une animation beam au contour du bouton principal.
Le faisceau doit faire 1px, voyageant en continu autour de la forme de pilule.
Ajoutez un effet de survol-lift subtil aux cartes de fonctionnalités.

Invites Négatives (Ce qui NE DOIT PAS être changé)

Ne changez pas la section héros.
Gardez la barre de navigation exactement telle quelle.
Ne modifiez pas les animations existantes.

Liste de Contrôle Qualité

Distinction Visuelle

• Pas de dégradés violets génériques
• Ensemble d'icônes non par défaut (pas Lucide)
• Association de polices distinctive
• Au moins un élément « mémorable »
• Système de couleurs cohérent via des variables CSS

Qualité Technique

...

[le contenu a été tronqué pour la traduction]