Сайт Главная дорога

Контекст и задача

Главная задача — сделать интуитивными два ключевых сценария: расчет стоимости поездки в зависимости от маршрута и покупка транспондера.

Основными функциями сайта стали удобный расчёт маршрута и стоимости поездки, а также онлайн-покупка транспондера для быстрого и комфортного проезда по дорогам.

Структура

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

Айдентика

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

В проекте использовался шрифт Commissioner, который сохраняет строгий и современный стиль. В палитре — фирменные синие оттенки, дополненные белым и серым для лёгкости и контраста, а также акцентные жёлтый, оранжевый и зелёный для навигации и иконок. Такой подход сделал визуальную систему сайта узнаваемой, сохраняя целостность.

Дизайн

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

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

Функциональные элементы. Карта и калькулятор

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

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

Разработка. Frontend и Backend

Для проекта использовался современный стек: HTML5, CSS3 (SCSS), TypeScript, Pug, Webpack. Сборка осуществлялась с учётом архитектурных рекомендаций 1С-Битрикс, на котором велась backend-разработка.

На сайте реализована удобная онлайн-покупка транспондеров с возможностью доставки курьером или самовывоза. Была интегрирована интерактивная карта СДЭК с выбором удобного отделения или постамата, а также подключены платёжная система Сбербанка и система печати чеков АТОЛ.

Все заказы фиксируются в административной панели 1С-Битрикс, где менеджеры видят необходимую информацию. Это позволяет оперативно отслеживать и обрабатывать обращения без потерь данных, а также эффективно управлять процессом выдачи транспондеров клиентам.

Результат

В результате получилась современная, удобная и функциональная цифровая платформа, которая решает задачи бизнеса и отвечает потребностям аудитории.

Сайт предоставляет пользователям доступ к сервисам и информации о компании, а бизнесу помогает выстраивать удобное и прозрачное взаимодействие с клиентами в онлайн-среде.