https://evkarn.ru
Лендинг под ключ

РП Ингострах — услуги страхования

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

Заснята отработка всех элементов сайта - лендинга по по услугам страхования.

Дата загрузки: 2019-12-11 00:00:00 +0500

Постер для видео - изображен страховой полис с надписью страховка, рядом щит с крестиком на нём.

О клиенте:

Компания ООО «Герон» — занимается разными бизнес-направлениями, в том числе является региональным представителем компании Ингосстрах.

Задача:

Сделать лендинг под ключ — взять информацию с официального сайта Ингосстрах — переработать, отрисовать дизайн и сверстать одностраничник по услугам страхования.

Что сделано:

Прототипирование: структура и расположение элементов, тексты.

Отрисован дизайн.

Вёрстка лендинга.

Примечание:

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

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

Инструменты:

  • ХТМЛ
  • ЦСС
  • Бутстрап
  • Джаваскрипт
  • Джейкуери
  • Гулп
  • Сасс

Процесс

Изображение прототипа лендинга

Прототип сайта

Проведён анализ сайта донора — посмотрел контент, прикинул как его можно разместить в пределах лендинга.

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

Так как в задачу не входило акцентировать внимание на конкретной услуге в хедере был использован простейший заголовок отражающий суть предлагаемой услуги. И кнопка перехода к калькулятору расчета ОСАГО. На фоне использована тематическая картинка и сделан простейший логотип.

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

Преимущества для отдельных видов страхования выводятся ниже и привлекают внимание тематическими иконками.

На третьем развороте показаны основные акции, предлагаемые компанией. Каждый блок является кликабельным — клик в любом месте (картинка, заголовок, кнопка) открывают модальное окно с формой заявки.

На четвертом развороте представлен калькулятор ОСАГО и форма заявки.

В футере идет простое повторение контактных данных и форма заявки.

Сайт выполнен в рамках поставленной задачи и выделенного бюджета. Если хотите получить более качественный результат ставьте правильную задачу исполнителю и закладывайте необходимый бюджет в разработку проекта.

Первая секция лендинга — тематическое фоновое изображение, меню, логотип и торговое предложение для посетителей

Дизайн

Весь дизайн целиком выполнен в стиле дизайна СПАО «Ингосстрах». Основные и акцентные цветовые оттенки, общее оформление и т.п.

Одна из секций лендинга — Изображение женщины за рулём автомобиля. Описание услуги автострахование

Вёрстка лендинга

Верстал лендинг с применением сетки bootstrap, из фреймворка подключалась только сетка, чтобы избежать избыточности кода.

Вёрстка кросс-браузерная - правильно работает во всех современных браузерах. Полностью адаптивная и валидная, с применением семантических тегов.

Одна из секций лендинга с различной информацией об электронных подписях

Интерактив

В процессе работы реализованы простые интерактивные элементы: формы заказа; постраничная навигация; кнопка возврата к верху страницы; ссылки и кнопки.

Также реализованы спойлеры (аккордеоны) и калькулятор расчёта полиса ОСАГО.

Секция лендинга с акциями - картинки, заголовки и другая информация.

Анимация

На сайте сделаны простые, плавные анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.

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

Результат

Затрачено времени:

6 дней

Бюджет проекта:

Конфиденциально