bear2u/my-skills

Guide des Pages d'Atterrissage V2

Aperçu

Cette compétence permet de créer des pages d'atterrissage distinctives et à fort taux de conversion qui combinent :

• Cadre de conversion éprouvé : 11 éléments essentiels de DESIGNNAS pour des taux de conversion élevés
• Qualité de conception exceptionnelle : Choix esthétiques audacieux qui créent des expériences de marque inoubliables
• Code prêt pour la production : Next.js 14+ avec ShadCN UI, TypeScript et optimisation des performances

Philosophie : Une page d'atterrissage doit convertir les visiteurs ET leur faire se souvenir de votre marque. Les pages génériques et préfabriquées échouent sur ces deux points. Cette compétence garantit que vos pages d'atterrissage sont à la fois fonctionnellement efficaces et visuellement extraordinaires.

Quand Utiliser Cette Compétence

Utilisez cette compétence lorsque les utilisateurs demandent :

• La création de pages d'atterrissage, de pages marketing ou de pages produit
• Des sites web promotionnels basés sur Next.js ou React
• Des pages qui doivent convertir les visiteurs en clients ET se démarquer visuellement
• Des pages marketing professionnelles avec une qualité de conception exceptionnelle
• Des pages d'atterrissage qui évitent les esthétiques génériques de "template"
• Des expériences de marque à la fois optimisées pour la conversion et mémorables

Réflexion sur le Design : Avant de Coder

Avant d'implémenter une page d'atterrissage, engagez-vous sur une direction esthétique AUDACIEUSE qui s'aligne sur la marque et le produit :

1. Comprendre le Contexte

• Objectif : Quel problème ce produit résout-il ? Qui est le public cible ?
• Personnalité de la Marque : Cette marque est-elle ludique, professionnelle, luxueuse, minimaliste, audacieuse, technique ?
• Industrie : Quel langage visuel cette industrie attend-elle (ou devons-nous le briser) ?
• Différenciation : Qu'est-ce qui rend cette marque inoubliable ? Quelle est la CHOSE que les visiteurs retiendront ?

2. Choisir une Direction Esthétique

Choisissez une direction extrême et engagez-vous pleinement. Exemples :

Minimaliste et Raffiné

• Mises en page extrêmement épurées, espaces blancs généreux
• Typographie sophistiquée avec de grands contrastes d'échelle
• Palette de couleurs monochromatique ou limitée (2-3 couleurs max)
• Micro-interactions subtiles, transitions élégantes
• Exemples : Produits de luxe, services professionnels, SaaS premium

Audacieux et Maximaliste

• Couches visuelles riches et complexes
• Animations dynamiques et effets de défilement
• Grilles de dégradés, textures et éléments superposés
• Palettes de couleurs vibrantes avec un contraste élevé
• Exemples : Agences créatives, divertissement, marques jeunesse

Rétro-Futuriste

• Éléments nostalgiques avec une exécution moderne
• Motifs géométriques, accents néon
• Effets de distorsion, lignes de balayage, textures granulaires
• Polices à chasse fixe ou d'affichage avec du caractère
• Exemples : Jeux vidéo, startups technologiques, outils créatifs

Organique et Naturel

• Formes douces et fluides et dégradés
• Couleurs inspirées de la nature (tons terre, pastels)
• Animations lisses imitant le mouvement naturel
• Coins arrondis, ombres douces
• Exemples : Bien-être, durabilité, alimentation

Éditorial et Magazine

• Hiérarchie typographique forte
• Mises en page asymétriques brisant la grille
• Images grandes et percutantes
• Utilisation audacieuse des espaces blancs et des espaces négatifs
• Exemples : Plateformes de contenu, médias, éducation

Brutaliste et Brut

• Mises en page non conventionnelles, "laideur" intentionnelle
• Polices système ou typographie délibérément basique
• Contraste élevé, couleur limitée
• Animations minimales ou inexistantes
• Exemples : Art, mode, marques anti-establishment

CRITIQUE : Choisissez une direction CLAIRE. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous deux - l'essentiel est l'intentionnalité, pas l'intensité. Exécutez votre direction choisie avec précision et cohérence à travers les 11 éléments.

3. Définir Votre Système de Design

Avant de coder, définissez ces décisions fondamentales :

Choix Typographiques

• Police d'Affichage : Choisissez quelque chose de distinctif et de mémorable (PAS Inter, Roboto, Arial ou les polices système)
  • Envisagez : Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  • Ou utilisez Google Fonts à bon escient : Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  • NE JAMAIS converger vers des choix courants - variez les polices entre différents projets
• Police de Corps : Choix raffiné et lisible qui complète la police d'affichage
  • Envisagez : DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• Échelle : Établissez une hiérarchie claire (par ex., H1: 4rem → H2: 3rem → H3: 2rem → Corps: 1rem)

Palette de Couleurs

• Couleur Dominante : Votre couleur de marque principale (utilisation à 60%)
• Couleur d'Accent : Couleur à contraste élevé pour les CTA (utilisation à 10%)
• Palette Neutre : Gris ou tons terre (utilisation à 30%)
• Stratégie d'Arrière-plan : Plein, dégradé, texture ou motif ?
• Définissez comme variables CSS pour la cohérence

Stratégie de Mouvement

• Chargement de la Page : Révélations échelonnées avec animation-delay pour les éléments du héros
• Interactions de Défilement : Apparitions progressives, parallaxe ou animations déclenchées par le défilement ?
• États de Survol : Échelle subtile, changement de couleur ou transformations dramatiques ?
• Animations des CTA : Comment les boutons attirent-ils l'attention sans être gênants ?

Approche Spatiale

• Style de Mise en Page : Centré et symétrique ? Asymétrique et dynamique ? Brisant la grille ?
• Système d'Espacement : Serré et dense ? Généreux et aéré ?
• Flux des Sections : Empilé traditionnel ? Diagonal ? Superposé ?

Le Cadre des 11 Éléments Essentiels

Chaque page d'atterrissage efficace doit inclure ces 11 éléments essentiels. Ils sont basés sur le cadre éprouvé de DESIGNNAS pour les pages d'atterrissage à fort taux de conversion.

Chaque élément a DEUX exigences :

1. Exigence fonctionnelle (pour la conversion) - Doit être incluse
2. Excellence du design (pour la mémorabilité) - Doit être distinctive et belle

Guide de Conception Élément par Élément

1. URL avec Mots-clés

Fonctionnel : Structure d'URL descriptive et optimisée pour le SEO Design : N/A (axé SEO)

2. Logo de l'Entreprise (En-tête)

Fonctionnel : Identité de marque placée bien en vue (en haut à gauche) Excellence du Design :

• Envisagez un logo animé au chargement de la page
• En-tête fixe avec transitions de défilement fluides
• Variation de la marque pour différents états de défilement
• Arrière-plan de l'en-tête : transparent → solide avec flou d'arrière-plan
• Typographie de la navigation correspondant à votre choix de police d'affichage

3. Titre et Sous-titre Optimisés SEO (Héros)

Fonctionnel : Proposition de valeur claire avec mots-clés Excellence du Design :

• Typographie : Rendez-le MASSIF et inoubliable (4rem-6rem+)
• Utilisez votre police d'affichage distinctive ici
• Envisagez un texte dégradé, un texte contouré ou des ombres de texte pour l'impact
• Animez les mots du titre avec une apparition échelonnée (animation-delay)
• Le sous-titre doit être 50% de la taille du titre, avec un poids ou une police différent
• Ajoutez un rythme visuel avec des sauts de ligne et de l'espacement

4. Appel à l'Action Principal (CTA) (Héros)

Fonctionnel : Bouton d'appel à l'action principal dans la section héros Excellence du Design :

• Rendez-le IMPOSSIBLE à manquer : taille, contraste de couleur, position
• Évitez les rectangles ennuyeux : envisagez des formes de pilule, des bordures uniques ou des formes géométriques
• Ajoutez des micro-interactions : échelle au survol, expansion de l'ombre, changement de couleur
• Envisagez des doubles CTA avec une hiérarchie primaire/secondaire
• Animation d'entrée qui attire l'œil (délai après le titre)
• Ajoutez des indices visuels : flèches, icônes ou effets de pulsation

5. Preuve Sociale (Héros)

Fonctionnel : Avis, évaluations, statistiques d'utilisateurs Excellence du Design :

• Les chiffres doivent être ÉNORMES et animés au chargement (effet de comptage)
• Cartes de statistiques avec arrière-plans dégradés ou bordures subtiles
• Avatars de clients en cercles superposés
• Évaluations par étoiles avec un style personnalisé (pas les étoiles jaunes par défaut)
• Logos "Comme vu dans" avec un espacement et un traitement d'opacité appropriés
• Envisagez des témoignages rotatifs ou un carrousel de preuve sociale animé

6. Images ou Vidéos (Section Média)

Fonctionnel : Démonstration visuelle du produit/service Excellence du Design :

• CRITIQUE : N'utilisez jamais d'images génériques ou de substitution
• Captures d'écran produit avec maquettes d'appareils (cadres d'ordinateur portable/téléphone)
• Ajoutez de la profondeur : ombres, reflets, effets d'inclinaison 3D
• Envisagez : Captures d'écran flottantes, effets de parallaxe au défilement, arrière-plans vidéo
• Animations de révélation d'image au défilement (apparition, glissement)
• Pour les vidéos : Conception de bouton de lecture personnalisé, lueur d'arrière-plan ambiante
• Mises en page en grille : Asymétriques, superposées ou de style bento box

7. Avantages/Fonctionnalités Principaux

Fonctionnel : 3 à 6 avantages clés avec icônes Excellence du Design :

• Icônes : Conçues sur mesure ou soigneusement sélectionnées (PAS d'icônes génériques)
• Envisagez : Remplissages dégradés, icônes animées au survol, illustrations de style 3D
• Variations de conception de cartes : glassmorphisme, neumorphisme, bordures dégradées, ombres subtiles
• Animation échelonnée lorsque l'utilisateur fait défiler cette section
• Mise en page asymétrique au lieu de la grille ennuyeuse à 3 colonnes
• Éléments d'arrière-plan : motifs subtils, dégradés ou formes décoratives
• Typographie : Titres de fonctionnalités dans votre police d'affichage, gras et proéminents

8. Témoignages Clients

Fonctionnel : 4 à 6 avis authentiques avec photos Excellence du Design :

• Traitement des photos : Avatars circulaires avec bordures dégradées ou formes uniques
• Arrière-plans des cartes : Dégradés subtils, verre dépoli ou ombres surélevées
• Guillemets : Surdimensionnés, décoratifs ou de style personnalisé
• Mise en page : Grille en maçonnerie, carrousel ou verticale décalée
• Étoiles d'évaluation : Couleurs personnalisées correspondant à la palette de la marque
• Effets de survol : Soulever, agrandir ou briller
• Noms et titres des clients : Typographie raffinée

9. Section FAQ

Fonctionnel : 5 à 10 questions courantes avec interface d'accordéon Excellence du Design :

• Animations d'accordéon : Développement/repliement fluide avec assouplissement
• Icônes : Chevrons personnalisés ou signes plus/moins avec rotation
• États de survol sur les questions
• Typographie : Questions en gras ou avec un poids de police différent
• Envisagez : Mise en page à deux colonnes sur ordinateur, paires de questions-réponses côte à côte
• Arrière-plan : Changement de couleur subtil par rapport à la section précédente
• Espacement : Rembourrage généreux à l'intérieur des éléments de l'accordéon

10. Appel à l'Action Final

Fonctionnel : Appel à l'action en bas de page pour une deuxième chance de conversion Excellence du Design :

• Faites-en un moment HÉROÏQUE : C'est la dernière chance
• Section pleine largeur avec arrière-plan dramatique (dégradé, motif ou couleur)
• Bouton CTA encore PLUS GRAND que le CTA du héros
• Ajoutez de l'urgence : Minuteurs de compte à rebours, places limitées, indicateurs de rareté
• Entourez de texte convaincant et de micro-avantages
• Animation : Arrière-plan en parallaxe, éléments flottants ou effets déclenchés par le défilement
• Envisagez : Combinaison champ de saisie d'email + bouton pour newsletter/liste d'attente

11. Coordonnées/Légal (Pied de Page)

Fonctionnel : Pied de page avec informations complètes, liens légaux Excellence du Design :

• Mise en page multi-colonnes avec une hiérarchie d'informations claire
• Icônes sociales : Effets de survol (changement de couleur, échelle ou rotation)
• Inscription à la newsletter : Champ de saisie stylé avec bouton intégré
• Typographie : Plus petite mais toujours lisible (14-16px)
• Arrière-plan : Plus foncé que le corps ou couleur distincte
• Séparateur du contenu : Ligne de dégradé subtile ou diviseur décoratif
• Barre inférieure : Copyright et liens légaux avec un espacement approprié

Critique : Les 11 éléments doivent être inclus dans chaque page d'atterrissage. Aucune exception.

Pour des explications détaillées de chaque élément, reportez-vous à references/11-essential-elements.md.

Directives d'Esthétique du Design

Excellence Typographique

• NE JAMAIS utiliser de polices génériques : Inter, Roboto, Arial, Helvetica, system-ui
• Les polices d'affichage doivent être distinctives et mémorables
• Associez judicieusement : Police d'affichage pour les titres + police de corps raffinée pour le texte
• Mettez à l'échelle de manière spectaculaire : Créez une hiérarchie claire avec des sauts de taille (pas de différences subtiles)
• Espacement des lettres : Ajustez pour les polices d'affichage (nécessite souvent un crénage plus serré)
• Hauteur de ligne : Affichage = 1.1-1.2, Corps = 1.6-1.8

Couleur et Cohérence Visuelle

• Définissez des variables CSS pour toutes les couleurs (maintenez la cohérence)
• La couleur dominante doit apparaître partout (pas seulement dans les CTA)
• Les couleurs d'accent doivent avoir un contraste suffisant pour l'accessibilité (minimum WCAG AA)
• Évitez : Dégradés violets sur fond blanc (esthétique IA surutilisée)
• Arrière-plans : Créez une atmosphère avec des dégradés, des grilles, des motifs ou des textures
  • Grilles de dégradés : Dégradés lisses multicolores
  • Textures de bruit : Grain subtil pour la profondeur
  • Motifs géométriques : Points, lignes ou formes à faible opacité
  • Transparences en couches : Sections colorées se chevauchant

Mouvement et Animation

• Chargement de la page : Une entrée bien orchestrée avec des révélations échelonnées
  • Les mots du titre du héros apparaissent séquentiellement (animation-delay : 0ms, 100ms, 200ms)
  • Le sous-titre suit (délai : 300ms)
  • Le CTA apparaît en dernier (délai : 500ms) avec emphase
• Animations de défilement : Les sections apparaissent lorsqu'elles entrent dans la fenêtre d'affichage
  • Utilisez l'API Intersection Observer ou les déclencheurs de défilement de Framer Motion
  • Les cartes apparaissent en décalé (chacune avec un délai incrémentiel)
• États de survol : Surprenez et ravissez
  • Boutons : Agrandir, ombre qui s'étend, changement de couleur
  • Cartes : Effet de soulèvement avec ombre
  • Images : Zoom subtil ou parallaxe
• Performance : Préférez les animations CSS au JavaScript
  • Utilisez transform et opacity (accéléré par GPU)
  • Évitez d'animer width, height, top, left

Composition Spatiale et Mise en Page

• Brisez la grille : Ne vous contentez pas de mises en page centrées et symétriques
• Asymétrie : Texte plus grand d'un côté, visuel de l'autre
• Éléments superposés : Superposez les sections pour la profondeur
• Flux diagonal : Diviseurs inclinés entre les sections
• Espaces blancs généreux OU densité contrôlée (choisissez-en un et tenez-vous-y)
• Pensée en Z : Utilisez les ombres, le flou et la superposition pour la profondeur

ÉVITEZ les Esthétiques Génériques de l'IA

Ces motifs donnent aux pages d'atterrissage un aspect "généré par IA" et oubliable :

NE FAITES PAS :

• ❌ Polices Inter/Roboto/Arial
• ❌ Dégradés violets sur fond blanc
• ❌ Mises en page parfaitement centrées et symétriques à chaque fois
• ❌ Icônes génériques
• ❌ Évaluations par étoiles jaunes par défaut
• ❌ Boutons rectangulaires ennuyeux sans personnalité
• ❌ Fond blanc sans intérêt visuel
• ❌ Grilles de fonctionnalités à trois colonnes standardisées
• ❌ Photos d'archives de personnes pointant des ordinateurs portables

FAITES :

• ✅ Choisissez des polices distinctives qui correspondent à la personnalité de la marque
• ✅ Engagez-vous sur une palette de couleurs unique (pas toujours violet !)
• ✅ Créez des mises en page inattendues avec asymétrie
• ✅ Concevez ou sélectionnez des icônes avec du caractère
• ✅ Personnalisez tous les éléments de l'interface pour correspondre à l'esthétique
• ✅ Ajoutez des textures d'arrière-plan, des dégradés ou des motifs
• ✅ Variez les mises en page entre les sections
• ✅ Utilisez des captures d'écran de produit, des illustrations personnalisées ou des photographies authentiques

Exigences de la Pile Technologique

Lorsque

…