# РАМКА — пространство согласования макетов

Учебный концепт подготовлен с помощью Codex по заданию владельца портфолио. Комплект включает готовые макеты, обоснование и презентацию. Реальный заказчик, интервью и коммерческий эффект не заявляются.

## Готовый комплект для показа

- `portfolio/RAMKA-Portfolio.pdf` — 12-страничная презентация кейса.
- `portfolio/index.html` — веб-презентация с содержанием.
- `design/RAMKA-Review.sketch` — 12 редактируемых экранных состояний.
- Рабочий прототип, CJM, user flow, источники и QA.

Учебный кейс можно включать в портфолио с указанием формата и помощи AI. Утверждения о личной работе и опыте в инструментах должны соответствовать фактам.

## Задача и модель

Гипотеза: дизайнеру нужно понимать, к какой версии и месту относится замечание. Путаница между файлами и свободными сообщениями затрудняет согласование. Это предположение по разбору сценария, не результат интервью.

Рабочая модель: **макет → версия → точка → замечание → решение → согласование**. Комментарий хранит assetId, versionId и нормализованные x/y. Смена масштаба не меняет смысл точки. Замечания старых версий остаются видимыми после переключения версии.

## Что работает

1. Загрузка PNG, JPG и WebP: до 8 МБ и 24 Мп, не более 30 макетов и 12 версий у макета. Проверяется MIME, фактическое декодирование и размер.
2. Изображения, версии, комментарии и журнал действий сохраняются в IndexedDB. Индикатор отражает фактический результат записи.
3. Клик по изображению или Enter на макете создаёт точку; стрелки перемещают её с шагом 2%. Есть кнопка «Точка в центре».
4. Открытые / решённые / все замечания. Решение обратимо. Возврат замечания в работу снимает согласование.
5. Сравнение рядом сохраняет пропорции. Шторка работает только при одинаковой ширине и высоте. Ею можно управлять range с клавиатуры и кнопками 0/50/100%.
6. Согласование блокируется, пока существуют открытые замечания в любой версии макета. Новая версия и новое замечание снимают статус согласования.
7. Экспорт PNG действительно рисует маркеры и текстовую легенду на canvas. Большие изображения уменьшаются до 1600 px по ширине; чрезмерно длинный отчёт предлагается сохранять JSON.
8. JSON содержит изображения, версии и комментарии. Восстановление проверяет структуру и декодирует каждое изображение, затем показывает состав и просит подтвердить замену. Можно сначала скачать текущее пространство.

Никакие сообщения, файлы или согласования не отправляются другим людям. Сохранение локальное, без облачного аккаунта. Очистка браузера удаляет локальные данные — для переноса есть полный backup.

## Почему интерфейс такой

- **Master–detail:** слева список, в центре объект, справа обсуждение. Не требуется удерживать контекст в памяти. Mobile последовательно показывает те же области.
- **Progressive disclosure:** сложный инструмент сравнения появляется только при второй версии. Недоступная шторка объясняется разными размерами.
- **Внешняя память:** номер маркера связывает область и замечание. Resolve хранит историю вместо удаления.
- **Предотвращение ошибки:** guard не позволяет назвать макет согласованным при открытых вопросах. Импорт не заменяет данные молча.
- **Обратимость:** resolve/reopen, возврат в работу, резервная копия перед восстановлением.
- **Композиция:** нейтральное рабочее поле не конкурирует с изображением. Палитра: графит #222332, фиолетовый акцент #6750E8, светлое поле #F7F7FB. Белый текст на основной кнопке; выбранный контекст отмечен светлой фиолетовой подложкой. Статусы различаются текстом и семантическим цветом. Сетка 8 px, компактные текстовые уровни и контрастный фокус. F/Z и золотое сечение не объявляются универсальными правилами и не имитируют eye-tracking.

## Как показать рекрутеру за 2 минуты

Открой собственный макет → добавь вторую версию → покажи различие → оставь точное замечание → реши его → согласуй → скачай backup и восстанови. Объясни, почему комментарий принадлежит версии, почему шторка имеет ограничение и почему локальный статус не считается согласованием заказчика.

Описание проекта: «Учебный UX/UI-концепт сервиса согласования макетов. Сценарий связывает версию, область изображения, замечание и состояние согласования. В комплекте — desktop/mobile, диаграммы и работающий локальный прототип. Подготовлен с помощью Codex».

## Материалы

- `index.html`, `ramka.css`, `ramka.js` — работающий исходный код.
- `design/RAMKA-Review.sketch` — редактируемые экранные слои для импорта в Figma.
- `design/design-scenes.json` и `design/svg/` — исходная геометрия и SVG.
- `evidence/ramka-cjm.svg`, `evidence/ramka-user-flow.svg` — редактируемые карты.
- `evidence/qa-report.json` — результат технического прогона.
- `evidence/import-verification.json` — валидация Sketch по официальной JSON-схеме и ZIP CRC.
- `evidence/research-protocol.md` — как провести исследование.

Импорт .sketch в Figma не выполнялся. Установите Manrope из комплекта. Экранная геометрия фиксированная; Auto Layout после импорта не гарантируется. В .sketch интерфейс остаётся редактируемым, иллюстрация афиши может быть растровой; её отдельный SVG лежит в assets.

## Возможные следующие версии

1. Провести 5 сессий с людьми, знакомыми с согласованием дизайна; согласовать запись.
2. Проверить выбор версии, понятность локального хранения и согласования.
3. Изменить дизайн по результатам пользовательской проверки; сохранить до/после.
4. Только затем обсуждать роли и серверное хранение. В реальном сервисе потребуются права доступа, конфликтующие изменения, лимиты, история и коммуникации.

Методические источники и границы утверждений: `evidence/journey-models.json`. Frame.io служит источником требований к сравнению, а не доказательством ценности этого прототипа.