Материалы для дизайна каталога: бриф, данные, снимок витрины, образец
Временный публичный репозиторий: инструменту дизайна нужны файлы по ссылке. Удаляется после работы. Изменение подготовлено автоматизированно
This commit is contained in:
110
DESIGN-BRIEF.md
Normal file
110
DESIGN-BRIEF.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# Каталог НМТ для оптовых партнёров — бриф на дизайн
|
||||
|
||||
Документ для 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. Ни одного элемента, который требует данных из раздела «нет и не будет».
|
||||
1282
catalog-nmt-snapshot.html
Normal file
1282
catalog-nmt-snapshot.html
Normal file
File diff suppressed because one or more lines are too long
14530
catalog.json
Normal file
14530
catalog.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
now-grid.png
Normal file
BIN
now-grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
ref-catalog-mid.png
Normal file
BIN
ref-catalog-mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 990 KiB |
BIN
ref-catalog-mobile.png
Normal file
BIN
ref-catalog-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
BIN
ref-catalog-top.png
Normal file
BIN
ref-catalog-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 633 KiB |
Reference in New Issue
Block a user