# Research · UI/UX Pro Max output для alto.codes

**Задача:** первый экран мобильной (390×844) страницы услуги «Разработка интернет-магазина». B2B-аудитория, сигналы: дизайн / тех-сопровождение / вёрстка.

## Landing patterns (релевантные)

1. **Minimal Single Column** — hero headline → описание → 3 бенефита → CTA. Большая типографика, единая колонка, mobile-first. Контраст 7:1 на кнопках. Один CTA в фокусе.
2. **Social Proof-Focused** — testimonials, logo grid, case studies, ratings, counter animations. Подходит для B2B SaaS и premium services.
3. **Scroll-Triggered Storytelling** — главы (проблема → путь → решение → CTA). Time-on-page ×3. Для мобайла — упрощать.

## Styles (релевантные)

1. **Minimalism & Swiss Style** — clean, monochrome, grid, sans-serif. Subtle hover 200–250ms. WCAG AAA, perf Excellent. Совпадает с alto.
2. **Exaggerated Minimalism** — oversized typography (clamp 3rem–12rem), massive whitespace, black/white + single accent. WCAG AA. *Адаптация для alto: размер сохраняем, weight оставляем 400, не 900.*
3. **Social Proof style** — counter-up animations, logo grid grayscale, testimonial cards с avatar, метрики 3rem font-size, blockquote styling.

## UX-правила (CRITICAL / HIGH)

- **Touch Target Size — min 44×44px** (HIGH). Наши CTA: padding 14×24 + 15px text ≈ 46px ✓
- **Touch Spacing — min 8px gap** между интерактивными элементами (MEDIUM)
- **Mobile First** — стартовать с mobile, не max-width queries
- **Reduced Motion — обязательно `@media (prefers-reduced-motion: reduce)`** (HIGH) — добавить в shared.css и в каждый прототип
- **Excessive Motion** — max 1–2 key animations per view (HIGH)
- **Easing Functions** — `ease-out` для появления, `ease-in` для исчезания (Low)
- **Continuous Animation** — только loaders, не декор

## Выбранные 5 концепций

| # | Имя | Базовый паттерн | Style | Главная фишка |
|---|---|---|---|---|
| c1 | Single Column | Minimal Single Column | Swiss Minimalism | hero → 3 бенефита → 1 CTA. WCAG AAA. |
| c2 | Oversized Type | Minimal Single Column | Exaggerated Minimalism | H1 clamp(40px, 11vw, 64px). Massive whitespace. |
| c3 | Social Proof | Social Proof-Focused | Swiss Minimalism | Logo grid + counter-up + 1 testimonial. |
| c4 | Story Chapters | Scroll-Triggered Storytelling | Swiss Minimalism | Проблема → решение → CTA. Прогресс-индикатор. |
| c5 | Interactive Reveal | Immersive (lightweight) | Swiss Minimalism | Заголовок + тап «раскрыть» → детали. Skip option. |

## Обязательные ограничения alto

- Шрифт «Font», только weight 400 (Regular).
- Без курсива и italic.
- Палитра: `#12131A`, `#8A8C99`, `#E8E9ED`, `#fff`, `#F7F8FA`, `#0173FF`.
- Hairline 1px, не плашки.
- Синий только в primary CTA.
- Фирменные `.btn`, breadcrumb 1:1 с прода.