Приложение 7 Пример доработки нотификаций
Приложение 7
Пример доработки нотификаций
А: Перечень нотификаций
Б: ТЗ на дизайн шаблона нотификаций
Задача
Разработать дизайн для автоматических писем shop-example.ru: новая учетная запись, напоминание пароля и т. п.
Материалы
• Сайт магазина: ссылка на интернет-магазин.
• Бренд-бук shop-example: ссылка на скачивание бренд-бука.
• Шаблон для массовой рассылки: ссылка на скачивание шаблона.
Общие требования
• Цвета, шрифты, изображения, ссылки, кнопки и другие графические элементы сделать в стиле сайта, бренд-бука и уже разработанного шаблона.
• Фон снаружи письма: светло-серый.
• Фон тела письма: белый.
• Рамка вокруг письма: тонкие серые линии, по углам скругление.
• Ширина письма: 600px.
• В результате предоставить исходники шаблонов в PSD.
Эскиз
1. «Шапка»
• Слева логотип магазина.
• Справа телефонная трубка и номер телефона + время работы:
+7 (777) 777–77–77
пн. – пт. с 10:00 до 19:00
2. Тело письма
• Заголовок: Здравствуйте, {Имя}!
• Горизонтальная серая линия.
• Текст:
Добро пожаловать на сайт «Shop-example». Для входа в свою учетную запись на сайте просто нажмите Войти или Моя учетная запись вверху справа на любой странице и введите адрес своей электронной почты (e-mail) и пароль.
• Блок с логином и паролем.
• Обрамление блока рамкой с тонкими серыми границами.
• Заливка фоном – таким же, как вокруг письма, или подобрать другой, но неяркий.
• Текст в рамке:
Данные для авторизации на сайте:
E-mail: testmail @ yandex. ru
Пароль: 123456
• Текст с маркированным списком (буллиты подобрать красивые, в цвете сайта):
• Добро пожаловать на сайт «Shop-Example».
• Для входа в свою учетную запись на сайте просто нажмите Войти или Моя учетная запись.
• Введите адрес своей электронной почты (e-mail) и пароль.
• Подзаголовок: Ваш заказ #000000000 (создан 11 апреля 2014 г. 12:06:55 MSK)
• 5 блоков с данными о заказе.
• Блоки 1–2 в один ряд, блоки 3–4 в один ряд, блок 5 по всей ширине.
• Блоки в рамках, залиты фоном, фон подзаголовков сделать темнее.
• Блок 1
Подзаголовок: Информация о плательщике
Текст:
Имя Фамилия
Город
Адрес
Страна
Тел.: +75555555555
• Блок 2
Подзаголовок: Метод оплаты
Текст:
Метод оплаты | Ссылка на оплату
• Блок 3
Подзаголовок: Информация о доставке
Текст:
Способ доставки
Адрес
Страна
Тел.: +75555555555
• Блок 4
Подзаголовок: Метод доставки
Текст:
Способ доставки, сроки доставки
• Блок 5
Блок с составом заказа, таблицей.
«Шапку» таблицы залить так же, как блоки 1–4.
Столбцы визуально разделить пустыми промежутками с другим фоном (вместо границ).
Предварительный итог: 10 250,00 руб.
Доставка и обработка: 950,00 руб.
Итого к оплате: 11 200,00 руб.
• Текст:
Если у Вас возникли вопросы по поводу Вашей учетной записи или любой другой вопрос, пожалуйста, свяжитесь с нами по адресу info @ shop-example. ru или по телефону +7 (777) 777–77–77.
• Кнопка: За покупками
(попробовать разные фирменные цвета, можно пробовать градиент)
• Горизонтальная серая линия
• Подпись: С уважением, Ваш Shop-example:-)
3. Футер
• Верхняя часть:
• 5 монохромных иконок в ряд, разделенных светлыми вертикальными линиями.
• Иконки подобрать, цвет подобрать. Под каждой иконкой подпись.
1. Акции
2. Новинки
3. Конкурсы
4. Адреса магазинов
5. Обратная связь
• Нижняя часть:
• Фон совпадает с фоном вокруг письма.
• Текст темно-серым, мелко, по центру:
Вы получили это сообщение, потому что зарегистрировались на shop-example.ru.
Сообщение было сгенерировано сайтом автоматически.
© 2014 Shop-example
В: ТЗ на внедрение нотификаций
Задача
Внедрить новый html-шаблон в нотификации магазина (письма о регистрации, заказе, восстановлении пароля и т. п.).
• Перечень нотификаций: ссылка на перечень нотификаций.
• E-mail отправителя: newsletter @ shop-example. ru.
• Имя отправителя: Shop-example Service.
{* Контент подставлять с таким же форматированием, как в шаблоне (выделение жирным, цвет шрифта и т. п.).}
Г: Напоминание о брошенной корзине
Данный текст является ознакомительным фрагментом.