Сайт компании "Вэб-автосервис"

Компания “Веб-автосервис” обртилась к нам за помощью в создании и продвижении сайта. Основной приток клиентов в этой компании приходил по офф-лайн рекламе, но наш заказчик решился на развитие своего бизнеса в среде Интернет, в чем мы и решили ему помочь.

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

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

Дизайн

Макет мы решили сделать контрастный. В автомобильной тематике есть много хорошего исходного фотоматериала, поэтому можно создать интересные фоны и вставки для многих блоков в макете.

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

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

Была разработана таблица марок автомобилей, которые обслуживает компания “Веб-автосервис”. Мы решили сделать не скучной, текстовой, а снабдить каждую марку своим собственным изображением. Мы перебрали десятки изображений в интернете, выбрали наиболее узнаваемые модели автомобилей данных марок, и обработали их, приведя к общему внешнему виду.

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

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

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

Верстка

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

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

Разработка

Перед началом разработки мы проанализировали множество сайтов конкурентов, так как возмник вопрос, не реализовать ли данный сайт на каком-нибудь современном фреймворке? Но мы решили что и в этот раз достаточно возможностей нашей любимой в “Вэбас” CMS - MODx Revolution. Так как похожих сайтов у нас не было, сборку мы решили начинать с нуля.

Для начала мы подготовили все необходимые макеты, и нарезали их в блоки внутри CMS. Затем контент-менеджеры совместо с SEO-оптимизаторами подготовили структуру сайта и изложили нам требования по управлению и генерации контента.

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

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

Проведенные работы

Дизайн
Наполнение
Анимация
Верстка
Настройка

Сайт был сдан в начале 2018 года, и с тех пор мы сделали множество различных доработок. Мы расширили каталог услуг и доработали все страницы по старым услугам, сделав их еще более удобными и оптимизированными. Добавили возможность генерировать динамические страницы - чему были рады наши СЕО-специалисты и немного обновили дизайн, добавив набор нужных пользователям элементов. При этом мы старались сохранить ту стилистику, что была разработана нами изначально при создании сайта.

Теперь мы ждем когда в разработку придет еще один сайт данной тематики.

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

Хотите заказать похожий проект? Звоните нам и мы поможем сделать расчет стоимости

Давайте знакомиться!

Заявка на получение обратного звонка