UI/UX Redesign Audit

1. Что сейчас плохо

Перегруженность: первый экран похож на engineering debug-dashboard.
Horizontal scroll из-за min-width: 1180px и жёстких grid-колонок.
Слабая адаптивность: mobile не в одну колонку, мелкие tap targets.
Debug-dashboard вместо product demo: много панелей сразу.
Мелкий текст (11–13px) и плотная типографика.
Непонятный первый экран: не ясно, что это за система и как запустить демо.

2. Цель редизайна

Сделать чистый, адаптивный product demo для защиты хакатона: за 10 секунд понятно, что это, как запустить и какой результат показать. Инженерные панели сохранить, но спрятать ниже.

3. Новая информационная архитектура

Hero — смысл, CTA, цепочка Detection → Classification → Command → Routing
Product Demo — сцена + карточка результата + управление
Storyline Stepper — текущий этап цикла
Scenario Cards — jury-сценарии карточками
Criteria Cards — покрытие критериев OZON
Engineering Details — сворачиваемые техпанели

4. Компоненты: создать / изменить

Компонент	Действие
HeroSection	создать / доработать
ProductDemoSection	создать / доработать
StorylineStepper	создать / доработать
ScenarioCards	создать / доработать
CriteriaCards	создать / доработать
EngineeringDetails	создать / доработать
Header	упростить до product-nav
App	собрать product page
SorterScene	добавить `variant: full \| simple`
styles.css	responsive redesign

5. В Engineering Details

StateMachinePanel, TimelinePanel, PidPanel, EventLog, MetricsPanel, SensorPanel, ScenarioPanel, OzonCriteriaPanel, SorterScene variant="full".

6. Риски

Не сломать domain logic / tests.
Не потерять инженерные функции для жюри.
Не затронуть nginx / соседние проекты.
Сохранить обработчики start / step / reset / scenario select.

7. Definition of Done

Нет horizontal scroll на 1920 / 1440 / 390.
Hero понятен, CTA видны.
Demo ведёт по цепочке Detection → Routing.
Engineering Details свёрнуты по умолчанию.
npm run build и npm run test проходят.
Docker owl отдаёт страницу на :3100 и доменах.

3.0 KiB Raw Blame History Unescape Escape