Як зробити банер: розміри, композиція, текст

Крок 1

Сформулюйте одну мету

Банер бачать мимохідь, тож він має донести одну думку, а не всю презентацію компанії. Перед роботою запишіть три речі одним реченням кожну:

• •кому він адресований;
• •що пропонуєте: продукт, подію, знижку, реєстрацію;
• •яку дію чекаєте: натиснути, зареєструватися, прийти.

💡 Якщо замовник хоче вмістити все, запропонуйте серію банерів: кожен з однією думкою. Так і читається краще, і варіанти можна порівнювати.

Крок 2

Візьміть розміри з офіційних вимог

Розміри залежать від майданчика, і краще брати їх з довідки, а не зі старих статей. Приклади станом на листопад 2026 року:

• •Google Ads, завантажені банери (Demand Gen): 300×250, 336×280, 728×90, 970×90, 160×600, 300×600 і 320×50 пікселів; JPG, PNG або статичний GIF до 150 КБ;
• •Google Ads, адаптивні оголошення: зображення 1200×628 (горизонтальне), 1200×1200 (квадратне) і 900×1600 (вертикальне), до 5120 КБ;
• •пост в Instagram: ширина 1080 пікселів, співвідношення сторін від 1.91:1 до 3:4;
• •Instagram Stories (реклама): 9:16, рекомендовано 1440×2560 пікселів.

💡 Почніть з найскладнішого формату: вузького 728×90 чи 320×50. Якщо думка вміщується туди, у більших форматах розмістити її буде простіше.

Крок 3

Побудуйте композицію

Nielsen Norman Group пояснює: візуальна ієрархія веде погляд від найважливішого до менш важливого, а створюють її розмір, контраст і групування. Для банера це зазвичай три рівні:

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

💡 NN/g радить обмежитися трьома розмірами: малим, середнім і великим. На банері це часто правило, а не порада.

Крок 4

Скоротіть текст і перевірте контраст

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

• •контраст тексту з фоном: за WCAG (рівень AA) щонайменше 4.5:1 для звичайного тексту і 3:1 для великого;
• •текст поверх фото — на спокійній ділянці або на однотонній підкладці;
• •у Stories Meta радить не ставити текст і логотип приблизно на 14% зверху, 35% знизу і 6% з боків, щоб їх не перекрили елементи інтерфейсу;
• •шрифт — один, максимум два, з кирилицею.

Крок 5

Зробіть варіанти й отримайте фідбек

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

• •покажіть варіанти людям, які не бачили брифу, і попросіть за секунду назвати пропозицію;
• •перевірте банер на телефоні, а не лише на великому моніторі;
• •для реклами майданчики дають запускати кілька варіантів і порівнювати результати;
• •викладіть варіанти в спільноті: свіжий погляд швидко покаже, де губиться головне.

💡 Зберігайте всі варіанти разом із брифом. Серія банерів з поясненням рішень — готовий маленький кейс для портфоліо.