Mobicams — лендинг системы видеонаблюдения для транспорта

Mobicams — комплекс мобильного видеонаблюдения для автомобилей и мототехники. Для проекта я разработал презентационный лендинг: от структуры и визуальной подачи до адаптивной верстки, интерактивных блоков и публикации на основном домене.

Задача

Заказчику требовался современный одностраничный сайт, который объясняет устройство комплекса и помогает перейти к покупке оборудования или в личный кабинет сервиса. Основой для наполнения стала презентация Mobicams: из неё были взяты сведения о системе, сценариях использования и фирменная оранжевая палитра. Контакты и исходные материалы были собраны с прежнего сайта.

На одной странице нужно было связать несколько разных тем: камеры и датчики, передачу данных, облако, возможности приложения, установку оборудования и дальнейшее использование. При этом лендинг должен был оставаться удобным на телефоне, где посетитель может посмотреть ролик, скачать инструкцию или выбрать установочный центр.

Что было сделано

• Разработал визуальную концепцию и структуру. Собрал светлый интерфейс с крупным первым экраном, оранжевыми акцентами, карточками возможностей и отдельными блоками для системы, приложения и этапов подключения.
• Подготовил иллюстрации и адаптивную верстку. Оформил автомобильный первый экран, схему оборудования и презентационный макет приложения. Настроил размеры контейнеров, кадрирование изображений, отступы и перестроение сеток для компьютеров и телефонов.
• Сделал видеоблок с четырьмя роликами Rutube. Посетитель выбирает описание работы комплекса, материалы для коммерческого транспорта, общую презентацию или сценарий для частного автомобиля. Выбранный ролик открывается в плеере внутри страницы.
• Добавил материалы для скачивания. Оформил три карточки PDF: краткую инструкцию, полное руководство по эксплуатации и презентацию комплекса. Загрузил документы на сайт и проверил опубликованные файлы.
• Подключил интерактивную Яндекс Карту. Вывел офис и два установочных центра. Выбор адреса в списке подсвечивает нужную точку, центрирует карту и открывает подпись; выбор маркера на карте также связан с адресным блоком.
• Доработал поведение интерфейса. Реализовал плавное раскрытие мобильного меню и FAQ. При открытии нового вопроса предыдущий закрывается; анимация учитывает настройку уменьшения движения в системе.
• Настроил переходы и опубликовал сайт. Подключил кнопки к профилю продавца на Авито и существующему личному кабинету Mobicams, перенёс готовые файлы на основной домен и внёс последующие правки заказчика.

Особенности проекта

Лендинг реализован на HTML, CSS и JavaScript. Такой формат позволил сохранить индивидуальную композицию страницы и поведение интерактивных блоков. Разработка сначала велась на тестовом адресе, затем готовая версия была опубликована на mobicams.ru.

Отдельное внимание уделил карте: открытие подписи маркера не должно сбивать выбранный центр. После доработки карта сначала перемещается к адресу и только затем открывает подпись. Это делает выбор точки предсказуемым с первого нажатия, в том числе на телефоне.

Презентационный блок приложения показывает возможности продукта и ведёт в уже существующий сервис. В рамках этого проекта была разработана именно публичная страница Mobicams с её контентом, оформлением и интерактивными сценариями.

Результат

Опубликован лендинг, на котором посетитель может познакомиться с комплексом, посмотреть демонстрации, скачать документы и найти место установки. Материалы о продукте собраны в последовательную страницу, а основные переходы доступны как в первом экране, так и в контактном блоке.

Перед публикацией проверил отображение на компьютере и мобильных экранах, включая ширину 320 пикселей, работу меню, FAQ, переключателя видео, карты и ссылок на PDF. После обновлений проверил соответствие опубликованных файлов подготовленной версии.

Для похожих задач выполняю разработку сайтов и адаптивную верстку: от отдельных интерфейсных блоков до подготовки проекта к запуску.