# УПП / Образовательный маршрут

Полноценный учебный продуктовый кейс: анализ исходных работ → задача → информационная архитектура → UI-система → рабочий сценарий → проверка → передача исходников.

Первая версия создана Codex по запросу владельца портфолио. Это самостоятельный учебный концепт, не официальный сайт УПП. Программы и параметры вымышлены для проверки сценария; заявки и оплата не принимаются.

## Открыть

- [Прототип](https://design-portfolio-lab.ehot2004.chatgpt.site/upp/#home)
- [Визуальный разбор кейса](https://design-portfolio-lab.ehot2004.chatgpt.site/upp/#case)
- [Дизайн-система](https://design-portfolio-lab.ehot2004.chatgpt.site/upp/#system)
- [Файл для Figma](design/UPP-Education-Route.sketch)
- [Builder Figma](design/figma-builder.zip)
- [PDF кейса](evidence/UPP-Case-Study.pdf)

Хостинг сейчас приватный. Перед отправкой рекрутеру нужно настроить доступ или передать скачанный PDF/исходники.

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

1. Главная с двумя входами: опциональный подбор и прямой каталог.
2. Трёхшаговый подбор: цель, время, формат. Ответы сохраняются при возврате.
3. Каталог: поиск, фильтры, сортировка, избранное, видимые активные условия, пустой результат со сбросом.
4. Сравнение двух программ и режим «только различия».
5. Программа: результаты, нагрузка, уровень, раскрываемые модули.
6. Форма плана, локальный черновик, ошибки у полей и сводка со ссылками.
7. Проверка перед сохранением, предупреждение о замене старого плана.
8. Сохранённый план: реальный JSON и ICS, редактирование, подтверждение удаления.
9. Полные мобильные состояния, клавиатурный фокус, смысловые статусы и reduced motion.
10. Слой дизайна: сетка, 1,618:1, Z-композиция и схема сканирования на реальных экранах.

## Применённые паттерны

### Визуальная иерархия

Где: Главная, карточки, карточка программы.

Размер, насыщенность и отступы создают три уровня: задача → параметры → действие. В карточках порядок параметров одинаков.

Компромисс: Сильный заголовок не должен вытеснять условия выбора.

Источник: https://www.nngroup.com/articles/visual-hierarchy-ux-definition/

### F-паттерн и layer-cake

Где: Каталог, блоки подробностей и разбор кейса.

Ключевые слова начинаются у общего левого края. Короткие заголовки позволяют сканировать разделы и читать нужный блок.

Компромисс: F-паттерн — наблюдение о чтении, а не инструкция рисовать букву F. Фактический взгляд в этом проекте не измерялся.

Источник: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

### Z-композиция

Где: Первый экран на широком экране.

Слева сверху обещание, справа сверху маркер маршрута; ниже — пояснение и завершающее действие справа. Это композиционная эвристика для короткого экрана.

Компромисс: Не гарантирует движение глаз. На мобильном заменена естественным вертикальным порядком.

Источник: авторское композиционное решение. Эмпирического подтверждения для этого проекта пока нет.

### Золотое сечение

Где: Две колонки первого экрана.

Доступная ширина после межколонника распределена 1,618:1. Большая доля — сообщение, меньшая — визуальный маршрут и действие.

Компромисс: Это выбранная пропорция, а не доказательство удобства или роста конверсии. На мобильном — одна колонка.

Источник: авторское композиционное решение. Эмпирического подтверждения для этого проекта пока нет.

### Пошаговый подбор

Где: Три шага опроса.

Цель, время и формат спрашиваются отдельно. Есть прогресс, возврат с сохранением ответа и выход сразу в каталог.

Компромисс: Это staged disclosure. Три шага могут быть медленнее прямых фильтров — поэтому каталог доступен без опроса.

Источник: https://www.nngroup.com/articles/progressive-disclosure/

### Последовательное раскрытие деталей

Где: Программа и модули.

Ключевые условия видны сразу. Содержание модулей раскрывается по запросу в аккордеоне.

Компромисс: Нагрузку и формат не прячем: они нужны для решения до открытия деталей.

Источник: https://www.nngroup.com/articles/progressive-disclosure/

### Узнавание вместо запоминания

Где: Сравнение и выбранные фильтры.

Два варианта стоят рядом в одинаковой структуре. Активные условия видны, каждое можно убрать.

Компромисс: Лимит двух вариантов делает мобильное сравнение компактным; гипотеза о достаточности ещё не проверена.

Источник: https://www.nngroup.com/articles/recognition-and-recall/

### Предотвращение и исправление ошибок

Где: Форма плана и шаг проверки.

Есть ограничения даты, сводка ошибок со ссылками, сообщения у полей и отдельная проверка перед сохранением.

Компромисс: Дополнительный шаг оправдан возможностью поправить расписание; пользу нужно подтвердить тестом.

Источник: https://design-system.service.gov.uk/components/error-summary/

### Видимость состояния и обратимость

Где: Фильтры, избранное, сравнение, сохранение.

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

Компромисс: Сохранение только локальное. Об этом сказано до и после действия.

Источник: https://www.nngroup.com/articles/ten-usability-heuristics/

### Близость и общая область

Где: Карточки, фильтры и блок плана.

Связанные параметры объединены фоном и короткими расстояниями. Между задачами больше воздуха, чем внутри задачи.

Компромисс: Не создаём вложенные рамки для каждого фрагмента: они увеличили бы шум.

Источник: https://www.nngroup.com/articles/gestalt-proximity/

### Доступные действия и сообщения

Где: Все состояния.

Основные действия от 44 px, видимый фокус, смысловые подписи, статусы для скринридера, движение отключается при prefers-reduced-motion.

Компромисс: Технические проверки не заменяют аудит WCAG и работу со скринридером.

Источник: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

## Корпоративные цвета и шрифт

Базовая палитра сверена с CSS официальной главной УПП и исходным Figma-макетом: #003466, #F57921, #015382, #CFE5F2, #E7F2F8. В презентации ребрендинга есть альтернативные цвета; они не смешаны в одну систему. Это веб-концепт на основе предоставленной айдентики, а не утверждённый брендбук. Паспорт: evidence/brand-provenance.json. Manrope — выбранный интерфейсный шрифт под SIL OFL, не заявление о корпоративном стандарте.

## Figma без MCP

Файл .sketch — ZIP-документ открытого формата Sketch с редактируемыми текстами, группами, фигурами и символами. Figma поддерживает его импорт через Create → Import → From your computer. Само расширение .fig не подделывается. После импорта можно сохранить локальную копию .fig средствами Figma. Общие стили Sketch при импорте не сохраняются; Auto Layout из геометрического экспорта не возникает автоматически.

Поэтому приложен локальный development plugin «УПП / Route Builder»: выбирает design-scenes.json, создаёт native-фреймы, компоненты кнопок/полей/карточки и переменные. Auto Layout используется в библиотечных компонентах; экранные группы сохраняют точную геометрию. Инструкция в архиве. Плагин не использует сеть и не зависит от MCP. Проверка схемы и синтаксиса не означает успешный запуск в Figma; актуальный статус — evidence/import-verification.json.

## Как запустить код

Распаковать upp-source.zip, запустить `python3 -m http.server 8791 --directory dist`, открыть http://localhost:8791/upp/#home. Сборка и npm-зависимости приложению не нужны.

Файлы: upp.js — состояние и сценарии; data.js — учебный каталог и объяснения; upp.css — токены и адаптивная система; index.html — оболочка. design/ — передаваемые материалы; evidence/ — исследования и проверки. Генераторы и QA находятся в scripts/.

## Проверки

Фактический браузерный отчёт — evidence/qa-report.json. Там перечислены проверенные состояния, размеры и ограничения. Контрасты рассчитаны для конкретных пар, не для декларации всего WCAG. Календарь имеет стабильный UID для одного плана, CRLF, UTF-8 folding, еженедельный RRULE; время floating/local. Импорт в конкретный календарь отдельно не проверен.

## Исследование и личный вклад

Анализ исходников проведён. Пользовательских сессий пока 0. Рабочая Job story — гипотеза, не цитата интервью. Нельзя заявлять улучшение конверсии, сокращение времени или эффективность золотого сечения без проверки. Используй evidence/research-protocol.md, запиши наблюдение, сделай собственную правку и сохрани до/после. Твой исходный опыт УПП и новая AI-assisted работа описываются с разными ролями.

## Ограничения

Данные сохраняются только в localStorage этого устройства и сайта. Нет backend, синхронизации, оплаты, CRM, реальных заявок и реестра студентов. JSON скачивается для чтения, обратный импорт JSON не реализован. Профессиональное производство потребовало бы реальных данных, исследований, CMS/CRM, аналитики с согласием, аудита доступности и проверки всех интеграций.

## Сценарий рассказа

Задача → наблюдение в архиве → гипотеза → выбранный паттерн и компромисс → демонстрация рабочего результата → личная итерация → что ещё неизвестно. Не перечисляй F/Z и золотое сечение как заклинания: покажи конкретный экран, объясни его цель и границы доказательств.


## Итерация 2 · 12 октября 2026

Добавлены CJM, детальный UJM/user flow и service blueprint на `#journey`. Это рабочие модели, не полевые результаты. Новые механики: проверяемый импорт JSON с подтверждением замены, отметки по неделям и личная рефлексия. Эти данные включаются в JSON. Календарь теперь явно называется личным еженедельным учебным блоком, распределяющим недельную нагрузку в один блок.

Исправлены проверка существования календарной даты и восстановление повреждённого localStorage: частично прочитанное состояние больше не присваивается приложению. Исходный QA и дополнительные сценарии фиксируются отдельно в `evidence/qa-report.json` и `evidence/qa-v2.json`.

Предыдущие слова о JSON «только для чтения» относятся к первой итерации. В текущей версии восстановление реализовано.