Дизайн лицевой и оборотной сторон карточки-вкладыша

Порядок чтения

Продумайте переход между сторонами, а не две отдельные карточки

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

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

Роли сторон

Лицевая сторона помогает узнать бренд, оборотная дополняет сообщение

Лицевая сторона: Признак бренда, короткий заголовок и одно сообщение, которое заслуживает внимания в первую очередь.
Оборотная сторона: Инструкции, поддержка, условия, URL, QR-код или одно действие, продолжающее сообщение лицевой стороны.
Обе стороны: Единая палитра, система шрифтов, логика отступов и узнаваемый визуальный мотив.

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

Метод в три прохода

Назначьте → свяжите → сократите

Назначьте: Одним предложением опишите задачу каждой стороны.
Свяжите: Выберите общие для обеих сторон палитру, шрифты, отступы, выравнивание и мотив.
Сократите: Уберите повторяющийся текст, конкурирующие призывы к действию и подробности, которым место на сайте или странице поддержки.

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

Парные структуры

Пять примеров лицевой и оборотной сторон карточки-вкладыша

Благодарность: Лицевая сторона: короткое «спасибо» и признак бренда. Оборотная: рекомендации по уходу или путь к поддержке.
Первое использование: Лицевая сторона: первое действие и название товара. Оборотная: пронумерованные шаги настройки и контакты для помощи.
Повторный заказ: Лицевая сторона: ясное напоминание о том, что нужно заказать снова. Оборотная: точный URL товара или обозначенный адрес, на который ведёт QR-код.
Уход: Лицевая сторона: самое важное правило ухода. Оборотная: остальные шаги ухода и предупреждения, предоставленные продавцом.
Подарок: Лицевая сторона: поздравление и визуальный акцент. Оборотная: сведения об использовании, остатке средств, сроке действия или поддержке только тогда, когда они достоверны и необходимы.

Пример применения этих ролей см. в англоязычном кейсе карточки-вкладыша для платившего клиента Pawmoir: там представлены переданные SVG-макеты лицевой и оборотной сторон и предоставленные фотографии печатных экземпляров.

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

Визуальная связность

Повторяйте правила, а не каждый элемент

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

Проверка в итоговом размере

Проверяйте физическую карточку, а не только макет на экране

Распечатайте обе стороны в масштабе 100 % от задуманных физических размеров.
Убедитесь, что главное сообщение лицевой стороны понятно с первого взгляда.
Убедитесь, что на оборотной стороне есть один ясный порядок чтения и не более одного главного действия.
Проверьте каждое имя, URL, код, инструкцию, предложение, условие и сведения о поддержке.
Проверьте каждый QR-код по напечатанной пробе на нескольких телефонах.
Попросите типографию подтвердить ориентацию, размер, выпуск под обрез, безопасную область, материал, отделку, цвет и требования к файлам.

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

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

Вопросы и ответы

Вопросы о двух сторонах вкладыша

Что поместить на лицевую сторону карточки-вкладыша?

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

Что поместить на оборотную сторону карточки-вкладыша?

Используйте оборотную сторону как полезное продолжение лицевой: сведения об уходе, настройке, поддержке, повторном заказе, условиях, URL или обозначенном адресе, на который ведёт QR-код. Включайте только актуальную и необходимую информацию.

Должны ли лицевая и оборотная стороны выглядеть одинаково?

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

Можно ли разместить главный призыв к действию на лицевой стороне?

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

Что проверить перед печатью обеих сторон?

Рассмотрите обе стороны в окончательном физическом размере, проверьте порядок чтения и каждое имя, URL, код, инструкцию и условие. Затем попросите выбранную типографию подтвердить размер, ориентацию, выпуск под обрез, безопасную область, материал, цвет и требования к файлам.

Проверка источников

Как проверялось наличие двустороннего формата

Avery предлагает для карточек-вкладышей печать только лицевой стороны или лицевой и оборотной сторон. VistaPrint предлагает одностороннюю или двустороннюю печать вкладышей и показывает обе стороны как вариант продукта. MOO указывает, что его открытки двусторонние. Эти первичные страницы поставщиков подтверждают, что двусторонние карточки — существующий формат печати. Они не доказывают эффективность предложенной здесь схемы иерархии, не выражают одобрения MARKFOLDS и не дают оснований утверждать рост конверсий.

Avery: индивидуальные карточки-вкладыши — источник на английском языке.
VistaPrint: карточки-вкладыши — источник на английском языке.
MOO: открытки Original — источник на английском языке.

Создайте обе стороны

Объедините две роли в одной визуальной системе

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

Открыть инструмент дизайна, на английском языке

Прочитать руководство по созданию карточки, на английском языке