Разборы

Как добавить красивую подпись в электронное письмо: 10 советов от дизайнеров

Дизайнеры плохого не посоветуют

Мы перевели статью Canva о подписи в письмах.  Ребята специализируются на дизайне и часто касаются темы рассылок — мы уже переводили их текст про трендовые цвета в 2019 году. Как обычно, для перевода мы выбрали самое главное и добавили ссылки на полезные статьи по теме.

Хорошая подпись проста, красива и информативна. Это последнее, что видит читатель  в вашем письме, поэтому наша задача — запомниться и оставить хорошее впечатление. Помните чувство, которое остаётся после хорошей книги? Мы должны постараться сделать так же.

Вот 10 простых правил, которые помогут выжать максимум из подписи.

1. Меньше информации

Лишние ссылки, цитаты и текст захламляют подпись и делают её нечитабельной. Пользователи пропускают её как информационный шум.

Это, конечно, не совсем подпись, но размеры футера в письме Google поражают. Осилите все пункты?
Это, конечно, не совсем подпись, но размеры футера в письме Google поражают. Осилите все пункты?

Мы за минимализм — пусть в подписи будет только самое главное: логотип, имя автора, должность и контакты.

Подпись Murdock краткая, простая и удобная в навигации
Подпись Murdock краткая, простая и удобная в навигации

2. Меньше цветов

Придерживайтесь правила «чем меньше, тем лучше». Включите в подпись только 2-3 цвета.

Яркая палитра нередко ведёт к цветовому конфликту. Такие перегруженные дизайны отвлекают пользователя — он не знает, на чём сосредоточиться. Нескольких цветов, напротив, концентрируют внимание и не дают отвлекаться от сути.

Как вариант, можно использовать цвета из логотипа вашей компании.

Подпись Zippy Sig перекликается с цветами логотипа
Подпись Zippy Sig перекликается с цветами логотипа

Если у вас чёрный логотип, выберите цвет, который его дополняет. Так, например, сделала дизайнер Chaya M Kanner.

Полоска неонового голубого цвета подсвечивает ссылки на сайт и соцсети, делая их более заметными. Яркая полоса в монохромном дизайне выглядит необычно и отлично привлекает внимание
Полоска неонового голубого цвета подсвечивает ссылки на сайт и соцсети, делая их более заметными. Яркая полоса в монохромном дизайне выглядит необычно и отлично привлекает внимание

3. Меньше шрифтов

Много разных шрифтов в подписи затрудняют чтение. Люди добавляют их, чтобы выделить важную информацию, но в итоге получается смысловая неразбериха. Всё равно, что музыкант, который добавляет в песню всё больше инструментов, чтобы сделать её красивее. До какого-то момента это будет работать, но если их станет слишком много, всё превратится в неразборчивый гул.

Для подписей лучше использовать один шрифт, но с разными вариантами начертания. Более важные элементы можно будет выделить жирным и при этом остаться в рамках одного стиля. Шрифты в разных начертаниях можно скачать с fontstorage и fonts-online.

Raleway — гибкий шрифт с несколькими вариантами начертания
Raleway — гибкий шрифт с несколькими вариантами начертания
Themesforce добавляют цвета к некоторым элементам, меняют начертание шрифта, используют заглавные и строчные буквы, и всё в пределах одного шрифта
Themesforce добавляют цвета к некоторым элементам, меняют начертание шрифта, используют заглавные и строчные буквы, и всё в пределах одного шрифта

Мы не рекомендуем брать больше двух шрифтов для подписи. Но если это необходимо, то первый лучше взять для основного текста, а второй — для заголовков.

Sombras Blancas Design использовали два шрифта – один с засечками, другой без них. Подпись осталась чистой и читабельной
Sombras Blancas Design использовали два шрифта – один с засечками, другой без них. Подпись осталась чистой и читабельной

4. Постройте иерархию

Подпись электронного письма передаёт важную информацию, поэтому здесь важна иерархия.

Меняйте размер, цвет и толщину шрифта, чтобы показать читателям, что в подписи самое главное. Возможно, это имя автора или название компании. Выделите этот элемент.

В этом фрагменте подписи Themesforce имя автора письма выделено крупным жирным шрифтом. Оно привлекает внимание больше других элементов
В этом фрагменте подписи Themesforce имя автора письма выделено крупным жирным шрифтом. Оно привлекает внимание больше других элементов

5. Упрощайте визуал

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

Обычно для подписи берут используют всего 2 картинки (но можно обойтись и вообще без них):

  • Логотип. Повысит узнаваемость бренда, поможет пользователям быстрее распознать, от кого пришло письмо.
  • Фото автора. Покажите, что за рассылкой стоит реальный человек. Тщательно выбирайте фото: будет грустно, если оно всё в «зерне», а в кадре проблемы с освещением.
В подписи Chanelle Villena есть как логотип, так и фотография. Благодаря минимализму всё выглядит аккуратно и уместно
В подписи Chanelle Villena есть как логотип, так и фотография. Благодаря минимализму всё выглядит аккуратно и уместно

6. Используйте иконки соцсетей

Ссылки на соцсети в конце письма дадут дополнительный трафик — те, кому неудобны письма, смогут следить за вами через другие каналы. При этом, лучше использовать иконки, а не гиперссылки — они занимают меньше места и выглядят более аккуратно.

Nakro используют привычные всем значки социальных сетей, которые вписываются в их корпоративный стиль
Nakro используют привычные всем значки социальных сетей, которые вписываются в их корпоративный стиль
Email Signature Rescue используют чёрные иконки, которые хорошо сочетаются с их цветовой палитрой
Email Signature Rescue используют чёрные иконки, которые хорошо сочетаются с их цветовой палитрой

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

7. Выровняйте элементы дизайна

Выравнивание графики, текста и значков мгновенно вносит порядок и гармонию в дизайн подписи.

Matt Coneybeare выравнивает элементы по высоте логотипа, чтобы создать аккуратный и компактный дизайн
Matt Coneybeare выравнивает элементы по высоте логотипа, чтобы создать аккуратный и компактный дизайн

Найдите в своей подписи форму, по которой можно выровнять остальные элементы. Это может быть фото или логотип.

Также важно выровнять подпись на самой странице. Большинство подписей прибивают к левому краю, потому что это удобно для чтения и навигации.

Email Signature Rescue выровняли подпись по левому краю
Email Signature Rescue выровняли подпись по левому краю

8. Используйте разделители

Если отделить подпись от тела письма, она будет казаться более аккуратной. Для этого можно использовать графические разделители, отступы или просто сплошную горизонтальную линию. Так, например, делают TeddyFood:

Авторы Teddy Food использовали графические разделители, чтобы отделить подпись от основного текста
Авторы Teddy Food использовали графические разделители, чтобы отделить подпись от основного текста

Разделители нередко используют и внутри подписи. Для этого ставят глиф-делители — вертикальные линии, которые разграничивают друг от друга важные элементы.

Email Signature Rescue разделяют строки с помощью глиф-делителей
Email Signature Rescue разделяют строки с помощью глиф-делителей

Глиф-разделители помогут избавиться от неуклюже длинных строк, сэкономят место и улучшат читабельность подписи. Если вам не нравятся графические разделители, то это отличный способ уменьшить их количество.

9. Адаптируйте для мобильных устройств

По данным Litmus, 42% людей открывают электронные письма на мобильном устройстве, а не на компьютере.

Мобильные телефоны намного меньше компьютеров, поэтому убедитесь, что подпись остаётся читабельной и на маленьких экранах.

Подпись от Instant Entity не подходит для мобильных устройств. Надпись вокруг логотипа слишком маленькая, и на мобильных экранах её будет сложно прочитать. Это, конечно, не очень большая проблема, но повод задуматься есть
Подпись от Instant Entity не подходит для мобильных устройств. Надпись вокруг логотипа слишком маленькая, и на мобильных экранах её будет сложно прочитать. Это, конечно, не очень большая проблема, но повод задуматься есть

Если вы оказались в такой ситуации, замените логотип на более простой или сделайте его масштабируемым.

Убедитесь, что ваши ссылки не слишком маленькие и не располагаются чересчур близко друг к другу. Иначе, когда пользователь захочет коснуться значка Twitter, то случайно перейдёт на Facebook*.

The Bell расположили значки социальных сетей аккуратно, чтобы сделать удобную навигацию. Текст и графические элементы достаточно крупные, их хорошо видно на небольшом экране
The Bell* расположили значки социальных сетей аккуратно, чтобы сделать удобную навигацию. Текст и графические элементы достаточно крупные, их хорошо видно на небольшом экране

Это не значит, что нужно масштабировать каждый элемент, но помните, что не все увидят вашу подпись в том размере, в котором вы её отправили. Лучше заранее адаптировать всё письмо под разные экраны.

10. Найдите баланс

Убедитесь, что в вашем дизайне есть баланс. Не только визуальный, но и баланс между элементами подписи.

Если хотите использовать больше трёх цветов, тщательно выбирайте их и органично вписывайте в дизайн.

В подписи Мигеля Оливы Маркесуса много цветов в гистограмме, но их уравновешивает чистый монохроматический шрифт
В подписи Мигеля Оливы Маркесуса много цветов в гистограмме, но их уравновешивает чистый монохроматический шрифт

А если вы хотите включить в дизайн много значков социальных сетей, сократите другой контент, чтобы подпись не получилась громоздкой.

В подписи издательства МИФ значки соцсетей – единственный яркий элемент
В подписи издательства МИФ значки соцсетей – единственный яркий элемент

Вывод

Электронные подписи – небольшая, но важная часть email-маркетинга. Они дают пользователям ценную информацию и ссылки, а также визуально демонстрируют ваш бренд.

При создании подписи главное — помнить, что она должна быть простой. Делайте шрифт разборчивым, цвета – уместными, а графику – масштабируемой, чтобы оставить у подписчиков приятное впечатление о письме.

* признан минюстом РФ иноагентом