Новый сайт · дилер «Тонар»
ТонарКарьерные самосвалы — крупно, до последнего винта
ООО «НДВ-Авто» — эксклюзивный дилер шарнирно-сочленённых самосвалов «Тонар». Команда студии разработала для дилера новый сайт: самосвал в главной роли, модельный ряд с ценами и статусами, прицепы, сервис и лизинг — и на каждом экране путь к коммерческому предложению. Смотрите, как пласты породы сходят с готового сайта.
- 3 самосвала
- 35, 45 и 55 тонн — главный продукт крупно
- 19 прицепов
- и полуприцепов с характеристиками
- 13 видов
- страниц и окон — одним языком
- 2 призыва
- «Получить предложение» и «Консультация» на каждом экране
Задача
Показать технику так,
чтобы захотелось КП
Сайт дилера должен был стать современным и дорогим, с эффектами и анимацией. Но главное — продавать: карьерный самосвал стоит десятки миллионов, и сайт обязан вести покупателя к разговору с инженером и коммерческому предложению. Мы сформулировали три правила.
- Правило 01Самосвал — крупноКарьерные самосвалы — главный продукт, им отдан первый экран и весь модельный ряд. Прицепы и полуприцепы — дополнительное направление, светлым блоком ниже.
- Правило 02Каждый экран ведёт к заявке«Получить предложение» и «Консультация» — в шапке, в каждой карточке, в подвале и в нижней панели телефона. Модель сама попадает в заявку.
- Правило 03Ни одного типового экранаНовыми стали и стандартные части: окно заявки, плашка cookie, страница «не найдено», правовые документы, меню на телефоне.
Фирменный язык
Палитра —
карьер на закате
Тёмный графит ночного карьера, оранжевый цвет самой техники «Тонар», песок и известняк уступов. Заголовки — высокий Oswald капителью, как надписи на кузове; текст — Onest. Сквозные мотивы — линии рельефа карьера, номера моделей контуром и золотая пыль в воздухе.
Первый экран
Самосвал
въезжает в кадр
Фон — карьер на закате, внизу — свободная площадка. На неё въезжает настоящий Т-45 со старого сайта: фото увеличили нейросетью в четыре раза и вырезали фон. Сверху летит пыль, фон уходит медленнее страницы. Нажмите «Ещё раз» — самосвал въедет снова.
- Настоящая техникафото Т-45 со старого сайта, без фона, ×4
- Фон карьераиллюстрация нейросети по нашему описанию
- Пыльсто десять частиц, гаснут вне экрана
- Цифры снизу25+ лет, 35–55 т, 6×6, производство в России
Шарнир
Согните самосвал
сами
Главное отличие сочленённого самосвала — шарнир между полурамами: машина поворачивает «переломом» рамы, и все шесть колёс остаются на грунте. На сайте схема складывается при прокрутке; здесь её можно согнуть рукой. Рядом — настоящий шарнир Тонар-7507 из галереи сайта.
Главная
Главная —
десять глав
Главная отвечает на вопросы покупателя по порядку: какая техника есть, чем она лучше импорта, почему покупать у этого дилера, что будет после покупки и как оформить сделку. Выберите главу — окно сайта прокрутится к ней.
Каталог
Двадцать две модели —
с цифрами и ценой
Со старого сайта перенесли всю технику: три самосвала и девятнадцать прицепов с характеристиками, комплектациями и фото. Самосвалы получили большие карточки, прицепы — сетку с подразделами, у каждой модели — своя карточка с галереей и таблицей характеристик.
Главный раздел: три модели большими карточками, которые складываются стопкой при прокрутке. У каждой — номер модели контуром, статус, четыре ключевых цифры, цена и кнопка «Запросить предложение» с моделью в заявке.
Открыть на сайте ↗Картинки
Фото со старого сайта —
в четыре раза чётче
На старом сайте фото самосвалов были мелкими — 455 пикселей в ширину. Мы увеличили их нейросетью в четыре раза и вырезали фон, чтобы технику можно было показать крупно. Потяните ползунок: слева — как было, справа — что стоит на сайте. Фоны карьера, сервиса, запчастей и лизинга — иллюстрации нейросети по нашему описанию, а не фото дилера.
Детали
Окна и мелочи —
тоже из карьера
Окно заявки сразу подставляет модель, с которой пришёл покупатель, и показывает рядом «35 т» крупно. Плашка cookie — стеклянной карточкой с оранжевой кнопкой. Страница «не найдено» говорит «Съехали с трассы» и предлагает разделы. В подвале — финальный призыв и надпись «ТОНАР» контуром во всю ширину.
Живой сайт
Двенадцать страниц —
одним языком
У внутренних страниц общий заголовок на линиях рельефа, а дальше своя подача: сервис и запчасти — карточками работ и брендов, лизинг — четырьмя способами оплаты, галерея — мозаикой с просмотром на весь экран. Наведите на окно — страница прокрутится.
На телефоне
Заявка —
под большим пальцем
На телефоне внизу всегда панель: «Позвонить», «Консультация» и оранжевая «Получить КП». Меню раскрывается на весь экран кругом из угла, окно заявки выезжает снизу шторкой. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор старого сайта, концепция, дизайн-система, страницы, картинки и приёмка с проверкой каждого экрана на компьютере и телефоне. Сайт собран на платформе SkeekS: технику, тексты и цены дилер правит сам.
- 01Разбор старого сайтаПрошли старый сайт дилера целиком: страницы, тексты, характеристики каждой модели и все фото — чтобы при переезде ничего не потерять.
- 02КонцепцияСайт как карьер на закате: графит, оранжевый цвет техники «Тонар», песок и пыль. Главное — самосвал крупно и путь до заявки.
- 03Дизайн-системаПалитра карьера, Oswald для заголовков и Onest для текста, линии рельефа, номера моделей контуром — один язык для всех страниц.
- 04Главная, шапка, подвалВъезд самосвала, модельный ряд стопкой, шарнир, сравнение с импортом, дилер, сервис, этапы покупки, прицепы; стеклянная шапка и подвал с надписью «ТОНАР».
- 05КартинкиФото техники со старого сайта увеличили нейросетью и вырезали фон, логотип «Тонар» восстановили в чёткости, фоны карьера и сервиса создали в одном стиле.
- 06Каталог и техникаДвадцать две модели с характеристиками, комплектацией, фото и ценой или статусом; раздел самосвалов, раздел прицепов с подразделами, карточка техники.
- 07Страницы и окнаО компании, сервис, запчасти, лизинг, галерея, контакты с картой, окно заявки, плашка cookie, страница «не найдено» и правовые документы.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям: ссылки подвала, отступы, значок сайта.
Довели на приёмке
- Ссылки подвала нажимаются на любой ширине экрана
- Отступ под картой в контактах и под надписью «ТОНАР»
- Значок сайта — белый медведь «Тонар» на оранжевом
- Шапка на ширине ноутбука помещается целиком
- Карточки модельного ряда не прячут цену и кнопку при прокрутке
- Длинные таблицы характеристик читаются на телефоне
Перенесли со старого сайта
- 22 модели с характеристиками
- Комплектации прицепов
- Цена Тонар-7507
- Тексты о компании, сервисе, запчастях и лизинге
- Контакты, адреса и реквизиты
- Старые адреса ведут на новые страницы
Итог
Карьерная техника —
крупно и до заявки
Главная, шапка, подвал, модельный ряд самосвалов, прицепы и полуприцепы, карточки техники, о компании, сервис, запчасти, лизинг, галерея, контакты с картой, окно заявки, плашка cookie и страница «не найдено» — единым языком карьера на закате. Самосвал «Тонар» на сайте хочется рассмотреть вблизи — и запросить на него предложение.