Як створити ідеальний дизайн email, що виглядає на мільйон

Ми живемо в еру візуального контенту, де стрімко змінюється все: тренди, технології, фокус уваги та настрої аудиторії. Тому будьте певними: перше, що помітять ваші читачі у листах – це візуал. Текст вони почнуть читати вже потім, якщо взагалі почнуть. Тобто якщо вам вдасться “зачепити” їх картинкою.

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

Дизайнерські елементи, які варто включити в email

Коли підписник відкриває лист, він відразу ж бачить перший екран. І по ньому має чітко зрозуміти, що ми взагалі від нього хочемо. Потрібно перейти за якимось посиланням? Кудись клікнути чи зробити щось інше? Ваш меседж має бути простим і зрозумілим.

У нашому випадку email-кампанія – це як міні лендінг, який ми відправляємо прямо на поштову скриньку. І щоб полегшити задачу підписнику, використовуємо принцип “один лист – один заклик до дії”. Цей чіткий та зрозумілий заклик має відслідковуватися від початку і до кінця листа, але особлива увага – на першому екрані.

Коли створюєш ефективний email-шаблон, є кілька ключових дизайнерських елементів, які мають бути присутніми для забезпечення привабливості, читабельності та конверсії:

• Зрозумілий та привабливий заголовок – цей елемент визначає, чи відкриють ваш лист узагалі. У нас немає єдиної поради щодо заголовків, тому що все треба тестувати конкретно для вашої аудиторії: наявність чи відсутність емоджі, великий чи маленький розмір тексту і тд. Головне – зробити заголовок дійсно цікавим та інформативним. Він має показувати читачу вигоду від прочитання листа.
• Логотип та брендування – роблять ваші листи впізнаваними, забезпечують цілісність комунікації та візуально узгоджують емейли з іншими маркетинговими матеріалами, наприклад, з постами в соцмережах.
• Основний заклик до дії (CTA) – щоб кнопки заклику до дії були помітними і клікабельними, варто використовувати контрастні кольори, простий текст і достатній розмір. Кнопки краще розміщувати у видимих і логічних місцях, наприклад, вгорі або в центрі екрану, а також в кінці листа після ключового контенту. Оточення кнопки має бути вільним від зайвих елементів, щоб не відволікати увагу.

• Зображення та іконки – банер задає настрій листа. Його оптимальний розмір – 300х600 px. Обов’язково міксуйте картинки з текстом, інакше ваш лист може сприйматися gmail-фільтрами як спам. Ми використовуємо правило 60/40, де 60% – це текстовий контент, а 40% – візуал.

• Картки товарів – якщо ви продаєте фізичні товари, їх краще показати візуально, аніж описувати текстом. У розміщенні карток товарів ми акцентуємо увагу на візуальній ієрархії: великі якісні зображення товарів, чіткі назви, ціни та кнопки заклику до дії. Використовуємо достатній простір між елементами для кращої читаємості. Для мобільних версій часто застосовуємо одноколонковий макет, щоб картки виглядали послідовно та зручно для перегляду.
• Текстовий контент – текст в листі повинен мати чітку структуру та невеликі абзаци (максиму 2-3 речення). Виділяйте головну думку підзаголовком або виносьте її написом на банері. Для більшості рубрик ми використовуємо невеликі тексти до 400 знаків, таким чином вся інформація поміщається на перший екран і читачу не потрібно скролити.
• Баланс білого простору – дизайн листа не повинен бути перевантажений елементами, але водночас і не виглядати порожнім.
• Посилання на соціальні мережі – додаючи посилання на соціальні мережі, ви розширюєте охоплення вашої аудиторії, залучаєте підписників до інших каналів взаємодії та підсилюєте зв’язок клієнт-бренд.
• Контактна інформація та підписка/відписка – контактна інформація дає можливість швидко зв’язатися з вами. А опція відписки підвищить якість вашої бази даних: краще відписка, ніж потрапляння до “Спаму”.

Корпоративний стиль – наше все

Корпоративний стиль забезпечує послідовність візуальної комунікації та підвищує впізнаваність бренду. Все просто: якщо всі ваші листи мають однакову структуру, подібний дизайн, єдиний базовий колір оформлення – вони стануть впізнаваними. Викликатимуть асоціацію саме з вашим брендом. Це також допомагає формувати емоційний зв’язок зі споживачами.

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

Брендбук має описувати корпоративні кольори (як правило, їх декілька), правила розміщення логотипа, фірмові шрифти, графіку та ін. Наша порада: не розпочинайте розсилки, поки у вас не буде сформованого брендбуку.

Про банери

Згадайте, що ви бачите першим, коли відкриваєте лист? Так, це банер.

Банер є важливою частиною листа, оскільки він одразу привертає увагу, передає головне повідомлення та спонукає до дії.

Є різні типи банерів для email-розсилок:

1.Головний – великий, яскравий, привертає увагу з першого погляду, розташований у верхній частині листа. Зазвичай містить основне повідомлення чи пропозицію, яку ви хочете донести до аудиторії.

2. Промо-банер – контрастний, динамічний, фокусується на вигідній пропозиції з помітним CTA. Щоб швидко зчитати його зміст. Часто включає динамічні елементи, такі як відсотки знижок або обмеження за часом, що підкреслюють терміновість пропозиції.

3.Інформаційний – стриманий, без кричущих елементів, акцентує на інформуванні користувача, а не на спонуканні до миттєвої дії. Зазвичай структурований таким чином, щоб максимально легко передати зміст і не відволікати користувача від основного контенту листа.

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

Про шрифти

Читабельні шрифти – must have, оскільки вони забезпечують зручність сприйняття тексту та підсилюють професійний вигляд листа. Зазвичай ми використовуємо для дизайну дуже зручний та популярний шрифт Inter. Виглядає сучасно, оптимізується для різних екранів, що робить його ідеальним вибором для адаптивного дизайну email-розсилок.

Він легко читається, підтримує багато мов і допомагає створити позитивне враження від бренду. Розмір – 14-16, міжрядковий інтервал – 1,5.

Наша порада: не використовуйте занадто багато шрифтів в одному листі. Не застосовуйте для тексту багато різних кольорів, а також прийомів типу курсив, підкреслення і тд. Такий лист буде виглядати підозріло для фільтрів Gmail та інших поштових скриньок, і це все підвищує ваші шанси опинитися у “Спамі”.

GIF-анімації: додавати чи не додавати

Анімації, такі як GIF або CSS-анімації, можуть привертати увагу до важливих елементів, як-от кнопки заклику до дії або нові продукти. Проте, важливо використовувати їх помірковано, щоб не перевантажувати лист і не впливати на швидкість завантаження.

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

Наявність гіфки допомагає вам виділитися серед конкурентів через контент. Головне правило: анімація не повинна відволікати читача від основної думки, а доповнювати її.

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

Адаптивний дизайн – те, що може вас врятувати

64% користувачів читають емейли в телефоні. Тому перед запуском розсилки завжди думайте про те, як ваш лист буде відображатися у мобільній версії.

Для адаптації дизайну листів до мобільної версії ми використовуємо гнучкі макети з відносними одиницями вимірювання, спрощуємо структуру і забезпечуємо читабельність тексту на маленьких екранах. Оптимальний розмір шаблону для комп’ютера – 600px, для мобільної версії – 320px.

Щодо чорного режиму (dark mode) – оптимізуємо кольорову гаму, вибираючи відтінки, які добре виглядають на темному фоні, і перевіряємо, щоб текст і кнопки залишалися контрастними і легко читабельними. Особлива увага на картках товарів. Для того, щоб вони коректно відображалися у dark mode, використовуйте прозорий фон для зображення товарів, логотипу та іконок соцмереж.

Для тестування мобільної версії використовуємо вбудовані інструменти Klaviyo, а в eSputnik можемо дивитися через спеціальний додатковий сервіс.

Сервіси для дизайну і верстки листів

Ці сервіси допомагають нам створювати ефективні та персоналізовані розсилки:

Figma – крута для дизайну завдяки її зручності та можливості спільної роботи.

Mailchimp дозволяє легко створювати та верстати листи.

eSputnik пропонує потужні можливості для автоматизації розсилок і персоналізації контенту.

Klaviyo відомий своєю гнучкістю у створенні тригерних кампаній та глибокою інтеграцією з e-commerce платформами.

Stripo – чудово підходить для тестування мобільної версії та dark mode.

Чи впливає дизайн листів на спам-рейтинг?

Однозначно, впливає. У вас є великі шанси потрапити до “Спаму”, якщо:

1. Ви даєте в листі лише картинки без тексту. Це може сигналізувати спам-фільтрам, що лист є ненадійним або потенційно небезпечним.
2. Використовуєте спам-слова. “Безкоштовно”, “терміново”, “гарантія” та ін.
3. Додаєте занадто багато лінків в одному листі.
4. Поміщаєте занадто “важкі” зображення, що повільно завантажуються.
5. Поміщаєте непрацюючі або приховані посилання.
6. Надсилаєте однакові листи, що пропонують одне й те ж саме з місяця в місяць, з тижня в тиждень. Це стає нецікавим і підписник відправляє емейл у “Спам”.

Як вже було сказано, ми слідкуємо за правилом “60% тексту і 40% картинок”. І робимо мінімальну кількість посилань в одному листі, бо, по-перше, це впливає на вибір клієнта і, по-друге, впливає на спам-фільтри gmail та інших сервісів.

Рекомендації наостанок

Створіть шаблон. Звісно, кожен ваш лист може бути унікальним. Але створювати верстку з нуля під кожну розсилку – дуже затратно по часу. Особливо, якщо ви запускаєте десятки А/Б тестів. Додайте потрібні вам блоки та створіть універсальний шаблон під майбутні розсилки.

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

Структуруйте текст та зображення в листі. Виділяйте кнопки з закликом до дії контрастним або корпоративним кольором. Сфокусуйте увагу читача та одній дії, використовуючи правило “один лист – один заклик”. Пам’ятайте, що користувач спочатку дивиться на банер, потім на великі заголовки, і вже потім – на кнопки. Все має бути в одному стилі та відповідно до tone-of-voice.

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

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

В агенції ми розділяємо ролі email-маркетолога, верстальника та дизайнера. І це дає найкращий результат! Бо не завжди маркетолог може створити дизайн на професійному рівні. Не завжди він розуміється на тому, як поєднати блоки з точки зору верстки, щоб все коректно виглядало і в дарк моді, і в звичайному режимі.

Тому кожен має займатися своєю справою. І тоді лист виглядає як повноцінний мінілендінг і продає те, що ми хочемо продати.

В Emailix ми розробляємо email-маркетинг під ключ, в тому числі дизайн розсилок і pop-ups. Будемо раді допомогти вам у створенні емейлів на мільйон!