Paradise Auto
Крупный автомобильный визуал, объяснение этапов, расчёт и FAQ. Переосмысление: один маршрут к заявке, без копирования заявлений о выгоде, отзывов и клиентских автомобилей.
СТРАТЕГИЯ / АРТ-ДИРЕКШН / РАЗРАБОТКА
С Востока.
С понятной идеей.
VOST — портфолио-концепт компании по подбору и доставке автомобилей из Японии, Южной Кореи и Китая в Россию.
Это демонстрационный проект. Компания вымышлена. Иллюстрации созданы для дизайна и не показывают машины в наличии. Форма не отправляет данные, не сохраняет их в браузере и не создаёт настоящих заявок. Название предложено для кейса; юридическая доступность не проверялась.
Задача и аудитория
Помочь покупателям автомобиля в России понять варианты импорта и полный бюджет через заявку на персональный подбор.
Рабочая аудитория: люди, которые выбирают следующую машину, сравнивают местный рынок и привоз под заказ, готовы обсуждать варианты, но не хотят самостоятельно разбираться в аукционах и логистике. География России принята как допущение. Конкретный ценовой сегмент не задан: диапазоны в форме обозначают пожелания посетителя, а не обещание доступности автомобиля.
Что показало изучение ниши
Проведён качественный обзор публичных предложений и сценариев сайтов. Это кабинетное исследование, без интервью с покупателями и без доступа к аналитике конверсий. Выводы о барьерах — гипотезы для структуры сайта, а не результаты социологического опроса.
| Наблюдение | Решение в VOST |
|---|---|
| Импортёры объясняют договор, проверку, оплату и доставку. | Показать процесс и результат каждого этапа до формы. |
| На рынке встречаются обещания экономии и цены «под ключ». | Раскрыть состав расходов. Не обещать процент экономии без расчёта конкретной машины. |
| Выбор разделяют по странам, маркам и типам автомобилей. | Три направления с объяснением сценария, особенностей проверки и примерами моделей. |
| Компании используют выполненные заказы, историю работы и отзывы как доказательства. | Не создавать вымышленные доказательства для кейса. Объяснить услугу и открыто обозначить демонстрационный характер. |
| Расчёт начинается с параметров авто и бюджета. | Пошаговая форма: страна и бюджет пожелания и город имя и телефон. |
Источники: Paradise Auto, CARWIN, Pacific Auto. Изучены 12 октября 2026 года. Чужие цены, сроки и показатели в проект не переносились. Статистика объёма рынка не использована: для этого кейса она не подтверждает ценность конкретной услуги.
Три референса — три полезных принципа
Alarta
Тёмный фон, наглядное объяснение сложной услуги, контрастные функциональные элементы. Переосмысление: система маршрутов и точек, связывающая страны, расходы и этапы покупки.
Camperbus
Фотография на весь первый экран и выбор под сценарий использования. Переосмысление: кинематографичная машина у терминала и подбор под повседневные задачи.
Три концепции
Автомобиль как желание
Эмоциональная редакционная подача: большой снимок и короткий заголовок на первом экране, далее подборки по образу жизни. Главный приём — крупные фото и контраст масштаба. Для развития нужны достоверные фотографии и сведения о моделях.
Личный выбор
Спокойная светлая композиция. На первом экране — предложение персонального подбора и компактный бриф. Главный приём — пошаговое раскрытие информации. Сильный сценарий, но меньше визуальной выразительности для портфолио.
Маршрут с Востока
Атмосферный первый экран и строгая структура сделки. Графит, лайм, крупные заголовки, нумерация и маршрутная линия. Фотография привлекает внимание, а последовательность блоков объясняет, как перейти от желания к осмысленному запросу.
Выбрана концепция «Маршрут с Востока»: она связывает три рынка одним предложением, помогает объяснить дистанционную покупку и работает без вымышленных социальных доказательств. VOST — короткая отсылка к восточному направлению; знак означает движение к следующему автомобилю.
Визуальная система
| Элемент | Правило |
|---|---|
| Фон и поверхности | #111512 — основа; #1B211C — панели; #F2F3ED — светлые секции. |
| Акцент | #D6FF62 — основное действие, маршрут и активные элементы; на светлом фоне применяется тёмный текст. |
| Вторичный текст и линии | #ADB5AA на тёмном; #5B655A на светлом; #353D35 — тёмные разделители. |
| Типографика | Manrope с кириллицей, локальные файлы. Первый экран 39–104 px, секции 36–68 px, подзаголовки 17–32 px; основной текст 13–16 px с интерлиньяжем 1.6–1.75. |
| Сетка | Ориентир 1440 px: поля 64 px, контент около 1312 px. Максимальная ширина контента 1440 px. На телефоне поля 17–22 px. Колонки перестраиваются в одну. |
| Ритм | Секции 65–125 px по вертикали. Внутренние интервалы 8, 12, 16, 24, 32, 48 px. Тёмные и светлые разделы чередуются по смыслу. |
| Форма и компоненты | Скругления 4–8 px; тени только для плавающих элементов. Кнопки от 44 px, основные 53–58 px. У меню область нажатия 44×44 px. |
| Состояния | Наведение — изменение фона; нажатие — смещение на 2 px; фокус — контрастная обводка 3 px; ошибка — текст и красная граница. Результат формы явно обозначен как демонстрационный. Сетевой загрузки нет. |
| Изображения | Две авторские иллюстрации, созданные встроенным Imagegen: автомобиль у терминала и детали салона. WebP, отдельный облегчённый файл для мобильного первого экрана, отложенная загрузка второго изображения. |
Палитра выбрана для контраста, иерархии и отличимости. Универсальное психологическое влияние цвета на продажи не предполагается. Впечатление от дизайна и конверсию нужно проверять на аудитории.
Мобильный сценарий и доступность
Обновление 13 октября: основной текст и поля на телефоне увеличены до 16 px, вспомогательные подписи — до 12–14 px. Короткие предлоги соединены со следующим словом неразрывным пробелом. Убраны поясняющие приписки под полями и кнопками формы; демонстрационный результат по-прежнему честно сообщает об отсутствии отправки.
- Первый экран сохраняет предложение, автомобиль и действие. Изображение кадрируется средствами CSS; текст остаётся отдельным HTML.
- Страны доступны тремя вкладками; кнопки поддерживают стрелки, Home и End. Активная вкладка обозначена программно.
- Этапы маршрута становятся вертикальными. Форма остаётся в потоке страницы, без модальных окон.
- Нижняя кнопка появляется после первого экрана и скрывается при появлении формы или подвала.
- Есть ссылка пропуска навигации, подписи полей, связь ошибок с полями, фокус на ошибке и озвучивание смены шага.
- Учитывается prefers-reduced-motion. Декоративные элементы не участвуют в озвучивании.
Данные и границы демонстрации
Сайт работает без CRM, аналитики, внешних скриптов и форм-сервисов. Введённые данные существуют только в текущей странице: при её перезагрузке они исчезают. Отправка перехватывается локально. Завершение сценария прямо сообщает, что заявки не было и обратного звонка не будет.
Включённые шрифты и изображения загружаются с самого сайта. При посещении действуют технические механизмы хостинга и контроля доступа Sites; заявление об отсутствии сохранения относится к полям демонстрационной формы.
Что проверено
Выполнены проверки синтаксиса JavaScript, 16 случаев валидации полей и 3 проверки сводки запроса, аудит локальных ссылок, файлов, подписей и ARIA-связей. Проверены кириллица в шрифте и контраст основных сочетаний: 16,51:1 для основного текста, 16,09:1 для кнопки, 5,45:1 и 8,74:1 для вторичного текста. В коде отсутствуют API отправки формы и сохранения её данных. Браузерная проверка макета на ширинах 320, 390, 768, 1440 и 1920 px не проводилась: в окружении не предоставлен поддерживаемый инструмент для локального предпросмотра Sites. Адаптивные правила для этих диапазонов реализованы; фактическое отсутствие наложений во всех браузерах не заявляется.
Что потребуется для реального запуска
Для портфолио-версии дополнительные материалы не нужны. При превращении проекта в настоящий бизнес-сайт понадобятся реквизиты оператора, согласованные условия услуги, подтверждения процесса проверки и выполненных заказов, законно используемые фотографии автомобилей, действующие документы по обработке данных и серверное подключение формы. После этого — браузерная проверка, тест доставки заявки и отдельное решение об открытом доступе.
Посмотреть сайт