Робоход — сайт школы робототехники с интерактивным 3D
Сайт детской школы робототехники с интерактивной 3D-сценой и учебной игрой. Проект показывает, как содержание, графика и взаимодействия могут работать вместе: родитель знакомится с учебными маршрутами, ребёнок пробует составить алгоритм.
Задача
Сделать робототехнику понятной до первого занятия. Объяснить различия возрастных маршрутов, показать связь конструкции и программы, дать посетителю попробовать управлять роботом прямо в браузере.
От структуры к дизайну
Сначала подготовили структуру страниц и тексты под вопросы родителей и поисковые намерения. На их основе разработали концепцию мастерской маленьких изобретателей: тёплое рабочее поле, предметные детали и синий акцент для команд. Затем закрепили типографику, компоненты и состояния в общем стайлгайде.
Робот, который реагирует
На главной размещена настоящая трёхмерная модель. Робот спокойно двигается, моргает и плавно следит за курсором. Движение можно поставить на паузу. На телефоне сцена сохраняет обычную прокрутку, а при настройке уменьшенного движения начинает с неподвижной позы.
Для загрузки используется точный кадр этой же модели: персонаж, масштаб и ракурс не меняются при появлении 3D. Анимация приостанавливается, когда сцена находится за пределами экрана или вкладка скрыта.
Алгоритм можно проверить
В игровой миссии посетитель составляет последовательность команд и проводит робота к цели. Модель на поле выполняет команды по очереди, останавливается перед препятствием и объясняет ошибку. Программу можно исправить и запустить снова.
Сайт включает главную, описание маршрута «Первый робот» и миссию. Возрастной переключатель меняет содержание, а не только оформление. Компоненты адаптированы для телефона и управления клавиатурой.