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

Share
04.08.17
верстка шапки кейс

Содержание:

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

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

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

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

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

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

    верстка шапки кейс

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

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

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

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

    Блок услуги

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

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

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

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

    верстка калькулятора

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

    UI/UX

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

    интерфейс верстка

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

    Если вам понравилась моя работа и вы хотели бы подобный функционал, тогда обращайтесь ко мне и я отвечу в кратчайшие сроки!

    Подпишитесь на блог