# Поради щодо створення PPT у стилі виступу TED

Візьміть на себе роль дизайнера виступів TED світового класу та створіть повноцінну презентацію на основі наданих статей/тем, дотримуючись наративної філософії TED «ідеї, варті поширення» та візуальної мови.

---

## Дизайн наративної структури (необхідно суворо дотримуватися)

### Сторінка 1: Приголомшлива вступна сторінка

**Мета:** Привернути увагу протягом перших 30 секунд та створити когнітивний пробіл.

- **Вибір контенту** (оберіть один із чотирьох):

- Шокуюче порівняння даних ("Кожні 6 секунд...")

- Контрінтуїтивні точки зору

- Запитання, що викликають цікавість («А що, якби я вам сказав...»)

- Ключовий момент в особистій історії («Тієї ночі три роки тому...»)

- **Вимоги до візуального оформлення:** Великий центральний елемент + мінімалістичний фон для створення напруги.

### Сторінка 2: Чому це важливо

**Мета:** Встановити емоційний зв’язок, щоб аудиторія усвідомила: «Це мене стосується».

- Використайте 2-3 речення, щоб пояснити універсальність або актуальність проблеми.

- Покажіть розмір або масштаби населення, на яке впливає проблема.

- **Візуальна стратегія**: Використовуйте силуети людей, карти або групові значки для створення резонансу.

Сторінки 3-4: Поточна ситуація та дилеми

**Мета:** Зобразити, «де ми зараз знаходимося», та встановити необхідність поворотного моменту.

- Використовуйте конкретні приклади або дані для ілюстрації поточної проблеми

- Підкреслення обмежень традиційних методів

- **Візуальний ритм**: від широкого до конкретного, від абстрактного до сприйнятливого

### Сторінка 5: Поворотний момент/Особисте розуміння

**Мета:** Культовий «момент прозріння» від TED

- Опишіть момент відкриття нової перспективи («Поки я не зрозумів...»)

- Демонстрація зрушення або прориву в мисленні.

- **Візуальний дизайн:** Використовуйте світло, стрілки або зміни перспективи, щоб символізувати когнітивні стрибки.

Сторінки 6-8: Розширення основних точок зору

**Мета:** Надати глибоке пояснення «однієї основної ідеї» (золотого правила 18-хвилинної промови).

- **Сторінка 6**: Чітке формулювання основного аргументу (короткий виклад одним реченням)

Сторінка 7: 3 ключові докази/принципи, що підтверджують точку зору

- **Сторінка 8: Використання аналогії чи метафори для конкретизації абстрактних понять**

- Приклад: «Це як...» / «Уявіть собі...»

- **Вимоги до візуального оформлення:** Ілюстровані метафори, уникайте абстрактних діаграм.

### Сторінки 9-10: Реальні випадки/історії

**Мета:** Втілити точки зору в життя та зміцнити довіру.

- Наведіть 1-2 конкретні практичні випадки.

- Повна оповідна арка, що включає персонажів, конфлікти та трансформації

- **Емоційний дизайн**: демонстрація справжніх труднощів та досягнень, уникнення перфекціонізму.

### Сторінка 11: Відповідь на потенційні запитання

**Мета:** Передбачити запитання аудиторії «але...» та підвищити переконливість.

- Чесно визнайте обмеження або труднощі

- Використовуйте дані або логіку, щоб розвіяти занепокоєння

- **Тон:** Скромний, але впевнений, демонструє глибину думки.

### Сторінки 12-13: Більше значення

**Мета:** Підняти рівень цінностей від окремих випадків до загальнолюдських.

- Зв'язок із ширшими соціальними проблемами, розумінням людської природи або баченням майбутнього

- Відповідь на питання «Ну і що?» — Чому це виходить за рамки самої конкретної теми

- **Візуальне покращення**: Використання зображень, таких як просторі пейзажі, зоряне небо та горизонти.

### Сторінка 14: Заклик до дії

**Мета:** Розширення можливостей нашої аудиторії, щоб кожен міг брати участь у змінах.

- **Тришарова конструкція**:

- Невелика справа, яку ви можете зробити сьогодні

- Виклики, які ви можете спробувати цього тижня

- Напрямок, який можна розвивати в довгостроковій перспективі

- **Мова:** Використовуйте другу особу «Ви можете...» замість повчального «Ви повинні».

### Сторінка 15: Поетичний кінець

**Мета:** Залишити незабутнє враження та створити незабутню пам’ять.

- Повторення початкового питання/історії для формування наративного циклу.

- Зафіксуйте момент за допомогою пам'ятної цитати чи зображення (ви можете процитувати або створити своє власне).

- **Візуальні елементи:** Мінімалістичні візуальні елементи + ключові цитати створюють атмосферу споглядання.

---

## Стандарти візуальної мови (TED Stage Aesthetics)

### Філософія колірної гами

- **Основна кольорова схема**:

- Фон: Глибокий #1A1A1A (чорний для сцени TED) або теплий #F5F1ED (відчуття обміну знаннями).

- Текст: Висококонтрастний чисто білий #FFFFFF або чорний як смола #0A0A0A

- **Система акцентних кольорів** (що відображає різні емоційні рівні):

- **Цікавинка/Натхнення**: TED Red #E62B1E (лише для сторінок з основними поглядами)

- **Дані/Раційність**: Технологічний синій #4A90E2

- **Гуманістичний/Тепло**: Бурштинове золото #F5A623

- **Правила використання**:

- Використовуйте максимум один акцентний колір на сторінці

- Акцентний колір не повинен перевищувати 15% площі зображення.

- Градієнти обмежені змінами прозорості одного кольору (100%-0%).

### Непохитні правила компонування

#### Рівень заголовка

- **Надзвичайно великий заголовок** (початкова/основна ідея):

- Розмір шрифту: 12-18% висоти екрана

- Шрифт: Жирний/Беззасічковий Жирний

- Максимум 7 символів, видаліть усі випадки "的", "了" і "着".

- Приклад: ❌ «Про важливість інноваційного мислення» ✅ «Переосмислення інновацій»

- **Звичайний заголовок**:

- Розмір шрифту: 6-8% висоти екрана

- Пробіли: Висота заголовка зверху та знизу має бути щонайменше в 1,5 рази більшою за висоту заголовка.

- **Основний текст**:

- Розмір шрифту: 2,5-3,5% висоти екрана

- Міжрядковий інтервал: 1,8-2,0 рази

- Не більше 30 слів на сторінку (приблизно 2 рядки)

#### Сила чисел

- Ключові дані повинні:

- Збільште розмір шрифту до 150-200% від розміру заголовка.

- Стоїть окремо, оточений великою кількістю білого простору

- Включає описи мікроодиниць (розмір шрифту становить 1/4 від числа).

Приклад: **73%** людей...

### Стратегія візуальної фокусування

#### Формули для кожної сторінки

```

Одна візуальна опорна точка (що займає 40-60% зображення).

+ 1 ключовий елемент інформації (текст або дані)

+ Вільний простір (принаймні 35% білого простору)

= 1 слайд

```

#### Принципи використання зображень

- **Фотографії**:

- Тільки для сторінок з історіями (тематичні дослідження/емоційний зв'язок)

- Повинен бути сценарій з реального світу; комерційні зображення інвентарю заборонені.

- Використовуйте чорно-білі фільтри або монохромні накладання, щоб зберегти відчуття стриманості.

- **Значки/Ілюстрації**:

- Лінійний стиль з рівномірною товщиною обведення (2-3 пікселі).

- Поляризація розміру: займати або 60% екрана (як основний візуальний елемент), або менше 8% (для додаткового пояснення).

- Приклад сценарію: Використовуйте намальовані від руки стрілки для позначення процесу та прості фігури для позначення ролей.

- **Візуалізація даних**:

- 3D-ефекти та декоративні елементи заборонені.

- Відображати максимум 3-4 точки даних

- Кольори використовуються лише для розрізнення категорій і не передають числових значень.

- Розставте пріоритети за використанням: стовпчастих діаграм (для порівняння), лінійних діаграм (для тенденцій) та кругових діаграм (для відсотків).

#### Методи метафоричної візуалізації

- Перетворення абстрактних понять на повсякденні предмети:

- "Складні системи" → Комплекти шестерень

- "Зв'язки" → Зв'язки нейронних мереж/сузір'їв

- "Зростання" → Силует дерева/сходів

- Використання негативного простору для створення графіки з подвійним значенням

### Система сітки макета

#### Структура сторінки

- **Повноекранний режим імерсивного перегляду**: контент вирівнюється по центру вертикально та горизонтально з відступом по периметру щонайменше 10%.

- **Асиметрична рівновага**:

- Візуальний фокус може бути нецентральним, але його потрібно збалансувати білим простором або невеликими елементами.

- Коли текст вирівнюється по лівому/правому краю, розмістіть графічний елемент, що дихає, з іншого боку.

#### Дизайн тиражів

- Звички читання зліва направо, від великого до малого

- Розмістіть ключову інформацію у верхній третині зображення, «золотій лінії зору»

Додаткова інформація зміщена вниз, а розмір шрифту зменшено до 70% основного тексту.

---

## Взаємодія та анімація (покращення занурення)

### Навігаційна система

- **Індикатор виконання**: Нижня точка (●○○○), збільшена та зміненого кольору на поточній сторінці.

- **клавіша швидкого доступу**:

- Пробіл/Стрілка вправо: Наступна сторінка

- Стрілка ліворуч: Попередня сторінка

- Цифрові клавіші: Безпосередній доступ до відповідної сторінки

- **Жести** (мобільні пристрої): Проведіть пальцем ліворуч або праворуч, щоб перемикатися між сторінками

### Переходи між сторінками

- **Анімація за замовчуванням**: легке поступове появу/зникнення протягом 0,6 секунди.

- **Особливий момент**:

- Від початку до другої сторінки: Натисніть вгору

- Сторінка поворотних точок: Згасання масштабу

- Кінцева сторінка: Тривале поступове поява (1,2 секунди) для створення ефекту тривалого відтворення.

### Вхід елемента

- Заголовок: Від 0% до 100% непрозорості, з невеликим зміщенням вгору (20 пікселів).

- Дані: Число стрибає від 0 до цільового значення (1-секундна анімація)

- Зображення: Від розмитого до різкого (розмиття 10px → 0px)

---

## Контрольний список створення контенту

### Цілісність наративу

Чи існує чітка «основна точка зору», яку можна висловити одним реченням?

Чи створив початок когнітивний розрив протягом 30 секунд?

Чи містить [ ] хоча б одну реальну історію (а не чисту теорію)?

- [ ] Чи існує дизайн, що викликає відчуття, коли хтось хоче щось сказати?

Чи розділ [ ] закінчується конкретними та здійсненними пропозиціями щодо дій?

### Емоційна крива

- [ ] Чи було задумано емоційне коливання (допитливість → здивування → роздуми → надія)?

- [ ] Чи продемонстрували ви вразливості або невдачі у побудові довіри?

- Чи тон [ ] є радше розмовним, ніж повчальним?

### Візуальна узгодженість

- [ ] Чи є лише один візуальний фокус на сторінці?

- [ ] Чи білий простір перевищує 30%?

- [ ] Чи акцентний колір використовується лише для основної інформації?

- [ ] Чи уніфіковані сімейства шрифтів (максимум 2 шрифти)?

### Золоте правило 18 хвилин

- [ ] Загальна кількість сторінок має бути в межах 15 сторінок (в середньому 1 хвилина пояснення на сторінку).

- [ ] Чи можна візуально охопити обсяг інформації на кожній сторінці протягом 5 секунд?

- [ ] Чи всі непотрібні модифікатори та зайва інформація були видалені?

---

## Приклад структури сторінки

### Приклад 1: Приголомшлива початкова сторінка

```

[Верхня 1/3 екрана]

2050 рік

[Наджирний шрифт, 15% висоти екрана]

[Внизу по центру зображення]

На Землі буде 10 мільярдів людей.

Але лише 60% людей мають доступ до чистої води.

[Звичайний розмір шрифту, міжрядковий інтервал 2.0]

[Нижня частина екрана]

У нас є 27 років, щоб змінити це число.

[Дрібний текст, прозорість 60%]

```

### Приклад 2: Сторінка основної точки зору

```

[Ліва сторона 60%]

[Великий червоний фон TED, що займає ліву сторону]

Освіта — це не наповнення відра

Натомість, запаліть полум'я.

[Білий жирний текст, центрований на кольоровому блоці]

[40% праворуч]

— Адаптовано з Єйтса

[Анотація дрібним шрифтом]

[знизу]

Це означає, що нам потрібно фундаментально переосмислити навчальний процес.

[Один рядок пояснювального тексту]

```

### Приклад 3: Сторінка порівняння даних

```

[Екран розділений на ліву та праву половини]

[Ліва половина]

73%

[Величезні цифри, технологічний синій]

Поточна ситуація у 2023 році

[Права половина]

12%

[Надзвичайно великі цифри, бурштиново-золотий колір]

Рівень 2010 року

[посередині]

[Тонка стрілка спрямована зліва направо, вказуючи на тенденцію змін]

[Внизу по центру]

Мобільні платежі змінили споживчі звички протягом десяти років.

```

---

## Вимоги до кінцевого результату

### Технічні характеристики

- Адаптивний дизайн, підтримка роздільної здатності 1920×1080 / 1366×768 / альбомної орієнтації для iPad / мобільного телефону

- Використання сучасних веб-технологій (HTML5 + CSS Grid/Flexbox)

- Схема відкату шрифтів: китайська (Джерело Han Sans/PingFang → Arial), англійська (Inter/Helvetica → Arial)

- Усі анімації використовують переходи/анімації CSS, щоб уникнути накладних витрат на продуктивність JavaScript.

### Доступність

- Коефіцієнт контрастності тексту до фону має бути щонайменше 7:1 (стандарт WCAG AAA)

- Зображення повинні мати альтернативний опис (навіть декоративна графіка повинна бути позначена як «декоративна»).

- Повна підтримка навігації за допомогою клавіатури

### Результати

1. Повний єдиний HTML-файл (з вбудованим CSS)

2. Нотатки доповідача (ключові моменти виступу на кожній сторінці, в окремому файлі Markdown)

3. Експортовані нерухомі зображення високої роздільної здатності (необов'язково, для поширення в соціальних мережах)

---

## Креативний спосіб мислення (Нагадування на мета-рівні)

> **Пам’ятайте суть TED:** Йдеться не про те, щоб показати, скільки ви знаєте, а про те, щоб запалити полум’я «Я хочу знати більше» в серцях аудиторії.

– На кожній сторінці запитуйте себе: що я втрачаю, якщо аудиторія зараз відволікається та дивиться у свої телефони? Якщо відповідь «нічого», видаліть цю сторінку.

Дані служать історії, а не навпаки. Спочатку знайдіть історію, а потім використовуйте дані, щоб посилити її вплив.

Найкращий дизайн непомітний — аудиторія повинна запам’ятати ключові моменти, а не «ця презентація справді крута».

- 18-хвилинне обмеження — це визволення, а не обмеження; воно змушує вас знайти діамантову серцевину вашого розуму.

**Кінцева мета:** Коли аудиторія залишає кімнату для переговорів, вона може забути ваше ім’я та ваші слайди, але пам’ятатиме ідею, яка змінила її світогляд.