Разработка сайта · автосервис в Клину
АСР-Сервис Сайт, с которого снимают малярный скотч
«АСР-Сервис» — автосервис в Клину с двадцатипятилетним опытом. Главное здесь — кузовной ремонт и покраска в собственной камере, а ещё двигатель, подвеска, тормоза и плановое ТО. Команда студии разработала для сервиса новый сайт в стиле покрасочной камеры: графит, жёлтый цвет логотипа и свежая краска.
- 25
- лет сервис ремонтирует автомобили
- 14
- направлений ремонта на сайте
- 31
- фото настоящих работ
- 15
- иллюстраций услуг в одном свете
Нажмите на страницу — окно заклеят бумагой и скотчем, а потом снимут его уже с неё.
Задача
Сервис, который видно с первого экрана
Нужен был сайт, по которому с первого взгляда понятно: здесь умеют красить и восстанавливать кузов, ремонтируют машины всех марок и дают гарантию. И по которому легко записаться — с компьютера и с телефона.
- 01
Покраска — первым делом
Главное у сервиса — кузов и покраска в своей камере. Это видно сразу: первый экран прокрашивается на глазах, а кузовные услуги стоят крупно впереди механики.
- 02
Только настоящие машины
Работы — живые автомобили клиентов: Москвич 401 из ржавого кузова, Mercedes после полной покраски. «До» и «после» сравниваются ползунком.
- 03
Записаться — в одно нажатие
Кнопка «Записаться» есть на каждом экране, телефон всегда под рукой, а рядом статус: открыт ли сервис прямо сейчас.
Фирменный язык
Цвета — из логотипа и камеры
Жёлтая шестерня логотипа стала главным цветом: кнопки, скотч, блики. Всё остальное — графит и сталь покрасочной камеры. Нажмите на образец — он «выкрасит» полосу.
Первый экран
Кадр прокрашивается на глазах
Пока страница открывается, распылитель проходит по кадру, и машина из серого грунта становится цветной. Попробуйте сами: проведите по снимку — краска ляжет там, где прошёл курсор или палец.
- 0,5 с
- 1,2 с
- 1,9 с
- 4,2 с
Главная
Главная — одиннадцать глав
Прокрутите страницу: окно пройдёт главную сайта сверху вниз, а слева загорится глава, которую вы сейчас видите.
- Первый экранРаспылитель прокрашивает кадр из серого грунта в цвет, по слову «блеск» бежит блик, за курсором — влажный отблеск.
- Малярный скотчДве ленты крест-накрест: услуги сервиса и «Осторожно: свежая краска».
- О сервисеСлова проявляются при прокрутке, главное загорается жёлтым.
- УслугиКузов, покраска и полировка — крупно, остальные одиннадцать — плитками с иллюстрациями.
- Попадаем в цветМашина перекрашивается в выбранный оттенок, рядом — материалы KANSAI и CARDEA.
- Было / сталоПолзунок по настоящим работам: Москвич 401 и Mercedes.
- Пять шаговЭтапы ремонта на светлой «бумаге»: линия заполняется, номера загораются.
- Из мастерскойДве ленты фото работ едут навстречу, любое фото открывается крупно.
- Почему нам доверяютШесть карточек наклоняются за курсором.
- Как добратьсяТёмная карта, адрес, часы, телефон и маршрут.
- ПодвалЗапись на осмотр и огромная надпись, которая прокрашивается и блестит.
Услуги
Пятнадцать деталей — в одном свете
У каждой услуги своя картинка, и все пятнадцать — одна серия: деталь на графите, жёлтый контровой свет и мелкая взвесь краски. Это иллюстрации, сделанные нейросетью по нашему описанию, а не фото сервиса.
-
Малярные работы
-
Кузовной ремонт
-
Полировка кузова
-
Материалы
-
Ремонт двигателя
-
Тормозная система
-
Передняя подвеска
-
Задняя подвеска
-
Выхлопная система
-
Система охлаждения
-
Топливная система
-
Трансмиссия
-
Рулевое управление
-
Кондиционер
-
Плановое ТО
Работы
Настоящие машины — до и после
На главной сервиса стоит ползунок «было / стало» по фото из его же фотогалереи. Потяните его здесь: это машины клиентов, а не картинки из интернета.
Реставрация из ржавого кузова
Кузовной ремонт и полная покраска
Страницы
Одна камера — все страницы
Все страницы собраны на нескольких общих шаблонах: первый экран с картинкой, текст из админки в новом оформлении, карточка записи сбоку. Нажмите на страницу, чтобы открыть её целиком.
Детали
Мелочи, без рамок и швов
Окна, меню, cookie и просмотр фото сделаны заново в том же стиле. При клике мышью у кнопок и ссылок нет лишних рамок — обводка появляется только при переходе с клавиатуры.
-
Меню услуг
Наводите на «Услуги» — открывается панель со всеми четырнадцатью направлениями и картинками.
-
Окно записи
Своё окно с лентой малярного скотча: имя, телефон, согласие и тут же телефон с WhatsApp.
-
Окошко cookie
Маленькое, в стиле сайта, с «печенькой» — не закрывает первый экран.
-
Просмотр фото
Фото работ открываются на весь экран, листаются стрелками, клавишами и свайпом.
404
Свернули не туда — номерной знак
Код ошибки — на табличке номера, она слегка покачивается. Ниже — разделы сайта, чтобы вернуться на маршрут.
На телефоне
Записаться — с одной руки
На телефоне в шапке остаются логотип, «Записаться», звонок и меню. Меню выезжает справа, услуги в нём раскрываются списком.
Как шла работа
Восемь шагов — одна команда
- 01РазборРазобрали, с чем люди приходят в кузовной сервис и что хотят увидеть до звонка: работы, цены, адрес, режим работы.
- 02СтильНашли язык в логотипе и в самой работе: графит покрасочной камеры, жёлтый логотипа, свет ламп, малярный скотч.
- 03ГлавнаяПервый экран с прокраской, услуги, подбор цвета, «было/стало» на настоящих машинах, этапы ремонта, работы и карта.
- 04ИллюстрацииПятнадцать картинок услуг в одном свете — деталь на графите с жёлтым контровым светом. Это иллюстрации, не фото сервиса.
- 05СтраницыУслуги, статьи, фотогалерея и страница работы, контакты, правовые страницы и 404 — на одних шаблонах.
- 06Окна и деталиОкно записи, меню услуг, окошко cookie, просмотр фото, статус «открыто до…» по режиму работы.
- 07ПереносВсе тексты услуг и все фото работ остались на месте — новый сайт собран вокруг них.
- 08ПроверкаКаждая страница на компьютере и телефоне: вид, анимации, формы, работа с клавиатуры и без лишних рамок при клике.
Итог
Автосервис, которому доверяют кузов
Первый экран, который прокрашивается на глазах, подбор цвета, «было / стало» на настоящих машинах, пятнадцать иллюстраций услуг в одном свете, страницы услуг и работ, контакты с картой, свои окна, cookie и страница 404 — всё в стиле покрасочной камеры и жёлтого логотипа «АСР-Сервиса».