Дизайн цифровых продуктов

О чём раздел

Дизайн в базе знаний рассматривается как универсальный контракт между продуктом, дизайном и разработкой. Этот подход одинаково применим для WordPress, JAM Stack, TALL/Laravel и других стеков.

Всё в разделе — про веб-дизайн, но с разных точек входа: как процесс (ИИ), как продажа (маркетинговый), как удобство продукта (продуктовый UI/UX) и как техническая сборка сайта.

Четыре точки входа

Подраздел	О чём
ИИ дизайн	Ассистенты в дизайн-процессе: DESIGN.md как контракт, Impeccable как инструмент качества.
Маркетинговый дизайн	Продажи и подача: воронка, storytelling, визуальная выразительность, конверсионные блоки.
Продуктовый дизайн UI/UX	Удобство и эффективность: интерфейсы сервисов, состояния, композиция макетов и отступы.
Дизайн веб сайтов	Как собрать сайт: дизайн-система, доступность, практики и паттерны WordPress.

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

Практическая работа веб-дизайнеров делится на два направления с разными проектами, задачами и критериями успеха: «продать и презентовать» vs. «помочь пользоваться». Это различие акцентов, а не запрет на пересечение: маркетинговому сайту тоже нужны удобство и понятность, а продуктовому интерфейсу — качественный визуал.

1. Маркетинговый дизайн

Фокус — продажи, подача и визуальная выразительность.

Главная цель — объяснить ценность, заинтересовать, создать нужное впечатление и вызвать доверие, чтобы продать или привести к целевому действию (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, количество ошибок.

Точка сборки в базе знаний — подраздел Продуктовый дизайн UI/UX.

Сходства

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

Специализация дизайнеров

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

Дополнительные оси классификации

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

Тип проекта / предметная область: e-commerce, медиа, образование, финансы, SaaS и внутренние сервисы.
Платформа и особенности использования: desktop, mobile web, PWA, touch, offline.
Сквозная специализация: дизайн-системы и component libraries, accessibility / inclusive design, motion / interaction design.
Визуальный подход: минималистичный, выразительный, экспериментальный.

Что прорабатываем в дизайне

Информационную архитектуру - структура контента и иерархия страниц/экранов.
Систему компонентов - переиспользуемые блоки: кнопки, формы, карточки, хедеры, фиды.
Типографику, цвет и сетку - единый визуальный язык для всех платформ.
Состояния элементов - hover, active, error, empty, loading, disabled.
Адаптивное поведение - правила работы интерфейса на разных устройствах.
Дизайн-токены - переменные стилей, которые синхронизируются с кодом.

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

Зафиксировать цели и пользовательские сценарии.
Собрать карту страниц/экранов и связи между ними.
Сделать wireframes до перехода к визуалу.
Сформировать дизайн-систему: токены, компоненты, паттерны.
Спроектировать экраны на базе системы.
Проверить сценарии на mobile/tablet/desktop.
Подготовить спецификацию для разработки: размеры, отступы, цвета, токены, взаимодействия.

Платформенные акценты

WordPress: theme.json, Template Parts, Site Editor и block-подход.
JAM Stack: компонентные библиотеки (React/Vue/Svelte), SSG/SSR-паттерны.
Сервисные интерфейсы: role-based UI, кабинеты и операционные сценарии.

Страницы раздела

ИИ дизайн

DESIGN.md: универсальный контракт дизайна — Единая страница по Design as Code и AI-контракту: tokens, pipeline и адаптация под WordPress, JAM Stack и другие стеки.
Impeccable: AI-дизайн для WordPress — Open-source навык для AI-ассистентов: 23 команды и детектор антипаттернов.

Маркетинговый дизайн

Обзор направления: Маркетинговый дизайн — воронка, storytelling, конверсионные блоки.

Продуктовый дизайн UI/UX

Обзор направления: Продуктовый дизайн UI/UX — удобство и эффективность интерфейсов сервисов.

Композиция макетов — Group, Row/Stack, Columns для интерфейсов сервисов.
Отступы и размеры — Padding, margin и block spacing как основа ритма UI.

Дизайн веб сайтов

Обзор подраздела: Дизайн веб сайтов — как собрать сайт из блоков, паттернов и токенов.

Дизайн-системы в WordPress — Atomic Design, компонентный подход, от Figma до theme.json.
Доступность (a11y) — Руководство по созданию инклюзивных сайтов и инструменты тестирования.

Практики веб-дизайна

Практики веб-дизайна: обзор — Технические практики сборки сайтов на WordPress.
WordPress для дизайнеров — Обзор возможностей WordPress как дизайн-платформы.
Style Book: гид по дизайну — Ключевой инструмент визуального проектирования без контента.
Иерархия блочной темы — Как устроена блочная тема: от блоков до шаблонов.
Block-first мышление — Философия модульного дизайна через переиспользуемые компоненты.
Настройки темы — Цвета, шрифты, типографика и макет в Global Styles.
theme.json — основа дизайн-системы WordPress и WooCommerce — Единый источник дизайн-токенов и визуальных ограничений.
Figma → WordPress: мост через Design Tokens — Пайплайн синхронизации Tokens Studio → theme.json.
Tailwind CSS v4 + daisyUI в блочной теме WordPress — Интеграция utility-first и компонентного слоя.
Site Editor для прототипирования — Проектирование прямо в контуре сайта.
Медиа-блоки — Gallery, Media & Text, Cover.
Карусели и слайдеры — Слайдеры с учётом доступности и производительности.

Паттерны вебсайтов (Block Patterns)

Паттерны: обзор — Что такое блочные паттерны, типы и каталог подстраниц.
Регистрация паттернов — /patterns-директория, PHP-регистрация, file headers, категории.
PHP в паттернах — Интернационализация, динамические URL изображений и ограничения init.
Паттерны в шаблонах — , DRY-принцип и практические примеры.
Block Type Patterns — Привязка паттернов к конкретным блокам, Query Loop, Template Parts.
Стартовые паттерны — Страничные и шаблонные стартовые точки для пользователей темы.
Block Locking и паттерны — Курирование через запрет перемещения, удаления, content-only editing.
Источники паттернов — WordPress.org Patterns, TypeUI, Flowbite.