Сайт для автосервиса по восстановлению дисков: кейс Gekata
Для автосервиса Gekata мы с нуля сделали логотип, фирменный стиль и многостраничный сайт с калькулятором стоимости и слайдером «до и после»: посетитель сам прикидывает цену и видит результат работ.
около20заявок в месяц после запуска сайтаПо данным студии
Факты о проекте
- Срок
- 7 недельдизайн 3 · вёрстка 4
- Тип проекта
- Корпоративный сайт, 2023
- Ниша
- Автосервис по восстановлению дисков
- Платформа
- Чистый кодс нуля, без готового шаблона
Gekata — автосервис по восстановлению дисков: покраска, ремонт, полировка, алмазная проточка, шиномонтаж. Мы сделали для него с нуля логотип, фирменный стиль и корпоративный сайт. 2023 год, срок 7 недель, сайт написан на чистом коде.
Задача клиента
У автосервиса несколько разных услуг, и человеку с повреждённым диском важно быстро понять, что ему подойдёт, увидеть примеры работ и прикинуть стоимость ещё до звонка.
- Придумать логотип и фирменный стиль под ремонт и покраску дисков.
- Дать каждой услуге свою страницу: покраска, ремонт, полировка, алмазная проточка, шиномонтаж.
- Дать посетителю самому прикинуть стоимость работ.
- Показать результат работ на примерах «до и после».
- Сделать простую заявку на обратный звонок и раздел полезных статей для тех, кто ещё выбирает.
Что мы сделали
- Логотип и фирменный стиль с нуляКрасный знак в круге и графитовая надпись GEKATA; цвета, шрифт и красный след протектора под заголовками.
- Аналитика и структура сайтаРазложили услуги по страницам и продумали путь посетителя: услуга, примеры, цена, заявка.
- Дизайн страницГлавная, все услуги, страницы услуг, цены, наши работы, отзывы, статьи, контакты; версии для компьютера и планшета.
- Вёрстка на чистом кодеБез готового шаблона и тяжёлого конструктора.
- Калькулятор стоимостиУслуга, диаметр, дополнительные работы: цена пересчитывается сразу, без перезагрузки страницы.
- Слайдер «до и после»Результат работы видно, когда двигаешь ползунок: можно мышью, пальцем или клавишами.
- SEOСтруктура страниц услуг и раздел полезных статей под запросы клиентов.
Не только дизайн: слайдер «до и после» и калькулятор
Мы сделали для сайта не только внешний вид, но и рабочие инструменты для посетителя: сравнить результат работы и прикинуть стоимость ещё до звонка. Попробуйте сами: это рабочие копии механики на примерных данных.
Слайдер «до и после»Демо
Потяните ползунок или нажмите на фото, чтобы сравнить.
До
После
Фотографии примерные: на странице показана механика слайдера.
Калькулятор стоимостиДемо
Выберите услугу, диаметр и дополнительные работы: цена пересчитается сразу.
- Диаметр R17, 4 шт.
- 8 000 ₽
- Дополнительные работы
- 0 ₽
- Скидка за комплект
- −30% (2 400 ₽)
Цены и скидки здесь показаны для демонстрации работы калькулятора и не относятся к услугам клиента.
Как это устроено
- Слайдер и калькулятор написаны на обычном JavaScript, без тяжёлых библиотек и чужих скриптов: страница остаётся быстрой.
- Слайдер работает мышью, пальцем и клавишами со стрелками; прокрутка страницы на телефоне не мешает.
- Калькулятор пересчитывает цену на лету, страница не перезагружается; все переключатели доступны с клавиатуры.
- В макете оба элемента нарисованы в стиле сайта: графит, красный, белые кнопки. «До и после» с красной диагональю есть и на страницах услуг.
Стиль: логотип, цвета, шрифт
Образ сайта держится на трёх цветах и одном выразительном шрифте: красный знак в круге, графитовые панели, светлый фон и красный след протектора под заголовками разделов.
Две буквы G, вписанные в круг, как диск колеса. Красный цвет знака стал главным акцентом сайта: кнопки, активные переключатели, пометки.
Тот же знак крупным бледным рисунком стоит на фоне графитовых панелей и подвала.
- #CB2128Красный: знак, кнопки, акценты
- #373E46Графит: шапка, панели, подвал
- #ECECECСветло-серый: фон страниц
- ЗаголовкиПокраска дисков
Unbounded: широкий, плотный, «технический» шрифт крупных заголовков.
- Основной текстРемонт, полировка, алмазная проточка и шиномонтаж.
Спокойный рубленый шрифт для описаний: читается на любом экране.
Главная, услуги, цены и планшетная версия
Страницы сайта мы нарисовали для компьютера и для планшета. На картинках макеты дизайна: тексты в них условные.
На компьютере
На планшете
Главная 
Услуги
Все страницы сайта
- Главная
- Все услуги
- Покраска дисков
- Ремонт дисков
- Полировка
- Алмазная проточка
- Шиномонтаж
- Наши цены
- Наши работы
- Отзывы
- Статьи
- Страница статьи
- Контакты
- Хочу сотрудничать
Что получил клиент
Фирменный стиль и сайт, который показывает каждую услугу отдельно и помогает посетителю самому прикинуть цену.
- около20заявок в месяц после запуска сайтаПо данным студии
- Сайт на все услугиУ каждой услуги своя страница: покраска, ремонт, полировка, алмазная проточка, шиномонтаж.
- Калькулятор стоимостиПосетитель сам прикидывает цену ещё до звонка.
- Примеры «до и после»Результат работ видно на фото, ползунок двигается пальцем и мышью.
Срок и этапы
7 недель от первого макета до запуска
Комментарий студии
Для Gekata мы сделали сайт как рабочий инструмент: услуги разложены по отдельным страницам, а калькулятор и слайдер «до и после» помогают посетителю решить, что нужно его дискам, ещё до звонка. Красный знак, графитовые панели и широкий шрифт заголовков держат все страницы в одном стиле. Всё написано с нуля на чистом коде, без готового шаблона.
GreenOakвеб-студия
Нужен сайт для автосервиса или мастерской?
Обсудим ваш проект
Расскажите, какие услуги вы оказываете и что хотите показать посетителю. Скажем, что можно сделать, за какой срок и сколько это стоит.
- Срок
- 7 недель
- Платформа
- Чистый код
- Состав
- Логотип, дизайн, вёрстка, калькулятор, слайдер, SEO
- Год
- 2023
Обсудить проект
Опишите задачу в двух-трёх фразах. Ответим и предложим варианты.
Понравился проект? Хочу такой же сайт: виды сайтов и цены · Другие примеры работ