Я блогер - Онлайн-школа Євгена Вергуса. 9 секретів гарного банера для сайту

Вітаємо Вас! У цій статті ми поговоримо про те, як зробити гарний продає банер для сайту, які правила потрібно дотримуватися при цьому, як робити смислові акценти ... Ці знання можна з успіхом застосовувати не тільки для банерів, але і для вибору і розробки дизайну сайту, створення будь-яких графічних рішень: від обкладинок електронних книг до створення фірмових превью для відео на YouTube.

Ці знання можна з успіхом застосовувати не тільки для банерів, але і для вибору і розробки дизайну сайту, створення будь-яких графічних рішень: від обкладинок електронних книг до створення фірмових превью для відео на YouTube

Вам зараз може здатися нереальним, але пройде зовсім небагато часу, і ви з блогера-початківця виростите до рівня молодого професіонала, створите свій перший комерційну пропозицію ... І неважливо чи буде це інфопродукт, міні тренінг або пропозицію своїх послуг - в будь-якому випадку вам доведеться його рекламувати. А банер - це якраз один з інструментів реклами.

З чого почати?

Розробка банера починається c визначення його призначення. Банер - це не просто красива картинка. Він повинен нести відвідувачеві сайту вигоду використання вашої пропозиції. Це може бути вигода використання конкретно ваших послуг або кінцева вигода для відвідувача. Іншими словами, людина повинна побачити в ньому або вирішення певної проблеми зараз, або здійснення заповітної мрії. В ідеалі ці два положення повинні бути якомога більше переплетені.

Яку картинку використовувати для фону?

Однозначної відповіді на це питання не може бути. Банер може бути взагалі без фону (на білому тлі). Це трендовий мінімалістичний дизайн. Він максимально фокусує увагу відвідувача на пропозиції. З іншого боку, таке рішення не дає польоту фантазії відвідувачеві. І для цього як раз добре підходять картинки. Спочатку вони повинні бути хорошої якості і більшого розміру, ніж майбутній банер. Картинка не повинна бути занадто строкатої, тому що ви не зможете потім підібрати кольори написів. Вони просто загубляться або вам доведеться чаклувати з додатковими прийомами, що не завжди прийнятно.

Якого розміру повинен бути банер?

Існують загальноприйняті розміри для банерів:

Існують загальноприйняті розміри для банерів:

Однак це зовсім не означає, що банер на вашому сайті повинен бути, припустимо, саме 300 × 600рх. Ви з успіхом можете зробити банер розміром 300 × 400рх або 300 × 300рх. Головний критерій - це те, щоб ширина банера не перевищувала ширину верстки елемента сайту. Хоча, втім, будь-який блогер може швидко зменшити ширину банера до необхідної способом, який описаний тут .

Які шрифти використовувати для написів?

Особисто вам можуть подобатися написи, виконані шрифтами Comic Sans, Times New Roman, Papyrus, Arial ..., але вже застаріли для дизайну і їх застосування є поганим тоном. Застосовуйте сучасні шрифти: Open Sans, Roboto, Proxima Nova Pro, PT Sans, Ubuntu.

Застосовуйте сучасні шрифти: Open Sans, Roboto, Proxima Nova Pro, PT Sans, Ubuntu

Шрифти із зарубками або без зарубок?

У поліграфії дуже поширені шрифти із зарубками, але в web-дизайні їх в основному використовують для акцентування уваги (заголовки, підзаголовки). Основні тексти повинні бути виконані шрифтами без зарубок. Вони легко сприймаються поглядом і відмінно читаються на мобільних пристроях. Плюс до всього вони зазвичай займають менше місця.

Скільки шрифтів використовувати, якого кольору і розміру?

Як і на сайті, в банері не варто використовувати більше двох шрифтів. Всі необхідні акценти можна з успіхом розставити, змінюючи жирність, стиль і розмірність одного і того ж шрифту. Що стосується кольорів, то тут не варто пістрявити, роблячи з банера новорічну гірлянду. Також 2-3 кольору в тон або в контраст з основним дизайном. При необхідності ви завжди можете доповнити колірну палітру головними квітами - білим і чорним.

При необхідності ви завжди можете доповнити колірну палітру головними квітами - білим і чорним

Як акцентувати увагу на потрібних елементах?

Акцент дозволяє привернути увагу відвідувача і створюється через контраст. А ось контрасти створюють по-різному:

- за допомогою розміру (ієрархія), наприклад, заголовок, підзаголовок, текст;

- за допомогою відтінків (колір або одночасно колір і розмір);

- за допомогою фігур (незвичайні фігури привертають увагу);

- за допомогою кольору (створення точки акценту або інтересу);

- за допомогою відстані (головне від другорядного).

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

Якою має бути кнопка?

Кнопки може не бути взагалі! Але, якщо ви робите банер з кнопкою, то вона однозначно повинна бути помітною і сучасної. 3-D кнопки вже пішли в минуле. З 2013 року з подачі Apple в моду увійшов Flat-дизайн. А це плоскі форми з тінями або без.

А це плоскі форми з тінями або без

Анімований банер або статичний?

Це вже вирішувати вам! Анімація дозволяє не просто привернути увагу відвідувача, але і зав'язати з ним уявний діалог через послідовну подачу інформації в кадрах анімації. Однак, якщо вся інформація, яку ви хочете донести до людини уміщається в нерухомому банері, то в цьому випадку не варто вдаватися до анімації.

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

Сподіваємося, що ви зрозуміли, як створюється хороший банер і яких помилок слід уникати при його створенні.

Якщо ця тема вам цікава, якщо ви хочете дізнатися більше про дизайн, то залишайте свої побажання в коментарях. І, звичайно, задавайте питання, які виникли.

PS В даний момент ми тестуємо новий канал залучення читачів і публікуємо деякі статті на Яндекс Дзен .

Ось посилання на наш новий канал на Яндекс Дзен.

Там Ви зможете дізнатися про що цей канал і прочитати кілька готових постів, поділитися ними зі своїми друзями і поставити лайки))) Не забудьте підписатися на канал, щоб не пропустити нові унікальні публікації.

З чого почати?
Яку картинку використовувати для фону?
Якого розміру повинен бути банер?
Які шрифти використовувати для написів?
Шрифти із зарубками або без зарубок?
Скільки шрифтів використовувати, якого кольору і розміру?
Як акцентувати увагу на потрібних елементах?
Якою має бути кнопка?
Анімований банер або статичний?