Разные типы веб-дизайна: marketing vs. UI/UX

Два типа веб-дизайна

1. Маркетинговые / промо / презентационные сайты (landing pages, корпоративные, промо-сайты)

Главная цель — продать или привести к целевому действию (CTA): заявка, покупка, подписка, звонок, скачивание.

Ключевые особенности:

• Структура строится вокруг воронки и storytelling (проблема → решение → доказательства → CTA).
• Сильный акцент на визуальную иерархию, эмоции, убеждение, социальное доказательство, urgency.
• Часто одностраничные или с небольшим количеством страниц, длинный скролл, секции с чёткими блоками.
• Дизайн более «маркетинговый»: крупные заголовки, яркие акценты, иллюстрации/фото, анимации, которые поддерживают историю, а не усложняют взаимодействие.
• Метрики успеха: конверсия, время до CTA, bounce rate, scroll depth.
• Технически проще в плане интерактивности (меньше состояний, форм, сложных компонентов).

2. Сайты-приложения / UI/UX (SaaS, дашборды, веб-приложения, сложные сервисы)

Главная цель — удобное и эффективное использование продукта на регулярной основе.

Ключевые особенности:

• Акцент на UI/UX: информационная архитектура, навигация, состояния (empty, loading, error, success), accessibility, responsive behaviour, микроинтеракции.
• Много экранов, сложных компонентов, таблиц, фильтров, форм с валидацией, ролей пользователей.
• Дизайн более «системный»: дизайн-системы, компоненты, консистентность, dense UI (особенно в B2B), тёмные/светлые темы.
• Пользователь уже «внутри» продукта — задача не продать, а помочь быстро и без ошибок выполнить работу.
• Метрики: task success rate, time-on-task, retention, NPS, количество ошибок.

Особенности

Сходства

• Оба работают с визуальной иерархией, типографикой, цветом, spacing, grid.
• Оба требуют понимания пользователя (но на разных уровнях: «кто купит» vs. «как будет пользоваться ежедневно»).
• Оба используют современные инструменты (Figma, дизайн-системы, прототипирование).
• Оба должны быть responsive и учитывать accessibility.
• В обоих случаях хороший дизайн = бизнес-результат (конверсия или удержание).

Отличия (ключевые)

Аспект	Маркетинговые сайты	App-like / продуктовые интерфейсы
Главная цель	Конверсия / продажа	Эффективность и удобство использования
Фокус	Убеждение, эмоции, storytelling	Usability, efficiency, consistency
Структура	Линейная / воронка	Разветвлённая, много состояний
Компоненты	Простые, «продающие» блоки	Сложные, переиспользуемые, data-heavy
Итерации	A/B-тесты креативов и CTA	Usability-тесты, аналитика поведения
Дизайн-система	Часто лёгкая или отсутствующая	Обязательна (особенно в масштабе)
Роль дизайнера	«Продавец + визуальщик»	«Продуктовый дизайнер / UX-инженер»

Как строится специализация дизайнеров

• Marketing / Conversion / Landing Page Designer — сильны в copywriting-поддержке, визуальном storytelling, психологии убеждения, быстрых итерациях. Часто ближе к арт-директорам или digital-маркетологам.
• Product / UI/UX / Interaction Designer — сильны в исследованиях, информационной архитектуре, дизайн-системах, сложных flow, accessibility. Работают ближе к продакт-менеджерам и разработчикам.
• На практике многие дизайнеры начинают с одного и постепенно уходят в другое, либо становятся generalist (особенно в небольших командах). В крупных компаниях специализация жёстче: отдельно marketing design team и product design team.
• Переход возможен, но требует смены мышления: от «как красиво продать» к «как сделать, чтобы пользователь не ошибся и быстро решил задачу».

Другие направления веб-дизайна

Эти два — самые массовые, но далеко не единственные:

1. Дизайн-системы и component libraries (как отдельная специализация) — создание и поддержка систем, которые потом используют и маркетинг, и продукт.
2. E-commerce / магазины — гибрид: сильный маркетинговый слой + сложный UI каталога, корзины, checkout, фильтров, рекомендаций.
3. Контентные / медиа-сайты (новости, блоги, журналы) — акцент на типографику, читаемость, навигацию по большому объёму контента, SEO-дружественность.
4. Портфолио / креативные / experimental — демонстрация визуальных навыков, смелые решения, анимации, нестандартные взаимодействия.
5. Админки / внутренние инструменты / enterprise — максимальная плотность, эффективность, минимум «красоты ради красоты».
6. Мобильные веб-приложения / PWA — особый фокус на жестах, offline, performance.
7. Accessibility-focused / inclusive design — отдельное глубокое направление.
8. Motion / interaction design — анимации, микроинтеракции, которые могут работать и в лендингах, и в продуктах.

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