Обзор кейса: кузовной ремонт
Заказчик: Repairs — кузовной сервис в Москве.
Цель: создать интуитивно работающий сайт информационного портала для клиентов, сотрудников и соискателей на работу.
Условия: для работы я использовал самые современные технологии верстки сайта с использованием Bootstrap и jQuery.
Фирменный стиль
Основными цветами сайта стали красный и фиолетовый, которые присутствуют на всем лендинге: кнопки, иконки, фоновые изображения и графические элементы. Такое сочетание придает элегантности и ощущения luxury продукта, что идеально подходит для рынка aftermarket. Это заметно уже с самой шапки, где красивая машина красного цвета переливается волнами фирменного стиля. Эти волны впоследствии можно увидеть и в сочетании с другими элементами дизайна.
Адаптивность
Одной из задач было адаптировать сайт под мобильные устройства. Я добился этого используя принцип сетки и системы карточек. Каждый блок сайта отображается идеально — без перегрузки текстовой и визуальной информации.
Блок услуги
Блок с перечнем услуг и ценами был реализован максимально интуитивно. Список предоставляемых услуг довольно большой, поэтому я уместил все в 6 категорий, при выборе которых появляется конкретный перечень работ.
Цены на ремонт авто меняются автоматически в зависимости от марки и модели, которую выбирает посетитель. Это дает интуитивный опыт клиенту, который в пару кликов увидит стоимость интересующей его услуги конкретно под свою машину.
Калькулятор расчета цены
Отдельное внимание я выделил блоку с калькулятором расчета цены. Я визуально обозначил каждую деталь машины, при выборе которой появляется чек лист, где посетитель выбирает нужную ему операцию.
Примечательно, что фото автомобиля, где клиент выбирает деталь, меняется в зависимости от выбора модели в левой строке. После выбора автоматически подсчитывается общая стоимость, а для более подробной информации можно посмотреть детальный расчет по каждому пункту.
UI/UX
Кроме всего прочего, на сайте присутствуют слайдеры, которые упорядочивают информацию и упрощают визуальное восприятие дизайна. Как известно, человеческий мозг склонен структурировать поступающую информацию. Задача лендинга — упростить ему этот процесс. Поэтому важно, чтобы она была разбита по блокам, а не висела абы как.
Но если информации довольно много, тогда стоит использовать слайдер, который дает возможность посетителю акцентировать внимание на отдельные структуры контента.
Если вам понравилась моя работа и вы хотели бы подобный функционал, тогда обращайтесь ко мне и я отвечу в кратчайшие сроки!
