Guida allo stile

REAL FICTION

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

UsoCarattereCorpoDettagli
Titolo principaleAnton90–150 pxmaiuscolo, interlinea 0.9
Titolo di slideAnton44–62 pxmaiuscolo, interlinea 0.9
Titolo di sezioneInter 70026–34 pxmaiuscolo, spaziatura 0.015em
SottotitoloInter 60018–19 pxnormale, non maiuscolo
TestoInter 40015 pxinterlinea 1.6, righe da 60–70 caratteri
EtichettaInter 70010–11 pxmaiuscolo, spaziatura 0.18em
Numeri e prezziAnton50–90 pxcolore 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.

Scintilla
Bollo
Stella
Quadrifoglio
Raggiera
Asterisco
Fiore
Globo

06 — Elementi pronti

Come sono fatti

Pastiglia — per un'affermazione breve
L'unico corso per AI Creator in Italia

Lime pieno, testo nero, maiuscolo 10–11px, spaziatura 0.14em, angoli completamente tondi.

Pulsanti
Iscriviti → Voglio partecipare →

Fucsia su fondo scuro, lime su fondo colorato. Sempre una freccia a destra. Mai a capo su due righe.

Numero ed etichette
01 Fashion Video + 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:

cwebp -q 90 -m 6 -sharp_yuv -resize 1600 0 originale.png -o finale.webp

-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

DoveLato lungoPerché
Foto dentro una slide1600 pxLa cornice sulla slide è 200–300 px: a schermo 4K servono ~900 px, 1600 è margine abbondante
Galleria del sito1600 px + versione 800 pxLa versione piccola serve ai telefoni, quella grande al clic
Post e caroselli1080 × 1350 pxMisura nativa di Instagram, oltre non serve
Copertina di condivisione1200 × 630 pxAnteprima 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

ElementoDoveCome
Barra del brandbordo superiore5 px, tre tinte piatte: fucsia, indigo, lime
Kickerin alto a sinistratrattino lime + nome lezione, 12 px, spaziatura 0.22em
Titolosotto il kickerAnton 44–62 px, interlinea 0.9, una sola parola fucsia
Piedein bassoREAL FICTION a sinistra, numero slide a destra
Frase chiavein basso a sinistrabordo 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

  1. Barra del brand in cima Gli stessi 5 px a tre colori delle slide: lega il documento al resto.
  2. Testata Kicker lime, titolo in Anton su due righe con la seconda fucsia, una frase di spiegazione.
  3. Sezioni numerate Pallino colorato con il numero + titolo in Inter 700. Il pallino alterna fucsia, lime e indigo.
  4. Passi Elenco con numeri in cerchietto, riga di titolo in grassetto e spiegazione sotto in grigio.
  5. Riquadri di avviso Fondo appena colorato e un'etichetta tonda: fucsia per «Importante», lime per «Consiglio», indigo per le note tecniche.
  6. 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

  1. 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.
  2. 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.
  3. Parti sempre da un fondo nero #0D0D0D su tutta la diapositiva. Il bianco non fa parte di questo brand.
  4. Un titolo, una parola accesa Titolo in Anton maiuscolo, bianco, e una sola parola in fucsia. È il meccanismo di REAL FICTION, ripetuto ovunque.
  5. L'etichetta va sopra il titolo Pastiglia lime con testo nero, piccola. Dice di cosa si parla prima ancora che si legga il titolo.
  6. 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.
  7. Un adesivo per diapositiva Uno in un angolo, come firma. Due sono già troppi.
  8. 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

FormatoDimensioniTitolo in Anton
Slide di lezione (web)1280 × 72044–62 px
Presentazione1920 × 108090–140 px
Post Instagram1080 × 1350110–160 px
Storia / Reel1080 × 1920130–200 px
Copertina carosello1080 × 1350140–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% ширини полотна.

Джерела: Cinebox — safe areas, Slidebazaar — grid system

Наше правило
  • Полотно 1280 × 720, масштабується під екран через CSS. Не міняється.
  • Поля 80 px з усіх чотирьох боків. Це 6,25% — усередині норми 5–10%.
  • За полями не буває нічого, крім фону й повнокадрового фото. Підпис бренду й номер слайда живуть у нижньому полі й до контентної зони не належать.
  • PDF робиться з того самого файла: @page{size:1280px 720px;margin:0}. Окремої версії для друку немає.

02 — Сітка

Дослідження
  • Працюють три різні сітки одночасно: колонкова (горизонталь), baseline (ритм тексту), 8pt (усі відступи).
  • Колонок зазвичай 12, але для презентацій достатньо 6–8. Міжколонник 10–20 px.
  • 8pt-сітка: усі поля, відступи, проміжки й розміри компонентів — кратні 8. Інтерліньяж теж кратний 8 (16, 24, 32), інакше сітка не працює.
  • Baseline-сітка дає те, що елементи в сусідніх колонках стоять на одних лініях — звідси відчуття «зроблено навмисно».

Джерела: 8-Point Grid: Vertical Rhythm, Grid Maker Pro — 8pt, 12-column, baseline

Наше правило
  • 12 колонок по 64 px, міжколонник 32 px, поля 80 px. Сходиться без залишку.
  • Вертикаль — ритм на 8 px. Усі відступи між блоками кратні 8; контентна колонка починається на 80 і закінчується на 640.
  • Дозволені відступи: 8, 16, 24, 32, 40, 48, 64, 80. Заборонені 18, 20, 22, 26, 30, 38, 44, 46 — саме вони стояли в старих слайдах і давали неохайність.
  • Ширина блока задається в колонках за формулою 96n − 32: 2 колонки = 160, 3 = 256, 4 = 352, 6 = 544, 7 = 640, 8 = 736, 12 = 1120.
  • Виняток для рядів із 5 і 7 елементів. Ні 5, ні 7 не діляться на 12, тому такий ряд вирівнюється тільки зовнішніми краями — ліворуч 80, праворуч 1200 — а всередині ділиться на рівні частки. Це єдиний дозволений відступ від колонок.
12 × 64 + 11 × 32 = 1120 · 1120 + 2 × 80 = 1280 ✓ 3 картки = по 4 колонки = 352 ✓ · 4 = по 3 = 256 ✓ · 2 = по 6 = 544 ✓

Чому не 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 знаків.
  • Трекінг має змінюватися разом із кеглем і насиченістю; великі літери без трекінгу злипаються.

Джерела: Beautiful.ai — font size, UI Typography — modular scale, Cieden — type scale

Наше правило

Базовий кегль 24 px = 18 pt — це мінімум, нижче не опускаємось. Шкала 1,333, округлена до кратних 8.

РівеньКегльУ пунктахІнтерліньяжШрифт
Титульний заголовок128 px96 pt0.9Anton
Заголовок слайда72 px54 pt0.9Anton
Підзаголовок слайда56 px42 pt0.95Anton
Велике число96–160 px72–120 pt0.85Anton
Ключова фраза32 px24 pt40 pxInter 600
Основний текст24 px18 pt32 pxInter 400
Текст у картці24 px18 pt32 pxInter 400
Мітка, kicker, підпис16 px12 pt24 pxInter 700, трекінг .18em
  • Мітки, kicker і нижній підпис — єдиний виняток із мінімуму 18 pt: це метадані, їх не читають, а впізнають.
  • Довжина рядка на слайді — 45–60 знаків, коротше за норму для суцільного тексту, бо слайд читають похапцем.
  • ВЕЛИКІ ЛІТЕРИ — тільки заголовки й мітки, завжди з трекінгом. Речення великими літерами заборонені: вони сповільнюють читання на 15–20%.
  • Anton ніколи не ставиться на текст довший за рядок.

04 — Ієрархія й фокус

Дослідження
  • Верхній лівий кут отримує найбільше уваги — око починає читати саме звідти. Головне повідомлення, розміщене там, обробляється раніше за решту слайда.
  • F-патерн працює на щільному тексті, Z-патерн — на розріджених макетах.
  • Правило третин: фокус ставлять на лінію поділу або на перетин ліній, не в геометричний центр.
  • Ієрархія будується пʼятьма засобами: розмір, колір, контраст, позиція і повітря навколо елемента.

Джерела: JEG Design — hierarchy for slide decks, Canva — visual hierarchy

Наше правило
  • Одна думка на слайд. Якщо думок дві — це два слайди.
  • Заголовок і головна думка — у верхньому лівому квадранті. Ілюстрація, картки, числа — праворуч або нижче.
  • Різниця в кеглі між сусідніми рівнями — не менша за 1,333. Якщо два блоки майже однакового розміру, читач не розуміє, що головніше.
  • Один акцент на слайд. Або лайм, або фуксія — не обидва. Акцент позначає рівно одну річ.
  • Вертикальні лінії блоків збігаються з лініями колонок. Нічого не «майже вирівняно».

05 — Повітря і щільність

Дослідження
  • Найкращі слайди мають більше повітря, ніж автору здається комфортним. Повітря не «порожнє місце» — воно ізолює головне й не дає елементам конкурувати між собою.
  • Правило «внутрішнє ≤ зовнішнє»: відступ усередині групи має бути меншим за відступ між групами, інакше око не бачить, де група починається й закінчується.

Джерела: Cieden — spacing best practices, Canva — whitespace

Наше правило
  • Не менше 30% площі слайда лишається порожнім.
  • Між групами — 48 px і більше. Усередині групи — 24 px і менше. Це те саме правило «внутрішнє менше за зовнішнє», записане в наших числах.
  • Правило дірки: якщо після верстки знизу лишається більше трьох рядків сітки (120 px) — слайд недобраний. Дозволені дії: збільшити кегль, додати повітря рівномірно між блоками, або злити слайд із сусіднім. Заборонено лишати діру внизу — саме це псувало старі слайди.
  • Якщо контент не влазить — слайд ділиться на два. Зменшувати кегль нижче 24 px, щоб влізло, заборонено.

06 — Скільки контенту на слайд

Дослідження
  • У дослідженнях за теорією мультимедійного навчання слайд вважають «легким» до 10 слів і «перевантаженим» далі. Реальні лекційні слайди мають у середньому 38 слів — і це названо проблемою, а не нормою.
  • Правила 6×6, 5×5×5 і 7×7 критикують як шкідливі: вони рахують рядки, а не зміст.
  • Міллерові «7 ± 2» не стосуються дизайну — Тафті прямо пише, що з тієї статті не випливає жодного правила про кількість елементів на слайді. Перерахунок Cowan (2001) дає реальну ємність робочої памʼяті близько 4 чанків.
  • Важлива не кількість пунктів, а чанкінг — групування в осмислені одиниці. Матеріал, поділений на чанки, запамʼятовується на 22% краще за суцільний.
  • Принцип сегментації Майєра: матеріал засвоюється краще, коли поділений на короткі частини, а темп контролює той, хто вчиться.

Джерела: Death by PowerPoint — дослідження слайдів медичних лекцій, Tufte — «7±2» не стосується дизайну, Mayer — 12 принципів

Наше правило
ЕлементЛіміт
Заголовок слайдадо 8 слів
Увесь слайд разомдо 40 слів
Одна карткадо 12 слів
Елементів у сітцімаксимум 6, оптимум 3–4
Пунктів у спискумаксимум 5
  • Ліміт 3–4 елементи взято не зі стелі: це реальна ємність робочої памʼяті за Cowan. Шість — стеля, а не мета.
  • Ділити треба за змістом, а не щоб влізло: один слайд = один чанк = одна закінчена думка.
  • Якщо на слайді більше 40 слів — це не слайд, це документ. Такий матеріал іде в конспект уроку, а не на екран.

07 — Колір на слайді

Дослідження
  • Пропорція 60-30-10: близько 60% площі — домінантний колір, 30% — вторинний, 10% — акцент. Саме акцент у 10% і притягує око.
  • У темній темі ролі ті самі, значення інші: та сама пропорція, але кольори підібрані під темну поверхню.
  • Дотримання 60-30-10 підвищує шанс, що макет лишиться читабельним при дальтонізмі, бо ієрархія тримається на площі й контрасті, а не лише на відтінку.

Джерела: Vision Australia — 60-30-10 і доступність, 60-30-10 у темній темі

Наше правило
  • 60% — фон #0D0D0D. 30% — поверхні #1C1C1C і білий текст. 10% — акцент: лайм або фуксія.
  • Перевищив 10% акценту — слайд кричить і перестає мати фокус. Лаймова плашка на пів слайда — це вже не акцент.
  • Індиго на слайдах майже не зʼявляється: він лишається для великих суцільних поверхонь і технічних приміток, як описано в частині 1.
  • Семантика кольору з частини 1 не змінюється: лайм — ключова думка, фуксія — увага, індиго — примітка.

08 — Компоненти й bento-сітка

Дослідження
  • Bento-сітка — макет із блоків різного розміру на спільній сітці. Ключове правило: розмір блока дорівнює його важливості. Блок на дві колонки й два рядки читається як головний, одиничні — як другорядні.
  • Обовʼязкова умова — єдина сітка, ієрархія і логіка групування. Без них bento перетворюється на набір випадкових прямокутників.
  • Планувати треба від змісту: розмір картки відображає цінність інформації, а не бажання заповнити площу симетрично.
  • Картки одного ряду мають бути однакової висоти — різна висота читається як недороблений макет.

Джерела: Inkbot — Bento Grid Design 2026, Bento grid principles

Наше правило
  • Рівний килим із шести-восьми однакових плиток заборонений, якщо серед них немає головної. Це була головна вада старих слайдів: усе однакове, дивитись нема на що.
  • Коли пункти справді рівнозначні — їх максимум 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 (фото під зріз) — робочий прийом: фото може виходити за край полотна.
  • Різна висота карток у ряду ламає «обіцянку» сітки й виглядає як недоробка.

Джерела: Evergreen — bleed your presentation, Aspect ratio в сітках зображень

Наше правило
  • 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, декоративні кольори, зайві підписи.
  • Прибирання зайвого економить час і місце й робить повідомлення зрозумілішим.
  • Колір у графіку має щось означати; колір без значення відволікає.

Джерела: NN/g — clutter-free charts, Data-Ink Ratio

Наше правило
  • Якщо значень менше чотирьох — графіка немає, є велике число в Anton. Три відсотки в ряд читаються краще за будь-яку діаграму.
  • Один графік на слайд, не більше.
  • Без ліній сітки, без 3D, без тіней, без легенди — підпис стоїть прямо біля даних.
  • Колір у графіку тільки там, де він розрізняє змісти. Решта — сірий rgba(242,242,242,.5).
  • Під числом завжди стоїть джерело, 16 px, 50% білого.

11 — Рух

Дослідження
  • Тренд 2026 — стриманий і осмислений рух, а не анімація заради анімації.
  • Принцип когерентності Майєра: зайві слова, картинки й звуки погіршують засвоєння. Декоративний рух потрапляє саме в цю категорію.

Джерела: Slidesgo — тренди 2026, Mayer — coherence principle

Наше правило
  • Анімації на слайдах немає взагалі. Перехід між слайдами — миттєва зміна, без fade і без зсувів.
  • Це свідоме рішення, а не недоробка: урок записується на відео, і будь-який рух на слайді конкурує з тим, що показує ведуча.

12 — Доступність

Дослідження
  • WCAG: контраст не менший за 4,5:1 для звичайного тексту й 3:1 для великого (від 18 pt або 14 pt жирного).
  • Мінімальний кегль для презентації — 18 pt; перед показом радять відкрити колоду на телефоні: якщо там текст не читається, віддалений глядач його теж не прочитає.

Джерела: WebAIM — contrast, мінімальні кеглі

Наше правило

Порахував наші сірі на фоні #0D0D0D:

Колір текстуКонтрастВердикт
білий #F2F2F217,4:1вільно
50% білого4,9:1проходить
40% білого3,5:1не проходить для тексту
34% білого2,9:1не проходить ніде
  • Найсвітліший допустимий сірий для тексту — 50% білого. 40% і нижче використовувати не можна, хоч воно й «гарно виглядає».
  • Мінімальний кегль 24 px (18 pt), без винятків, крім міток і підпису.
  • На лаймі текст завжди чорний. Білий на лаймі заборонений.
  • Перед здачею колода дивиться зменшеною до ширини телефона. Що не читається — переробляється.

13 — Структура й ритм уроку

Дослідження
  • Принцип сегментації: матеріал засвоюється краще, коли поділений на короткі частини з контролем темпу.
  • Принцип сигналізації: візуальні маркери, що показують, куди дивитись, покращують засвоєння.
  • Наратив пишуть до слайдів, а не навпаки: спершу лінія розповіді, потім слайди під неї.

Джерела: Mayer — segmenting і signaling, Narrative arc у презентації

Наше правило
  • Скелет уроку: обкладинка → карта уроку → блоки по 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.
06BentoГоловний блок 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, пошук).

Джерела: Ad safe zones 2026, точні пікселі, Instagram ad safe zones, Buffer — розміри 2026

Наше правило
Де крутитьсяФорматФайлБезпечна зона для тексту
Instagram Feed, Facebook Feed, Explore4:51080 × 1350відступ 64 px від усіх країв
Instagram Stories, Reels, Facebook Stories, Reels9:161080 × 1920зверху 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% вищу залученість.

Джерела: перші 3 секунди, 85% без звуку, статистика впізнаваності, Meta creative best practices 2026

Наше правило — що робить креатив помітним у стрічці
  • Контраст зі стрічкою, а не всередині креативу. Стрічка 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% глядачів.

Джерела: типографіка в рекламі, каруселі 2026

Наше правило
ЕлементКегль на 1080Шрифт
Заголовок-гачок96–140 pxAnton, ВЕЛИКИМИ, одне слово фуксією
Підзаголовок40–48 pxInter 600
Текст32 px мінімумInter 400
Мітка / CTA в пастилі28 pxInter 700, лайм із чорним текстом
  • На статичному креативі — максимум 12 слів разом. Заголовок до 6. Усе інше в підпис.
  • Текст поверх фото — тільки в лаймовій пастилі або на плоскій чорній плашці. Білий текст прямо на фото заборонений.
  • Карусель: 5–7 слайдів, перший — число або обіцянка, останній — CTA. Один шаблон на всі слайди.
  • Субтитри у відео — в кадрі, Inter 700 від 44 px, у безпечній зоні, чорним на лаймі.

04 — Скільки креативів і як тестувати

Дослідження
  • При бюджеті до 200 $/день тестують 3–5 креативів одночасно; Meta рекомендує від 6 при Advantage+ creative.
  • Найдешевша ітерація — міняти лише гачок: те саме відео, інші перші 3 секунди.
  • Оновлювати 2–3 креативи на тиждень, інакше вигорання.

Джерела: скільки креативів тестувати, creative testing framework 2026

Наше правило
  • Старт: 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-контенту 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% до конверсії у підписку.
  • Біо працює як маршрут: кому допомагаєш, що отримають, куди натиснути — без інтерпретації.
  • Три закріплені пости підтримують обіцянку біо; хайлайти відповідають на наступні питання довіри: результати, процес, відгуки.

Джерела: три закріплені пости, біо 2026

Наше правило
  • Біо: рядок 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: цитата, велика цифра, до/після, нумерований список переваг, продукт з підписами, таблиця порівняння, стос відгуків, жирне твердження, цитата засновника. Спільне в усіх: одна причина дивитись і один наступний крок.

Джерела: айтрекінг цифрової реклами, погляд моделі як підказка (PMC), Motion Creative Benchmarks 2026, 9 макетів статики 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
K1Quale è AI?
сітка
реалізм Сітка 2×2 із чотирьох облич на 80% кадру. Заголовок-питання зверху в лаймовій пастилі, до 5 слів. CTA справа знизу. Сітка 2×3, шість облич. Заголовок у безпечній зоні на 300 px.
K2Volto
обличчя + обіцянка
реалізм / пропозиція Одне обличчя під зріз на весь кадр, погляд у камеру. Заголовок зліва зверху в пастилі, 2 рядки Anton 120 px. CTA справа знизу. Те саме обличчя, вертикальне кадрування, заголовок на 300–600 px.
K3Cifra
велика цифра
ринок і гроші Фон чорний. Цифра Anton 320 px лаймом на 50% висоти. Під нею один рядок джерела 32 px. Фото моделі — права третина, під зріз. Цифра 400 px, фото знизу під зріз до 1248 px.
K4Dichiarazione
твердження на кольорі
пропозиція Уся площа — фуксія або лайм, плоско. Текст чорний Anton 140 px, до 6 слів, зліва зверху. CTA чорною пастилою з білим текстом. Без фото. Те саме; текст починається на 300 px.
K5Tre 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 діє і тут