PRO LINE

Разработка корпоративного сайта детейлинг студии

Задача:

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

Стек технологий:

Html5, SCSS, CMS WordPress, JS, Gulp, MySQL, 3ds MAX.

Выбор технологий

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

Дизайн

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

Прелоадер

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

Меню сайта

Меню сайта и в целом вертикальная плашка навигации это демонстрация успешной реализации задумки UI и UX дизайнеров. С одной стороны такое решение позволяет быстро получить доступ к нужным разделам сайта. С другой стороны очень удачный визуальный элемент.

Фулскрин скрол

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

Визуализация частей кузова

Разные услуги детейлинг-студии могут быть реализованы на разных частях автомобиля. Для того чтобы наглядно показать какие места могут быть использованы, мы подготовили в 3ds Max объемную модель автомобиля, на которой показали все возможные места (детали кузова, стекла и пр.). В панели управления в настройках страницы Услуги Админ может выбрать какие места могут быть использованы для данной услуги.

Фирменный стиль

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

Калькулятор услуг

Структурировав все данные, которые используются для отображения списка услуг компании мы реализовали калькулятор стоимости услуг. Клиенту достаточно выбрать какой бренд его автомобиля, тип кузова и интересующие услуги. Сайт сам формирует возможную смету. А также, по совету маркетолога, после формирования сметы Клиенту предоставляется 10% скидка по уникальному ПРОМО-коду. ПРОМО-код хранится в панели управления сайта и Администратор может всегда проверить его актуальность

Связанность элементов

На сайте реализована сквозная связанность элементов. Например, при создании страницы примера работы, Админ указывает какие услуги были оказаны. Эти услуги автоматически “подтягиваются” из списка страниц услуг. Это позволяет переходить из страницы примера работы сразу на страницы оказанных услуг. И напротив, на странице услуги показывать в примерах работ только те кейсы, в которых оказана была эта услуга, автоматически убирая другие.

Ссылка на проект:

https://proline.i1-web.ru/
Благодарим за обращение!
Скоро с Вами свяжется наш специалист.