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

О чём раздел

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

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

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

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

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

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

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

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

Общие темы дизайна

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

Дизайн через ИИ

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

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

• 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.
• Паттерны в шаблонах — <!-- wp:pattern -->, DRY-принцип и практические примеры.
• Block Type Patterns — Привязка паттернов к конкретным блокам, Query Loop, Template Parts.
• Стартовые паттерны — Страничные и шаблонные стартовые точки для пользователей темы.
• Block Locking и паттерны — Курирование через запрет перемещения, удаления, content-only editing.
• Источники паттернов — WordPress.org Patterns, TypeUI, Flowbite.

Дизайн сервисов (UI/UX)

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

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

• Beginner WordPress Designer (learn.wordpress.org)