Сайт студии движения
KINEO
Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага.
- Задача
- Помочь посетителю разобраться в программах и записаться на подходящее занятие.
- Что сделано
- Собрал страницу с программами, ответами на вопросы и формой записи с защитой введённых данных при закрытии.
- Результат
- Посетитель может выбрать программу и пройти сценарий записи, в том числе с телефона.
Моя роль
Интерфейс, адаптивная разработка, фильтры, интерактивный подбор программы и четырёхшаговая запись.
- Состав работ
- Сервисный лендинг / Запись / Frontend
- Период
- 2024
- Статус
- завершён
Стек
- Vue
- Vite
- Tailwind CSS
- JavaScript
Главный экран знакомит со студией движения и направляет к выбору программы.
Путь от проблемы к подходящей программе
Лендинг последовательно объясняет подход, услуги и специалистов.
Полная страница раскрывает программы, подход студии, специалистов и ответы на вопросы перед записью.
Запись рассчитана на телефон
Поля, карточки и навигация по шагам остаются крупными и понятными.
Программы и информационные разделы выстроены в последовательный мобильный сценарий знакомства со студией.
На телефоне первый экран сохраняет спортивную фотографию и понятный переход к программам.
Полноэкранное меню открывает основные разделы и запись, не требуя попадать в мелкие ссылки.
Состояния сложного диалога
Запись сохраняет выбор между шагами и предупреждает перед закрытием.
Запись разбита на последовательные шаги: выбранная услуга сохраняется при переходах внутри формы.
При закрытии незавершённой записи появляется подтверждение, чтобы пользователь случайно не потерял введённые данные.
Мобильная запись сохраняет те же этапы, с крупными вариантами выбора и доступными действиями.
Подтверждение закрытия предусмотрено и на телефоне: можно вернуться к заполнению или выйти.
Технические детали
Интерфейс на Vue хранит выбор пользователя между шагами записи. Отдельно предусмотрены фильтры программ, мобильное меню и подтверждение закрытия заполненной формы.
Обсудим вашу задачу?
Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы.