Кейсы

Обзор кейса: кузовной ремонт

Александр Рыбка 04:08:2017 416

Заказчик: Repairs - кузовной сервис в Москве.

Цель: создать интуитивно работающий сайт информационного портала для клиентов, сотрудников и соискателей на работу.

Условия: для работы я использовал самые современные технологии верстки сайта с использованием Bootstrap и  jQuery.

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

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

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

Адаптивность

Одной из задач было адаптировать сайт под мобильные устройства. Я добился этого используя принцип сетки и системы карточек. Каждый блок сайта отображается идеально — без перегрузки текстовой и визуальной информации.

Адаптивная версия сайта

Адаптивность страниц на сегодняшний день является важным фактором при создании нового сайта. Согласно статистике, 50% трафика в 2017 году поступают из мобильных устройств. Я серьезно отношусь к своей работе и с уверенностью могу сказать, что каждый мой проект адаптирован под все известные мобильные платформы.

Блок услуги

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

Блок услуги

Цены на ремонт авто меняются автоматически в зависимости от марки и модели, которую выбирает посетитель. Это дает интуитивный опыт клиенту, который в пару кликов увидит стоимость интересующей его услуги конкретно под свою машину.

Калькулятор расчета цены

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

Калькулятор расчета цены

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

UI/UX

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

UI/UX слайдеры></div>
<p>Но если информации довольно много, тогда стоит использовать слайдер, который дает возможность посетителю акцентировать внимание на отдельные структуры контента.</p>
<p>Если вам понравилась моя работа и вы хотели бы подобный функционал, тогда обращайтесь ко мне и я отвечу в кратчайшие сроки!</p>
                    </div>
	                    

                </div>
                <div class=