Presentazione in stile TED
Istruzioni
# Spunto per la creazione di una presentazione in stile TED
Mettiti nei panni di un esperto di TED Talk di livello mondiale e crea una presentazione completa basata sull'articolo/argomento fornito, seguendo la filosofia narrativa e il linguaggio visivo di TED, incentrati sulle "idee che meritano di essere diffuse".
---
## Struttura narrativa (da seguire rigorosamente)
### Diapositiva 1: Apertura gancio
**Obiettivo:** Catturare l'attenzione nei primi 30 secondi, creare un divario di conoscenza
- **Opzioni di contenuto** (sceglierne una):
- Confronto di dati sconvolgente ("Ogni 6 secondi...")
- Affermazione controintuitiva
- Domanda che suscita curiosità ("E se ti dicessi...")
- Momento chiave di una storia personale ("Tre anni fa, quella notte...")
- **Requisiti visivi:** Un elemento centrale di grandi dimensioni + sfondo minimalista per creare suspense
### Diapositiva 2: Perché è importante
**Obiettivo:** Creare un legame emotivo, far sì che il pubblico si renda conto che "questo mi riguarda"
- Utilizza 2-3 frasi per spiegare l'universalità o l'urgenza del problema
- Mostrare la portata o l'entità del numero di persone colpite
- **Strategia visiva:** Utilizzare sagome, mappe o icone di gruppo per creare risonanza
### Diapositive 3-4: Il dilemma attuale
**Obiettivo:** Descrivere "la situazione attuale" e stabilire la necessità di un cambiamento.
- Mostrare i problemi attuali con casi o dati specifici
- Evidenziare i limiti degli approcci tradizionali
- **Ritmo visivo:** Dal generale allo specifico, dall'astratto al tangibile
### Diapositiva 5: Punto di svolta/Epifania personale
**Obiettivo:** Il tipico "momento aha" di TED
- Racconta il momento in cui hai scoperto una nuova prospettiva ("Finché non ho capito...")
- Mostrare il cambiamento o la svolta nel pensiero
- **Design visivo:** Utilizzare luce, frecce o cambiamenti di prospettiva per simboleggiare il salto cognitivo.
### Diapositive 6-8: Espansione dell'idea centrale
**Obiettivo:** Approfondire "un'idea centrale" (la regola d'oro del discorso di 18 minuti)
- **Diapositiva 6:** Dichiarazione chiara dell'idea centrale (essenza in una frase)
- **Diapositiva 7:** Tre elementi chiave di prova/principi a sostegno dell'idea
- **Diapositiva 8:** Utilizzare analogie o metafore per rendere concreti i concetti astratti.
- Esempio: "È come..." / "Immagina un..."
- **Requisiti visivi:** Metafore illustrative, evitare grafici astratti
### Diapositive 9-10: Casi/Storie reali
**Obiettivo:** dare vita all'idea, costruire credibilità
- Descrivi 1-2 casi pratici specifici
- Includere un arco narrativo completo con personaggi, conflitto e trasformazione
- **Design emozionale:** Mostra le vere difficoltà e i successi, evita il perfezionismo
### Diapositiva 11: Rispondere alle potenziali obiezioni
**Obiettivo:** Anticipare le domande del pubblico del tipo "ma...", migliorare la capacità di persuasione
- Riconoscere onestamente i limiti o le difficoltà
- Utilizzare dati o logica per risolvere i problemi
- **Tono:** Umile ma fiducioso, dimostra profondità di pensiero
### Diapositive 12-13: Maggiore importanza
**Obiettivo:** Elevare il valore dal singolo caso a valore universale.
- Collegarsi a questioni sociali più ampie, a intuizioni umane o a una visione del futuro
- Rispondere alla domanda "E allora?" — perché questo trascende l'argomento specifico in sé
- **Elevazione visiva:** Utilizzare scene ampie, cieli stellati, orizzonti e altre immagini
### Diapositiva 14: Invito all'azione
**Obiettivo:** Dare potere al pubblico, permettere a tutti di partecipare al cambiamento
- **Design a tre strati:**
- Una piccola cosa che puoi fare oggi
- Una sfida che puoi provare questa settimana
- Una direzione a lungo termine che puoi perseguire
- **Linguaggio:** Utilizzare la seconda persona "puoi..." piuttosto che il tono moraleggiante "dovresti"
### Diapositiva 15: Finale poetico
**Obiettivo:** Lasciare un'eco, creare un punto di ancoraggio nella memoria
- Ritornare alla domanda/storia iniziale, creando un ciclo narrativo
- Utilizza una frase o un'immagine d'effetto per immortalare il momento (citazione o originale).
- **Aspetto visivo:** Immagine minimalista + frase chiave, creano un'atmosfera contemplativa
---
## Standard del linguaggio visivo (TED Stage Aesthetics)
### Filosofia del colore
- **Colori primari:**
- Sfondo: Nero intenso #1A1A1A (nero da palco TED) o caldo #F5F1ED (atmosfera di condivisione della conoscenza)
- Testo: Bianco puro ad alto contrasto #FFFFFF o nero inchiostro #0A0A0A
- **Sistema di colori d'accento** (che rappresenta diversi livelli emotivi):
- **Curiosità/Ispirazione:** TED Red #E62B1E (solo per le slide con l'idea principale)
- **Dati/Razionalità:** Tech Blue #4A90E2
- **Umanità/Calore:** Oro Ambra #F5A623
- **Regole d'uso:**
- Massimo 1 colore di accento per diapositiva
- Accento di colore che copre il 15% del fotogramma
- Le sfumature sono limitate a variazioni di trasparenza a colore singolo (100%-0%)
### Regole tipografiche
#### Gerarchia dei titoli
- **Titoli extra large** (idee di apertura/centrali):
- Dimensione del carattere: 12-18% dell'altezza dello schermo
- Carattere: sans-serif in grassetto
- Massimo 7 parole, rimuovere tutti gli articoli non necessari
- Esempio: ❌"Sull'importanza dell'innovazione" ✅"Ridefinire l'innovazione"
- **Titoli regolari:**
- Dimensione del carattere: 6-8% dell'altezza dello schermo
- Spazio bianco: almeno 1,5 volte l'altezza del titolo sopra e sotto
- **Testo del corpo:**
- Dimensione del carattere: 2,5-3,5% dell'altezza dello schermo
- Interlinea: 1,8-2,0x
- Massimo 30 parole per diapositiva (circa 2 righe)
#### Il potere dei numeri
- I dati chiave devono:
- Ingrandire fino al 150-200% della dimensione del titolo
- Da solo con ampio spazio bianco intorno
- Presentare etichette con unità di misura micro (1/4 della dimensione del numero)
- Esempio: **73%** delle persone...
### Strategia di focalizzazione visiva
#### Formula di composizione per diapositiva
```
1. Ancoraggio visivo (40-60% dell'inquadratura)
+ 1 Messaggio principale (testo o dati)
+ Spazio di respiro (almeno il 35% di spazio bianco)
= 1 diapositiva
```
Principi di utilizzo delle immagini
- **Fotografia:**
- Solo per le diapositive relative alle storie (casi/connessione emotiva)
- Devono essere scene autentiche, non foto di repertorio.
- Applicare un filtro in bianco e nero o una sovrapposizione monocromatica per moderazione
- **Icone/Illustrazioni:**
- Stile lineare, spessore del tratto uniforme (2-3px)
- Dimensioni polarizzate: 60% dello schermo (immagine principale) o meno dell'8% (immagine supplementare)
- Esempi di scenari: frecce disegnate a mano per i processi, figure semplici per i personaggi
- **Visualizzazione dei dati:**
- Nessun effetto 3D o elemento decorativo
- Mostrare al massimo 3-4 punti dati
- Il colore serve solo a distinguere le categorie, non a trasmettere valori
- Preferisco: grafici a barre (confronto), grafici a linee (andamento), grafici a torta singoli (proporzioni)
#### Tecniche di visualizzazione delle metafore
- Trasformare concetti astratti in oggetti di uso quotidiano:
- "Sistema complesso" → Gruppo ingranaggi
- "Connessione" → Linee di rete/costellazione neurale
- "Crescita" → Silhouette di albero/scala
- Utilizzare lo spazio negativo per creare grafiche a doppio significato
### Sistema di griglia di layout
#### Struttura della pagina
- **Immersività a schermo intero:** Contenuto centrato verticalmente e orizzontalmente, margini di almeno il 10% su tutti i lati
- **Equilibrio asimmetrico:**
- Il centro visivo può essere decentrato, ma bilanciato da spazi bianchi o microelementi.
- Quando il testo è allineato a sinistra/destra, posizionare l'elemento grafico "respiro" sul lato opposto.
#### Progettazione del flusso di lettura
- Abitudini di lettura da sinistra a destra, dal più grande al più piccolo
- Posizionare le informazioni chiave nel terzo superiore della "zona di visuale aurea".
- Sposta le informazioni secondarie in fondo alla pagina e riduci la dimensione del carattere al 70% del testo principale.
---
## Interazione e animazione (migliora l'immersione)
### Sistema di navigazione
- **Indicatore di avanzamento:** I punti in basso (●○○○) indicano che la pagina corrente è ingrandita e colorata.
- **Scorciatoie da tastiera:**
- Spazio/Freccia destra: diapositiva successiva
- Freccia sinistra: diapositiva precedente
- Tasti numerici: Passa alla diapositiva corrispondente
- **Gesti** (mobile): scorri a sinistra/destra per cambiare diapositiva
### Transizioni tra diapositive
- **Animazione predefinita:** dissolvenza in entrata e in uscita di 0,6 secondi
- **Momenti speciali:**
- Apertura per lo scivolo 2: spingere verso l'alto
- Diapositiva del punto di svolta: dissolvenza in scala
- Diapositiva finale: Dissolvenza lunga (1,2 s) per un effetto di bagliore residuo
### Ingresso Elemento
- Titolo: Opacità da 0 a 100%, con leggero movimento verso l'alto (20px)
- Dati: I numeri saltano da 0 al valore target (animazione di 1 secondo)
- Immagini: Sfocatura per una maggiore nitidezza (sfocatura da 10px a 0px)
---
## Lista di controllo per la creazione di contenuti
### Completezza narrativa
- [ ] Esiste un'idea centrale chiara che possa essere riassunta in una sola frase?
- [ ] L'apertura crea una lacuna di conoscenza entro 30 secondi?
- [ ] Esiste almeno una storia vera (non pura teoria)?
- [ ] È previsto un "momento rivelazione"?
- [ ] Il finale fornisce suggerimenti specifici e attuabili?
### Curva emozionale
- [ ] Gli alti e bassi emotivi sono progettati (curiosità→sorpresa→riflessione→speranza)?
- [ ] La vulnerabilità o il fallimento vengono mostrati per costruire fiducia?
- [ ] Il tono è colloquiale piuttosto che moraleggiante?
### Coerenza visiva
- [ ] Ogni diapositiva ha un solo punto focale visivo?
- [ ] Lo spazio bianco supera il 30%?
- [ ] I colori di accento vengono utilizzati solo per le informazioni principali?
- [ ] La famiglia di caratteri è unificata (massimo 2 caratteri)?
### La regola d'oro dei 18 minuti
- [ ] Numero totale di diapositive controllate entro 15 (in media 1 minuto per diapositiva)
- [ ] È possibile catturare visivamente le informazioni di ciascuna diapositiva entro 5 secondi?
- [ ] Sono stati rimossi tutti i modificatori non necessari e le informazioni ridondanti?
---
## Esempio di struttura di diapositiva di riferimento
### Esempio 1: Apertura del gancio scorrevole
```
[Terzo superiore dello schermo]
2050
[Carattere extra large in grassetto, 15% dell'altezza dello schermo]
[In basso al centro dello schermo]
La Terra avrà 10 miliardi di persone
Ma solo il 60% avrà accesso all'acqua potabile.
[Carattere di dimensioni normali, interlinea 2.0]
[Parte inferiore dello schermo]
Abbiamo 27 anni per cambiare questo numero
[Testo piccolo, opacità 60%]
```
### Esempio 2: Slide dell'idea centrale
```
[Sinistra 60%]
[Sfondo a blocchi di colore rosso TED, che occupa il lato sinistro]
L'istruzione non è
riempire un secchio
ma accendere un fuoco
[Testo bianco in grassetto centrato su un blocco di colore]
[40% a destra]
— Tratto da Yeats
[Annotazione di testo in piccolo]
[Metter il fondo a]
Ciò significa che dobbiamo riprogettare radicalmente l'aula
[Una riga di testo esplicativo]
```
Esempio 3: Diapositiva di confronto dei dati
```
[Schermo diviso in due metà, sinistra e destra]
[Metà sinistra]
73%
[Numero extra large, blu tecnico]
Situazione nel 2023
[Metà destra]
12%
[Numero extra large, oro ambrato]
Livello nel 2010
[Centro]
[Freccia sottile che punta da sinistra a destra, a indicare la tendenza]
[In basso al centro]
I pagamenti tramite dispositivi mobili hanno cambiato le abitudini di consumo in un decennio.
```
---
## Requisiti di output finale
### Specifiche tecniche
- Design responsivo, compatibile con 1920×1080 / 1366×768 / iPad / modalità orizzontale per dispositivi mobili
- Utilizzare tecnologie web moderne (HTML5 + CSS Grid/Flexbox)
- Carattere di riserva: inglese (Inter/Helvetica → Arial), cinese se necessario (Source Han Sans/PingFang → Heiti)
- Tutte le animazioni utilizzano transizioni/animazioni CSS, evitando perdite di prestazioni dovute a JavaScript.
### Accessibilità
- Rapporto di contrasto testo-sfondo di almeno 7:1 (standard WCAG AAA)
- Le immagini devono avere una descrizione alternativa (anche gli elementi grafici decorativi devono essere contrassegnati come "decorativi").
- Supporto completo per la navigazione tramite tastiera
### Risultati attesi
1. File HTML completo in un unico file (CSS inline)
2. Note del relatore (punti chiave per ogni diapositiva, file Markdown separato)
3. Immagini statiche ad alta risoluzione esportate (facoltative, per la condivisione sui social)
---
## Filosofia creativa (promemoria a livello meta)
**Ricorda il principio fondamentale di TED:** non si tratta di dimostrare quanto sai, ma di accendere la fiamma del "Voglio saperne di più" nel cuore del pubblico.
- Per ogni diapositiva, chiediti: se il pubblico si distrae e controlla il telefono proprio ora, cosa perdo? Se la risposta è "niente", elimina questa diapositiva.
- I dati sono al servizio della storia, non il contrario. Prima si individua la storia, poi si utilizzano i dati per amplificarne l'impatto.
- Il design migliore è quello invisibile: il pubblico dovrebbe ricordare l'idea, non "questa presentazione PowerPoint è fantastica".
- Il limite di 18 minuti è una liberazione, non una costrizione. Ti obbliga a trovare il nucleo cristallino del tuo pensiero.
**Obiettivo finale:** Quando il pubblico lascia la sala, potrebbe dimenticare il tuo nome, dimenticare le tue diapositive, ma ricorderà l'idea che ha cambiato il suo modo di vedere il mondo.
---
## Note importanti
- Tutto il contenuto delle diapositive deve essere in inglese
- Utilizzare un inglese semplice ed efficace, comprensibile a un pubblico globale.
- Evitate il gergo tecnico a meno che non sia assolutamente necessario, e se lo utilizzate definitelo chiaramente.
- Garantire la sensibilità culturale e l'attrattiva universale degli esempi e delle metafore.
Descrizione
Consigliato da
nene@YouMind
Perché consigliamo questa abilità
Questa guida esperta trasforma qualsiasi argomento in una presentazione accattivante in stile TED. Delinea struttura narrativa, estetica visiva e principi di animazione per chiarezza e impatto da discorso di alto livello. Crea storie e immagini che risuonano con il pubblico.
Trasforma le tue idee in presentazioni accattivanti in stile TED. Crea narrazioni coinvolgenti e immagini mozzafiato che ispirano e coinvolgono, tutto con un semplice clic.
Abilità correlate
Vedi tuttoCostruttore pagine esplorabili
Un rapporto spiega. Una pagina permette alle persone di scoprire da sole. YouMind può già creare pagine web. Explorable Explainer decide cosa costruire: trasforma una ricerca, un set di dati o un argomento in una singola pagina interattiva nella tradizione delle grafiche da redazione e delle spiegazioni esplorabili: narrazione a scorrimento, grafici reali, controlli che puoi muovere, fonti che puoi verificare. Pianifica prima di scrivere codice. Prima approvi un piano di costruzione: la domanda a cui la pagina risponde, il momento rivelazione — il momento in cui il lettore dovrebbe pensare "oh" — una struttura a scorrimento di cinque-otto sezioni, due-quattro interazioni, ciascuna giustificata da ciò che il lettore impara muovendola, e un contratto dati che elenca ogni numero e la sua provenienza. Poi crea un unico file HTML autonomo senza passaggi di compilazione. Markup semantico. Tutti i numeri in un'unica costante DATA modificabile all'inizio. Rivelazioni a scorrimento che non si rompono su telefono. Ogni controllo è un vero elemento di modulo operabile da tastiera, con testo in tempo reale che descrive il suo valore corrente. L'accessibilità è integrata, non aggiunta a posteriori: contrasto 4.5:1, anelli di messa a fuoco visibili, testo alternativo ovunque, nessun significato trasmesso solo dal colore, rispetto per il movimento ridotto, responsive da 360px. Prima di consegnare, esegue un'autovalutazione in cinque punti e riporta onestamente i risultati: la rivelazione funziona davvero, la pagina si legge ancora con JavaScript disattivato, l'ordine di tabulazione è sensato, ogni numero è tracciabile, c'è qualche animazione che il lettore vorrebbe fermare. Due regole che non infrange: non inventa mai dati per far sembrare bello un grafico e ti dice quando i tuoi numeri contraddicono la tua bozza. Per ricercatori, analisti, giornalisti, educatori, fondatori indipendenti e consulenti che vogliono che il proprio lavoro venga esplorato piuttosto che letto di fretta.
Pagina webWeb soffuso diurno fluttuante
Sistema di design web in stile luce soffusa diurna: tela azzurro pallido (#ebf5ff), caratteri display extra-large con peso fisso 500 (massimo 148px responsive), card con angoli arrotondati da 32px + pillole da 9999px, CTA solido quasi nero #181d27, blocchi color pastello e illustrazioni 3D in argilla fluttuanti. La profondità è ottenuta unicamente tramite la variazione tonale dalla tela alle card, con card di contenuto senza ombre. Adatto per esigenze come 'stile luce soffusa diurna', 'landing page con illustrazioni 3D', 'tela azzurra', 'card arrotondate', 'sito web SaaS', 'stile Linear/Framer', ecc. Include vincoli di accessibilità e responsive.
Pagina webFashion Creative Design Pagine
Sistema di web design in stile poster editoriale di moda: tela cartacea color crema caldo (#fffef7), titoli extra-large con peso 300 (64–84px), fotografia a piena pagina, zero ombre, card con angoli retti + pulsanti a forma di pillola con raggio di 1440px. Ideale per esigenze come «stile design di moda», «impaginazione rivista», «stile poster», «web album d'arte», «portfolio di studio», «pagina galleria», ecc. Può riscrivere qualsiasi contenuto in una pagina in stile editoriale di alta moda.
Presentazione in stile TED
Istruzioni
# Spunto per la creazione di una presentazione in stile TED
Mettiti nei panni di un esperto di TED Talk di livello mondiale e crea una presentazione completa basata sull'articolo/argomento fornito, seguendo la filosofia narrativa e il linguaggio visivo di TED, incentrati sulle "idee che meritano di essere diffuse".
---
## Struttura narrativa (da seguire rigorosamente)
### Diapositiva 1: Apertura gancio
**Obiettivo:** Catturare l'attenzione nei primi 30 secondi, creare un divario di conoscenza
- **Opzioni di contenuto** (sceglierne una):
- Confronto di dati sconvolgente ("Ogni 6 secondi...")
- Affermazione controintuitiva
- Domanda che suscita curiosità ("E se ti dicessi...")
- Momento chiave di una storia personale ("Tre anni fa, quella notte...")
- **Requisiti visivi:** Un elemento centrale di grandi dimensioni + sfondo minimalista per creare suspense
### Diapositiva 2: Perché è importante
**Obiettivo:** Creare un legame emotivo, far sì che il pubblico si renda conto che "questo mi riguarda"
- Utilizza 2-3 frasi per spiegare l'universalità o l'urgenza del problema
- Mostrare la portata o l'entità del numero di persone colpite
- **Strategia visiva:** Utilizzare sagome, mappe o icone di gruppo per creare risonanza
### Diapositive 3-4: Il dilemma attuale
**Obiettivo:** Descrivere "la situazione attuale" e stabilire la necessità di un cambiamento.
- Mostrare i problemi attuali con casi o dati specifici
- Evidenziare i limiti degli approcci tradizionali
- **Ritmo visivo:** Dal generale allo specifico, dall'astratto al tangibile
### Diapositiva 5: Punto di svolta/Epifania personale
**Obiettivo:** Il tipico "momento aha" di TED
- Racconta il momento in cui hai scoperto una nuova prospettiva ("Finché non ho capito...")
- Mostrare il cambiamento o la svolta nel pensiero
- **Design visivo:** Utilizzare luce, frecce o cambiamenti di prospettiva per simboleggiare il salto cognitivo.
### Diapositive 6-8: Espansione dell'idea centrale
**Obiettivo:** Approfondire "un'idea centrale" (la regola d'oro del discorso di 18 minuti)
- **Diapositiva 6:** Dichiarazione chiara dell'idea centrale (essenza in una frase)
- **Diapositiva 7:** Tre elementi chiave di prova/principi a sostegno dell'idea
- **Diapositiva 8:** Utilizzare analogie o metafore per rendere concreti i concetti astratti.
- Esempio: "È come..." / "Immagina un..."
- **Requisiti visivi:** Metafore illustrative, evitare grafici astratti
### Diapositive 9-10: Casi/Storie reali
**Obiettivo:** dare vita all'idea, costruire credibilità
- Descrivi 1-2 casi pratici specifici
- Includere un arco narrativo completo con personaggi, conflitto e trasformazione
- **Design emozionale:** Mostra le vere difficoltà e i successi, evita il perfezionismo
### Diapositiva 11: Rispondere alle potenziali obiezioni
**Obiettivo:** Anticipare le domande del pubblico del tipo "ma...", migliorare la capacità di persuasione
- Riconoscere onestamente i limiti o le difficoltà
- Utilizzare dati o logica per risolvere i problemi
- **Tono:** Umile ma fiducioso, dimostra profondità di pensiero
### Diapositive 12-13: Maggiore importanza
**Obiettivo:** Elevare il valore dal singolo caso a valore universale.
- Collegarsi a questioni sociali più ampie, a intuizioni umane o a una visione del futuro
- Rispondere alla domanda "E allora?" — perché questo trascende l'argomento specifico in sé
- **Elevazione visiva:** Utilizzare scene ampie, cieli stellati, orizzonti e altre immagini
### Diapositiva 14: Invito all'azione
**Obiettivo:** Dare potere al pubblico, permettere a tutti di partecipare al cambiamento
- **Design a tre strati:**
- Una piccola cosa che puoi fare oggi
- Una sfida che puoi provare questa settimana
- Una direzione a lungo termine che puoi perseguire
- **Linguaggio:** Utilizzare la seconda persona "puoi..." piuttosto che il tono moraleggiante "dovresti"
### Diapositiva 15: Finale poetico
**Obiettivo:** Lasciare un'eco, creare un punto di ancoraggio nella memoria
- Ritornare alla domanda/storia iniziale, creando un ciclo narrativo
- Utilizza una frase o un'immagine d'effetto per immortalare il momento (citazione o originale).
- **Aspetto visivo:** Immagine minimalista + frase chiave, creano un'atmosfera contemplativa
---
## Standard del linguaggio visivo (TED Stage Aesthetics)
### Filosofia del colore
- **Colori primari:**
- Sfondo: Nero intenso #1A1A1A (nero da palco TED) o caldo #F5F1ED (atmosfera di condivisione della conoscenza)
- Testo: Bianco puro ad alto contrasto #FFFFFF o nero inchiostro #0A0A0A
- **Sistema di colori d'accento** (che rappresenta diversi livelli emotivi):
- **Curiosità/Ispirazione:** TED Red #E62B1E (solo per le slide con l'idea principale)
- **Dati/Razionalità:** Tech Blue #4A90E2
- **Umanità/Calore:** Oro Ambra #F5A623
- **Regole d'uso:**
- Massimo 1 colore di accento per diapositiva
- Accento di colore che copre il 15% del fotogramma
- Le sfumature sono limitate a variazioni di trasparenza a colore singolo (100%-0%)
### Regole tipografiche
#### Gerarchia dei titoli
- **Titoli extra large** (idee di apertura/centrali):
- Dimensione del carattere: 12-18% dell'altezza dello schermo
- Carattere: sans-serif in grassetto
- Massimo 7 parole, rimuovere tutti gli articoli non necessari
- Esempio: ❌"Sull'importanza dell'innovazione" ✅"Ridefinire l'innovazione"
- **Titoli regolari:**
- Dimensione del carattere: 6-8% dell'altezza dello schermo
- Spazio bianco: almeno 1,5 volte l'altezza del titolo sopra e sotto
- **Testo del corpo:**
- Dimensione del carattere: 2,5-3,5% dell'altezza dello schermo
- Interlinea: 1,8-2,0x
- Massimo 30 parole per diapositiva (circa 2 righe)
#### Il potere dei numeri
- I dati chiave devono:
- Ingrandire fino al 150-200% della dimensione del titolo
- Da solo con ampio spazio bianco intorno
- Presentare etichette con unità di misura micro (1/4 della dimensione del numero)
- Esempio: **73%** delle persone...
### Strategia di focalizzazione visiva
#### Formula di composizione per diapositiva
```
1. Ancoraggio visivo (40-60% dell'inquadratura)
+ 1 Messaggio principale (testo o dati)
+ Spazio di respiro (almeno il 35% di spazio bianco)
= 1 diapositiva
```
Principi di utilizzo delle immagini
- **Fotografia:**
- Solo per le diapositive relative alle storie (casi/connessione emotiva)
- Devono essere scene autentiche, non foto di repertorio.
- Applicare un filtro in bianco e nero o una sovrapposizione monocromatica per moderazione
- **Icone/Illustrazioni:**
- Stile lineare, spessore del tratto uniforme (2-3px)
- Dimensioni polarizzate: 60% dello schermo (immagine principale) o meno dell'8% (immagine supplementare)
- Esempi di scenari: frecce disegnate a mano per i processi, figure semplici per i personaggi
- **Visualizzazione dei dati:**
- Nessun effetto 3D o elemento decorativo
- Mostrare al massimo 3-4 punti dati
- Il colore serve solo a distinguere le categorie, non a trasmettere valori
- Preferisco: grafici a barre (confronto), grafici a linee (andamento), grafici a torta singoli (proporzioni)
#### Tecniche di visualizzazione delle metafore
- Trasformare concetti astratti in oggetti di uso quotidiano:
- "Sistema complesso" → Gruppo ingranaggi
- "Connessione" → Linee di rete/costellazione neurale
- "Crescita" → Silhouette di albero/scala
- Utilizzare lo spazio negativo per creare grafiche a doppio significato
### Sistema di griglia di layout
#### Struttura della pagina
- **Immersività a schermo intero:** Contenuto centrato verticalmente e orizzontalmente, margini di almeno il 10% su tutti i lati
- **Equilibrio asimmetrico:**
- Il centro visivo può essere decentrato, ma bilanciato da spazi bianchi o microelementi.
- Quando il testo è allineato a sinistra/destra, posizionare l'elemento grafico "respiro" sul lato opposto.
#### Progettazione del flusso di lettura
- Abitudini di lettura da sinistra a destra, dal più grande al più piccolo
- Posizionare le informazioni chiave nel terzo superiore della "zona di visuale aurea".
- Sposta le informazioni secondarie in fondo alla pagina e riduci la dimensione del carattere al 70% del testo principale.
---
## Interazione e animazione (migliora l'immersione)
### Sistema di navigazione
- **Indicatore di avanzamento:** I punti in basso (●○○○) indicano che la pagina corrente è ingrandita e colorata.
- **Scorciatoie da tastiera:**
- Spazio/Freccia destra: diapositiva successiva
- Freccia sinistra: diapositiva precedente
- Tasti numerici: Passa alla diapositiva corrispondente
- **Gesti** (mobile): scorri a sinistra/destra per cambiare diapositiva
### Transizioni tra diapositive
- **Animazione predefinita:** dissolvenza in entrata e in uscita di 0,6 secondi
- **Momenti speciali:**
- Apertura per lo scivolo 2: spingere verso l'alto
- Diapositiva del punto di svolta: dissolvenza in scala
- Diapositiva finale: Dissolvenza lunga (1,2 s) per un effetto di bagliore residuo
### Ingresso Elemento
- Titolo: Opacità da 0 a 100%, con leggero movimento verso l'alto (20px)
- Dati: I numeri saltano da 0 al valore target (animazione di 1 secondo)
- Immagini: Sfocatura per una maggiore nitidezza (sfocatura da 10px a 0px)
---
## Lista di controllo per la creazione di contenuti
### Completezza narrativa
- [ ] Esiste un'idea centrale chiara che possa essere riassunta in una sola frase?
- [ ] L'apertura crea una lacuna di conoscenza entro 30 secondi?
- [ ] Esiste almeno una storia vera (non pura teoria)?
- [ ] È previsto un "momento rivelazione"?
- [ ] Il finale fornisce suggerimenti specifici e attuabili?
### Curva emozionale
- [ ] Gli alti e bassi emotivi sono progettati (curiosità→sorpresa→riflessione→speranza)?
- [ ] La vulnerabilità o il fallimento vengono mostrati per costruire fiducia?
- [ ] Il tono è colloquiale piuttosto che moraleggiante?
### Coerenza visiva
- [ ] Ogni diapositiva ha un solo punto focale visivo?
- [ ] Lo spazio bianco supera il 30%?
- [ ] I colori di accento vengono utilizzati solo per le informazioni principali?
- [ ] La famiglia di caratteri è unificata (massimo 2 caratteri)?
### La regola d'oro dei 18 minuti
- [ ] Numero totale di diapositive controllate entro 15 (in media 1 minuto per diapositiva)
- [ ] È possibile catturare visivamente le informazioni di ciascuna diapositiva entro 5 secondi?
- [ ] Sono stati rimossi tutti i modificatori non necessari e le informazioni ridondanti?
---
## Esempio di struttura di diapositiva di riferimento
### Esempio 1: Apertura del gancio scorrevole
```
[Terzo superiore dello schermo]
2050
[Carattere extra large in grassetto, 15% dell'altezza dello schermo]
[In basso al centro dello schermo]
La Terra avrà 10 miliardi di persone
Ma solo il 60% avrà accesso all'acqua potabile.
[Carattere di dimensioni normali, interlinea 2.0]
[Parte inferiore dello schermo]
Abbiamo 27 anni per cambiare questo numero
[Testo piccolo, opacità 60%]
```
### Esempio 2: Slide dell'idea centrale
```
[Sinistra 60%]
[Sfondo a blocchi di colore rosso TED, che occupa il lato sinistro]
L'istruzione non è
riempire un secchio
ma accendere un fuoco
[Testo bianco in grassetto centrato su un blocco di colore]
[40% a destra]
— Tratto da Yeats
[Annotazione di testo in piccolo]
[Metter il fondo a]
Ciò significa che dobbiamo riprogettare radicalmente l'aula
[Una riga di testo esplicativo]
```
Esempio 3: Diapositiva di confronto dei dati
```
[Schermo diviso in due metà, sinistra e destra]
[Metà sinistra]
73%
[Numero extra large, blu tecnico]
Situazione nel 2023
[Metà destra]
12%
[Numero extra large, oro ambrato]
Livello nel 2010
[Centro]
[Freccia sottile che punta da sinistra a destra, a indicare la tendenza]
[In basso al centro]
I pagamenti tramite dispositivi mobili hanno cambiato le abitudini di consumo in un decennio.
```
---
## Requisiti di output finale
### Specifiche tecniche
- Design responsivo, compatibile con 1920×1080 / 1366×768 / iPad / modalità orizzontale per dispositivi mobili
- Utilizzare tecnologie web moderne (HTML5 + CSS Grid/Flexbox)
- Carattere di riserva: inglese (Inter/Helvetica → Arial), cinese se necessario (Source Han Sans/PingFang → Heiti)
- Tutte le animazioni utilizzano transizioni/animazioni CSS, evitando perdite di prestazioni dovute a JavaScript.
### Accessibilità
- Rapporto di contrasto testo-sfondo di almeno 7:1 (standard WCAG AAA)
- Le immagini devono avere una descrizione alternativa (anche gli elementi grafici decorativi devono essere contrassegnati come "decorativi").
- Supporto completo per la navigazione tramite tastiera
### Risultati attesi
1. File HTML completo in un unico file (CSS inline)
2. Note del relatore (punti chiave per ogni diapositiva, file Markdown separato)
3. Immagini statiche ad alta risoluzione esportate (facoltative, per la condivisione sui social)
---
## Filosofia creativa (promemoria a livello meta)
**Ricorda il principio fondamentale di TED:** non si tratta di dimostrare quanto sai, ma di accendere la fiamma del "Voglio saperne di più" nel cuore del pubblico.
- Per ogni diapositiva, chiediti: se il pubblico si distrae e controlla il telefono proprio ora, cosa perdo? Se la risposta è "niente", elimina questa diapositiva.
- I dati sono al servizio della storia, non il contrario. Prima si individua la storia, poi si utilizzano i dati per amplificarne l'impatto.
- Il design migliore è quello invisibile: il pubblico dovrebbe ricordare l'idea, non "questa presentazione PowerPoint è fantastica".
- Il limite di 18 minuti è una liberazione, non una costrizione. Ti obbliga a trovare il nucleo cristallino del tuo pensiero.
**Obiettivo finale:** Quando il pubblico lascia la sala, potrebbe dimenticare il tuo nome, dimenticare le tue diapositive, ma ricorderà l'idea che ha cambiato il suo modo di vedere il mondo.
---
## Note importanti
- Tutto il contenuto delle diapositive deve essere in inglese
- Utilizzare un inglese semplice ed efficace, comprensibile a un pubblico globale.
- Evitate il gergo tecnico a meno che non sia assolutamente necessario, e se lo utilizzate definitelo chiaramente.
- Garantire la sensibilità culturale e l'attrattiva universale degli esempi e delle metafore.
Descrizione
Consigliato da
nene@YouMind
Perché consigliamo questa abilità
Questa guida esperta trasforma qualsiasi argomento in una presentazione accattivante in stile TED. Delinea struttura narrativa, estetica visiva e principi di animazione per chiarezza e impatto da discorso di alto livello. Crea storie e immagini che risuonano con il pubblico.
Trasforma le tue idee in presentazioni accattivanti in stile TED. Crea narrazioni coinvolgenti e immagini mozzafiato che ispirano e coinvolgono, tutto con un semplice clic.
Abilità correlate
Vedi tuttoCostruttore pagine esplorabili
Un rapporto spiega. Una pagina permette alle persone di scoprire da sole. YouMind può già creare pagine web. Explorable Explainer decide cosa costruire: trasforma una ricerca, un set di dati o un argomento in una singola pagina interattiva nella tradizione delle grafiche da redazione e delle spiegazioni esplorabili: narrazione a scorrimento, grafici reali, controlli che puoi muovere, fonti che puoi verificare. Pianifica prima di scrivere codice. Prima approvi un piano di costruzione: la domanda a cui la pagina risponde, il momento rivelazione — il momento in cui il lettore dovrebbe pensare "oh" — una struttura a scorrimento di cinque-otto sezioni, due-quattro interazioni, ciascuna giustificata da ciò che il lettore impara muovendola, e un contratto dati che elenca ogni numero e la sua provenienza. Poi crea un unico file HTML autonomo senza passaggi di compilazione. Markup semantico. Tutti i numeri in un'unica costante DATA modificabile all'inizio. Rivelazioni a scorrimento che non si rompono su telefono. Ogni controllo è un vero elemento di modulo operabile da tastiera, con testo in tempo reale che descrive il suo valore corrente. L'accessibilità è integrata, non aggiunta a posteriori: contrasto 4.5:1, anelli di messa a fuoco visibili, testo alternativo ovunque, nessun significato trasmesso solo dal colore, rispetto per il movimento ridotto, responsive da 360px. Prima di consegnare, esegue un'autovalutazione in cinque punti e riporta onestamente i risultati: la rivelazione funziona davvero, la pagina si legge ancora con JavaScript disattivato, l'ordine di tabulazione è sensato, ogni numero è tracciabile, c'è qualche animazione che il lettore vorrebbe fermare. Due regole che non infrange: non inventa mai dati per far sembrare bello un grafico e ti dice quando i tuoi numeri contraddicono la tua bozza. Per ricercatori, analisti, giornalisti, educatori, fondatori indipendenti e consulenti che vogliono che il proprio lavoro venga esplorato piuttosto che letto di fretta.
Pagina webWeb soffuso diurno fluttuante
Sistema di design web in stile luce soffusa diurna: tela azzurro pallido (#ebf5ff), caratteri display extra-large con peso fisso 500 (massimo 148px responsive), card con angoli arrotondati da 32px + pillole da 9999px, CTA solido quasi nero #181d27, blocchi color pastello e illustrazioni 3D in argilla fluttuanti. La profondità è ottenuta unicamente tramite la variazione tonale dalla tela alle card, con card di contenuto senza ombre. Adatto per esigenze come 'stile luce soffusa diurna', 'landing page con illustrazioni 3D', 'tela azzurra', 'card arrotondate', 'sito web SaaS', 'stile Linear/Framer', ecc. Include vincoli di accessibilità e responsive.
Pagina webFashion Creative Design Pagine
Sistema di web design in stile poster editoriale di moda: tela cartacea color crema caldo (#fffef7), titoli extra-large con peso 300 (64–84px), fotografia a piena pagina, zero ombre, card con angoli retti + pulsanti a forma di pillola con raggio di 1440px. Ideale per esigenze come «stile design di moda», «impaginazione rivista», «stile poster», «web album d'arte», «portfolio di studio», «pagina galleria», ecc. Può riscrivere qualsiasi contenuto in una pagina in stile editoriale di alta moda.
Trova la tua prossima abilità preferita
Esplora altre abilità AI curate per ricerca, creazione e lavoro quotidiano.