Tutto quello che serve per fare sito, presentazioni, post e documenti identici fra loro.
Colori, caratteri, elementi pronti, regole sulle immagini e le poche regole che tengono insieme il tutto.
01 — Colori
Quattro colori, nient'altro
Clicca su un codice per copiarlo. Sono gli stessi identici del sito: se un colore non è in questa lista, non appartiene al brand.
Aa
Neon Fuchsia
#FF2E9A
Il colore che chiama all'azione. Pulsanti, la parola FICTION, i numeri, le parole da far risaltare in un titolo.
Aa
Cyber Lime
#CFFF04
Etichette, pastiglie, spunte, fasce. Sopra il lime il testo è sempre nero, mai bianco.
Aa
Electric Indigo
#5D00FF
Superfici grandi e piene: il riquadro del prezzo, un fondo pagina intero, un blocco che deve pesare.
Aa
Fondo
#0D0D0D
Il nero di base. Le schede sopra di esso sono #1C1C1C, un gradino più chiaro: è così che si vedono.
Come si usano insieme
Su una schermata comanda un solo colore acceso. Se il pulsante è fucsia, l'etichetta è lime e l'indigo resta fuori.
Tre colori accesi nella stessa immagine si annullano a vicenda.
Testo bianco su fucsia: solo se grande e in grassetto. Testo bianco su lime: mai — il lime è troppo chiaro, si legge solo il nero.
02 — Semantica dei colori
Ogni colore dice una cosa sola
Non è decorazione: chi legge impara il significato dopo due schermate e poi lo riconosce da solo. Se il significato cambia da una pagina all'altra, il sistema smette di funzionare.
Lime — l'idea chiave
La frase da ricordare, il risultato, il bonus, il regalo. Bordo sinistro lime su un paragrafo = «questo è il punto».
Fucsia — attenzione
L'avvertimento, il limite, l'errore da evitare, la parola accesa nel titolo, l'azione da fare.
Indigo — nota a margine
Informazione tecnica o legale che non è né promessa né pericolo. Si usa raramente, e proprio per questo si nota.
Colori degli strumenti
Nelle lezioni ogni strumento ha il suo colore fisso, così lo studente lo riconosce senza leggere: Higgsfield Soul è fucsia, Nano Banana Pro è lime. Vale nelle pastiglie, nei numeri dei passi e nelle didascalie delle foto.
03 — La regola che non si tocca
Nessun gradiente
Si fa così
Tinte piatte, un colore pieno per superficie
Bordi netti, angoli arrotondati di 14–22px
Contrasto forte: nero contro lime, bianco contro indigo
Ombre solo come blocco pieno spostato, mai sfocate
Non si fa
Sfumature fra due colori
Bagliori, luci diffuse, riflessi
Trasparenze sui colori accesi
Ombre morbide sotto le schede
Unica eccezione: la barra a tre colori in cima alle slide e ai documenti. Non è una sfumatura — sono tre tinte piatte affiancate, una per colore del brand.
04 — Caratteri
Anton per gridare, Inter per parlare
Anton
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Solo maiuscolo. Solo titoli, numeri e il logo. Mai per frasi lunghe: è stretto e compatto,
e una riga di testo normale scritta in Anton diventa illeggibile.
Inter — tutto il resto
Frasi, descrizioni, elenchi, etichette. Ha molti pesi: 400 per il testo, 600 per i sottotitoli, 700 per le etichette maiuscole.
Interlinea di Anton
I titoli in Anton hanno sempre line-height: .9. Le righe si stringono e il blocco diventa compatto: è il tratto riconoscibile del brand, lo stesso di REAL FICTION sul sito. Con l'interlinea normale il titolo si sfalda e sembra di chiunque.
Misure
Uso
Carattere
Corpo
Dettagli
Titolo principale
Anton
90–150 px
maiuscolo, interlinea 0.9
Titolo di slide
Anton
44–62 px
maiuscolo, interlinea 0.9
Titolo di sezione
Inter 700
26–34 px
maiuscolo, spaziatura 0.015em
Sottotitolo
Inter 600
18–19 px
normale, non maiuscolo
Testo
Inter 400
15 px
interlinea 1.6, righe da 60–70 caratteri
Etichetta
Inter 700
10–11 px
maiuscolo, spaziatura 0.18em
Numeri e prezzi
Anton
50–90 px
colore fucsia o bianco
Maiuscolo sì, maiuscolo no
Maiuscolo: titoli, etichette, pulsanti, nomi di sezione. Sempre con un po' di spaziatura fra le lettere, altrimenti si impasta.
Minuscolo: qualsiasi frase che si legge, non si guarda. Una descrizione tutta maiuscola rallenta la lettura del 15–20% e sul sito l'abbiamo tolta proprio per questo.
05 — Adesivi
Le forme del brand
Forme piatte, geometriche, senza contorni sottili. Servono come punteggiatura visiva: una accanto a un'etichetta, una in un angolo, mai cinque nella stessa immagine.
Fucsia su fondo scuro, lime su fondo colorato. Sempre una freccia a destra. Mai a capo su due righe.
Numero ed etichette
01FashionVideo + Guida
Fascia — per la frase che deve restare in testa
Al termine del corso avrai un portfolio di livello commerciale
Blocco prezzo
Pro
490€
4 mesi · con un tutor
Spaziature e angoli
angoli piccoli 14px
schede 18px
riquadri grandi 22px
pastiglie e pulsanti tondi
distanza fra schede 12–14px
aria dentro una scheda 24–36px
07 — Immagini
Qualità massima, formato WebP
Le foto sono il prodotto: se sono compresse male, tutto il resto non conta. La regola è una sola e non si negozia — si parte sempre dall'originale alla massima qualità e si esporta in WebP. Mai riesportare un file già compresso: ogni passaggio toglie dettaglio e non lo restituisce.
Si fa così
Formato WebP per tutto: sito, slide, documenti
Si converte sempre dal file originale, non da una copia già ridotta
Qualità 90 con -sharp_yuv
Lato lungo 1600 px per le foto dentro slide e documenti
Il file finale pesa meno del JPEG e ha più dettaglio
Non si fa
JPEG di qualità bassa «tanto si vede uguale»
Ridurre a 480–900 px per far pesare meno la pagina
Convertire un JPEG già compresso in WebP
Cornici, bordi o ombre attorno alle foto
Foto della stessa fila di altezze diverse
Il comando che usiamo
Lo strumento è cwebp (libwebp, gratuito). Un file alla volta:
-q 90 qualità · -m 6 compressione più lenta ma migliore · -sharp_yuv tiene i colori e la texture della pelle · -resize 1600 0 porta il lato lungo a 1600 px mantenendo le proporzioni.
Quanto pesa davvero
Sulle dodici foto della lezione 1 il passaggio da JPEG a WebP ha tolto il 52% del peso — da 5,9 a 2,8 MB — senza toccare la risoluzione. Non è un compromesso fra qualità e peso: è lo stesso dettaglio in metà spazio.
Che misura serve
Dove
Lato lungo
Perché
Foto dentro una slide
1600 px
La cornice sulla slide è 200–300 px: a schermo 4K servono ~900 px, 1600 è margine abbondante
Galleria del sito
1600 px + versione 800 px
La versione piccola serve ai telefoni, quella grande al clic
Post e caroselli
1080 × 1350 px
Misura nativa di Instagram, oltre non serve
Copertina di condivisione
1200 × 630 px
Anteprima su WhatsApp e Telegram
Come si mettono nelle pagine
Cornice a misura fissa, immagine ritagliata con object-fit: cover — così tutte le foto di una fila restano identiche anche se gli originali hanno proporzioni diverse. Se il volto rischia di essere tagliato si sposta l'inquadratura con object-position, non si cambia l'altezza della cornice.
Nelle pagine autonome (slide, documenti da mandare) le foto vanno incorporate nel file come data URI: un file solo, che si apre ovunque e non perde le immagini quando lo mandi.
08 — Slide delle lezioni
Anatomia di una slide
Formato fisso 1280 × 720, scalato via CSS per riempire qualsiasi schermo. Margine interno 64 px sopra e sotto, 72 px ai lati. Fondo #0D0D0D.
Lezione 01 · AI Real Model
Modelle AI realistiche
Il sottotitolo spiega in una riga cosa si impara. Inter 400, non maiuscolo.
La frase che deve restare: bordo lime a sinistra.
Real Fiction01
I cinque elementi fissi
Elemento
Dove
Come
Barra del brand
bordo superiore
5 px, tre tinte piatte: fucsia, indigo, lime
Kicker
in alto a sinistra
trattino lime + nome lezione, 12 px, spaziatura 0.22em
Titolo
sotto il kicker
Anton 44–62 px, interlinea 0.9, una sola parola fucsia
Piede
in basso
REAL FICTION a sinistra, numero slide a destra
Frase chiave
in basso a sinistra
bordo sinistro 3 px lime, testo lime 600
Impaginazione
Due colonne: a sinistra il testo, a destra schede o foto. Le due colonne si allineano in alto sul titolo e in basso sull'ultima riga — non basta metterle una accanto all'altra, vanno legate ai bordi del testo.
Le schede in griglia (le «pastiglie grandi») hanno testo 14 px e si allungano fino a riempire l'altezza della colonna di testo. Il testo resta piccolo, cambia solo l'aria dentro.
Navigazione e stampa
Frecce, barra spaziatrice, Home ed End girano le slide; il tasto a schermo intero sta in basso a destra. Nel CSS di stampa ogni slide diventa una pagina: @page{size:1280px 720px;margin:0} e break-after:page. Così Ctrl+P → Salva come PDF produce il PDF senza rifare niente.
09 — Documenti
Guide, piani, promemoria
Quando il contenuto si legge invece di guardarsi — una guida, un listino, un promemoria di vendita — non si usano le slide ma una pagina che scorre, larga 820–960 px, stesso fondo e stessi colori.
Struttura
Barra del brand in cima Gli stessi 5 px a tre colori delle slide: lega il documento al resto.
Testata Kicker lime, titolo in Anton su due righe con la seconda fucsia, una frase di spiegazione.
Sezioni numerate Pallino colorato con il numero + titolo in Inter 700. Il pallino alterna fucsia, lime e indigo.
Passi Elenco con numeri in cerchietto, riga di titolo in grassetto e spiegazione sotto in grigio.
Riquadri di avviso Fondo appena colorato e un'etichetta tonda: fucsia per «Importante», lime per «Consiglio», indigo per le note tecniche.
Piede REAL FICTION a sinistra, nome del documento a destra.
Stampa
Ogni documento porta con sé il CSS di stampa: formato A4, margini 14 × 12 mm, e break-inside: avoid su schede, passi e riquadri, così niente si spezza a metà fra due pagine. Il PDF si genera dal documento stesso, non si rifà a mano.
10 — Presentazioni e post
Come portare tutto questo in Canva
Metti i caratteri
Anton e Inter sono gratuiti su Google Fonts e già presenti nell'elenco caratteri di Canva. Cercali per nome. Se non li trovi, scaricali da fonts.google.com e caricali fra i caratteri del brand.
Salva i colori
Nel pannello colori crea una palette con i quattro codici qui sopra. Così non li ridigiti ogni volta e non sbagli una cifra.
Parti sempre da un fondo nero#0D0D0D su tutta la diapositiva. Il bianco non fa parte di questo brand.
Un titolo, una parola accesa
Titolo in Anton maiuscolo, bianco, e una sola parola in fucsia. È il meccanismo di REAL FICTION, ripetuto ovunque.
L'etichetta va sopra il titolo
Pastiglia lime con testo nero, piccola. Dice di cosa si parla prima ancora che si legga il titolo.
Le foto a tutta pagina
Senza cornice, senza ombra. Se serve un testo sopra, mettilo dentro una pastiglia lime: si legge sempre, su qualsiasi foto.
Un adesivo per diapositiva
Uno in un angolo, come firma. Due sono già troppi.
Esporta in WebP quando puoi
Se la destinazione è il web, esporta al massimo della qualità e converti con cwebp. Per Instagram va bene il JPEG di Canva a qualità piena: è il social a ricomprimere.
Misure che userai
Formato
Dimensioni
Titolo in Anton
Slide di lezione (web)
1280 × 720
44–62 px
Presentazione
1920 × 1080
90–140 px
Post Instagram
1080 × 1350
110–160 px
Storia / Reel
1080 × 1920
130–200 px
Copertina carosello
1080 × 1350
140–180 px
11 — Prova del nove
Prima di pubblicare
Deve esserci
Fondo nero #0D0D0D
Titolo in Anton maiuscolo, interlinea 0.9
Una sola parola accesa nel titolo
Testo nero sopra il lime
Tinte piatte
Immagini in WebP, qualità 90, lato lungo 1600 px
Foto della stessa fila tutte della stessa altezza
Non deve esserci
Gradienti o bagliori
Frasi lunghe scritte in Anton
Descrizioni tutte maiuscole
Tre colori accesi insieme
Colori fuori dalla palette
Immagini compresse due volte o sotto i 1600 px
Cornici e ombre attorno alle foto
Частина 2
Презентації — повна система макетів
Частина 1 вище відповідає на питання «якого кольору і яким шрифтом». Ця частина відповідає на питання
«як побудувати слайд»: сітка, кеглі в числах, ліміти тексту, каталог готових макетів і чекліст. Кожен пункт — спершу
що каже дослідження, потім наше правило. Правило має пріоритет над смаком: якщо слайд не проходить чекліст у кінці,
він переробляється, а не захищається.
Полотно, на якому все рахується: 1280 × 720. Стандартний слайд 16:9 — це 960 × 540 пунктів,
отже 1 px нашого полотна = 0,75 pt. Усі перерахунки нижче зроблені за цим коефіцієнтом.
01 — Полотно, формат, safe area
Дослідження
Стандарт презентації — 16:9. У пунктах це 960 × 540 (13,333 × 7,5 дюйма).
Safe area для 16:9: критичний контент тримають у межах 80% полотна, тобто по 10% відступу з кожного боку.
Поза цією зоною може бути тільки фон, ніколи текст чи логотип.
У слайдових сітках поля беруть 5–10% ширини полотна.
Виняток для рядів із 5 і 7 елементів. Ні 5, ні 7 не діляться на 12, тому такий ряд
вирівнюється тільки зовнішніми краями — ліворуч 80, праворуч 1200 — а всередині ділиться
на рівні частки. Це єдиний дозволений відступ від колонок.
Чому не 8 колонок і не базова лінія 40 px.
Перша версія цієї системи мала 8 колонок по 112 і вертикальну сітку з 14 рядків по 40.
Обидва числа не витримали перевірки вимірюванням: 8 не ділиться ні на 3, ні на 5, тому будь-який
ряд із трьох карток не міг стати на колонки; а Anton з інтерліньяжем 0.9 дає рядок 57,6 px,
і жодна кількість таких рядків ніколи не потрапляє на лінію 40. Фірмовий інтерліньяж важливіший
за базову лінію, тому лишився він, а ритм перейшов на 8 px.
03 — Типографіка
Дослідження
Мінімальний кегль для презентації — 18 pt, рекомендований для основного тексту — 28 pt,
заголовки від 36 pt. Менше 18 pt не читається ні з залу, ні з телефона.
Модульна шкала: кожен наступний рівень більший за попередній у фіксоване число разів. Perfect Fourth
(1,333) дає виражену ієрархію; 1,2 і 1,25 — мʼякшу.
Великі заголовки потребують тіснішого інтерліньяжу (1,1–1,3), основний текст — вільнішого (1,5–1,7).
Довжина рядка для читання — 60–70 знаків.
Трекінг має змінюватися разом із кеглем і насиченістю; великі літери без трекінгу злипаються.
Одна думка на слайд. Якщо думок дві — це два слайди.
Заголовок і головна думка — у верхньому лівому квадранті. Ілюстрація, картки, числа — праворуч або нижче.
Різниця в кеглі між сусідніми рівнями — не менша за 1,333. Якщо два блоки майже однакового розміру,
читач не розуміє, що головніше.
Один акцент на слайд. Або лайм, або фуксія — не обидва. Акцент позначає рівно одну річ.
Вертикальні лінії блоків збігаються з лініями колонок. Нічого не «майже вирівняно».
05 — Повітря і щільність
Дослідження
Найкращі слайди мають більше повітря, ніж автору здається комфортним. Повітря не «порожнє місце» —
воно ізолює головне й не дає елементам конкурувати між собою.
Правило «внутрішнє ≤ зовнішнє»: відступ усередині групи має бути меншим за відступ між групами,
інакше око не бачить, де група починається й закінчується.
Між групами — 48 px і більше. Усередині групи — 24 px і менше. Це те саме правило
«внутрішнє менше за зовнішнє», записане в наших числах.
Правило дірки: якщо після верстки знизу лишається більше трьох рядків сітки (120 px) —
слайд недобраний. Дозволені дії: збільшити кегль, додати повітря рівномірно між блоками,
або злити слайд із сусіднім. Заборонено лишати діру внизу — саме це псувало старі слайди.
Якщо контент не влазить — слайд ділиться на два. Зменшувати кегль нижче 24 px, щоб влізло, заборонено.
06 — Скільки контенту на слайд
Дослідження
У дослідженнях за теорією мультимедійного навчання слайд вважають «легким» до 10 слів і
«перевантаженим» далі. Реальні лекційні слайди мають у середньому 38 слів — і це названо проблемою,
а не нормою.
Правила 6×6, 5×5×5 і 7×7 критикують як шкідливі: вони рахують рядки, а не зміст.
Міллерові «7 ± 2» не стосуються дизайну — Тафті прямо пише, що з тієї статті не випливає жодного
правила про кількість елементів на слайді. Перерахунок Cowan (2001) дає реальну ємність робочої
памʼяті близько 4 чанків.
Важлива не кількість пунктів, а чанкінг — групування в осмислені одиниці. Матеріал, поділений
на чанки, запамʼятовується на 22% краще за суцільний.
Принцип сегментації Майєра: матеріал засвоюється краще, коли поділений на короткі частини,
а темп контролює той, хто вчиться.
60% — фон #0D0D0D. 30% — поверхні #1C1C1C і білий текст.
10% — акцент: лайм або фуксія.
Перевищив 10% акценту — слайд кричить і перестає мати фокус. Лаймова плашка на пів слайда —
це вже не акцент.
Індиго на слайдах майже не зʼявляється: він лишається для великих суцільних поверхонь і технічних
приміток, як описано в частині 1.
Семантика кольору з частини 1 не змінюється: лайм — ключова думка, фуксія — увага, індиго — примітка.
08 — Компоненти й bento-сітка
Дослідження
Bento-сітка — макет із блоків різного розміру на спільній сітці. Ключове правило: розмір блока
дорівнює його важливості. Блок на дві колонки й два рядки читається як головний, одиничні — як другорядні.
Обовʼязкова умова — єдина сітка, ієрархія і логіка групування. Без них bento перетворюється
на набір випадкових прямокутників.
Планувати треба від змісту: розмір картки відображає цінність інформації, а не бажання
заповнити площу симетрично.
Картки одного ряду мають бути однакової висоти — різна висота читається як недороблений макет.
Рівний килим із шести-восьми однакових плиток заборонений, якщо серед них немає головної.
Це була головна вада старих слайдів: усе однакове, дивитись нема на що.
Коли пункти справді рівнозначні — їх максимум 4 і вони йдуть одним рядом, не килимом у два ряди.
Коли пункти нерівнозначні — bento: головний блок 4 колонки, другорядні по 2. Проміжок між блоками 32 px.
Картка: заокруглення 16 px, фон #1C1C1C, рамка 1 px rgba(255,255,255,.12),
внутрішні поля 32 px. Без тіней.
Вміст картки, яка вища за свій текст, центрується по вертикалі. Текст, притиснутий до верху
з дірою під ним — помилка.
Усі картки одного ряду — однакової висоти, завжди.
09 — Зображення
Дослідження
У сітці зображень усі комірки мають одне співвідношення сторін — тоді будь-яке нове фото
потрапляє в ту саму систему, навіть якщо оригінал вертикальний чи квадратний.
Комірка працює в режимі crop-and-fill, а не fit: фото заповнює комірку, без білих полів.
Full-bleed (фото під зріз) — робочий прийом: фото може виходити за край полотна.
Різна висота карток у ряду ламає «обіцянку» сітки й виглядає як недоробка.
WebP, якість 90, довга сторона 1600 px — як у частині 1, без змін.
object-fit: cover завжди. contain заборонений: він дає поля й ламає ряд.
Один ряд — одна висота і одне співвідношення. Змішувати 3:4 і 16:9 в одному ряду не можна.
Дозволені співвідношення: 9:16, 3:4, 1:1, 16:9. Інших не вигадуємо.
Без рамок, без тіней, без заокруглень більших за 16 px.
Full-bleed фото займає рівно половину або чверть слайда й прилягає до краю полотна, ігноруючи поле 80 px.
Текст поверх фото — тільки в лаймовій пастилі з чорним текстом.
Порожніх рамок-заглушок не існує. Якщо фото ще немає — слайд не готовий і не показується.
10 — Числа й графіки
Дослідження
Data-ink ratio Тафті: частка «чорнила», яка несе дані, має бути максимальною. Усе інше —
chartjunk: лінії сітки, 3D, декоративні кольори, зайві підписи.
Прибирання зайвого економить час і місце й робить повідомлення зрозумілішим.
Колір у графіку має щось означати; колір без значення відволікає.
Анімації на слайдах немає взагалі. Перехід між слайдами — миттєва зміна, без fade і без зсувів.
Це свідоме рішення, а не недоробка: урок записується на відео, і будь-який рух на слайді
конкурує з тим, що показує ведуча.
12 — Доступність
Дослідження
WCAG: контраст не менший за 4,5:1 для звичайного тексту й 3:1 для великого
(від 18 pt або 14 pt жирного).
Мінімальний кегль для презентації — 18 pt; перед показом радять відкрити колоду на телефоні:
якщо там текст не читається, віддалений глядач його теж не прочитає.
Скелет уроку: обкладинка → карта уроку → блоки по 3–5 слайдів із розділювачем → фінал
із результатом і містком у наступний урок.
Розділювач — окремий слайд з номером і назвою блока. Він і є «сигнал», про який пише Майєр.
Два однакові типи слайдів підряд заборонені. Якщо йдуть дві сітки поспіль — другу
перебудовуємо в інший тип.
Один слайд — приблизно 40–60 секунд мови. Урок на 12 хвилин — це 14–18 слайдів,
а не 21 щільний.
Спершу пишеться текст уроку, потім робляться слайди. Не навпаки.
14 — Каталог типів слайдів
Кожен слайд у наших уроках належить до одного з цих
десяти типів. Новий тип не вигадується під конкретний слайд — якщо контент не лягає в жоден,
значить контент треба перерізати.
№
Тип
Будова
Коли брати
01
Обкладинка
Текст 5 колонок зліва, фото 3 колонки під зріз справа. Заголовок 128 px.
Перший слайд уроку.
02
Карта уроку
Заголовок + нумерований список до 5 пунктів, 24 px, одна колонка 6.
Другий слайд: що буде в уроці.
03
Розділювач
Великий номер 160 px + назва блока. Більше нічого.
Між блоками по 3–5 слайдів.
04
Визначення
Заголовок 72 px, текст до 30 слів, ключова фраза внизу з лаймовим бордером.
Пояснити одне поняття.
05
Рівний ряд
3–4 однакові картки в ряд, по 2 колонки, однакова висота.
Рівнозначні пункти. Максимум 4.
06
Bento
Головний блок 4 колонки + 2–3 другорядні по 2.
Пункти різної ваги.
07
Число
1–3 великі числа 96–160 px + підпис 24 px + джерело 16 px.
Статистика, ціни, результат.
08
Порівняння
Дві колонки по 4, спільна верхня й нижня лінія, різні акценти.
Було/стало, два підходи.
09
Фото
Фото під зріз на половину полотна + текст у другій половині.
Показати результат роботи.
10
Фінал
Результат уроку в лаймовій плашці + місток у наступний урок.
Останній слайд.
15 — Чекліст композиції
«Prova del nove» в частині 1 перевіряє колір, шрифт
і зображення. Цей чекліст перевіряє те, чого там не було, — композицію. Слайд, який не проходить хоча б
один пункт, переробляється.
Має бути
Поля 80 px, контент у колонках 12×64 із проміжком 32
Відступи між блоками кратні 8
Усі відступи кратні 8
Основний текст не менший за 24 px
Заголовок до 8 слів, слайд до 40 слів
Одна думка й один акцент на слайд
Порожнього не менше 30% площі
Картки одного ряду однакової висоти, вміст центрований
Фото одного співвідношення, cover
Контраст тексту не нижчий за 4,5:1
Не має бути
Діри знизу більшої за 120 px
Тексту, притиснутого до верху картки
Порожніх рамок-заглушок під фото чи скріншот
Килима з 6–8 однакових плиток без головної
Двох однакових типів слайдів підряд
Кегля менше 24 px в основному тексті
Сірого світлішого за 50% на тексті
Відступів 18, 20, 22, 26, 30, 38, 44, 46
Білого тексту на лаймі
Анімацій і переходів
Частина 3
Соцмережі й рекламні креативи
Ця частина відповідає на три питання: у якому форматі робити креатив для кожного місця показу,
чому одні оголошення «світяться» у стрічці, а інші зникають, і що Meta забороняє. Дослідження 15.09.2026.
Головне правило всієї частини: один файл на одне місце показу. Обрізані креативи — це завжди один файл,
розтягнутий Meta під шість різних екранів.
01 — Місця показу і формати: карта
Дослідження
Стрічка Instagram і Facebook: рекомендований формат 4:5, 1080 × 1350. Інтерфейс нічого не перекриває —
ім'я профілю над картинкою, кнопка під нею. Сітка профілю з 2025 ріже під 3:4, тому важливе не ставиться
впритул до бічних країв.
Stories і Reels: 9:16, 1080 × 1920. У березні 2026 Meta звела всі чотири плейсменти (FB/IG Stories, FB/IG Reels)
до однієї безпечної зони: 14% зверху (≈270 px), 6% з боків (≈65 px), до 35% знизу (≈672 px).
Безпечна зона для тексту — 950 × 978 px по центру. Внизу стоять профіль, кнопка, підпис, звук і CTA;
праворуч — стовпчик лайк/коментар/поділитись/зберегти.
Квадрат 1:1 залишився лише для другорядних плейсментів Facebook (права колонка, Marketplace, пошук).
зверху 270, з боків 65, знизу 672 → зона 950 × 978
Права колонка, Marketplace, Audience Network, Messenger, in-stream
—
—
вимкнено
Кожен креатив існує у двох файлах: 4:5 і 9:16. Не один файл на все. Робити 9:16 із 4:5 обрізанням
заборонено — це і є те, що дає «обрізані креативи».
В Ads Manager при створенні оголошення вмикається «Personalizza per posizionamento» (asset customization):
файл 4:5 призначається стрічкам, файл 9:16 — сторіс і Reels. Тоді Meta фізично не може показати не той файл.
Плейсменти обираються вручну, не «Advantage+ posizionamenti». Лишаються тільки: Instagram Feed, Explore,
Stories, Reels; Facebook Feed, Stories, Reels. Решта — вимкнути. Права колонка й Audience Network дають дешеві покази
і сміттєві кліки, там і живуть криві обрізки.
Advantage+ creative enhancements — вимкнути всі. Інакше Meta сама «покращує» яскравість, кадрує, домальовує
наліпки й музику — і креатив виходить не той, що затверджений.
Перед завантаженням кожен файл перевіряється накладанням шаблону безпечної зони: жодна літера не заходить
у верхні 270 і нижні 672 px на 9:16.
02 — Чому одна реклама «світиться», а інша зникає
Дослідження
Оголошення з сильним гачком у перші 3 секунди мають до 89% вищу долю додивлень, ніж ті, що починають з логотипа.
Понад 85% Reels дивляться без звуку. Субтитри в кадрі — не додаток, а сам зміст для більшості.
Фірмовий колір підвищує впізнаваність бренду до 80%; люди на 81% частіше пригадують колір бренду, ніж його назву.
Бренд має бути видно в перші 3 секунди; кінцевий кадр з логотипом і CTA підвищує запам'ятовування.
Короткі вертикальні відео 6–15 с дають на 20–30% вищу залученість.
Наше правило — що робить креатив помітним у стрічці
Контраст зі стрічкою, а не всередині креативу. Стрічка Instagram — це фотографії середніх тонів на світлому
або чорному фоні. «Світиться» те, чого в стрічці немає: плоска насичена пляма кольору на 40% і більше площі кадру.
Наші лайм #CFFF04 і фуксія #FF2E9A на #0D0D0D — це найвищий контраст із будь-якою
стрічкою, і в світлій, і в темній темі. Це наш головний рекламний актив, ним і працюємо.
Обличчя, яке дивиться в камеру, у перші 0,5 с. Око людини зупиняється на обличчі раніше, ніж мозок читає текст.
Рух у першому кадрі для відео — не поява логотипа, а дія: модель повертає голову, кадр змінюється.
Один рядок тексту на кадрі, який зрозумілий без звуку і без підпису. Решта — у підписі під оголошенням.
Бренд у перші 3 секунди — не логотип, а колір і Anton. Логотип — на останньому кадрі разом із CTA.
Не імітувати «нативний» пост і не робити креатив схожим на контент — ми не ховаємось, ми контрастуємо.
03 — Текст на креативі
Дослідження
Мінімальні кеглі на полотні 1080: заголовок від 48 px, підзаголовок 32–40, текст від 24–28. Повідомлення має
зчитуватись за 3 секунди без розгортання на весь екран.
Текст займає не більше 20% площі зображення. Правило Meta про 20% скасоване, але покази справді падають, коли тексту більше.
Гачок карусельного першого слайда працює, коли в ньому є число або конкретна обіцянка; здоровий перехід зі слайда 1 на 2 —
60–75% глядачів.
Старт: 3 кути × 2 формати = 6 статичних + 2 відео. Скасовано 15.09.2026 — кути були складені без стратегії; чинне: S1 (карта повідомлень) і S12 (4 оголошення = 2 призначення A/B × 2 макети). Далі по пункту — архів. Кути: реалізм (яка з моделей несправжня), ринок і гроші
(бренди наймають, ставки), пряма пропозиція (6 уроків, старт у понеділок).
Одна кампанія, одна група оголошень, широка аудиторія Італія 25–45. Meta сама знайде, кому показувати.
Через 3 дні: креативи з CPL удвічі вищим за найкращий — вимкнути. Замість них — той самий кут, інший гачок.
Іменування файлів: ARM-L1-realismo-A-4x5.webp — продукт, запуск, кут, варіант, формат. Без цього через тиждень
ніхто не знає, що працювало.
05 — Що Meta відхилить
Дослідження
AI-контент у рекламі має бути позначений. Meta вимагає мітку «AI-generated» для будь-якого креативу, де AI створив
або суттєво змінив зображення чи звук. Непозначений AI-контент — 14% усіх відхилень, третя причина за частотою.
Особисті ознаки. Заборонено стверджувати або натякати на вік, стан, роботу, фінанси глядача: «Se sei un fotografo che…»,
«Se stai cercando lavoro…», «Per chi ha difficoltà con…». У 2026 правило поширили на непрямі натяки.
До/після — дозволене поза схудненням і антивіковими засобами, але будь-яка обіцянка результату поруч робить його
ризиковим.
Оголошення про роботу й вакансії потрапляють у спеціальну категорію з обмеженим таргетингом.
На кожному креативі з AI-моделлю вмикається перемикач «AI-generated» при завантаженні. Для нас це не слабкість,
а частина повідомлення: курс саме про це.
Текст звертається до дії, не до людини: не «Se sei una fotografa», а «Sei lezioni per creare modelle AI».
Жодного «se stai cercando», «per chi», «hai difficoltà».
Кут «Prada, Kering e Sky assumono» — тільки як факт ринку зі слайда, без слів «lavoro», «candidati», «posizione aperta»
в тексті оголошення. Інакше Meta зарахує як рекламу вакансій.
Порівняння «яка з них AI» — не до/після, а гра на впізнавання. Без обіцянок доходу в цифрах у самому оголошенні.
Лендінг, куди веде оголошення, має відповідати обіцянці на креативі слово в слово. Розбіжність — відхилення.
06 — Instagram як вітрина
Дослідження
Закріплені пости — перше, що бачить відвідувач; стратегічне закріплення дає +15–25% до конверсії у підписку.
Біо працює як маршрут: кому допомагаєш, що отримають, куди натиснути — без інтерпретації.
Три закріплені пости підтримують обіцянку біо; хайлайти відповідають на наступні питання довіри: результати, процес, відгуки.
Біо: рядок 1 — хто (AI Creator per i Brand); рядок 2 — що (modelle AI iperrealistiche · foto · video);
рядок 3 — пропозиція з CTA (6 lezioni gratis → link). Посилання веде на лендінг, не на linktree.
Три закріплені пости, у цьому порядку: 1) пропозиція мінікурсу з CTA — той самий креатив 4:5, що в рекламі;
2) доказ реалізму — сітка моделей; 3) хто вона і метод.
Хайлайти: ставляться лише ті з 13 обкладинок, під якими є сторіс. Порожній хайлайт гірший за відсутній.
Особисті (Famiglia) — не на професійній вітрині.
Стрічка й реклама — один шаблон. Людина, що клікнула рекламу і зайшла в профіль, має впізнати той самий бренд за секунду.
07 — Композиція креативу: куди йде око
Дослідження
Айтрекінг реклами: у західних культурах око входить зліва зверху, проходить через центр і виходить
справа знизу. Найстабільніше дивляться на три речі: логотип, зображення продукту, заголовок. Звідси схема:
заголовок зліва зверху, доказ у центрі, CTA справа знизу.
Банери з обличчям притягують увагу сильніше за банери без нього. Якщо погляд моделі спрямований на продукт
або текст, глядач дивиться туди ж; при прямому погляді в камеру увага лишається на обличчі. Це керований інструмент:
погляд у камеру — щоб зупинити, погляд убік — щоб перевести на текст.
Оголошення з найвищим запамʼятовуванням мають три спільні риси: простий макет, одне повідомлення, сильна
впізнаваність бренду. Одна точка фокуса виграє в багатоелементних композицій. Бренд помітний за 0,3 с.
Motion Creative Benchmarks 2026 (1,29 млрд $ витрат, 578 750 креативів): статика досі дає 60–70% конверсій;
працюють не «гарні» макети, а макети з однією обіцянкою і одним доказом.
Дев'ять робочих макетів статики за аналізом 2026: цитата, велика цифра, до/після, нумерований список переваг,
продукт з підписами, таблиця порівняння, стос відгуків, жирне твердження, цитата засновника. Спільне в усіх:
одна причина дивитись і один наступний крок.
Три зони, і тільки три. Зліва зверху — заголовок. Центр — доказ (фото, цифра, сітка). Справа знизу — CTA в лаймовій
пастилі. Логотип-марка (зірка з favicon) — зліва знизу, дрібно. Нічого четвертого.
Одна точка фокуса. Або обличчя, або цифра, або сітка. Дві однаково сильні речі на кадрі = нуль уваги на обидві.
Погляд моделі — інструмент, не випадковість. У 4:5 модель дивиться в камеру (зупинити). У 9:16 з довгим текстом —
погляд у бік тексту (перевести).
Пропорції. Фото займає не менше 60% кадру, коли кут — реалізм. Плоска пляма кольору займає не менше 40%, коли
кут — пропозиція або цифра. Текст — до 20% площі в обох випадках.
Сітка креативу на 1080 × 1350: поля 64 px, 12 колонок по 64, міжколонник 24. На 1080 × 1920: ті самі колонки,
а по вертикалі контент лише в 270–1248 px. Заголовок стає на колонки 1–10, CTA — на 9–12.
Повітря. Не менше 25% кадру порожнє. Порожнє означає один колір без тексту й без деталей фото.
08 — Каталог макетів креативів
Пʼять макетів під три кути. Кожен креатив обирає макет із цих пʼяти
і робиться у двох форматах. Новий макет не вигадується під один креатив.
№
Макет
Кут
Будова 4:5
Особливість 9:16
K1
Quale è AI? сітка
реалізм
Сітка 2×2 із чотирьох облич на 80% кадру. Заголовок-питання зверху в лаймовій пастилі, до 5 слів. CTA справа знизу.
Сітка 2×3, шість облич. Заголовок у безпечній зоні на 300 px.
K2
Volto обличчя + обіцянка
реалізм / пропозиція
Одне обличчя під зріз на весь кадр, погляд у камеру. Заголовок зліва зверху в пастилі, 2 рядки Anton 120 px. CTA справа знизу.
Те саме обличчя, вертикальне кадрування, заголовок на 300–600 px.
K3
Cifra велика цифра
ринок і гроші
Фон чорний. Цифра Anton 320 px лаймом на 50% висоти. Під нею один рядок джерела 32 px. Фото моделі — права третина, під зріз.
Цифра 400 px, фото знизу під зріз до 1248 px.
K4
Dichiarazione твердження на кольорі
пропозиція
Уся площа — фуксія або лайм, плоско. Текст чорний Anton 140 px, до 6 слів, зліва зверху. CTA чорною пастилою з білим текстом. Без фото.
Те саме; текст починається на 300 px.
K5
Tre brand стос доказів
ринок
Три рядки: назва бренду лаймом + посада білим + місто сірим. Заголовок зверху. Фото немає. Формулювання — як факт ринку, без слів про вакансії.
Рядки крупніші, по 120 px кожен, у безпечній зоні.
Стартовий набір із восьми: K1 і K2 для реалізму, K3 і K5 для ринку,
K4 і K2 для пропозиції — у двох форматах кожен, плюс два відео (K2 в русі й показ моделей). Так у Meta потрапляють
різні макети, а не один макет із різними словами.
09 — Чекліст креативу перед завантаженням
Має бути
Два файли: 1080 × 1350 і 1080 × 1920
Текст у безпечній зоні (на 9:16 — 950 × 978 по центру)
Заголовок від 96 px, текст від 32 px
До 12 слів на кадрі
Пляма фірмового кольору ≥ 40% площі
Обличчя в камеру або рух у першому кадрі
Перемикач «AI-generated» увімкнений
WebP q90 з оригіналу, або MP4 1080p для відео
Файл названий за схемою продукт-запуск-кут-варіант-формат
Не має бути
Одного файла на всі плейсменти
Advantage+ posizionamenti і automatic enhancements
Білого тексту прямо на фото
«Se sei…», «per chi…», «hai difficoltà…»
Слів «lavoro», «candidati», «assunzione» в тексті оголошення
Обіцянки доходу в цифрах
Логотипа в першому кадрі відео
Градієнтів і світінь — правило з частини 1 діє і тут
Соцмережі й рекламні креативи
Ця частина відповідає на три питання: у якому форматі робити креатив для кожного місця показу, чому одні оголошення «світяться» у стрічці, а інші зникають, і що Meta забороняє. Дослідження 15.09.2026. Головне правило всієї частини: один файл на одне місце показу. Обрізані креативи — це завжди один файл, розтягнутий Meta під шість різних екранів.
01 — Місця показу і формати: карта
Джерела: Ad safe zones 2026, точні пікселі, Instagram ad safe zones, Buffer — розміри 2026
02 — Чому одна реклама «світиться», а інша зникає
Джерела: перші 3 секунди, 85% без звуку, статистика впізнаваності, Meta creative best practices 2026
#CFFF04і фуксія#FF2E9Aна#0D0D0D— це найвищий контраст із будь-якою стрічкою, і в світлій, і в темній темі. Це наш головний рекламний актив, ним і працюємо.03 — Текст на креативі
Джерела: типографіка в рекламі, каруселі 2026
04 — Скільки креативів і як тестувати
Джерела: скільки креативів тестувати, creative testing framework 2026
Старт: 3 кути × 2 формати = 6 статичних + 2 відео.Скасовано 15.09.2026 — кути були складені без стратегії; чинне: S1 (карта повідомлень) і S12 (4 оголошення = 2 призначення A/B × 2 макети). Далі по пункту — архів. Кути: реалізм (яка з моделей несправжня), ринок і гроші (бренди наймають, ставки), пряма пропозиція (6 уроків, старт у понеділок).ARM-L1-realismo-A-4x5.webp— продукт, запуск, кут, варіант, формат. Без цього через тиждень ніхто не знає, що працювало.05 — Що Meta відхилить
Джерела: політика AI-контенту 2026, особисті ознаки й заяви, чому відхиляють
06 — Instagram як вітрина
Джерела: три закріплені пости, біо 2026
07 — Композиція креативу: куди йде око
Джерела: айтрекінг цифрової реклами, погляд моделі як підказка (PMC), Motion Creative Benchmarks 2026, 9 макетів статики 2026
08 — Каталог макетів креативів
Пʼять макетів під три кути. Кожен креатив обирає макет із цих пʼяти і робиться у двох форматах. Новий макет не вигадується під один креатив.
сітка
обличчя + обіцянка
велика цифра
твердження на кольорі
стос доказів
Стартовий набір із восьми: K1 і K2 для реалізму, K3 і K5 для ринку, K4 і K2 для пропозиції — у двох форматах кожен, плюс два відео (K2 в русі й показ моделей). Так у Meta потрапляють різні макети, а не один макет із різними словами.
09 — Чекліст креативу перед завантаженням