Frameworks для інтерактивних банерів — research 2026-05-01
Контекст: v3 банера Menopace 300×600 (/srv/reports/menopace_300x600_preview_v3.html) логічно правильний, але візуально слабкий. Шукаємо marketing-grade фреймворки для v4.
Не дублює /srv/reports/github-top20-marketing-frameworks-2026-05-01.md (там — загальні marketing skills); тут — банер-специфічне.
TL;DR
- GitHub-репо для шаблонів банерів — слабкий рівень: топ-3 (banner-boi 21⭐, misega/HTML5-Banners 52⭐, Mario-Duarte 16⭐) — це build-toolkits з GSAP, жоден не підтримує multi-state interactive UX, який нам потрібен (hook → 6 questions → result). Тобто не «беремо template і набиваємо контентом» — будемо писати UX самі, але можемо позичити GSAP-конвенції анімації.
- Найбільший важіль — не код, а методологія: переписати v3 під PAS у ємпатичній обгортці (Problem → empathic Agitation → Solution через quiz) + накласти StoryBrand SB7 (жінка-герой, бренд = провідник, тест = план). Це той «маркетинговий клас», якого бракує v3.
- Візуальна сторона — Z-pattern для hook screen + F-pattern для quiz body + Gutenberg для result. Конкретні координати CTA — bottom-right (terminal area). У v3 цього немає — CTA розкидані без ієрархії.
- Concours-формат: робимо 3 версії v4 — (A) PAS+StoryBrand, (B) AIDA класика з акцентом на Authority/Social Proof, (C) 4U-headline-driven мікрокопі. Проганяємо A/B/C через DV360 і дивимось CTR.
A. Готові GitHub-репозиторії з шаблонами банерів
- Що дає: автоматизована build-pipeline (Grunt + Handlebars + GSAP CDN + SASS) для статичних HTML5-банерів. PNG-оптимізація, spritesheet, IAB-розміри (вкл. 300×600), file-size warning 200KB, IE9+.
- Tech stack: JS/CSS/HTML, Grunt, Handlebars, GSAP, css-pleeease.
- Платформи: DoubleClick (= DV360 backend), Sizmek (закоментовано), Adrime.
- Активність: 128 commits, але без чіткої дати. License не вказана — обережно для commercial use.
- Як приладити до Menopace v3: взяти GSAP timeline-конвенції (експорт
tl.play()/tl.reverse() між станами), file-size guard, ZIP-bake-out під DV360. НЕ дає interactive UX — це треба будувати поверх.
- Verdict: як build/bake-out шаблон під DV360 — beneficial; як шаблон UX — ні.
- Що дає: найзірковіший boilerplate у топіку; Doubleclick + Sizmek готові enabler hooks.
- Активність: Updated Jul 2021 — застаріле, але сама структура clickTag/Enabler досі релевантна.
- Як приладити: копіюємо Enabler.exit() + clickTag patterns у v4 (зараз у v3 — два «голих» CTA без правильного DV360 click-tracking-тегу).
- Verdict: must-take — потрібно перевірити v3 на правильні DV360 click-tags.
- Gulp-base, SCSS, ES5 transpile, ZIP-output. Updated Jan 2023.
- Без DV360-specific і без interactive — generic toolkit.
- Verdict: альтернатива banner-boi на Gulp; не дає переваг для нашого кейса.
- Колекція Google Web Designer темплейтів. Включає
300x250_fullscreen_3dmodel_expandable з DV360-fix utility (zip-folder патчить Enabler-hooks, які DV360 не приймає по-дефолту).
- Як приладити: скопіювати їхній DV360-zip-fix у наш bake-pipeline. Це конкретна technical health для DV360 traffic-up.
- Verdict: корисний саме за DV360-zip-fix, не за темплейтами.
- Не банер-toolkit, а Python tool «Turn ideas into ad videos» — video, не display. Згадую тільки щоб закрити питання: official Google org не має open-source HTML5 banner template repo.
vigenair (223⭐) і feedgen (246⭐) — це video/feed, не display interactive.
- Verdict: display interactive у Google open-source — порожньо.
6. Чого НЕ існує (перевірено)
swiffy — Google закрив у 2016, аналогів open-source немає.bannerlord — це гра Mount&Blade, не банер-tool. bannify, bannergress — теж не релевантні (gaming/banner-art).adslib, flarefy, vmoo, crefun, glyph — як активні банер-template repos на GitHub не знаходяться (або дрібні форки <5⭐).- gsap-ads як іменований repo не існує; GSAP офіційно дає HTML5 Banner Slides і доку — patterns, не framework.
Підсумок секції A
Готового template для interactive multi-state quiz-banner на GitHub немає. Беремо: (1) banner-boi build-pipeline, (2) misega clickTag/Enabler patterns, (3) mediamonks DV360-zip-fix. Решту UX будуємо самі.
B. Marketing methodology frameworks
B1. AIDA (Attention–Interest–Desire–Action)
- Як викласти у banner:
- Attention — hook screen (300×600 top): великий заголовок з подразником («Не впізнаєте себе зранку?»).
- Interest — старт quiz: 6 питань самі по собі тримають, бо людина перевіряє себе. Це сильна сторона v3 — quiz = engagement engine.
- Desire — result screen: emotional copy («Симптоми, які ви описали, типові для перименопаузи. 78% жінок 40+ проходять через це»), брендований візуал Menopace.
- Action — CTA «Оберіть свій Менопейс» (терминал зони Z-pattern, bottom-right, контрастна кнопка).
- Конкретно для Menopace: v3 має Action+часткове Interest, але провалює Attention і Desire. Hook screen зараз — інформаційний, не подразник. Result — бракує emotional bridge між «ви відповіли так» і «ось продукт».
- Сила для нашого кейса: 7/10. Класика, працює, але PAS сильніша на проблемно-орієнтованих БАД.
B2. PAS (Problem–Agitation–Solution) ⭐ Топ-рекомендація
- Як викласти:
- Problem (hook screen): «Прокидаєтесь о 3 ранку? Це може бути не випадковість.»
- Agitation (quiz body, 6 питань): кожне питання — це м'яка agitation одного симптому (припливи, безсоння, дратівливість, втома, libido, концентрація). Питання НЕ діагностують, а резонують.
- Solution (result): «На основі ваших відповідей — Menopace [варіант]. Він містить [3 ключових інгредієнти] для [3 топ-симптомів зі ваших відповідей].»
- Конкретно для Menopace: PAS природно мапиться на quiz-format. Кожне питання = micro-agitation, фінал = solution. Це той сценарій, для якого формат банера створений.
- Legal-стіна (БАД):
- НЕ можна обіцяти лікування → формулюємо «допоможе підтримати» / «комфортний перехід».
- НЕ можна лякати → agitation у формі емпатичного підтвердження («багато жінок це відчувають»), не як «у вас серйозна проблема».
- Авторитет — посилання на склад/виробника, не на «лікар сказав».
- Сила для нашого кейса: 9/10. Пропоную це як основу v4-варіант A.
B3. StoryBrand SB7 ⭐ Накладається поверх PAS
- 7 елементів: Character → has Problem → meets Guide → who gives Plan → calls to Action → that helps avoid Failure → ends in Success.
- Як викласти у 300×600 banner:
- Character (hook): «Жінка 45+, активна, не хоче миритись з симптомами» — implicit через візуал/копірайт.
- Problem: як у PAS.
- Guide: бренд Menopace, 30+ років досвіду, виробник Vitabiotics — це і є соціальне доказівство + Authority Cialdini.
- Plan: quiz = «3-крокова перевірка вашого стану».
- CTA: «Оберіть свій Менопейс».
- Failure: натяк (НЕ страшилка) — «не залишайтесь без підтримки».
- Success: result screen візуалізує — «спокійний сон, енергія, ясність».
- Сила для нашого кейса: 8/10. Як надбудова над PAS — найкраще. Перетворює quiz з «просто питань» у наратив.
B4. Cialdini 6 принципів — що можна для БАД
| Принцип |
Можна? |
Як |
| Reciprocity |
Так |
Quiz сам по собі = подарунок (безкоштовний персоналізований gateway). «Отримайте персоналізовану рекомендацію» в hook. |
| Commitment & Consistency |
Так |
6 питань — micro-commitment. Хто відповів на 6 — з ймовірністю кліне CTA. Це вже в архітектурі v3. |
| Social Proof |
Обережно |
«Понад X жінок пройшли тест» — ОК, якщо є real number. «78% жінок 40+ переживають [симптом]» — ОК (статистика, не лікувальна claim). |
| Authority |
Так |
Виробник Vitabiotics, 30+ років, UK. Не використовувати «лікарі рекомендують» — це ризикована claim для БАД у UA. |
| Liking |
Так |
Емпатичний tone, не клінічний. Жіночий візуальний код, не аптечний. |
| Scarcity |
НЕ |
У БАД-контексті Тільки сьогодні! чи Залишилось 3 шт! для ЛЗ-сусіднього продукту = ризик скарг + ASA-стиль bans за exploitation. Не вмикаємо. |
- Сила для нашого кейса: 6 принципів = checklist. Реальні драйвери для нас: Commitment (вшито) + Authority (Vitabiotics) + Social Proof (статистика) + Liking (tone). Reciprocity — бонус. Scarcity — заборонено.
B5. 4U Headlines (Useful, Urgent, Unique, Ultra-specific)
- Призначення: написати hook copy на старті banner.
- Перевірка hook screen v4 на 4 питання:
- Useful? — «1-хвилинний тест: ваші симптоми — це менопауза?» ✅
- Urgent? — без faux-urgency. Натяк через emotion: «не ігноруйте сигнали тіла» — м'яка urgency.
- Unique? — quiz замість статичного банера = unique format.
- Ultra-specific? — «6 питань про сон, енергію, настрій» (не «коротке опитування»).
- Сила: 7/10. Це micro-tool для написання copy, не структурний фреймворк. Використовуємо як QA-checklist для headline.
C. Visual patterns для interactive banners
C1. Z-pattern (low-text, hero-focused) — для hook screen v4
- Користувач сканує: top-left → top-right → bottom-left → bottom-right.
- Розкладка для 300×600 hook:
- Top-left: brand mark Menopace (immediate authority).
- Top-right: tagline / micro-headline.
- Bottom-left: візуал жінки 40+ (емпатична, не страждальна).
- Bottom-right: CTA «Почати тест» — terminal area, найвища візуальна вага.
- v3 не має чіткого Z — CTA в hook screen не виділений у terminal zone.
C2. F-pattern — для quiz body
- Працює, коли є серія однотипних блоків (питання+відповіді = текстова матриця).
- Розкладка: питання — лівий вертикальний край (F-stem), відповіді — два горизонтальні бруски (F-bars).
- v3 робить це частково правильно, але без візуальної ієрархії: питання і відповіді мають однакову вагу. Fix: питання — bigger weight, відповіді — secondary.
C3. Gutenberg diagram — для result screen
- 4 квадранти: Primary Optical Area (TL) → Strong Fallow (TR) → Weak Fallow (BL) → Terminal Area (BR).
- Розкладка result:
- TL (primary): «Ваш результат» + ключовий висновок (1 речення).
- TR (strong fallow): pack-shot Menopace (3D, не плоский).
- BL (weak fallow): міні-список «що допоможе» (3 буллети, max).
- BR (terminal): primary CTA «Оберіть свій Менопейс».
- Secondary CTA «Детальне тестування» — нижче, окремою лінією, менший контраст (бо це ризик розфокусу).
D. Claude Code / AI skills для banner generation
- Slash-command
/brand-design для Claude Code, генерує self-contained HTML з inline CSS, brand-token system.
- Дефолт-розмір: 1584×396 (LinkedIn banners), 300×600 не підтримує out-of-box.
- Як приладити: brand-token система (colors/typography/spacing tokens) — корисна патерн для нашого v4 (centralize Menopace tokens). Сам скіл для нашого розміру треба адаптувати.
- Verdict: корисний як patterns-skill, не як ready-made tool.
- 22 skills: GSAP scroll animations, React Three Fiber, Framer Motion, Anime.js, Lottie, Three.js, Vanta, PixiJS, Locomotive scroll, AOS, Barba.js.
- Для нашого кейса: GSAP-skill + Lottie-skill + AOS-skill — корисні building blocks для v4. Direct DV360 integration немає — треба обгорнути нашими bake-out conventions.
- Verdict: building blocks — викликаємо selectively (GSAP timeline для transitions hook→quiz→result; Lottie — для micro-animation pack-shot).
- 250+ checks для audit/optimization paid ads (Google/Meta/YouTube/etc). AI creative generation згадується, але це text-creative, не HTML5 banner.
- Verdict: не підходить для нашої задачі (це audit-skill, не build-skill). Можливо корисний для post-launch metrics QA.
D4. Banner Creator Pro (mcpmarket.com)
- Скіл для AI image generation, не для HTML5 interactive. Не наш кейс.
Підсумок секції D
Не існує Claude skill, який «з коробки» зробить 300×600 quiz-banner з PAS framework. Будуємо власний skill meddet-banner-builder (або розширюємо існуючий claudedesignskills) з рецептом: PAS + StoryBrand prompt → GSAP timeline → DV360 bake-out.
Рекомендація — топ-3 підходи для Menopace v4
#1. PAS + StoryBrand SB7 (варіант A — топ-фаворит)
- Чому: PAS природно лягає на quiz-format (problem-hook → 6 micro-agitations → solution-result). StoryBrand робить з цього історію, де жінка-герой, Menopace-провідник.
- Що дасть: найвищий expected CTR на CTA-Action (бо emotional bridge від problem до product).
- Як виглядатиме:
- Hook: «Прокидаєтесь о 3 ранку? Це не випадковість» + Menopace logo (тонко, як guide-presence) + CTA «Дізнатись чому» (Z-pattern bottom-right).
- Quiz: 6 питань у F-pattern, кожне = soft agitation одного симптому.
- Result: Gutenberg layout, TL-висновок-наратив, TR-pack-shot, BL-3 buллети, BR-primary CTA «Оберіть свій Menopace».
#2. AIDA + Cialdini Authority/Social Proof (варіант B)
- Чому: класика з посиленням довіри (виробник Vitabiotics 30+ років, статистика «78% жінок 40+»).
- Що дасть: потенційно вищу довіру у консервативної аудиторії 50+, нижчий emotional bar.
- Як виглядатиме: hook = useful headline («Перевірте 6 ознак менопаузи за 1 хвилину»), interest = quiz, desire = pack-shot + «понад 30 років допомагає жінкам», action = CTA.
- Risk: менш emotional, можливо нижчий engagement vs варіант A.
#3. 4U-headline-driven мікрокопі (варіант C)
- Чому: не структурний фреймворк, а copy-discipline. Перевірка кожного string у банері на Useful/Urgent/Unique/Ultra-specific.
- Що дасть: найкоротший шлях до високоякісного microcopy незалежно від основного фреймворку. Накладається поверх A або B.
- Як виглядатиме: не окрема версія, а QA-layer для версій A і B. Перевіряємо кожне слово через 4U-чек-лист.
Concours-формат
- Варіант A (PAS+SB7) проти Варіанта B (AIDA+Cialdini), обидва пройшли через 4U-чек.
- DV360 splits: 50/50, мінімум 100k impressions кожен.
- Метрика: CTR на primary CTA «Оберіть свій Менопейс». Secondary — completion rate quiz (% хто дійшов до result screen).
- Через 7 днів — переможець стає основою v5; loser архівується з висновками.
Технічна база для всіх 3 варіантів
- banner-boi build-pipeline (GSAP CDN, file-size guard, ZIP).
- misega Enabler/clickTag patterns — для коректного DV360 tracking.
- mediamonks DV360-zip-fix — для bake-out без enabler-збоїв.
- claudedesignskills GSAP-skill — для timeline transitions hook→quiz→result.
- Brand token system (з brand-design-skill patterns) — централізувати кольори/шрифти Menopace.
Open questions
- Чи робимо ми окремий Claude skill
meddet-banner-builder для серійної генерації варіантів (Menopace v4, потім інші бренди)? — якщо так, треба окремий бриф.
- Legal review копірайтів варіантів A/B — потрібна Юлі/Андрію (PPC) перед DV360 запуском.
- A/B test design: 50/50 split чи 33/33/33 (третя — поточний v3 як baseline)? Рекомендую 33/33/33 для чесного контролю.
- Чи у нас є real number для Social Proof («XXX жінок пройшли тест»)? Якщо ні — варіант B послабшає.
Sources