---
title: Маркетинговый дизайн
description: "Дизайн визуальных материалов для продвижения: продающий лендинг, доказательный лонгрид, рекламные материалы и презентации для продаж, а также основы доверия, иерархии, адаптивности и измерения."
---

## О чём раздел

Маркетинговый дизайн — создание визуальных материалов, которые помогают определённой аудитории заметить сообщение, понять ценность и совершить целевое действие: заявку, покупку, подписку, звонок или согласование следующего шага.

Направление шире «сайтов» и не сводится к оформлению. В каждом материале сходятся пять элементов:

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

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

## Четыре формата

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

| Формат | На какой вопрос отвечает | Где применяется | Статья |
| --- | --- | --- | --- |
| **Продающий лендинг** | «Что я получу, на каких условиях и как начать?» | Посадочная под кампанию, партнёрский канал, запуск, страница направления с одним действием | [Продающий лендинг](https://wpcraft.ru/kb/design/marketing/landing.md) — структура секций, оффер, fit, доказательства, коммерческая модель, CTA |
| **Доказательный лонгрид** | «Почему привычное не работает и как устроен другой механизм?» | Блог, коммерческая страница с длинной аргументацией, база знаний | [Доказательный лонгрид](https://wpcraft.ru/kb/design/marketing/longread.md) — SCQA, драматургия, альтернативы, механизм, CTA по поверхности |
| **Рекламные материалы** | «Заметить, понять и перейти дальше» | Баннеры, посты и карусели, промо-слайды сайта, постеры, листовки, инфографика маркетплейсов | [Дизайн рекламных материалов](https://wpcraft.ru/kb/design/marketing/advertising-design.md) — бриф, форматы, композиция, адаптации, производство, проверка |
| **Презентации для продаж** | «Почему нам можно верить и какой следующий шаг?» | Первый звонок, демонстрация, коммерческое предложение, executive briefing, инвесторская встреча | [Дизайн презентаций для продаж](https://wpcraft.ru/kb/design/marketing/presentation-design.md) — сценарии, Big Idea, драматургия, слайд как единица смысла, CTA |

Лендинг без разбора отвечает на «сколько стоит», но не снимает причину сомнения; лонгрид без условий сделки объясняет механизм, но оставляет читателя без следующего шага; реклама без страницы тратит внимание впустую; презентация без CTA заканчивается вежливым «спасибо». Форматы работают как маршрут, а не как конкурирующие варианты.

## Границы со смежными разделами

- **Рекламный дизайн** — подмножество маркетингового: материалы конкретной кампании или предложения, ориентированные на действие. Он не становится синонимом всего направления: имиджевый сайт или годовой отчёт тоже маркетинговые, но не рекламные.
- **Дизайн презентаций для продаж** — отдельный формат. «Презентационный дизайн» больше не используется как синоним всего маркетингового дизайна: презентация помогает принять решение, а лендинг — выбрать и начать.
- **Графический дизайн** — общее ремесло: типографика, цвет, композиция и изображение. Маркетинговый дизайн добавляет к нему задачу и измеримую цель, а не заменяет ремесло.
- **UX/UI-дизайн** остаётся в своих разделах. Карточка товара в списке интернет-магазина — элемент сравнения и выбора, а не промо-инфографика для маркетплейса. Разница разобрана в статье [дизайн рекламных материалов](https://wpcraft.ru/kb/design/marketing/advertising-design.md), а практика карточек — в [каталоге и checkout](https://wpcraft.ru/kb/practices/ecommerce/storefront/catalog-and-checkout.md).
- **ИИ-дизайн** описывает применение моделей и проверку результата. Общие возможности конкретного продукта находятся в его профиле в разделе [инструментов дизайна](https://wpcraft.ru/kb/design/tools.md), а не в обзоре ИИ.

## Общие основы

Все четыре формата опираются на один набор свойств. Подробности — в соответствующих статьях; здесь границы.

### Доверие

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

### Иерархия и текст

- Материал считывается за 5–10 секунд: что это, для кого, почему верить, что сделать.
- Заголовки проверяются отдельно от макета: если убрать дизайн, структура аргумента должна остаться понятной.
- Текст пишется выгодами, а не характеристиками: не «мощный движок», а «каталог на 50 000 товаров открывается за секунду».
- Сканируемость обеспечивают подзаголовки, списки, короткие абзацы и схемы, а не мелкий текст в несколько колонок.
- Микрокопирайт вокруг формы и кнопки снимает тревогу: что произойдёт после отправки, когда ответят, что делать при ошибке.

### Адаптивность и скорость

- Первый экран на мобильном содержит оффер и действие без прокрутки.
- Длинные формы делятся на шаги; поля используют правильные типы ввода и автозаполнение.
- Кнопки и ссылки остаются крупными и различимыми: минимум 24 × 24 CSS-пикселя по [WCAG](https://wpcraft.ru/kb/design/ux/accessibility.md).
- Тяжёлые изображения и видео не задерживают первый экран; воспринимаемая скорость важнее формальных метрик.
- Мобильная версия проверяется на реальном устройстве, а не только в эмуляторе.

### Аналитика и эксперименты

- **События** фиксируют ключевые действия: клик по CTA, отправку формы, шаги формы, оплату.
- **Воронка** показывает, на каком шаге теряются люди.
- **Гипотеза** формулируется до дизайна: «если поставить тарифы выше кейсов, доля заявок вырастет, потому что цена — главное возражение».
- **При малом трафике** A/B-тест не даёт вывода: работают последовательные срезы и качественный разбор. Методика — в статьях [CRO](https://wpcraft.ru/kb/marketing/internet-marketing/cro.md) и [веб-аналитика](https://wpcraft.ru/kb/marketing/internet-marketing/web-analytics.md).

Рекламные материалы проверяются иначе, чем страницы: у них меньше места и времени, а результат зависит от площадки, размера и аудитории. Тестируются концепции, а не косметические варианты одного макета, — процесс описан в [статье о рекламных материалах](https://wpcraft.ru/kb/design/marketing/advertising-design.md).

### Бренд и юридические блоки

Тон общения, визуальный стиль и подбор изображений совпадают с тем, что человек увидит после заявки: в письме, звонке, личном кабинете. Разрыв между обещанием и первым контактом обнуляет конверсию. Один набор токенов и правил применяется ко всем форматам — от баннера до слайда, иначе серия материалов распадается на несвязанные макеты.

На странице нужны обязательные блоки: политика конфиденциальности, согласие на обработку данных, условия использования, cookie-уведомление. Их состав зависит от юрисдикции и модели бизнеса — см. [обязательные страницы сайта](https://wpcraft.ru/kb/legal/required-pages.md). Лицензии на изображения и шрифты и требования к рекламным формулировкам — в [лицензировании контента](https://wpcraft.ru/kb/legal/content-licensing.md) и [рекламе и языке](https://wpcraft.ru/kb/legal/advertising-and-language.md).

## Маршрут к инструментам

Инструмент выбирают после того, как определена задача. Для быстрых шаблонных материалов подходят Canva, Doory и Adobe Express; для профессиональной графики — Photoshop, Illustrator и Affinity; для интерфейсов, совместной работы и цифровых макетов — Figma, Penpot, Sketch и pen.dev; для презентаций — PowerPoint и Google Slides.

Это не рейтинг, а карта по типу результата. Профили с ограничениями, сценариями и альтернативами собраны в разделе [Инструменты дизайна](https://wpcraft.ru/kb/design/tools.md); там же объяснено, как читать каталог.

## Библиотека блоков и дизайн-система

Повторяемые блоки — hero, CTA, формы, отзывы, тарифы, FAQ — выгодно держать как библиотеку вариантов, а не рисовать заново на каждой странице. Это ускоряет сборку, снижает расхождения и позволяет накапливать проверенные решения.

Библиотека не должна превращаться в набор несвязанных макетов: варианты опираются на одни токены и правила, а новый блок добавляется в систему, а не рядом с ней. Сборка страницы из компонентов — в статье [продающий лендинг](https://wpcraft.ru/kb/design/marketing/landing.md), техническая сторона — в разделе [UI-дизайн](https://wpcraft.ru/kb/design/ui.md), платформенная реализация — в [практиках тем WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/practices.md).

## ИИ-агент в маркетинговом дизайне

Агент ускоряет сборку и варианты, но не заменяет проверку гипотез.

| Задача | Что делает агент | Что проверять вручную |
| --- | --- | --- |
| Структура страницы | Собирает сценарий hero → fit → доказательства → условия → CTA | Соответствие реальному возражению аудитории |
| Текст и дизайн | Предлагает заголовки по выгодам и микрокопирайт под блоки | Отсутствие обещаний, которые компания не выполнит |
| Сборка из блоков | Комбинирует hero, CTA, формы, отзывы и тарифы из библиотеки | Единые токены и правила между вариантами |
| Рекламные серии | Делает варианты одного макета под размеры и аудитории | Одна мысль на макет, требования площадки, лицензии |
| Презентации | Собирает черновик структуры и слайдов по брифу | Логика аргумента, данные и следующий шаг |
| Доверие | Готовит отзывы, кейсы, цифры с явными placeholder-ами | Все данные подтверждены, placeholder-ы заменены |
| Гипотезы и варианты | Формулирует проверяемые гипотезы и варианты блоков | Одна переменная на тест, достаточный трафик |
| Адаптивный QA | Проверяет первый экран, формы и CTA на мобильных | Проверка на реальном устройстве |

Сквозные требования к работе агента — в статье [ИИ-дизайн: сервисы и процесс](https://wpcraft.ru/kb/design/ai/tools-and-workflow.md).

## Связанные разделы

- [Дизайн цифровых продуктов](https://wpcraft.ru/kb/design.md) — как маркетинговый дизайн соотносится с UX.
- [Инструменты дизайна](https://wpcraft.ru/kb/design/tools.md) — плоский каталог профилей продуктов.
- [UX-дизайн](https://wpcraft.ru/kb/design/ux.md) и [юзабилити](https://wpcraft.ru/kb/design/ux/usability.md) — путь к целевому действию.
- [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) — компоненты, состояния и дизайн-система.
- [Доступность](https://wpcraft.ru/kb/design/ux/accessibility.md) — формы, контраст и клавиатурная работа.
- [Интернет-маркетинг](https://wpcraft.ru/kb/marketing.md) — каналы, контент, CRO и измерение.
- [Платные кампании](https://wpcraft.ru/kb/marketing/internet-marketing/paid-advertising.md) — каналы и креативы платной рекламы.
- [Производительность](https://wpcraft.ru/kb/practices/web/performance/optimization.md) — скорость как часть конверсии.
- [Каталог и checkout](https://wpcraft.ru/kb/practices/ecommerce/storefront/catalog-and-checkout.md) — сценарий, где маркетинг переходит в продажу.

## Материалы и источники

- [Superside: What Is Marketing Design?](https://www.superside.com/blog/marketing-design) — пять элементов материала, типы маркетингового дизайна и отличие от продуктового.
- [99designs: The Ultimate Guide to Advertising Design](https://99designs.com/blog/marketing-advertising/advertising-design/) — рекламный дизайн как подмножество маркетингового, бриф и форматы.
- [Duarte: Sales Presentations](https://www.duarte.com/blog/sales-presentations-elevate-your-pitch-to-drive-success/) — сценарии продающих презентаций и следующий шаг.
- [Readymag: Key Principles of Presentation Design](https://blog.readymag.com/key-principles-of-presentation-design/) — версия для выступления и версия для чтения.
- [Ключевые составляющие маркетингового дизайна (исходный конспект)](https://wpcraft.ru/raw/2026/1024/mb.md)
- [Дизайн цифровых продуктов](https://wpcraft.ru/kb/design.md)
- [Два направления веб-дизайна (исходный конспект)](https://wpcraft.ru/raw/2026/1009/2-practices-web-designs.md)