Дизайнер - професія різнобічна. І розробка банерів для імейл-розсилок може стати твоїм повсякденним завданням. Це цікава задача, в якій є місце для творчості. Але і свої правила теж є. Їх сьогодні й обговоримо.
Графічні зображення в електронних листах - це вже радше правило, ніж бонус. Імейл із банером конвертує краще, ніж просто текст. Це наочно, зрозуміло, яскраво і чіпляє напевно.
Головне, що потрібно враховувати під час розробки розсилки загалом, це те, що ми прагнемо підвищення відсотка відкриття листів і утримання користувачів. Тому банери потрібно робити так, щоб зацікавити і при цьому не злякати читача, спровокувавши відписку.
Від якості банера залежить, чи прочитає людина лист. Тож потрібно одразу дати круте зображення. Це приблизно як перший екран лендінгу - у ньому дається самий сік, головна пропозиція, витримка з користі та вигоди для користувача.
В ідеалі розробкою розсилки займається команда з маркетолога, копірайтера і дизайнера.
Функції email-банера:
- інформування - розсилка має свою мету, тому в банері одразу має бути ключова інформація про пропозицію/новину;
- потрібний настрій - графіка задає тональність, створює потрібне враження і грає на емоціях за допомогою кольору і візуалу, чого не може зробити просто текст.
- акцент - не всі читають послання повністю і тому в банері розміщують найважливіше, а подробиці вже розписують у листі.
- реклама бренду - якщо банер виконаний у фірмовому стилі та з потрібним Tone of voice, то працюватиме як нагадування про компанію і в ідеалі допоможе вибудувати підвищення лояльності до торгової марки.
Заклик до дії
Email-банер - це основний елемент листа, який може бути самостійною одиницею і без тексту. Тому вся основна інформація в ньому вже міститься, хоч і коротко.
І з тієї ж причини на банері важливо розмістити кнопку СТА. Обов'язково після пропозиції дай користувачеві можливість нею скористатися! Перейти на сайт, подати заявку, купити, замовити, отримати знижку тощо. Як правильно робити кнопки ми нещодавно писали в окремій статті.
Але пам'ятай, що банер може не завантажитися, якщо у користувача біда з інтернет-з'єднанням. Тому СТА потрібно дублювати і в тексті.
Часта історія: промокод для підписників. Якщо це передбачено, то не роби помилку, малюючи промокод прямо на банері без можливості скопіювати. Полегшуй завдання, дай спосіб скопіювати заповітний код вручну, а ще краще одним кліком. Або одразу впроваджуй його при переході за посиланням, так буде ідеально.
Текст банера
Однозначно, весь дизайн має бути заснований на тексті. І вже від нього ти будеш відштовхуватися в пошуках візуалу та ефектів. Уже зрозуміло, що потрібно вмістити головну пропозицію в сам банер. Добре, якщо цим займається професійний копірайтер. Але ми ж готуємо різнобічних фахівців, тому тобі не завадить знати основи:
- Стислість і ємність - бажано зробити заголовок і коротке пояснення за необхідності. Вважається, що 5-7 слів у банері достатньо. Адже там ще буде кнопка, можливо, дати акції, назва бренду. Це все не повинно зливатися в купу слів - банер підкорює з однієї секунди, для більш тривалого читання у нас буде текст листа.
- Використовуй цифри - вони привертають увагу і підсвідомо сприймаються як факт, хоча не завжди є таким.
- Використовуй короткі слова, бо довгі треба читати, а не "схоплювати".
- Застосовуй для заголовка великий жирний шрифт, але не капс-лок - це вже виглядає так, ніби на читача кричать.
- Якщо йдеться про терміни акції - одразу їх зазнач, це не має бути дрібним шрифтом наприкінці листа, така інформація важлива.
Розмір має значення
Ширина. Банери для листа мають стандартну ширину 600 пікселів, тому що це ширина листа. Зробити менше означає втратити дорогоцінний простір і порушити композицію. А якщо зробити більше, то є ризик, що картинка буде обрізана при перегляді з телефону.
Висота. Що стосується висоти, то загалом можна робити різні варіанти. Але тут потрібно враховувати специфіку цільової аудиторії. Якщо листи в основному переглядають зі смартфона, то до 1000 пікселів висоти цілком прийнятно. Але для перегляду з ПК це буде занадто багато, доведеться скролити. Оптимально й універсально - 450-500 пікселів у висоту. У цьому разі і картинку видно повністю, і ще частину тексту самого листа.
Вага. Всі картинки в листі не повинні сумарно перевищувати вагу 200 Кб, інакше це сильно уповільнює завантаження. До чого ця примітка "всі картинки"? Тому що банер може бути не один. Але ми рекомендуємо все-таки за можливості використовувати один банер на один лист з однією пропозицією - так вони працюють краще.
Палітра та шрифт
Ти вже в курсі, як працюють кольори та типографіка, як вони створюють настрій. Тут нічого нового - відштовхуючись від теми та подачі тексту потрібно застосовувати відповідні палітри та шрифти.
Колір і шрифт мають з першого погляду давати розуміння, про що йдеться. Суха ділова добірка чи найпотужніша знижка, секретний промокод для обраних чи святкова пропозиція для іменинника.
Пам'ятай, що яскравість і контраст дуже важливі, нам потрібно привернути увагу. Але занадто перестаратися протипоказано, щоб не відлякати читача кричущим візуалом.
Якщо бренд має брендбук з основними шрифтами і корпоративними кольорами, то і в email-розсилці варто застосовувати саме їх. Якщо ні - запропонуй компанії розробку фірмового стилю (тут про це докладніше), це може бути непоганим доповненням до твоєї роботи.
Картинки
Та ж історія, що і в попередньому пункті. Все підбирається залежно від настрою і подачі. Є свої ілюстрації у бренду - беремо їх. Якщо це реклама товару, то розміщуємо безпосередньо його зображення.
Тут почитай про ілюстрації. Як їх робити і де брати безкоштовно.
Лого - важлива частина. Варто розміщувати логотип компанії на банері для впізнаваності. Якщо це реклама брендової продукції, то лого виробників теж будуть дуже в тему. Є різниця побачити напис "Apple" чи побачити заповітне надкушене яблучко. Логотип додає розуміння, що покупцеві пропонують оригінал.
Анімація
Анімовані банери - це топ. Колись це стало способом показати щось оригінальне, але сьогодні майже стандарт. І якщо ти не робиш анімацію, то вважай відстаєш від трендів.
Можна застосовувати анімацію у форматі GIF або APNG. Знову ж таки, стеж за вагою - не перевантажуй банер, інакше він не буде швидко завантажуватися або зовсім не відобразиться в листі.
Не потрібно робити повноцінний мультик, достатньо надати рухливості лише деяким елементам, щоб не збільшувати когнітивне навантаження. Додай сяйва і відблисків предметам, зроби слайд-шоу якщо товарів декілька, оформи пояснення у вигляді рухомого рядка.
Загальні рекомендації
Одержувач листа одразу бачить банер, а вже потім усе інше. Тому важлива не тільки інформація, розміщена на ньому, а й приємне враження.
Email-банери часто проєктуються за стандартною маркетинговою моделлю AIDA (Attention - увага, Interest - інтерес, Desire - бажання, Action - дія). За цим принципом розміщуються елементи. Тобто спочатку привабливий заголовок, потім багатообіцяюча пропозиція, потім суть цієї пропозиції, що спонукає бажання нею скористатися, а потім кнопка СТА. Почитай також статтю про мотивацію до покупки і як це використовувати у веб-дизайні.
Часто для рекламної або акційної пропозиції робиться один банер, який використовується і на сайті, і в рекламі в соцмережах, і в розсилці. Це, безумовно, економить час дизайнера - йому залишається тільки адаптувати розміри. Але набагато краще робити кілька різних візуалів або хоча б трохи їх змінювати. Якщо такої можливості немає, то посилання з листа з банером не повинно йти на розділ сайту з таким самим банером, це нерозумно. У цьому випадку варто хоча б одразу давати посилання на товар. Одне й те саме читати ніхто не хоче.
Якщо розсилка постійна (а найчастіше так і є), то зроби шаблони для різних типів листів. Для новин, акцій, службових листів, спецпропозицій, нагадувань. Нехай вони мають загальний вигляд, так буде і зручно для тебе, і красиво, в одному стилі. Пізніше залишиться просто вставляти потрібні тексти і картинки.
Перевіряй роботу
Виходячи з вищесказаного, можна зробити короткий чек-лист, який допоможе робити круті банери:
1. На банері є кнопка заклику до дії і вона продубльована в тексті листа. Промокод можна легко скопіювати.
2. Текст зрозумілий, короткий і містить усю основну інформацію. Є очевидна вигода для читача. Вказані терміни акції, якщо вони є.
3. Ширина 600 пікселів, висота 450-1000, вага не більше 200 Кб.
4. Колір і шрифт використані з брендбуку або підібрані відповідно до тематики.
5. Зображення пов'язане з пропозицією, є логотипи компанії та рекламованих брендів.
6. Мінімально використана анімація.
7. Банер у розсилці відрізняється від банера з тією ж пропозицією на сайті.
Плюс ще не забувай тестувати різні варіанти: А/В-тести наше все, без них ти не дізнаєшся, що відпрацьовує краще і як на твої банери реагують користувачі.
Що стосується естетики, то вона важлива. Але хороший банер - це не стільки про красу виконання, а більше про робочу картинку, що спонукає до дії. Насамперед зчитується вигода для читача, а вже потім відзначається твоя дизайнерська майстерність. І без грамотного оформлення і хорошої пропозиції не буде конвертувати навіть шедевр художнього мистецтва. При цьому навіть найвигіднішу акцію хочеться закрити і забути, якщо візуал невідповідний і відверто халтурний.
Роби банер так, щоб по ньому хотіли перейти. Це ціла наука на стику маркетингу, психології та дизайну. Ми вчимо цього та багато чого іншого на онлайн-курсі "Графічний дизайнер: вектор бренду". Реєструйся, буде пізнавально та цікаво!