METHOD / FROM IDEA TO INTERFACE
Сначала смысл.
Потом состояние и движение.
Красивый экран становится интерфейсом, когда можно уверенно пройти весь сценарий — включая неудачный ввод и смену решения.
От задачи
до проверяемой детали.
В этих проектах я исследую связь визуального языка с поведением интерфейса. Решения можно увидеть в демо, а их границы — на страницах работ.
Посмотреть примеры- 01
Сценарий
Начинаю с действия: что человек хочет сделать и как поймёт, что получилось. Продумываю выбор, ошибку и возврат.
- 02
Модель
Контент, чистые расчёты и визуальные компоненты разделены. Изменение цены, времени или профиля не должно требовать правки всей страницы.
- 03
Взаимодействие
Клавиатура, видимый фокус, состояния контролов и reduced motion входят в сценарий. Мобильная версия меняет компоновку, сохраняя управление.
- 04
Проверка
Модульные тесты проверяют предметную логику, браузерные — путь пользователя. Отдельно контролируются размер ресурсов и доступность.
Что остаётся за экраном
- Архитектура
- Next.js со статическими страницами. Клиентский React подключается там, где нужен интерактивный выбор или управление видео.
- Проверки
- В CI используются Chromium, мобильная эмуляция Chromium, Firefox и Linux WebKit. Axe помогает находить автоматизируемые ошибки доступности.
- Скорость
- Размер JavaScript, HTML и растровых изображений ограничен бюджетами. Видео не получают адрес источника до явного запуска.
- Контекст
- Учебные проекты созданы совместно с AI-ассистентом. Бренды, товары и мероприятия вымышлены; коммерческие результаты не заявляются.
Реальные iPhone, Android, VoiceOver и TalkBack пока не проверены: устройств и облачного стенда нет. Эмуляция и Linux WebKit не подменяют такой проход.