385 lines
17 KiB
Markdown
385 lines
17 KiB
Markdown
# 🎨 Creative Direction — Stories Series
|
||
|
||
> **Статус:** Foundation v1.0 (2026-07-05)
|
||
> **Проект:** Серия рекламных Stories-роликов (WhatsApp / Instagram / Telegram / VK)
|
||
> **Формат:** Вертикальное видео 1080×1920 (9:16)
|
||
> **Стиль:** Bauhaus + Apple Fusion — минимализм, функциональность, технологичность
|
||
|
||
---
|
||
|
||
## 1. BRAND DNA
|
||
|
||
### 1.1 Архетип бренда: The Architect / The Sage
|
||
|
||
> Строим системы. Не продаём услуги.
|
||
> Наш бренд — это инженерная точность, структурная ясность, технологическая глубина.
|
||
|
||
**Характер:**
|
||
- Уверенный, но не хвастливый
|
||
- Говорит фактами, не эмоциями
|
||
- Решения, не обещания
|
||
- Прозрачность > мистификация
|
||
|
||
**Не:**
|
||
- Не "креативное агентство"
|
||
- Не "инновационные AI-решения"
|
||
- Не "трансформируем ваш бизнес"
|
||
- Не клише, не buzzwords
|
||
|
||
---
|
||
|
||
## 2. VISUAL IDENTITY
|
||
|
||
### 2.1 Цветовая система
|
||
|
||
| Роль | Hex | Usage |
|
||
|------|-----|-------|
|
||
| **Canvas** | `#050508` | Фон (deep space black) |
|
||
| **Surface** | `#0D0D14` | Карточки, панели |
|
||
| **Ink** | `#FFFFFF` | Основной текст |
|
||
| **Ink-muted** | `rgba(255,255,255,0.55)` | Вторичный текст |
|
||
| **Accent-primary** | `#0F62FE` | IBM Carbon B2 — CTA, акценты |
|
||
| **Accent-cyan** | `#00B8D4` | AI/tech elements |
|
||
| **Accent-purple** | `#8A2BE2` | Инновации, градиенты |
|
||
| **Warning** | `#E34850` | Pain-элементы, штрафы, ошибки |
|
||
| **Success** | `#18A55A` | Результаты, решения, метрики |
|
||
| **Divider** | `rgba(255,255,255,0.08)` | Линии, разделители |
|
||
|
||
**AI Gradient (для AI-продуктов):**
|
||
```
|
||
linear-gradient(135deg, #00B8D4 0%, #8A2BE2 50%, #0F62FE 100%)
|
||
```
|
||
|
||
**Gradient Warm (для ROI/money-контента):**
|
||
```
|
||
linear-gradient(135deg, #18A55A 0%, #0F62FE 100%)
|
||
```
|
||
|
||
### 2.2 Типографика
|
||
|
||
| Элемент | Шрифт | Вес | Размер | Tracking |
|
||
|---------|-------|-----|--------|----------|
|
||
| Hero Text | Inter | 900 (Black) | 110px | -0.03em |
|
||
| Headline | Inter | 800 | 68px | -0.02em |
|
||
| Subheadline | Inter | 700 (Bold) | 48px | -0.01em |
|
||
| Body | Inter | 500 (Medium) | 40px | 0 |
|
||
| Monospace (data) | JetBrains Mono | 400 | 32px | -0.02em |
|
||
| CTA Button | Inter | 800 | 52px | 0.05em uppercase |
|
||
| Small label | Inter | 600 | 28px | 0.08em uppercase |
|
||
|
||
### 2.3 Компоновка кадра (1080×1920)
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ ▄▄▄▄ SAFE ZONE 280px │ ← Не трогать (WhatsApp/IG UI overlay)
|
||
│ [Logo / Brand mark] │
|
||
│ │
|
||
│ │
|
||
│ ┌──────────────┐ │
|
||
│ │ HOOK TEXT │ │ ← Hero 110px
|
||
│ │ (макс 2 │ │ Центр-верх
|
||
│ │ строки) │ │
|
||
│ └──────────────┘ │
|
||
│ │
|
||
│ ┌──────────────┐ │
|
||
│ │ BODY TEXT │ │ ← Pain/Solution 40-48px
|
||
│ │ (макс 3 │ │ Центр
|
||
│ │ строки) │ │
|
||
│ └──────────────┘ │
|
||
│ │
|
||
│ │
|
||
│ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ │ ← Не трогать (IG/Telegram UI)
|
||
│ [CTA Button] [Link] │ Низ 1240-1920px
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
**Safe area:** Y=280px → Y=1540px (доступно 1260px высоты для контента)
|
||
|
||
### 2.4 Элементы дизайна
|
||
|
||
**Карточки данных:**
|
||
- Фон: `rgba(255,255,255,0.04)`
|
||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||
- Border-radius: `16px`
|
||
- Padding: `40px`
|
||
|
||
**Графические маркеры:**
|
||
- Тонкие линии (1px `rgba(255,255,255,0.15)`)
|
||
- Точки/индикаторы (6px circles)
|
||
- Горизонтальные акцент-линии (2px accent)
|
||
|
||
**Декоративные элементы:**
|
||
- Минимальные сетки/линии на фоне (опционально)
|
||
- Градиентные блобы на заднем плане (opacity 0.03–0.06)
|
||
- Без текстур, без шумов, без паттернов
|
||
|
||
---
|
||
|
||
## 3. MOTION DESIGN
|
||
|
||
### 3.1 Анимационные принципы
|
||
|
||
1. **Функция > Форма** — каждая анимация должна помогать понимать контент
|
||
2. **Меньше = больше** — не более 2 одновременных анимаций на сцене
|
||
3. **Физика реального мира** — ease-in-out, инерция, вес
|
||
4. **Последовательность** — элементы появляются строго по таймлайну
|
||
5. **Читаемость > Красота** — если анимация мешает прочитать, убери анимацию
|
||
|
||
### 3.2 Библиотека анимаций
|
||
|
||
| Имя | Тип | Вход | Выход | Длительность | Easing |
|
||
|-----|-----|------|-------|-------------|--------|
|
||
| `fade-up` | Entrance | `opacity:0, y:60` | `opacity:1, y:0` | 0.6s | `power3.out` |
|
||
| `scale-up` | Entrance | `opacity:0, scale:0.8` | `opacity:1, scale:1` | 0.7s | `back.out(1.7)` |
|
||
| `slide-left` | Entrance | `opacity:0, x:80` | `opacity:1, x:0` | 0.5s | `power3.out` |
|
||
| `fade-in` | Entrance | `opacity:0` | `opacity:1` | 0.4s | `power2.out` |
|
||
| `count-up` | Entrance | `value:0` | `value:N` | 1.2s | `power2.inOut` |
|
||
| `pulse` | Hold | — | scale 1.0→1.05→1.0 | 0.8s | `sine.inOut` yoyo×2 |
|
||
| `wipe-out` | Exit | — | `opacity:0, y:-30` | 0.25s | `power2.in` |
|
||
|
||
### 3.3 Timing rules
|
||
|
||
- **Hook entrance:** 0.3s delay от начала сцены
|
||
- **Body entrance:** stagger +0.15s относительно предыдущего элемента
|
||
- **Scene transition:** crossfade 0.15s (предыдущая сцена уходит, новая появляется)
|
||
- **CTA hold:** минимум 2 секунды видимости
|
||
- **Total scene duration:** 3–5s (hook), 4–6s (solution), 3–4s (CTA)
|
||
|
||
---
|
||
|
||
## 4. CONTENT FRAMEWORK
|
||
|
||
### 4.1 Рубрикатор (контентные категории)
|
||
|
||
| Категория | Цель | Формула | Частота |
|
||
|-----------|------|---------|---------|
|
||
| 🔥 **Pain** | Попасть в боль | Факт/цифра/вопрос → узнавание | 40% |
|
||
| 💡 **Solution** | Показать продукт | Проблема → решение → выгода | 30% |
|
||
| 📊 **Proof** | Доверие | Цифра кейса → социальное доказательство | 15% |
|
||
| ⚡ **Quick Win** | Польза | Лайфхак/инсайт за 10s | 10% |
|
||
| 🎯 **Brand** | Позиционирование | Философия, миссия, видение | 5% |
|
||
|
||
### 4.2 Формула ролика (15s standard)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────┐
|
||
│ 0–2s HOOK │ Цепляющий вопрос или факт │ ← Остановка скролла
|
||
│ 2–7s PAIN │ Проблема, которую узнаёт ЦА │ ← Эмоциональный крючок
|
||
│ 7–12s SOLUTION │ Продукт как ответ │ ← Рациональное решение
|
||
│ 12–15s CTA │ Конкретное действие │ ← Что делать дальше
|
||
└────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Правило 3-х секунд:** Если до 3-й секунды нет HOOK — ролик провалился.
|
||
|
||
### 4.3 Template-система
|
||
|
||
**Template A — Pain/Agitate/Solve (15s)**
|
||
- Hook: Шокирующий факт/вопрос
|
||
- Pain: Проблема × контекст
|
||
- Solution: Продукт → выгода
|
||
- CTA: Действие
|
||
|
||
**Template B — How It Works (20s)**
|
||
- Hook: "Как [X] решает [Y]"
|
||
- Steps: 3 визуальных шага
|
||
- Result: Конкретная метрика
|
||
- CTA: Ссылка
|
||
|
||
**Template C — Before/After (15s)**
|
||
- Hook: "До / После"
|
||
- Before: Ручная рутина, потери
|
||
- After: Автоматизация, результат
|
||
- CTA: Попробуй
|
||
|
||
**Template D — Number Fact (10s)**
|
||
- Hook: Крупная цифра
|
||
- Context: Что она значит
|
||
- CTA: Узнай больше
|
||
|
||
---
|
||
|
||
## 5. PRODUCT MESSAGING
|
||
|
||
### 5.1 ROI24 — Автоматизация маркетинга
|
||
|
||
| Элемент | Текст |
|
||
|---------|-------|
|
||
| **Одно предложение** | Платформа автоматизации маркетинга на 7 площадках с AI-генерацией |
|
||
| **Hook (pain)** | "Сколько лидов утекает пока вы спите?" |
|
||
| **Solution** | "AI-боты обрабатывают лиды 24/7. Вы — только закрываете сделки." |
|
||
| **Proof** | "10 000+ компаний уже автоматизировали" |
|
||
| **CTA** | "Попробуй бесплатно →" |
|
||
|
||
### 5.2 Call24 — AI-аналитика звонков
|
||
|
||
| Элемент | Текст |
|
||
|---------|-------|
|
||
| **Одно предложение** | Каждый звонок — аналитика. Не мнение. |
|
||
| **Hook (pain)** | "Ваш менеджер врёт. И вы это знаете." |
|
||
| **Solution** | "AI анализирует 100% звонков. Реальные инсайты для роста продаж." |
|
||
| **Proof** | "Средний рост конверсии +34% после внедрения" |
|
||
| **CTA** | "Слушай демо →" |
|
||
|
||
### 5.3 152-fz Checker
|
||
|
||
| Элемент | Текст |
|
||
|---------|-------|
|
||
| **Одно предложение** | Проверка сайта на 152-ФЗ за 5 секунд. Не за 500K ₽. |
|
||
| **Hook (pain)** | "Штраф за 152-ФЗ: до 6 000 000 ₽ за один сайт" |
|
||
| **Solution** | "Автосканирование за 5 секунд. Полный чек-лист соответствия." |
|
||
| **Proof** | "500+ проверок в день. 0 пропущенных нарушений." |
|
||
| **CTA** | "Проверь свой сайт →" |
|
||
|
||
### 5.4 Локальный AI
|
||
|
||
| Элемент | Текст |
|
||
|---------|-------|
|
||
| **Одно предложение** | LLM на своём сервере. Данные не уходят в облако. |
|
||
| **Hook (pain)** | "Облачный ИИ — это данные третьей стороны." |
|
||
| **Solution** | "Qwen3.6 на своём железе. Полный контроль. API совместим с OpenAI." |
|
||
| **Proof** | "2×RTX 3080 Ti · 140 tok/s · Без подписок" |
|
||
| **CTA** | "Собери свой AI-кластер →" |
|
||
|
||
---
|
||
|
||
## 6. AUDIO STRATEGY
|
||
|
||
### 6.1 Звуковой дизайн
|
||
|
||
**Голос (TTS):**
|
||
- Если нарратив нужен: мужской, спокойный, уверенный тембр
|
||
- Скорость: 1.1× (чуть быстрее естественного — удерживает внимание)
|
||
- Акцент: нейтральный российский
|
||
|
||
**Музыка (BGM):**
|
||
- Mood: технологичный, минималистичный, не отвлекающий
|
||
- BPM: 90–110 (спокойный, не агрессивный)
|
||
- Инструменты: синтезаторы, ambient pads, минимальный beat
|
||
- Volume: -20dB относительно голоса (фон, не доминанта)
|
||
|
||
**SFX (звуковые эффекты):**
|
||
- Transition whoosh: мягкий, короткий (0.15s)
|
||
- Click/tap: для появления элементов (0.08s)
|
||
- Subtle bass drop: для акцентных моментов (1.2s)
|
||
|
||
### 6.2 Правила аудио
|
||
|
||
1. 85% Stories смотрятся БЕЗ звука → текст на экране обязателен
|
||
2. Если есть нарратив — дублировать субтитрами
|
||
3. Без звука ролик должен быть ПОЛНОСТЬЮ понятен
|
||
4. Музыка не должна перекрывать голос (sidechain compression)
|
||
|
||
---
|
||
|
||
## 7. PRODUCTION PIPELINE
|
||
|
||
### 7.1 Процесс создания ролика
|
||
|
||
```
|
||
1. BRIEF → Выбрать рубрику + продукт + template
|
||
2. SCRIPT → Написать текст по формуле (Hook/Pain/Solution/CTA)
|
||
3. STORYBOARD → Описать визуал каждого кадра
|
||
4. FRAME DESIGN → Создать HTML-композицию в HyperFrames
|
||
5. ANIMATION → Настроить GSAP timeline
|
||
6. VALIDATE → lint → validate → inspect → snapshot
|
||
7. DRAFT RENDER → npx hyperframes render --quality draft
|
||
8. REVIEW → Просмотр, правки, итерации
|
||
9. FINAL RENDER → npx hyperframes render --quality high
|
||
10. OPTIMIZE → Оптимизация под платформы (размер, битрейт)
|
||
11. PUBLISH → Загрузка на платформы
|
||
```
|
||
|
||
### 7.2 Quality Gates
|
||
|
||
- [ ] `npx hyperframes lint` — 0 ошибок
|
||
- [ ] `npx hyperframes validate` — 0 console errors
|
||
- [ ] `npx hyperframes inspect` — 0 errors
|
||
- [ ] `npx hyperframes snapshot` — текст в safe zone
|
||
- [ ] Контраст текста ≥ 4.5:1
|
||
- [ ] Текст читаем при просмотре на телефоне (не меньше 36px)
|
||
- [ ] Нет ошибок в текстах (орфография, цифры, факты)
|
||
- [ ] CTA виден ≥ 2 секунды
|
||
|
||
### 7.3 Оптимизация для платформ
|
||
|
||
| Платформа | Max size | Bitrate | Codec |
|
||
|-----------|----------|---------|-------|
|
||
| Instagram Stories | 30s / 4GB | 8–12 Mbps | H.264 |
|
||
| WhatsApp Status | 16 MB | 6–8 Mbps | H.264 baseline |
|
||
| Telegram Stories | 10 MB | 6–8 Mbps | H.264 |
|
||
| VK Клипы | 5 min | 10–15 Mbps | H.264 |
|
||
|
||
**WhatsApp constraint** (самый ограничивающий): 16MB, ≤30s. Целимся ≤10MB для запаса.
|
||
|
||
---
|
||
|
||
## 8. CONTENT CALENDAR (План серии)
|
||
|
||
### Wave 1: Foundation (неделя 1–2)
|
||
| # | Продукт | Рубрика | Template | Цель |
|
||
|---|---------|---------|----------|------|
|
||
| 1 | ROI24 | Pain | A | Остановка скролла фактом |
|
||
| 2 | Call24 | Pain | A | Эмоциональный hook |
|
||
| 3 | 152-fz | Pain | D | Шоковая цифра |
|
||
| 4 | Local AI | Brand | B | Позиционирование |
|
||
| 5 | All | Solution | A | Общий охват |
|
||
|
||
### Wave 2: Proof (неделя 3–4)
|
||
| # | Продукт | Рубрика | Template | Цель |
|
||
|---|---------|---------|----------|------|
|
||
| 6 | ROI24 | Proof | C | Социальное доказательство |
|
||
| 7 | Call24 | Solution | B | Как это работает |
|
||
| 8 | 152-fz | Solution | A | Простота использования |
|
||
| 9 | Local AI | Proof | D | Технические метрики |
|
||
| 10 | All | Quick Win | D | Быстрая польза |
|
||
|
||
---
|
||
|
||
## 9. DESIGN TOKENS (для повторного использования)
|
||
|
||
```yaml
|
||
# Colors
|
||
canvas: "#050508"
|
||
surface: "#0D0D14"
|
||
ink: "#FFFFFF"
|
||
ink-muted: "rgba(255,255,255,0.55)"
|
||
accent-primary: "#0F62FE"
|
||
accent-cyan: "#00B8D4"
|
||
accent-purple: "#8A2BE2"
|
||
warning: "#E34850"
|
||
success: "#18A55A"
|
||
divider: "rgba(255,255,255,0.08)"
|
||
|
||
# Gradients
|
||
ai-gradient: "linear-gradient(135deg, #00B8D4, #8A2BE2, #0F62FE)"
|
||
warm-gradient: "linear-gradient(135deg, #18A55A, #0F62FE)"
|
||
|
||
# Typography
|
||
font-primary: "Inter"
|
||
font-mono: "JetBrains Mono"
|
||
hero-size: "110px"
|
||
headline-size: "68px"
|
||
body-size: "40px"
|
||
small-size: "28px"
|
||
|
||
# Layout
|
||
safe-top: "280px"
|
||
safe-bottom: "380px"
|
||
content-height: "1260px"
|
||
card-radius: "16px"
|
||
card-padding: "40px"
|
||
|
||
# Animation
|
||
ease-out: "power3.out"
|
||
ease-in: "power2.in"
|
||
ease-back: "back.out(1.7)"
|
||
ease-sine: "sine.inOut"
|
||
transition-duration: "0.6s"
|
||
stagger: "0.15s"
|
||
```
|
||
|
||
---
|
||
|
||
*Creative Direction Foundation — living document. Обновляется по мере разработки роликов и получения данных о вовлечённости.*
|