Présentation style TED
Instructions
# Sujet de création de présentation de style TED
Agissez comme un concepteur de conférences TED de classe mondiale et créez une présentation complète basée sur l'article/le sujet fourni, en suivant la philosophie narrative et le langage visuel de TED, axés sur des « idées qui méritent d'être diffusées ».
---
## Conception de la structure narrative (à respecter scrupuleusement)
### Diapositive 1 : Crochet d’ouverture
**Objectif :** Capter l'attention dans les 30 premières secondes et susciter un manque de connaissances
- **Options de contenu** (choisissez-en une) :
- Comparaison de données choquante (« Toutes les 6 secondes…) »
- Affirmation contre-intuitive
- Question qui suscite la curiosité (« Et si je vous disais… »)
- Un moment clé d'une histoire personnelle (« Il y a trois ans, ce soir-là…) »
- **Exigences visuelles :** Un élément central surdimensionné + un arrière-plan minimaliste pour créer du suspense
### Diapositive 2 : Pourquoi c’est important
**Objectif :** Créer un lien émotionnel, faire en sorte que le public se dise « cela me concerne ».
- Expliquez en 2 ou 3 phrases l'universalité ou l'urgence du problème.
- Indiquer l'ampleur ou la portée des personnes touchées
- **Stratégie visuelle :** Utilisez des silhouettes, des cartes ou des icônes groupées pour créer une résonance.
### Diapositives 3-4 : Dilemme actuel
**Objectif :** Décrire la situation actuelle et établir la nécessité d'un changement.
- Présenter les problèmes actuels à l'aide de cas ou de données spécifiques.
- Mettre en évidence les limites des approches traditionnelles
- **Rythme visuel :** Du général au particulier, de l’abstrait au concret
### Diapositive 5 : Tournant/Révélation personnelle
**Objectif :** Le fameux « moment eurêka » des conférences TED
- Racontez le moment où vous avez découvert une nouvelle perspective (« Jusqu'à ce que je réalise... »)
- Montrer le changement ou la percée dans la pensée
- **Conception visuelle :** Utilisez la lumière, des flèches ou des changements de perspective pour symboliser le saut cognitif.
### Diapositives 6 à 8 : Développement de l’idée principale
**Objectif :** Approfondir une idée centrale (la règle d'or de la présentation de 18 minutes)
- **Diapositive 6 :** Énoncé clair de l'idée principale (résumé en une phrase)
- **Diapositive 7 :** Trois éléments de preuve/principes clés étayant l’idée
- **Diapositive 8 :** Utilisez des analogies ou des métaphores pour rendre les concepts abstraits plus concrets.
Exemple : « C'est comme… » / « Imaginez… »
- **Exigences visuelles :** Métaphores illustratives, éviter les graphiques abstraits
### Diapositives 9-10 : Cas réels/Histoires
**Objectif :** Donner vie à l'idée, renforcer sa crédibilité
- Citez 1 ou 2 cas pratiques précis.
- Inclure un arc narratif complet avec des personnages, un conflit et une transformation
- **Design émotionnel :** Montrez les véritables difficultés et les réussites, évitez le perfectionnisme.
### Diapositive 11 : Répondre aux objections potentielles
**Objectif :** Anticiper les questions du type « mais… » du public, renforcer la persuasion
- Reconnaître honnêtement ses limites ou ses difficultés
- Utiliser les données ou la logique pour résoudre les problèmes
- **Ton :** Humble mais sûr de lui, témoignant d’une grande profondeur de réflexion
### Diapositives 12-13 : Importance accrue
**Objectif :** Élever le stade de la simple observation individuelle à une valeur universelle
- Se connecter aux grands enjeux sociaux, aux réalités humaines ou à la vision d'avenir
- Répondre à la question « Et alors ? » — en expliquant pourquoi cela transcende le sujet spécifique lui-même
- **Élévation visuelle :** Utilisez des scènes vastes, des ciels étoilés, des horizons et d'autres images.
### Diapositive 14 : Appel à l’action
**Objectif :** Donner aux gens les moyens d'agir, permettre à chacun de participer au changement
- **Conception à trois couches :**
- Une petite chose que vous pouvez faire aujourd'hui
- Un défi à relever cette semaine
- Une orientation à long terme que vous pouvez suivre
- **Langage :** Utilisez la deuxième personne du singulier (« vous pouvez… ») plutôt que le ton moralisateur « vous devriez ».
### Diapositive 15 : Fin poétique
**Objectif :** Laisser une trace indélébile, créer un souvenir marquant.
- Revenez à la question/l'histoire initiale, formez une boucle narrative
- Utilisez une phrase ou une image marquante pour immortaliser l'instant (citation ou image originale).
- **Visuel :** Image minimaliste + phrase clé inspirante, créant une atmosphère contemplative
---
## Normes de langage visuel (Esthétique de la scène TED)
### Philosophie des couleurs
- **Couleurs primaires :**
- Arrière-plan : Noir profond #1A1A1A (noir de scène TED) ou noir chaleureux #F5F1ED (ambiance de partage des connaissances)
- Texte : Blanc pur à contraste élevé #FFFFFF ou noir d’encre #0A0A0A
- **Système de couleurs d'accentuation** (représentant différentes couches émotionnelles) :
- **Curiosité/Inspiration :** TED Red #E62B1E (uniquement pour les diapositives présentant l'idée principale)
- **Données/Rationalité :** Tech Blue #4A90E2
- **Humanité/Chaleur :** Or Ambré #F5A623
- **Règles d'utilisation :**
- Maximum 1 couleur d'accentuation par diapositive
- Couleur d'accentuation 15 % du cadre
- Dégradés limités aux changements de transparence d'une seule couleur (100 % à 0 %)
### Règles de typographie
#### Hiérarchie des titres
- **Titres extra longs** (idées d'ouverture/principales) :
- Taille de la police : 12 à 18 % de la hauteur de l’écran
- Police : Sans-serif gras
- Maximum 7 mots, supprimez tous les articles inutiles
Exemple : ❌« À propos de l’importance de l’innovation » ✅« Redéfinir l’innovation »
- **Titres réguliers :**
- Taille de la police : 6 à 8 % de la hauteur de l’écran
- Espace blanc : au moins 1,5 fois la hauteur du titre au-dessus et en dessous
- **Texte du corps du texte :**
- Taille de la police : 2,5 à 3,5 % de la hauteur de l’écran
- Hauteur de ligne : 1,8-2,0x
- Maximum 30 mots par diapositive (environ 2 lignes)
#### Le pouvoir des nombres
- Les données clés doivent :
- Être agrandi à 150-200 % de la taille du titre
- Se tenir seul avec un large espace blanc autour
- Utiliser des étiquettes en micro-unités (1/4 de la taille du nombre)
- Exemple : **73 %** des personnes vont...
### Stratégie de focalisation visuelle
#### Formule de composition par diapositive
```
1 Ancre visuelle (40-60% du cadre)
+ 1 Message principal (texte ou données)
+ Espace de respiration (au moins 35 % d'espace blanc)
= 1 diapositive
```
#### Principes d'utilisation des images
- **Photographie :**
- Uniquement pour les diapositives illustrant des histoires (cas/lien émotionnel)
- Les scènes doivent être authentiques, pas de photos d'illustration.
- Appliquer un filtre noir et blanc ou une superposition monochrome pour plus de sobriété
- **Icônes/Illustrations :**
- Style linéaire, épaisseur de trait constante (2-3px)
- Dimensionnement polarisé : soit 60 % de l’écran (affichage principal), soit moins de 8 % (affichage secondaire).
Exemples de scénarios : flèches dessinées à la main pour les processus, figures simples pour les personnages
- **Visualisation des données :**
- Aucun effet 3D ni élément décoratif
- Afficher un maximum de 3 à 4 points de données
- La couleur sert uniquement à distinguer les catégories, elle ne véhicule pas de valeurs.
- Je préfère : les graphiques à barres (comparaison), les graphiques linéaires (tendances), les graphiques circulaires simples (proportions)
#### Techniques de visualisation métaphorique
- Transformer des concepts abstraits en objets du quotidien :
- « Système complexe » → Assemblage d'engrenages
- « Connexion » → Lignes de réseau neuronal/constellation
- « Croissance » → Silhouette d'arbre/escalier
- Utilisez l'espace négatif pour créer des graphismes à double sens
### Système de grille de mise en page
#### Structure de la page
- **Immersion plein écran :** Contenu centré verticalement et horizontalement, marges d’au moins 10 % de chaque côté
- **Équilibre asymétrique :**
- Le centre visuel peut être décentré, mais équilibré par des espaces blancs ou des micro-éléments.
- Lorsque le texte est aligné à gauche/droite, placez l'élément graphique de respiration du côté opposé.
#### Conception du flux de lecture
- Habitudes de lecture de gauche à droite, des caractères les plus grands aux plus petits
- Placez les informations clés dans le tiers supérieur de la « zone de visée optimale ».
- Reléguer les informations secondaires en bas de page, réduire la taille de la police à 70 % de celle du corps du texte
---
## Interaction et animation (Amélioration de l'immersion)
### Système de navigation
- **Indicateur de progression :** Points en bas de l’écran (●○○○), page actuelle agrandie et colorée
- **Raccourcis clavier :**
- Espace/Flèche droite : Diapositive suivante
- Flèche gauche : Diapositive précédente
- Touches numériques : Accéder à la diapositive correspondante
- **Gestes** (mobile) : Balayez vers la gauche/droite pour changer de diapositive
### Transitions de diapositives
- **Animation par défaut :** fondu enchaîné de 0,6 s
- **Moments spéciaux :**
- Ouverture à la diapositive 2 : Pompes
Diapositive de transition : fondu d’échelle
Diapo de fin : Fondu enchaîné long (1,2 s) pour un effet persistant.
### Entrée de l'élément
- Titre : Opacité de 0 à 100 %, avec un léger déplacement vers le haut (20 px)
- Données : Les nombres passent de 0 à la valeur cible (animation de 1 s)
- Images : Flou pour effacer (flou 10px → 0px)
---
## Liste de vérification pour la création de contenu
### Intégrité narrative
- [ ] Existe-t-il une « idée centrale » claire qui puisse être résumée en une seule phrase ?
- [ ] L'introduction crée-t-elle un déficit de connaissances en moins de 30 secondes ?
- [ ] Existe-t-il au moins une histoire réelle (et non une pure théorie) ?
- [ ] Y a-t-il un « moment eurêka » prévu ?
- [ ] La conclusion fournit-elle des suggestions spécifiques et concrètes ?
### Courbe émotionnelle
- [ ] Les hauts et les bas émotionnels sont-ils conçus (curiosité→surprise→réflexion→espoir) ?
- [ ] La vulnérabilité ou l'échec sont-ils mis en évidence pour instaurer la confiance ?
- [ ] Le ton est-il conversationnel plutôt que moralisateur ?
### Cohérence visuelle
- [ ] Chaque diapositive ne comporte-t-elle qu'un seul élément visuel central ?
- [ ] L'espace blanc est-il supérieur à 30 % ?
- [ ] Les couleurs d'accentuation sont-elles utilisées uniquement pour les informations essentielles ?
- [ ] La famille de polices est-elle unifiée (maximum 2 polices) ?
### La règle d'or en 18 minutes
- [ ] Nombre total de diapositives contrôlées en 15 minutes (1 minute en moyenne par diapositive)
- [ ] Les informations de chaque diapositive peuvent-elles être capturées visuellement en moins de 5 secondes ?
- [ ] Tous les modificateurs inutiles et les informations redondantes ont-ils été supprimés ?
---
## Exemple de structure de diapositive de référence
### Exemple 1 : Ouverture du crochet coulissant
```
[Tiers supérieur de l'écran]
2050
[Très grand texte en gras, 15 % de la hauteur de l'écran]
[En bas au centre de l'écran]
La Terre comptera 10 milliards d'habitants.
Mais seulement 60 % auront accès à l'eau potable.
[Taille de police standard, interligne de 2,0]
[Bas de l'écran]
Nous avons 27 ans pour changer ce nombre.
[Petit texte, opacité de 60 %]
```
### Exemple 2 : Diapositive sur l’idée principale
```
[Gauche 60%]
[Fond à blocs de couleur rouge TED, occupant le côté gauche]
L'éducation n'est pas
remplir un seau
mais allumer un feu
[Texte blanc en gras centré sur un bloc de couleur]
[Droite 40%]
— Adapté de Yeats
[Annotation en petit texte]
[Bas]
Cela signifie que nous devons fondamentalement repenser la salle de classe.
[Une ligne de texte explicatif]
```
### Exemple 3 : Diapositive de comparaison de données
```
[Écran divisé en deux moitiés, gauche et droite]
[Moitié gauche]
73%
[Très grand nombre, bleu technique]
Situation en 2023
[Moitié droite]
12%
[Très grand nombre, or ambré]
Niveau en 2010
[Centre]
[Fine flèche pointant de gauche à droite, indiquant la tendance]
[En bas au centre]
Les paiements mobiles ont transformé les habitudes de consommation en une décennie.
```
---
## Exigences relatives au résultat final
### Spécifications techniques
- Conception adaptative, compatible avec les résolutions 1920×1080 / 1366×768 / iPad / mode paysage mobile
- Utiliser les technologies web modernes (HTML5 + CSS Grid/Flexbox)
- Police de secours : anglais (Inter/Helvetica → Arial), chinois si nécessaire (Source Han Sans/PingFang → Heiti)
- Toutes les animations utilisent des transitions/animations CSS, évitant ainsi les pertes de performance liées à JavaScript
### Accessibilité
- Rapport de contraste texte/arrière-plan d'au moins 7:1 (norme WCAG AAA)
- Les images doivent avoir une description alternative (même les éléments graphiques décoratifs doivent être marqués comme « décoratifs »).
- Prise en charge complète de la navigation au clavier
### Livrables
1. Fichier HTML complet unique (CSS intégré)
2. Notes du présentateur (points clés de chaque diapositive, fichier Markdown séparé)
3. Images statiques exportées en haute résolution (facultatif, pour le partage sur les réseaux sociaux)
---
## Philosophie créative (Rappels de niveau méta)
> **N'oubliez pas l'essence même de TED :** Il ne s'agit pas de montrer l'étendue de vos connaissances, mais d'allumer la flamme du « j'ai envie d'en savoir plus » dans le cœur du public.
Pour chaque diapositive, posez-vous la question suivante : si le public se laisse distraire et consulte son téléphone, que perds-je ? Si la réponse est « rien », supprimez cette diapositive.
Les données servent le récit, et non l'inverse. Il faut d'abord trouver le récit, puis utiliser les données pour en amplifier l'impact.
- Le meilleur design est invisible : le public doit se souvenir de l'idée, et non pas de « cette présentation PowerPoint est vraiment géniale ».
La limite de 18 minutes est une libération, non une contrainte. Elle vous oblige à aller au cœur même de votre pensée.
**Objectif ultime :** Lorsque le public quittera la salle, il oubliera peut-être votre nom, il oubliera vos diapositives, mais il se souviendra de l’idée qui a changé sa vision du monde.
---
## Remarques importantes
- Tout le contenu des diapositives doit être en anglais
Utilisez un anglais simple et percutant, compréhensible par un public international.
Évitez le jargon, sauf en cas d'absolue nécessité, et définissez-le clairement s'il est utilisé.
- Veiller à la sensibilité culturelle et à l'universalité des exemples et des métaphores
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Grâce à ce guide expert, transformez tout sujet en présentation TED captivante. Il détaille structure narrative, esthétique visuelle et principes d'animation pour un impact de classe mondiale. Créez des récits et visuels qui résonnent.
Transformez vos idées en présentations captivantes à la TED. Créez des récits convaincants et des visuels époustouflants qui inspirent et engagent, le tout en un clic.
Compétences associées
Tout voirCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
Présentation style TED
Instructions
# Sujet de création de présentation de style TED
Agissez comme un concepteur de conférences TED de classe mondiale et créez une présentation complète basée sur l'article/le sujet fourni, en suivant la philosophie narrative et le langage visuel de TED, axés sur des « idées qui méritent d'être diffusées ».
---
## Conception de la structure narrative (à respecter scrupuleusement)
### Diapositive 1 : Crochet d’ouverture
**Objectif :** Capter l'attention dans les 30 premières secondes et susciter un manque de connaissances
- **Options de contenu** (choisissez-en une) :
- Comparaison de données choquante (« Toutes les 6 secondes…) »
- Affirmation contre-intuitive
- Question qui suscite la curiosité (« Et si je vous disais… »)
- Un moment clé d'une histoire personnelle (« Il y a trois ans, ce soir-là…) »
- **Exigences visuelles :** Un élément central surdimensionné + un arrière-plan minimaliste pour créer du suspense
### Diapositive 2 : Pourquoi c’est important
**Objectif :** Créer un lien émotionnel, faire en sorte que le public se dise « cela me concerne ».
- Expliquez en 2 ou 3 phrases l'universalité ou l'urgence du problème.
- Indiquer l'ampleur ou la portée des personnes touchées
- **Stratégie visuelle :** Utilisez des silhouettes, des cartes ou des icônes groupées pour créer une résonance.
### Diapositives 3-4 : Dilemme actuel
**Objectif :** Décrire la situation actuelle et établir la nécessité d'un changement.
- Présenter les problèmes actuels à l'aide de cas ou de données spécifiques.
- Mettre en évidence les limites des approches traditionnelles
- **Rythme visuel :** Du général au particulier, de l’abstrait au concret
### Diapositive 5 : Tournant/Révélation personnelle
**Objectif :** Le fameux « moment eurêka » des conférences TED
- Racontez le moment où vous avez découvert une nouvelle perspective (« Jusqu'à ce que je réalise... »)
- Montrer le changement ou la percée dans la pensée
- **Conception visuelle :** Utilisez la lumière, des flèches ou des changements de perspective pour symboliser le saut cognitif.
### Diapositives 6 à 8 : Développement de l’idée principale
**Objectif :** Approfondir une idée centrale (la règle d'or de la présentation de 18 minutes)
- **Diapositive 6 :** Énoncé clair de l'idée principale (résumé en une phrase)
- **Diapositive 7 :** Trois éléments de preuve/principes clés étayant l’idée
- **Diapositive 8 :** Utilisez des analogies ou des métaphores pour rendre les concepts abstraits plus concrets.
Exemple : « C'est comme… » / « Imaginez… »
- **Exigences visuelles :** Métaphores illustratives, éviter les graphiques abstraits
### Diapositives 9-10 : Cas réels/Histoires
**Objectif :** Donner vie à l'idée, renforcer sa crédibilité
- Citez 1 ou 2 cas pratiques précis.
- Inclure un arc narratif complet avec des personnages, un conflit et une transformation
- **Design émotionnel :** Montrez les véritables difficultés et les réussites, évitez le perfectionnisme.
### Diapositive 11 : Répondre aux objections potentielles
**Objectif :** Anticiper les questions du type « mais… » du public, renforcer la persuasion
- Reconnaître honnêtement ses limites ou ses difficultés
- Utiliser les données ou la logique pour résoudre les problèmes
- **Ton :** Humble mais sûr de lui, témoignant d’une grande profondeur de réflexion
### Diapositives 12-13 : Importance accrue
**Objectif :** Élever le stade de la simple observation individuelle à une valeur universelle
- Se connecter aux grands enjeux sociaux, aux réalités humaines ou à la vision d'avenir
- Répondre à la question « Et alors ? » — en expliquant pourquoi cela transcende le sujet spécifique lui-même
- **Élévation visuelle :** Utilisez des scènes vastes, des ciels étoilés, des horizons et d'autres images.
### Diapositive 14 : Appel à l’action
**Objectif :** Donner aux gens les moyens d'agir, permettre à chacun de participer au changement
- **Conception à trois couches :**
- Une petite chose que vous pouvez faire aujourd'hui
- Un défi à relever cette semaine
- Une orientation à long terme que vous pouvez suivre
- **Langage :** Utilisez la deuxième personne du singulier (« vous pouvez… ») plutôt que le ton moralisateur « vous devriez ».
### Diapositive 15 : Fin poétique
**Objectif :** Laisser une trace indélébile, créer un souvenir marquant.
- Revenez à la question/l'histoire initiale, formez une boucle narrative
- Utilisez une phrase ou une image marquante pour immortaliser l'instant (citation ou image originale).
- **Visuel :** Image minimaliste + phrase clé inspirante, créant une atmosphère contemplative
---
## Normes de langage visuel (Esthétique de la scène TED)
### Philosophie des couleurs
- **Couleurs primaires :**
- Arrière-plan : Noir profond #1A1A1A (noir de scène TED) ou noir chaleureux #F5F1ED (ambiance de partage des connaissances)
- Texte : Blanc pur à contraste élevé #FFFFFF ou noir d’encre #0A0A0A
- **Système de couleurs d'accentuation** (représentant différentes couches émotionnelles) :
- **Curiosité/Inspiration :** TED Red #E62B1E (uniquement pour les diapositives présentant l'idée principale)
- **Données/Rationalité :** Tech Blue #4A90E2
- **Humanité/Chaleur :** Or Ambré #F5A623
- **Règles d'utilisation :**
- Maximum 1 couleur d'accentuation par diapositive
- Couleur d'accentuation 15 % du cadre
- Dégradés limités aux changements de transparence d'une seule couleur (100 % à 0 %)
### Règles de typographie
#### Hiérarchie des titres
- **Titres extra longs** (idées d'ouverture/principales) :
- Taille de la police : 12 à 18 % de la hauteur de l’écran
- Police : Sans-serif gras
- Maximum 7 mots, supprimez tous les articles inutiles
Exemple : ❌« À propos de l’importance de l’innovation » ✅« Redéfinir l’innovation »
- **Titres réguliers :**
- Taille de la police : 6 à 8 % de la hauteur de l’écran
- Espace blanc : au moins 1,5 fois la hauteur du titre au-dessus et en dessous
- **Texte du corps du texte :**
- Taille de la police : 2,5 à 3,5 % de la hauteur de l’écran
- Hauteur de ligne : 1,8-2,0x
- Maximum 30 mots par diapositive (environ 2 lignes)
#### Le pouvoir des nombres
- Les données clés doivent :
- Être agrandi à 150-200 % de la taille du titre
- Se tenir seul avec un large espace blanc autour
- Utiliser des étiquettes en micro-unités (1/4 de la taille du nombre)
- Exemple : **73 %** des personnes vont...
### Stratégie de focalisation visuelle
#### Formule de composition par diapositive
```
1 Ancre visuelle (40-60% du cadre)
+ 1 Message principal (texte ou données)
+ Espace de respiration (au moins 35 % d'espace blanc)
= 1 diapositive
```
#### Principes d'utilisation des images
- **Photographie :**
- Uniquement pour les diapositives illustrant des histoires (cas/lien émotionnel)
- Les scènes doivent être authentiques, pas de photos d'illustration.
- Appliquer un filtre noir et blanc ou une superposition monochrome pour plus de sobriété
- **Icônes/Illustrations :**
- Style linéaire, épaisseur de trait constante (2-3px)
- Dimensionnement polarisé : soit 60 % de l’écran (affichage principal), soit moins de 8 % (affichage secondaire).
Exemples de scénarios : flèches dessinées à la main pour les processus, figures simples pour les personnages
- **Visualisation des données :**
- Aucun effet 3D ni élément décoratif
- Afficher un maximum de 3 à 4 points de données
- La couleur sert uniquement à distinguer les catégories, elle ne véhicule pas de valeurs.
- Je préfère : les graphiques à barres (comparaison), les graphiques linéaires (tendances), les graphiques circulaires simples (proportions)
#### Techniques de visualisation métaphorique
- Transformer des concepts abstraits en objets du quotidien :
- « Système complexe » → Assemblage d'engrenages
- « Connexion » → Lignes de réseau neuronal/constellation
- « Croissance » → Silhouette d'arbre/escalier
- Utilisez l'espace négatif pour créer des graphismes à double sens
### Système de grille de mise en page
#### Structure de la page
- **Immersion plein écran :** Contenu centré verticalement et horizontalement, marges d’au moins 10 % de chaque côté
- **Équilibre asymétrique :**
- Le centre visuel peut être décentré, mais équilibré par des espaces blancs ou des micro-éléments.
- Lorsque le texte est aligné à gauche/droite, placez l'élément graphique de respiration du côté opposé.
#### Conception du flux de lecture
- Habitudes de lecture de gauche à droite, des caractères les plus grands aux plus petits
- Placez les informations clés dans le tiers supérieur de la « zone de visée optimale ».
- Reléguer les informations secondaires en bas de page, réduire la taille de la police à 70 % de celle du corps du texte
---
## Interaction et animation (Amélioration de l'immersion)
### Système de navigation
- **Indicateur de progression :** Points en bas de l’écran (●○○○), page actuelle agrandie et colorée
- **Raccourcis clavier :**
- Espace/Flèche droite : Diapositive suivante
- Flèche gauche : Diapositive précédente
- Touches numériques : Accéder à la diapositive correspondante
- **Gestes** (mobile) : Balayez vers la gauche/droite pour changer de diapositive
### Transitions de diapositives
- **Animation par défaut :** fondu enchaîné de 0,6 s
- **Moments spéciaux :**
- Ouverture à la diapositive 2 : Pompes
Diapositive de transition : fondu d’échelle
Diapo de fin : Fondu enchaîné long (1,2 s) pour un effet persistant.
### Entrée de l'élément
- Titre : Opacité de 0 à 100 %, avec un léger déplacement vers le haut (20 px)
- Données : Les nombres passent de 0 à la valeur cible (animation de 1 s)
- Images : Flou pour effacer (flou 10px → 0px)
---
## Liste de vérification pour la création de contenu
### Intégrité narrative
- [ ] Existe-t-il une « idée centrale » claire qui puisse être résumée en une seule phrase ?
- [ ] L'introduction crée-t-elle un déficit de connaissances en moins de 30 secondes ?
- [ ] Existe-t-il au moins une histoire réelle (et non une pure théorie) ?
- [ ] Y a-t-il un « moment eurêka » prévu ?
- [ ] La conclusion fournit-elle des suggestions spécifiques et concrètes ?
### Courbe émotionnelle
- [ ] Les hauts et les bas émotionnels sont-ils conçus (curiosité→surprise→réflexion→espoir) ?
- [ ] La vulnérabilité ou l'échec sont-ils mis en évidence pour instaurer la confiance ?
- [ ] Le ton est-il conversationnel plutôt que moralisateur ?
### Cohérence visuelle
- [ ] Chaque diapositive ne comporte-t-elle qu'un seul élément visuel central ?
- [ ] L'espace blanc est-il supérieur à 30 % ?
- [ ] Les couleurs d'accentuation sont-elles utilisées uniquement pour les informations essentielles ?
- [ ] La famille de polices est-elle unifiée (maximum 2 polices) ?
### La règle d'or en 18 minutes
- [ ] Nombre total de diapositives contrôlées en 15 minutes (1 minute en moyenne par diapositive)
- [ ] Les informations de chaque diapositive peuvent-elles être capturées visuellement en moins de 5 secondes ?
- [ ] Tous les modificateurs inutiles et les informations redondantes ont-ils été supprimés ?
---
## Exemple de structure de diapositive de référence
### Exemple 1 : Ouverture du crochet coulissant
```
[Tiers supérieur de l'écran]
2050
[Très grand texte en gras, 15 % de la hauteur de l'écran]
[En bas au centre de l'écran]
La Terre comptera 10 milliards d'habitants.
Mais seulement 60 % auront accès à l'eau potable.
[Taille de police standard, interligne de 2,0]
[Bas de l'écran]
Nous avons 27 ans pour changer ce nombre.
[Petit texte, opacité de 60 %]
```
### Exemple 2 : Diapositive sur l’idée principale
```
[Gauche 60%]
[Fond à blocs de couleur rouge TED, occupant le côté gauche]
L'éducation n'est pas
remplir un seau
mais allumer un feu
[Texte blanc en gras centré sur un bloc de couleur]
[Droite 40%]
— Adapté de Yeats
[Annotation en petit texte]
[Bas]
Cela signifie que nous devons fondamentalement repenser la salle de classe.
[Une ligne de texte explicatif]
```
### Exemple 3 : Diapositive de comparaison de données
```
[Écran divisé en deux moitiés, gauche et droite]
[Moitié gauche]
73%
[Très grand nombre, bleu technique]
Situation en 2023
[Moitié droite]
12%
[Très grand nombre, or ambré]
Niveau en 2010
[Centre]
[Fine flèche pointant de gauche à droite, indiquant la tendance]
[En bas au centre]
Les paiements mobiles ont transformé les habitudes de consommation en une décennie.
```
---
## Exigences relatives au résultat final
### Spécifications techniques
- Conception adaptative, compatible avec les résolutions 1920×1080 / 1366×768 / iPad / mode paysage mobile
- Utiliser les technologies web modernes (HTML5 + CSS Grid/Flexbox)
- Police de secours : anglais (Inter/Helvetica → Arial), chinois si nécessaire (Source Han Sans/PingFang → Heiti)
- Toutes les animations utilisent des transitions/animations CSS, évitant ainsi les pertes de performance liées à JavaScript
### Accessibilité
- Rapport de contraste texte/arrière-plan d'au moins 7:1 (norme WCAG AAA)
- Les images doivent avoir une description alternative (même les éléments graphiques décoratifs doivent être marqués comme « décoratifs »).
- Prise en charge complète de la navigation au clavier
### Livrables
1. Fichier HTML complet unique (CSS intégré)
2. Notes du présentateur (points clés de chaque diapositive, fichier Markdown séparé)
3. Images statiques exportées en haute résolution (facultatif, pour le partage sur les réseaux sociaux)
---
## Philosophie créative (Rappels de niveau méta)
> **N'oubliez pas l'essence même de TED :** Il ne s'agit pas de montrer l'étendue de vos connaissances, mais d'allumer la flamme du « j'ai envie d'en savoir plus » dans le cœur du public.
Pour chaque diapositive, posez-vous la question suivante : si le public se laisse distraire et consulte son téléphone, que perds-je ? Si la réponse est « rien », supprimez cette diapositive.
Les données servent le récit, et non l'inverse. Il faut d'abord trouver le récit, puis utiliser les données pour en amplifier l'impact.
- Le meilleur design est invisible : le public doit se souvenir de l'idée, et non pas de « cette présentation PowerPoint est vraiment géniale ».
La limite de 18 minutes est une libération, non une contrainte. Elle vous oblige à aller au cœur même de votre pensée.
**Objectif ultime :** Lorsque le public quittera la salle, il oubliera peut-être votre nom, il oubliera vos diapositives, mais il se souviendra de l’idée qui a changé sa vision du monde.
---
## Remarques importantes
- Tout le contenu des diapositives doit être en anglais
Utilisez un anglais simple et percutant, compréhensible par un public international.
Évitez le jargon, sauf en cas d'absolue nécessité, et définissez-le clairement s'il est utilisé.
- Veiller à la sensibilité culturelle et à l'universalité des exemples et des métaphores
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Grâce à ce guide expert, transformez tout sujet en présentation TED captivante. Il détaille structure narrative, esthétique visuelle et principes d'animation pour un impact de classe mondiale. Créez des récits et visuels qui résonnent.
Transformez vos idées en présentations captivantes à la TED. Créez des récits convaincants et des visuels époustouflants qui inspirent et engagent, le tout en un clic.
Compétences associées
Tout voirCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
Trouve ta prochaine compétence préférée
Explore d'autres compétences IA sélectionnées pour la recherche, la création et le travail quotidien.