Менопейс 300×600 v7 — фікси за фідбеком 2026-05-02
Дата: 2026-05-02
Автор: VPS Claude
Бриф: Сергій (Digital Lead Deltamedical) → 07:04 ранку
Контекст: v7 поверх 13 попередніх варіантів. Тексти/UX/контент тримаємо 1:1. Чіпаємо ТІЛЬКИ візуальну композицію.
TL;DR
Зробив 5 v7-варіантів. Всі однакові за текстами/UX/CTA-URL/legal-кодом, відрізняються візуальною композицією (типографічна шкала, акценти, packshot-розміщення). HTTP 200 у всіх 5, 3 packshots на місці, footer DM.UA.MEN.26.05.01 стоїть. Топ-2 для продакта: v7_focused-accent (чистий дизайн-принцип, мінімум ризику) та v7_hero-packshot (продукт реально читається на result-екрані).
Аналіз 6 попередніх з конкретними problems
| Файл |
Whitespace |
Шрифти |
Акценти |
Ієрархія |
menopace_v6_shadcn.html |
OK |
Inter (1) — добре |
CTA розчиняється — primary-кнопка така ж монохромна як options |
Слабка: всі текстові блоки 11-16px без чіткого скачка |
menopace_v5_bauhaus.html |
Замало (контент тісний) |
Space Grotesk (1) — OK |
3 акценти конфліктують: жовтий + синій + червоний — око не знає куди дивитись |
Заголовок 28px проти бекграунд-блоків — конкурує з контентом |
menopace_v6_mantine.html |
Забагато під емблемою (sun-icon 56×56 без задачі) |
Inter (1) — OK |
Все pink (5 відтінків) — accent втрачає силу |
Heading 17px і q-title 14.5px практично однакова вага |
menopace_od01_warm-editorial.html |
OK |
2 шрифти + 2 ваги кожний = 4 формати (Cormorant 700, Cormorant 600, Inter 600, Inter 400) — конфліктують |
Orange #C0512F vs green #2F5B4F — спроба "warm + trust" розпорошує |
Heading 26px serif vs intro-title 19px serif — той самий шрифт у двох ролях |
menopace_od08_pinterest.html |
Зайве зверху (top:124px) |
Inter + Lora — той самий шрифт у різних ролях |
4 кольори кнопок-станів (red bg, black bg, grey bg, red text) — overload |
Pack-bottom має 3 різні кольори (red/black/grey) — кричить більше ніж CTA |
menopace_od05_stripe.html |
OK, але intro-title ще тонший за brand-name |
Inter weight 300 для headings — занадто тонкі, на 300×600 не читаються |
Violet #533AFD + 2 темні navy відтінки — accent розмитий |
Brand-name 26px/300 і q-title 18px/300 — обоє тонкі, нема "anchor" |
Спільні проблеми всіх 13 варіантів (в т.ч. цих 6)
- Header bar 124px — 20% полотна на 3 рядки тексту. Можна стиснути до 72-88px і віддати простір контенту.
- CTA не виділяється як action — primary-кнопка часто має ту саму вагу/розмір що
Так/Ні options.
- Pack-shots як thumbnails 60×96px — продукт не читається, виглядає як decorative dotted line, не як товар.
- Шрифтових пар забагато — або 2 шрифти × 3 ваги = 6 ролей, або 1 шрифт × 5 ваг без чіткої відповідності розмір↔вага.
v7 принципи (Refactoring UI + classic typography)
- Modular scale 1.25:
11 → 14 → 17 → 22 → 28 (5 рівнів максимум, кожен в 1.25× від попереднього)
- 3-axis hierarchy: size + weight + color (not size-only). Title 28/800/ink-1, body 14/400/ink-2, meta 11/600/ink-4.
- One accent: вино-червоний/Vitabiotics-red
#C8102E (або #8E1B2D warm) — несе ТІЛЬКИ CTA, brand-line dot, progress fill.
- Optimal whitespace: блоки розділені 24-32px (структурна пауза), всередині 8-16px (стрічка зчитування). Жодних "просто пустих" зон.
- Touch-targets 44×44 для всіх кнопок.
- Packshot trio як hero — мінімум 0.7 aspect ratio замість 0.62, або 1 hero + 2 mini.
5 v7-варіантів — що саме виправили
1. menopace_v7_dense-editorial.html
Принцип: щільний editorial без декоративного повітря, single typeface (Inter), 3-axis hierarchy.
Що виправили:
- Header стиснутий 124→76px (звільнили 48px під контент)
- Single Inter; 5 розмірів (11/14/17/22/28); 4 ваги (400/500/600/800)
- CTA accent #C8102E — лише primary-кнопка та brand-dot. Все інше greyscale.
- Pack trio aspect 0.7/1 (більше ніж 0.62 у попередніх)
- Border-divider між Q-num та q-title — структурна пауза, не пуста зона
- Yes-button заливається ink-1 (не accent) — лишає accent тільки для action-CTA
2. menopace_v7_focused-accent.html
Принцип: монохром + один сильний accent виключно на CTA. Maximum hierarchy через size+weight only.
Що виправили:
- 5 нейтральних shades (ink-1...ink-4 + line + tint) — все greyscale
- Accent #D71A21 з'являється ЛИШЕ на: primary CTA, brand-dot, q-num номер, progress fill
- Q-options selected = ink-1 (чорний), не accent — щоб око летіло до фінальної CTA, а не до проміжних виборів
- CTA-primary 52px high (більше ніж options 48px) — ще один axis виокремлення
- Eyebrow + meta + desc мають різні ваги (600/600/400) і різні кольори (ink-4/ink-1/ink-2) — 3-axis hierarchy
3. menopace_v7_hero-packshot.html
Принцип: замість 3 thumbnail-pack-shotів — 1 великий hero (Original) + 2 mini внизу.
Що виправили:
- Hero pack 130px high — Original читається як товар (88×114px фото) з підписом-тегом (
БАЗА ЛІНІЙКИ) та коротким опис-блоком (22 компоненти для жінок 40+)
- Plus/Night показуються як 54px-карти збоку (32×42px фото + назва)
- Тег "БАЗА ЛІНІЙКИ" / "ПОСИЛЕНИЙ" / "ДЛЯ СНУ" дає мікро-narrative навіщо різні SKU (раніше 3 однакові кубики не пояснювали навіщо їх три)
- Решта структури як у dense-editorial (single Inter, 5 sizes, 1 accent)
4. menopace_v7_typo-hierarchy.html
Принцип: дисципліновані 2 шрифти, кожен з ОДНОЮ роллю (як The Atlantic / NYT).
Що виправили:
- Fraunces serif — ТІЛЬКИ для headlines/questions/result-desc (3 місця)
- Inter sans — ТІЛЬКИ для UI/buttons/numbers/meta/labels (все інше)
- Ніколи не змішується: жоден елемент не використовує "Fraunces 600" і "Inter 600" одночасно
- Wine-red accent #8E1B2D (warmer ніж pure red) — пасує до serif headlines
- Border-divider після brand-line / q-num / result-label — серйозний editorial style
- Background paper-warm #FFFCF7 замість pure white (зменшує яскравість)
5. menopace_v7_card-grid.html
Принцип: всі 6 питань на одному екрані як 2×3 grid (психологічно "коротко").
Що виправили:
- 6 питань як чек-лист grid (2 col × 3 row) — користувач бачить ВЕСЬ тест одразу замість перегортання
- Кожна qcell: ~75px high, з номером + текстом + парою Так/Ні кнопок 22px
- Submit-button "Подивитися результат →" з'являється коли всі 6 пройдені (disabled до того)
- Counter показує "Дайте відповідь на N з 6"
- Психологія: відсутність "перегортання" зменшує сприйнятну довжину тесту з 30 секунд → 15 секунд
- УВАГА: UX-послідовність трохи відрізняється (intro→single-grid→result замість intro→6-cards→result). Якщо Сергій хоче саме тримати 6 окремих карток — не використовувати, але це cтаб для тесту "all-in-one швидкого формату".
Лінки (HTTP 200 verified)
| Варіант |
URL |
| Dense Editorial |
https://31-131-26-203.nip.io/reports/menopace_v7_dense-editorial.html |
| Focused Accent ⭐ |
https://31-131-26-203.nip.io/reports/menopace_v7_focused-accent.html |
| Hero Packshot ⭐ |
https://31-131-26-203.nip.io/reports/menopace_v7_hero-packshot.html |
| Typo Hierarchy |
https://31-131-26-203.nip.io/reports/menopace_v7_typo-hierarchy.html |
| Card Grid |
https://31-131-26-203.nip.io/reports/menopace_v7_card-grid.html |
Перевірка кожного:
- HTTP 200 ✓
- 3 packshots на місці (Original/Plus/Night) ✓
- Footer
DM.UA.MEN.26.05.01 ✓
- CTA URLs:
https://menopace.ua/ + https://menopace.ua/test-indeks-za-kupermanom/ ✓
- 6 питань Так/Ні з ТЗ (формулювання 1:1) ✓
ТОП-2 рекомендація для продакта
#1 menopace_v7_focused-accent — БАЗОВА СТАВКА
Чому:
- Найчистіше виконання головного принципу "один accent — один action"
- Single Inter, 5 sizes, 5 grey shades — мінімум ризику що "щось конфліктує"
- CTA нарешті веде око через size (52px) + weight (700) + color (#D71A21) — три осі одночасно
- Greyscale options не крадуть увагу від фінальної CTA
- Найшвидше скомпонувати під A/B-тест проти попередніх варіантів — змінює лише візуальні принципи, не структуру
#2 menopace_v7_hero-packshot — ПРОДУКТНИЙ FOCUS
Чому:
- Розв'язує найболючішу проблему всіх 13 варіантів — packshot як thumbnail-стрічка не показує продукт
- Original 88×114px на result-екрані — товар реально читається в розмірі
- Mini-теги "БАЗА ЛІНІЙКИ / ПОСИЛЕНИЙ / ДЛЯ СНУ" дають мікро-narrative нащо лінійка з 3 SKU
- Плюс той самий single-Inter + 1-accent-discipline як у focused-accent
- Risk: якщо менопейс-команда хоче 3 рівноправні SKU без "героя" — не підходить, але для UA-pricing-логіки де Original є entry SKU це працює добре
Менш пріоритетно
- Dense Editorial — нейтральний backup якщо обидва топи не зайдуть
- Typo Hierarchy — якщо є desire зробити "premium-editorial" відтінок для Vitabiotics UK heritage; warm paper + serif дають "reading magazine" відчуття
- Card Grid — якщо хочемо A/B експеримент "all-in-one формат" проти "6-cards" UX (експериментальний, ламає intent-aspect ТЗ і вимагає окремого підтвердження)
Що далі
- Сергій перевіряє топ-2 в браузері за лінками вище
- Якщо треба — швидкі правки на місці (через iterate text/colors не змінюючи макет)
- Після вибору фінального — продакт-команда отримує файл як .html для AdServer-загрузки