design-canvas

Design canvas

Один HTML, в котором лежит N карточек-артбордов в сетке, каждый — независимый дизайн. Пользователь может:

• зумить и панорамировать всю сетку колесом / трекпадом
• открыть любой артборд во весь экран по клику
• листать артборды стрелками в фокус-режиме

Лучше, чем плодить option-1.html, option-2.html, option-3.html.

Каркас

templates/canvas-template.html содержит готовый шаблон с:

• зум-сценой через transform: scale()
• секциями (<dc-section title="...">)
• артбордами (<dc-artboard label="..." width="..." height="...">)
• фокус-оверлеем

Использование

<dc-canvas>
  <dc-section title="Header variations">
    <dc-artboard label="A — minimal"     width="1200" height="600">
      <iframe src="header-a.html"></iframe>
    </dc-artboard>
    <dc-artboard label="B — with hero"   width="1200" height="600">
      <iframe src="header-b.html"></iframe>
    </dc-artboard>
    <dc-artboard label="C — full bleed"  width="1200" height="600">
      <iframe src="header-c.html"></iframe>
    </dc-artboard>
  </dc-section>
</dc-canvas>

Содержимое артборда — либо inline-разметка, либо iframe со ссылкой на отдельный HTML-вариант.

Правила

• Артборды — это статичные кадры, не скролл-зоны. Не используй height: 100%; overflow: auto внутри. Размер артборда задаётся атрибутами width/height, и контент должен в них помещаться.
• Между секциями делай минимум 80px вертикального расстояния, чтобы при зум-ауте читалось как разные группы.
• Лейбл артборда (label="...") должен описывать отличие от соседей, не содержание. «A — без иконок» лучше, чем «Header v1».
• Не больше 6 артбордов в одной секции — глаза устают.

Что хорошо вынести в варианты

• Ось визуала: минимализм vs богатая графика
• Ось плотности: компактно vs воздушно
• Ось копирайта: лаконично vs развёрнуто
• Ось взаимодействия: статика vs анимация
• Ось интерфейсной парадигмы: классика vs нестандартный layout

Лучше дать 4 артборда, явно различающихся по одной оси, чем 8 случайных вариаций.