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

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

Раздел охватывает два направления с разными целями: [UX-дизайн](https://wpcraft.ru/kb/design/ux.md) помогает человеку выполнить задачу, а [маркетинговый дизайн](https://wpcraft.ru/kb/design/marketing.md) объясняет ценность и помогает выбрать или купить. Сайт — один из контекстов, где эти цели сочетаются; отдельный подраздел для этого контекста не нужен. [ИИ-дизайн](https://wpcraft.ru/kb/design/ai.md) применим к обоим направлениям, а [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) описывает визуальное устройство интерфейса. Пятая тема — [инструменты дизайна](https://wpcraft.ru/kb/design/tools.md): плоский каталог профилей продуктов по типу результата. Реализация на WordPress описана в разделе [WordPress → Темы](https://wpcraft.ru/kb/stacks/wordpress/themes.md). Медиа-специфика шаблонов — ленты, страницы статьи и паттерны чтения — собрана в [дизайне и шаблонах медиа-сайтов](https://wpcraft.ru/kb/practices/media/practices/design-templates.md).

## Темы

| Тема | О чём |
| --- | --- |
| [UX-дизайн](https://wpcraft.ru/kb/design/ux.md) | Понимание пользователей и проектирование понятных сценариев; включает юзабилити, информационную архитектуру, проектирование взаимодействия и доступность. |
| [ИИ-дизайн](https://wpcraft.ru/kb/design/ai.md) | ИИ-инструменты для исследования, проектирования и прототипирования; форматы и практики работы с дизайн-контекстом AI-агентов. |
| [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) | Дизайн-система и токены, компоненты и состояния, адаптивность и документация. |
| [Маркетинговый дизайн](https://wpcraft.ru/kb/design/marketing.md) | Четыре формата материалов — продающий лендинг, доказательный лонгрид, рекламные материалы и презентации для продаж; доверие, иерархия и текст, аналитика и тестирование. |
| [Инструменты дизайна](https://wpcraft.ru/kb/design/tools.md) | Плоский каталог профилей продуктов: интерфейсы, быстрые маркетинговые макеты, профессиональная графика и презентации. |

### Подраздел UX-дизайна

- [Юзабилити](https://wpcraft.ru/kb/design/ux/usability.md) — качество удобства, пять составляющих, метрики и методы проверки.
- [Информационная архитектура](https://wpcraft.ru/kb/design/ux/information-architecture.md) — структура, названия и находимость; карточная сортировка и tree testing.
- [Проектирование взаимодействия](https://wpcraft.ru/kb/design/ux/interaction-design.md) — потоки, состояния, обратная связь и тайминги.
- [Доступность (a11y)](https://wpcraft.ru/kb/design/ux/accessibility.md) — WCAG 2.2, контраст, навигация с клавиатуры, инструменты и практики WordPress.

### Подраздел маркетингового дизайна

- [Продающий лендинг](https://wpcraft.ru/kb/design/marketing/landing.md) — структура посадочной страницы, оффер и fit, доказательства, коммерческая модель и CTA.
- [Доказательный лонгрид](https://wpcraft.ru/kb/design/marketing/longread.md) — SCQA и драматургия длинного материала для блога, коммерческой страницы и базы знаний.
- [Дизайн рекламных материалов](https://wpcraft.ru/kb/design/marketing/advertising-design.md) — бриф, форматы каналов, композиция, серии и адаптации, производство и проверка.
- [Дизайн презентаций для продаж](https://wpcraft.ru/kb/design/marketing/presentation-design.md) — сценарии, Big Idea, драматургия, слайд как единица смысла и следующий шаг.

### Инструменты дизайна

- [Каталог инструментов](https://wpcraft.ru/kb/design/tools.md) — 12 профилей в четырёх категориях: интерфейсы, быстрые маркетинговые макеты, профессиональная графика и презентации.

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

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

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

## Практический процесс

1. Определить аудиторию, задачи и критерии успеха.
2. Спроектировать структуру контента и сценарии.
3. Задать компоненты, типографику, цвет и сетку.
4. Продумать состояния интерфейса, адаптивность и доступность.
5. Передать решения в реализацию и проверить результат.

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

- [Beginner WordPress Designer (learn.wordpress.org)](https://learn.wordpress.org/course/beginner-wordpress-designer/)
- [Два направления веб-дизайна (исходный конспект)](https://wpcraft.ru/raw/2026/1009/2-practices-web-designs.md)