Сам собі дизайнер Детальний гід з дизайну в електронному розсиланні
Радимо, як підібрати шрифт для розсилки. Розповідаємо, де та як оформити банер для письма.
Правила композиції стандартного листа
Тут логотип, слоган, контакти та кнопки переходу на сайт. Оформляйте шапку у фірмових кольорах, щоб передплатник дізнавався про бренд і розумів, від кого лист. Слідкуйте за тим, щоб логотип не зливався з фоном, а кнопки меню були схожі саме на кнопки, а не на абстрактний текст — інакше передплатник так і не здогадається, що сюди можна натиснути.
2. Основний блок
Тут буде банер, основний текст, картки товарів та ілюстрації. Класичний лист будується за принципом: банер або ілюстрація → текст → кнопка. Цей шаблон підходить для новин, акцій, пропозицій зі знижками. У розсилці, орієнтованій на контент, структура та сама, хіба що вам не обов'язково і навіть небажано розставляти кнопки навпроти кожного смислового блоку.
Не захоплюйтеся кількістю колонок і не ускладнюйте макет. Чим більше елементів у листі – тим важче утримати увагу передплатника. Він не повинен хаотично метатися по макету, переводячи погляд на одну кольорову пляму, то на іншу. Зверніть його увагу послідовно: ось картинка, ось опис, ось кнопка.
Погляд користувача ковзає зверху-вниз та зліва-направо. Тому великі ілюстрації розміщуйте на початку листа, другорядні - зліва від тексту, і, як варіант, у шаховому порядку. Це не «золотий перетин», а класичний перевірений варіант. Ви маєте право експериментувати. Головне, заміряйте результати експериментів, щоб зрозуміти, яка структура конвертує більше, а яка менше.
Вибудовуйте лінійну композицію зоднієї-двох колонок. Особлива увага до шапки, вона має бути у фірмовому стилі, і до основного блоку, в якому картинки – ліворуч чи зверху, текст – праворуч чи під картинками.
Оформлення банера чи ілюстрації
Визначтеся, де ви збиратимете банер або ілюстрацію:
Зібрати ілюстрацію в сервісі можна відразу - інтерфейс інтуїтивно зрозумілий і будується за принципом drag and drop. Функціонал у подібних сервісів обмежений і буває, що вони гальмують на слабких комп'ютерах. Для простого банера у форматі «картинка + текст» потужностей та можливостей вистачить, для чогось «незвичайного та креативного» немає.
Друкарня
- Як підібрати шрифт
Не треба грати зі шрифтами, особливо якщо ви не дизайнер. Експерименти можливі зі слоганом на банері, для основного тексту вибирайте «класичні» варіанти – Arial, Helvetica, Georgia та Verdana. Ці шрифти підтримуються всіма поштовими клієнтами, тому ситуації, коли текст злетів або відображається некоректно, виключені.
Дизайнери люблять посперечатися, які шрифти читаються краще — із засічками чи без засічок. Вважають, що для довгих текстів підходить шрифт із засічками, для коротких — без. Не забивайте голову подібними тонкощами та орієнтуйтеся на загальне відчуття та почуття смаку. Якщо ви в ньому вагаєтесь, протестуйте шрифт на колегах, запитайте, який читається краще. І не треба набирати кожен абзац новим шрифтом, використовуйте два – для заголовка та основного тексту. Або один, це не несмак, а нормальна та адекватна практика.
- Як підібрати розмір та інтервал
Знову ж таки, орієнтуйтеся на стандарт - 10 або 12 кегль для основного тексту і 18-20 для заголовків. Якщо серед вашої цільової аудиторії переважають люди похилого віку, збільште розміршрифту до 14. Інтервал вибирайте полуторний або подвійний, щоб рядки не зливались і не наїжджали один на одного.
— Як вибрати колір та зображення тексту
Дотримуйтесь класичних шрифтів та розмірів. Зберігайте текст "чистим" - без зайвих підкреслень, курсивів та капслока. Текст має бути читабельним, а не «креативним».
Набір інструментів та сервісів для дизайну листів
Ми підібрали інструменти та онлайн-сервіси, які допоможуть оформити банер, плакат чи іконку для письма самостійно, без допомоги дизайнера.
Безкоштовні варіанти:
Розширення для хрому, що визначає колір картинки. Стане в нагоді, коли потрібен «той самий колір, з того самого сайту». Працює за принципом піпетки у Фотошопі: натискаєте на потрібне місце і розширення показує, що це за колір — у форматі RGB та HEX. Якщо ці формати вам не підходять, переведіть їх у CMYK, XYZ або LAB.
Онлайн-сервіс для створення анімованих картинок. Пам'ятайте, що поштові клієнти не люблять «важкі» листи і можуть приховати їх вміст під кнопку «Показати повністю», наприклад, робить Gmail. Щоб цього не сталося, перевіряйте вагу готової гіфки, якщо вона більша за 500 Кб – переробляємо, це явний перебір.
На випадок, коли треба заокруглити фотографію. Тут можна налаштувати модний фільтр, додати рамку або популярні емоджі.
Бібліотека з 20 тисяч зображень, серед яких ілюстрації, іконки та патерни. Що приємно - обмежень за конкретними кольорами немає, зображення «підлаштовуються» під потрібну вам колірну гаму.
Платні варіанти:
Приємний інструмент для створення банерів. Дозволяє додати на картинку текст та логотип, підібрати фільтр та фірмові кольори. Завантажувати свою картинку необов'язково - у вас у запасі 3 мільйонизображень із бази. Ціни не кусаються: 50 банерів на місяць коштуватимуть 9 доларів, абсолютний безліміт — 18.
Аналогічний сервіс — із шаблонами для email-листів, навчальними матеріалами, колективним доступом та безкоштовною 30-денною версією. Після тріалу ці радості коштуватимуть 13 доларів на місяць.
Після того, як картинка або банер готові, стисніть їх через TinyPNG, якість не постраждає. Для чого? Щоб листи важили менше та відкривалися швидше.
Майданчики для пошуку дизайнерів
Якщо нічого не вийшло чи вийшло не так, як хотіли — скористайтеся планом Б. Знайдіть дизайнера, серед знайомих чи на перевірених фріланс-біржах:
Найбільша українська спільнота ілюстраторів. Що зручно, можна знайти виконавця, виходячи зі стилю — наприклад, фахівця з коміксів чи художника, який працює у жанрі поп-арту.
українська біржа фрілансерів, серед яких є ілюстратори. Градус адекватності тут нижчий, зате ціни не кусаються. Якщо бюджет закінчується - шукайте виконавців на Fl.ru.
Співпрацюючи зі спеціалістами з фріланс-біржі, використовуйте «Безпечну угоду». Так ви оплатите роботу за фактом і уникнете ситуацій, коли дизайнер пропадає з передоплатою.
Де надихнутися?
Погортайте і подивіться ці листи, тут все, як треба:
З українських брендів зверніть увагу на розсилки інтернет-магазину Madrobots, Aviasales чи LinguaLeo – вони гарні.