Top Banner
Требования к дизайну писем Обучалка для дизайнера
19

Требования к дизайну писем

Jan 08, 2017

Download

Marketing

EmailSoldiers
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Требования к дизайну писем

Требования к дизайну писем

Обучалка для дизайнера

Page 2: Требования к дизайну писем

Ширина общего макета, включая рамки, отступы и тени, не должна превышать 700px.

700 px

Макет

Page 3: Требования к дизайну писем

Структура письма

прехедер

хедер/шапка

тело/контент

футер/подвал

Page 4: Требования к дизайну писем

Структура для последующей верстки

Из чего состоит письмо?

★Текстовые блоки

★Баннеры

★Иконки

★Товарная сетка

★СТА (кнопки и призывы)

★Основной фон/паттерн

Page 5: Требования к дизайну писем

Шрифты, которые отображаются на любых устройствах в текстовых блоках

Шрифты без засечек: Arial

Verdana Tahoma Trebuchet MS

Доступные шрифты

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

Шрифты с засечками: Courier

Courier New

Georgia Times

Times New Roman

Page 6: Требования к дизайну писем

Что разместить?

• Краткий цепляющий анонс рассылки

• Ссылка на веб-версию письма

• Ссылка отписки

Прехедер

Page 7: Требования к дизайну писем

Что разместить?

Хедер (шапка)

Логотип

Слева или по центру

Фирменный слоган

Под логотипом, либо сбоку

Контакты обратной связи

Меню

Page 8: Требования к дизайну писем

Как разместить?

Десктоп

Мобильные устройства

Контакты обратной связи размещаются либо в одну строку для компактности последующей верстки, либо друг над другом.

Контакты обратной связи

Page 9: Требования к дизайну писем

Как разместить?

Десктоп

Мобильные устройства

Меню состоит из однотипных блоков (текста и/или иконок), не отвлекающих внимание от основной информации. Для адаптации под мобильные устройства пункты переносятся друг под другом без вреда для отображения.

Меню

Page 10: Требования к дизайну писем

Основной фон

★ Следует отказаться от использования фоновых изображений (текст на неоднородном фоне). С его отображением могут возникнуть проблемы в outlook. Впрочем, наши верстальщики научились справляться с этой проблемой :)) Посоветуйтесь с одним из них по поводу конкретного фона, либо предусмотрите альтернативный однотонный фон для outlook.

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

Page 11: Требования к дизайну писем

Боковой фон

Боковой фон для отображения письма на десктопе может быть как схож с основным фоном письма, так и отличаться от него.

Схожий фон

Фон-текстура

Также гармонично будет смотреться фон-текстура.

Page 12: Требования к дизайну писем

Еще о подготовке к верстке

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

★ В верстке писем НЕ используется • Flash анимация • Java Script • Формы • Эффекты наведения (:hover)

★ Зато используются gif-изображения

Page 13: Требования к дизайну писем

Размещение блоков

Блоки не должны мешать друг другу при верстке.

Слои не накладываются друг на друга.

Это относится как к различным типам блоков,

так и однотипным.

баннеры

фон

СТА

текст

Page 14: Требования к дизайну писем

Баннеры

Если предлагается нарисовать коллаж из товаров, разные части которого ведут на конкретный изображенный товар, он должен быть нарисован «по квадратам». Нельзя коллаж разделить по диагонали!

P.S. Примеры баннеров взяты из рассылок компании H&M

Page 15: Требования к дизайну писем

Блоки в одном ряду

Блок при блочной адаптации (например, блок товара) не должен превышать 300 px вместе с отступами.

Десктоп

Мобильное устройство

Page 16: Требования к дизайну писем

Футер

Что разместить?

Логотип Причина подписки

Контакты обратной связи

Ссылка отписки

Ссылки на соц.сети

Page 17: Требования к дизайну писем

Футер

Как разместить?

Десктоп Мобильные устройства

Размещение элементов в футере должно быть удобным для адаптации под мобильные устройства без вреда для отображения.

Page 18: Требования к дизайну писем

Конечный файл

★ В формате PSD.

★ Максимально разбитый по слоям — каждый элемент на отдельном слое.

★ Весь текст редактируемый. Размер — в пунктах, а не в пикселях. Начертание — четкое.

★ Прозрачность текстового слоя — 100%.

Page 19: Требования к дизайну писем

emailsoldiers.ru

+7 (499) 403-14-79

[email protected]

C нами емейл-маркетинг работает!