Workshop 1 · Landing Page

Durée totale	Niveau
4 heures	Débutant

Plan - Programme de la session

Horaire	Activité	Durée
08:00	Introduction : contexte pédagogique, règles, IA	30 min
08:30	Mini-défis tech : tutoriels gamifiés sur Luna Park (padding, couleurs, flex…)	30 min
09:00	Analyse UX : Repérer les bonnes et mauvaises pratiques	45 min
09:45	Résumé : Liste des bonnes pratiques pour une landing page	30 min
10:15	Dark patterns : Liste des choses non éthiques	20 min
10:35	Pause	15 min
10:50	Démo live : vous construisez une landing page de A à Z devant eux	20 min
11:10	Brief : contexte et vision des marques	10 min
11:20	Création en équipes d'une landing page	1 h 00
12:20	Vote interne de chaque salle pour la meilleure landing page	20 min
12:40	Présentation des gagnants à l’autre salle	10 min
12:50	Rétrospective collective	15 min
11:20	Test d'apprentissage	20 min
11:40	Test de feedback	10 min
11:50	Correction	10 min

Introduction

Contexte

Nous sommes dans le cadre d'un Business Game.

Plus tard dans votre carrière, vous serez amenés à

• Lancer votre propre entreprise (startup, freelance, projet intrapreneurial),
• Rejoindre des équipes produit, marketing ou innovation dans des startups ou grands groupes,
• Collaborer avec des équipes techniques (développeurs, designers, chefs de projet).

Or, dans ces contextes, savoir concevoir une landing page est un atout essentiel.

Comprendre le cœur du business numérique

Une landing page, c’est la vitrine de toute offre. Que vous vendiez un produit, un service ou une idée, c’est souvent le premier point de contact avec vos clients.

• Décryptez les mécanismes de conversion : pourquoi un visiteur clique ou quitte la page ?
• Identifiez les leviers de persuasion : comment un titre, une couleur ou un bouton influencent les décisions ?
• Apprenez à prioriser l’information : dans un monde où l’attention se mesure en secondes, chaque mot et chaque pixel compte.

Vous démarquer dans un marché saturé

• Les profils business qui comprennent les enjeux techniques se distinguent.
• Les outils no-code (comme Luna Park) démocratisent la création, mais la pensée critique et la stratégie restent le plus important. C’est là que vous ferez la différence.
• L’IA ne remplace pas la réflexion : la conception d’une landing page efficace repose sur une compréhension humaine de l'expérience utilisateur.

Pourquoi n'utilisons-nous pas l'IA ?

1. Éviter le "cognitif off-loading. (délégation cognitive) Tout déléguer à l'IA formate à ne plus réfléchir. Des études récentes (Inserm 2026) montrent que déléguer systématiquement la réflexion à l’IA réduit notre capacité à analyser, mémoriser et créer. C'est l'effet "Google" : le cerveau s'habitue à sous-traiter la recherche d'informations. À force de déléguer, on finit par perdre sa capacité d'analyse et sa créativité. L'effet Google sur Wikipédia

2. Collaborer efficacement avec les développeurs. Comprendre ce qu'ils font, même à un niveau basique, est un avantage en entreprise : cela permet de mieux briefer, de valider la faisabilité technique et d'estimer correctement les charges de travail. C'est un atout majeur pour manager des équipes.

3. Se démarquer sur le marché. Des milliers de projets "vibecodés" (générés uniquement par prompt) sortent chaque week-end et se ressemblent tous. Ceux qui se démarquent sont ceux qui conservent une pensée critique et savent encore concevoir par eux-mêmes. L’IA est un outil, pas une compétence : comme Excel ou PowerPoint, elle ne vous différenciera pas. Votre valeur ajoutée, c’est votre capacité à penser, concevoir et décider.

L'heure des challenges

Tout ce qu'on va voir dans ces challenges sera utilisé tout à l'heure, et nous serons en concurrence avec la salle d'en face.

Avant de commencer, vous allez faire des mini-challenges tech pour apprendre les bases du HTML/CSS sur Luna Park. Rendez-vous sur https://luna-park.app/activity : vous rejoignez un salon et votre progression est représentée par la position d'une voiture par rapport aux autres. Ça nous permet aussi de voir en temps réel qui a besoin d'aide.

Ne foncez pas en faisant "next next next" : vous en aurez besoin pour la suite. Je débloque les challenges manuellement pour contrôler le rythme.

Ordre de déblocage :

• Introduction
• --- Vérification que tout fonctionne ---
• Explorateur & fichiers
• Palette de couleurs
• Composants & éléments
• Composants custom
• --- Pause ---
• Style & arrière-plan
• Pseudo-classes
• Espacement
• --- Pause ---
• Bordures
• Flex
• Position

Conseil UI/UX

Avant de construire, on regarde quelques sites ensemble. L'objectif : identifier ce qui ne fonctionne pas et comprendre pourquoi. Choisissez 2-3 sites de petites marques vélo ou artisans locaux. Des boîtes qui ont besoin de convaincre, pas des grosses marques dont le traffic est uniquement constitué de convaincus.

Questions à poser à chaque site :

• En 3 secondes, vous savez ce que c'est ?
• Vous voyez où cliquer ?
• Les titres disent quelque chose de concret, ou c'est du vague ?
• Vous faites confiance à cette marque ?

🔍 Ce qu'on cherche

Les problèmes les plus courants : pas de CTA visible, titre qui ne dit rien, trop de texte, palette incohérente, aucune preuve sociale. En général ça se voit en 10 secondes.

"Vous connaissez des marques ou des boîtes dans votre entourage qui ont un site moyen ? Des trucs un peu niche, pas les grandes marques qui n'ont pas besoin de se vendre, mais des artisans, des petites marques, des asso ?"

https://fr.cowboy.com/

• ✅ Le titre (headline) est clair.
• ✅ Le CTA est explicite.
• ✅ Support client accessible.
• ❌ Pas d'indication du contenu sous la ligne de flottaison.
• ❌ Mauvais contraste du sous-titre.
• ✅ Preuve sociale (social proof) avec des photos.
• ℹ️ Style "Apple" premium.

https://www.iweech.com/

• ✅ Épuré.
• ❌ Headline sous la ligne de flottaison.
• ❌ Pas d'indication du contenu sous le scroll.
• ❌ Titre trop vague.
• ✅ Arguments de vente présents.
• ✅ Brand authority.
• ✅ FAQ.

https://reine-bike.com/

• ✅ CTA visible.
• ✅ Bonne hiérarchie de contenu.
• ❌ La navigation prend trop de place.
• ❌ Le titre et le sous-titre sont trop longs.
• ✅ Brand authority (partenaires).
• ✅ FAQ.

https://eclairbikes.com/

• ✅ Proposition de valeur claire.
• ✅ CTA explicite (mais positionnement perfectible).
• ❌ Pas d'indication du contenu sous le scroll.
• ❌ Problèmes de contraste.
• ✅ Caractéristiques (features) concises.

https://cycles-meral.fr/

• ❌ La navigation prend trop de place.
• ❌ Pas de CTA clair.
• ❌ Titre sous la ligne de flottaison.
• ✅ Brand authority.

https://www.victoire-cycles.com/

• ✅ Navigation épurée (mais problème de contraste).
• ❌ Pas de CTA.
• ❌ Pas de titre clair.
• ✅ Preuve sociale.
• ✅ Brand authority.

https://www.grade9.fr/

• ❌ Pas de CTA.
• ❌ Pas de titre direct.
• ❌ Trop de texte.
• ❌ Blog non mis à jour.

Bonnes pratiques pour une landing page

Rendre l'objectif évident

• Inscription / Précommande / Téléchargement...
• Quoi ? Pourquoi ? Comment ? (Qu'est-ce que c'est, pourquoi je dois l'utiliser, comment ça marche)
• Support avec des icônes ou des images

Rendre l'objectif clair

• Éviter le jargon
• Utiliser un langage simple et clair

Écrire un titre impactant/convaincant

• On a qu'une seule première impression
• Écrire quelque chose de concis et pertinent

Mettre en avant le CTA

• Visible (couleur, emplacement, taille, contraste)
• Affiché immédiatement (pas sous le scroll)
• Verbe actif, compréhension directe par l'utilisateur

Ne pas surcharger la landing page

• La plupart des utilisateurs ne lisent en moyenne que 20% du texte.
• Limiter les informations superflues, parfois même la navigation.
• Rendre le contenu plus lisible et plus "scannable".

Ajouter un indice pour le scroll

• S'il y a du contenu sous la ligne de flottaison, cela doit être évident.
• Ajouter une petite flèche ou une indication visuelle.

Ajouter de la crédibilité (Social Proof)

• Les utilisateurs ne veulent pas être les premiers à tester.
• Ajouter des commentaires, des avis ou des notes.

Ajouter de la crédibilité (Brand Authority)

• Les utilisateurs ont besoin d'avoir confiance.
• Afficher les logos de marques ou de médias reconnus.

Répondre aux questions

• Même si la page est claire, certains utilisateurs auront des doutes.
• Ajouter une FAQ ou un accès au support client (ex: bulle de chat).

Les Dark Patterns

Un dark pattern est une interface conçue pour tromper ou manipuler l'utilisateur afin de lui faire accomplir une action qu'il n'aurait pas choisie délibérément.

• Bait and switch (Appât et changement) : Promettre un avantage (ex: contenu gratuit) puis exiger une contrepartie au dernier moment (ex: inscription obligatoire).
• Confirmshaming : Faire culpabiliser l'utilisateur s'il refuse une offre (ex: "Non, je préfère rater des offres incroyables").
• Publicité déguisée : Bouton incitant au clic qui est en réalité une redirection publicitaire (ex: faux bouton "Télécharger").
• Perpétuation d'abonnement : Renouvellement tacite sans avertissement préalable (ex: passage automatique d'un essai gratuit à un abonnement payant).
• Coûts cachés : Frais supplémentaires ajoutés à la toute fin du processus d'achat.
• Misdirection : Détourner l'attention de l'utilisateur par le design (ex: rendre le bouton "Confirmer" très visible et le bouton "Annuler" presque invisible).
• Roach Motel (Hôtel à cafards) : Processus simple pour s'inscrire, mais extrêmement complexe pour se désinscrire (ex: obligation d'envoyer un courrier recommandé).
• Sneak into basket : Ajout d'options ou de produits non sollicités dans le panier via des cases pré-cochées.

TIP

Les dark patterns sont désormais ciblés par la réglementation européenne (DSA/DMA) et peuvent donner lieu à des sanctions.

Pause

Démo Live

"Les challenges sont finis. En 20 minutes je vais construire une landing page devant vous. Vous pouvez prendre des notes ou faire en même temps. Dans 20 minutes vous commencez en équipe."

Projetez votre écran. Ouvrez Luna Park sur un projet vierge. Construisez une landing page pour une marque neutre (ex : "WAVE", une landing de surf). Montrer quelques sites de ventes de planche de surf :

1. https://www.haydenshapes.com/fr
2. https://www.firewiresurfboards.com/
3. https://cisurfboards.com/

Exemple de landing à faire pendant la démo

Étape 1: Créer la structure

"La première chose qu'on fait c'est choisir les couleurs. On fait une landing de surf; à votre avis on prend quoi ? Le bleu pour l'eau, #0096C7, et blanc #FFFFFF pour le contenu. Luna Park génère toutes les déclinaisons à partir de ça. Une fois les couleurs définies, on pense en blocs : un header, un hero, une section features. Je crée ces trois blocs vides."

Action

Créez 3 blocs div vides, nommez-les "Header", "Hero", "Features". Largeur 100%. Pour le fond, utilisez le token bleu généré par la palette.

Étape 2: Construire le Header

"Le header : nom de la marque à gauche, liens à droite. On utilise le display flex, vous venez de le voir dans les challenges."

Action

Dans le bloc Header, ajoutez un texte "WAVE" et 3 liens. Flex sur le Header, justify-content: space-between, align-items: center, padding 16px 32px.

Étape 3: Construire le Hero

"Le hero, c'est là où tout se joue. Le visiteur a 3 secondes pour décider s'il reste. Donc : un titre fort, un sous-titre court, un bouton visible."

Action

Fond (#03045E, token bleu nuit). Accroche : "Surfez sans limite". Ne vous contentez pas de slogans vagues. Proposez du concret comme : "Shapée à la main à Hossegor depuis 1994". Ajoutez un sous-titre pour expliquer la proposition de valeur.

"Le bouton, je lui donne une couleur qui contraste fort avec le fond. En marketing, ça s'appelle le CTA. Si personne ne voit le bouton, personne ne clique."

Étape 4: Construire les Features

"Pour les avantages produit : trois arguments maximum. Au-delà, le visiteur ne lit plus. On fait 3 cartes côte à côte. (si on le sent bien, on fait des components)"

Action

Flex sur Features, justify-content: space-between, gap: 24px, padding: 60px 40px. 3 blocs enfants avec titre + texte.

"En 15 minutes on a une landing page qui tient la route."

Étape 5: Mot de la fin

"Commencez par la typo et la palette, puis construisez dans l'ordre : Header, Hero, Features. Travaillez chacun de votre côté dans le groupe, aidez-vous, et fusionnez pour garder le meilleur de chaque. À la fin on vote pour la meilleure landing de la salle et on la présente à l'autre salle. Si vous bloquez : le challenge est toujours accessible, ou appelez-moi."

Des ressources en plus : unsplash.com

Brief des Marques

Pour cette étape, vous allez être en concurrence directe avec l'autre salle.

Votre mission : créer une landing page percutante pour présenter un produit (le brief arrive juste après) et convaincre plus d'utilisateurs que l'équipe adverse. Il faudra soigner le design, les accroches, le branding et l'expérience utilisateur.

Le contexte : le marché de la sneaker est en guerre. Deux philosophies RSE s'affrontent : la durabilité par la qualité premium contre l'impact systémique mesurable.

Salle A

VOLT

Produit phare : VOLT URBAN

Vélo urbain premium conçu pour durer. Chez VOLT, la RSE passe par la qualité : un vélo qu'on garde 10 ans, c'est 3 vélos jetables de moins. Moins acheter, mieux acheter.

Arguments à mettre en avant

• 🔧 Cadre acier garanti 10 ans
• 🏗️ Toutes les pièces sont remplaçables à vie
• 🇫🇷 Assemblé en France

Palette suggérée

Contexte & Vision de la Marque

VOLT incarne une nouvelle approche du vélo urbain : moins acheter, mieux acheter. Dans un monde où la surconsommation et l’obsolescence programmée dominent, VOLT propose une alternative durable, responsable et haut de gamme. Notre mission est de réduire l’empreinte écologique en créant des vélos conçus pour durer, réparables à vie et assemblés en France.

Pourquoi VOLT ?

• Un vélo pour 10 ans = 3 vélos jetables en moins.
• La RSE par la qualité : moins de gaspillage, plus de durabilité.
• Un engagement local : assemblage français, pièces remplaçables à vie.

Salle B

LOOP

Produit phare : LOOP CYCLE

Vélo éco-responsable, fabriqué à partir de matériaux recyclés, dans des usines certifiées. Chez LOOP, la RSE est mesurable et transparente, chaque chiffre est vérifiable.

Arguments à mettre en avant

• ♻️ Cadre aluminium recyclé à 90%
• 🌿 -65% d'empreinte carbone vs vélo standard
• 📋 Fournisseurs certifiés et audités

Palette suggérée

Contexte & Vision de la Marque

LOOP incarne l’économie circulaire appliquée au vélo. Dans un secteur souvent critiqué pour son impact environnemental, LOOP prouve qu’il est possible de concilier performance, design et responsabilité écologique. Chaque LOOP CYCLE est fabriqué à partir de matériaux recyclés, dans des usines certifiées, avec une transparence totale sur son empreinte carbone et sa chaîne de production.

Pourquoi LOOP ?

• Un vélo qui réduit l’impact environnemental : -65% d’empreinte carbone par rapport à un vélo standard.
• Des matériaux recyclés : cadre en aluminium recyclé à 90%, composants sourcés de manière responsable.
• Une RSE mesurable : chaque chiffre est vérifiable, chaque fournisseur est audité.

---

Idées si les élèves bloquent

Header [MVP]

• Nom de la marque à gauche, 2-3 liens à droite
• Fond coloré, texte blanc ou inversé
• Flex + space-between + align-items: center
• Exemples de liens : Le VOLT URBAN · Notre engagement · Réparer / Le LOOP CYCLE · Nos chiffres · Certifications

Hero [MVP]

• Titre court et percutant (8 mots max).
• Sous-titre : 1-2 phrases sur les bénéfices du produit.
• Bouton CTA visible : une couleur contrastée est indispensable.
• Grand emoji pour simuler une image produit.
• Exemples de titres : "Un vélo qu'on garde 10 ans." / "Chaque chiffre est vérifiable."

Avantages [MVP]

• 3 cartes côte à côte : emoji + titre court + 1 phrase
• Flex + space-between + gap: 24px
• VOLT : 🔧 Cadre garanti 10 ans · 🏗️ Pièces remplaçables à vie · 🇫🇷 Assemblé en France
• LOOP : ♻️ Cadre alu recyclé à 90% · 📋 Fournisseurs certifiés · 🌱 -65% CO₂

💡 Les cartes, c'est la norme

3 cartes côte à côte ça marche, mais tout le monde le fait. Si vous voulez vous démarquer : une liste avec de grands numéros, du texte seul bien typographié, une mise en page asymétrique. Le format est libre.

Chiffres clés [Extension]

• 3-4 chiffres forts sur une ligne
• VOLT : 12 000 paires réparées · 4.9/5 satisfaction
• LOOP : 3kg plastique recyclé/paire · 100% usines certifiées

Témoignages [Extension]

• 2-3 avis fictifs : prénom + note + citation courte
• Oui, vous pouvez les inventer — c'est un exercice de design, pas un vrai site.

---

Vote & Rétrospective

Le vote final est la partie la plus importante pour les étudiants. Donnez-lui du rythme.

Comment organiser le vote

Étape 1 (10 min) : Chaque équipe présente sa page.

Étape 2 (5 min) : Vote à main levée par meilleur landing : chaque équipe ne peut pas voter pour elle-même.

Étape 3 (5 min) : La page gagnante de chaque salle est projetée à l'autre salle pour le défi inter-salles.

Questionnaire

https://docs.google.com/forms/d/1PqJiGJpIpVpDPBVz9HTjnNOfsieOXTpYPc89ImSswD8/viewform

Rétrospective Collective

Questions pédagogiques

• En regardant la page adverse, qu'est-ce qui vous a donné envie d'acheter ou pas ?
• Qu'est-ce qui était plus dur : trouver les mots ou trouver le design ?
• La page que vous avez faite, vous la publieriez telle quelle ? Pourquoi pas ?