Files
nmt-catalog-design-aaa33f89/DESIGN-BRIEF.md
NMT Control afd082ad04 Материалы для дизайна каталога: бриф, данные, снимок витрины, образец
Временный публичный репозиторий: инструменту дизайна нужны файлы по ссылке.
Удаляется после работы.

Изменение подготовлено автоматизированно
2026-09-01 11:32:13 +00:00

8.7 KiB
Raw Permalink Blame History

Каталог НМТ для оптовых партнёров — бриф на дизайн

Документ для Claude Design. Дата: 01.09.2026.

Вложения:

Файл Что это
catalog-nmt-snapshot.html вся действующая витрина одним файлом: откройте и посмотрите целиком, работает без сети
ref-catalog-top.png, ref-catalog-mid.png, ref-catalog-mobile.png образец, на который равняемся — прежняя версия каталога
now-grid.png как витрина выглядит сейчас
catalog.json данные каталога: поля, которыми можно оперировать

1. Задача

Сделать дизайн закрытого каталога мебельного завода для оптовых закупщиков. Образец — во вложении ref-catalog-*.png: светлая, спокойная сетка-галерея, шапка с названием завода и поиском, строка разделов со счётчиками, крупные плитки изделий на белом. Хочется этой сдержанности и воздуха.

Важно: образец берётся только как визуальный ориентир. Его содержимое (фотографии и названия) принадлежит торговому партнёру и в новом каталоге не используется — данные берутся из catalog.json.

2. Кто читатель

Категорийный менеджер или закупщик торговой сети либо маркетплейса. Он решает, брать ли производителя в матрицу, и смотрит на объём выпуска, широту исполнений, ткани, габариты, заводской код. Розничные приёмы — «уют в вашем доме», отзывы, рассрочка, счётчик «осталось 3 штуки» — здесь работают против нас: они превращают завод в перепродавца.

3. Данные, которыми можно оперировать

Есть Значение
Моделей 127
Исполнений (артикулов) 502
Разделов диваны 42, матрасы 29, кровати 21, пуфы и банкетки 11, стулья 6, кресла 5, обувницы 5, столы 4, табуреты 2, вешалки 2
По модели тип, название, заводской код, габариты, список тканей, число исполнений, артикулы исполнений, обложка, галерея
Габариты у 66 моделей из 127
Агрегат выпуска по типам кровати 20 004 шт, диваны 17 394, пуфы 16 178, обувницы 2 351, кресла 1 536, стулья 1 175, табуреты 552, матрасы 278
Нет и не будет Следствие для дизайна
Цены прайс уходит письмом после заявки; поля цены не существует
Описания изделий кроме названия и характеристик выше, текста нет
Выручка по модели коммерческая тайна, в данные витрины не попадает
Документы соответствия на кровати, обувницы, матрасы заявлять их нельзя

4. Главная сложность: снимки разного происхождения

Это то, ради чего нужен дизайнер, а не вёрстка по образцу.

  • 28 моделей — нормальные предметные кадры: наш кабинет маркетплейса и студийные снимки с сайта партнёра. Изделие на белом, без надписей.
  • 58 моделей — кадры, взятые с карточек партнёра на площадке. Это рекламные коллажи: заголовок во весь кадр («Кровать ЛАЙН 160X200»), выноски, чужой логотип в углу, интерьерная сцена. Сейчас каждая такая карточка помечена шильдой «кадр площадки».
  • 41 модель — снимков нет вовсе. Сейчас они показаны ведомостью: название, заводской код, размер, число исполнений, ткани.

В спокойной светлой сетке образца коллаж с чужими надписями будет кричать. Нужно решение, которое честно живёт со всеми тремя состояниями сразу и не выглядит браком: возможно, разные модули плитки, возможно — разделение потоков, возможно — приглушение и кадрирование. Это ключевой вопрос макета.

Два запрета: не выдавать коллажи за нашу съёмку (пометка в каком-то виде обязана остаться) и не рисовать стену заглушек «фото готовится» на 41 позицию — сплошные заглушки читаются как пустой каталог, хотя изделия выпускаются серийно и заказываются по коду.

5. Что должно работать

  1. Фильтры по типу изделия и по ткани, счётчики у разделов — как в образце.
  2. Поиск по названию, заводскому коду, артикулу и ткани.
  3. Карточка модели: снимки, габариты, таблица исполнений (артикул + ткань).
  4. Подборка изделий → заявка на прайс письмом со списком артикулов. Регистрации, корзины и оплаты нет и не будет.
  5. Раздел ассортимента без снимков — как самостоятельный способ выбирать по коду и характеристикам, а не как «остальное, что не влезло».

6. Технические рамки

  • Статическая страница: HTML + CSS + один JS-файл без библиотек, данные из одного catalog.json, шрифты локальные, бэкенда нет.
  • Заявка уходит через mailto.
  • Доступ закрыт паролем на уровне сервера — экраны входа рисовать не нужно.
  • Снимков в витрине 99 МБ, поэтому ленивая загрузка и умеренные размеры плиток — часть дизайна, а не оптимизация «потом».

7. Артборды

  1. Десктоп 1440 — первый экран и сетка каталога с фильтрами.
  2. Десктоп 1440 — сетка со смешанными состояниями: предметный кадр, коллаж с пометкой, модель без снимка.
  3. Десктоп 1440 — карточка модели с таблицей исполнений.
  4. Десктоп 1440 — ассортимент без снимков (ведомость) и блок заявки.
  5. Мобильный 390 — каталог, карточка, заявка.
  6. Состояния: пустой поиск, пустая подборка.

8. Критерии приёмки

  1. За пять секунд видно, что это производство, а не магазин.
  2. Модель находится по заводскому коду не более чем за два действия.
  3. Коллажи не выдаются за нашу съёмку и при этом не портят полосу.
  4. 41 позиция без снимков не читается как пустота.
  5. Всё работает на ширине 390 px, включая таблицу исполнений.
  6. Ни одного элемента, который требует данных из раздела «нет и не будет».