Ещё проект
Адаптивная вёрстка лендинга - летний лагерь Pride
Ещё проект
Заснята отработка всех элементов сайта - лендинга по по услугам страхования.
Дата загрузки: 2019-12-11 00:00:00 +0500
О клиенте:
Компания ООО «Герон» — занимается разными бизнес-направлениями, в том числе является региональным представителем компании Ингосстрах.
Задача:
Сделать лендинг под ключ — взять информацию с официального сайта Ингосстрах — переработать, отрисовать дизайн и сверстать одностраничник по услугам страхования.
Что сделано:
Прототипирование: структура и расположение элементов, тексты.
Отрисован дизайн.
Вёрстка лендинга.
Примечание:
Клиент предупреждён о том, что для данной тематики больше подходит многостраничный сайт-визитка, с отдельными страницами, описывающими каждый вид страхования.
Так как, если всю эту тематику поместить на одной странице, контент сайта будет плохо сео-оптимизирован, страница будет плохо продвигаться в поисковых системах и трафик станет реально получать только с прямой рекламы.
Инструменты:
Процесс
Прототип сайта
Проведён анализ сайта донора — посмотрел контент, прикинул как его можно разместить в пределах лендинга.
Прорисовал структуру будущего сайта (расположение всех элементов). Переработал и расположил тексты. Согласовал с клиентом какие анимации будут использоваться на сайте.
Так как в задачу не входило акцентировать внимание на конкретной услуге в хедере был использован простейший заголовок отражающий суть предлагаемой услуги. И кнопка перехода к калькулятору расчета ОСАГО. На фоне использована тематическая картинка и сделан простейший логотип.
Во втором развороте идет сегментация по видам страхования. Все услуги, относящиеся к конкретному виду страхования скрыты в аккордеоне для экономии пространства. Каждый блок кликабельный — клик в любом месте (заголовок, картинка, кнопка) открывают форму заказа.
Преимущества для отдельных видов страхования выводятся ниже и привлекают внимание тематическими иконками.
На третьем развороте показаны основные акции, предлагаемые компанией. Каждый блок является кликабельным — клик в любом месте (картинка, заголовок, кнопка) открывают модальное окно с формой заявки.
На четвертом развороте представлен калькулятор ОСАГО и форма заявки.
В футере идет простое повторение контактных данных и форма заявки.
Сайт выполнен в рамках поставленной задачи и выделенного бюджета. Если хотите получить более качественный результат ставьте правильную задачу исполнителю и закладывайте необходимый бюджет в разработку проекта.
Дизайн
Весь дизайн целиком выполнен в стиле дизайна СПАО «Ингосстрах». Основные и акцентные цветовые оттенки, общее оформление и т.п.
Вёрстка лендинга
Верстал лендинг с применением сетки bootstrap, из фреймворка подключалась только сетка, чтобы избежать избыточности кода.
Вёрстка кросс-браузерная - правильно работает во всех современных браузерах. Полностью адаптивная и валидная, с применением семантических тегов.
Интерактив
В процессе работы реализованы простые интерактивные элементы: формы заказа; постраничная навигация; кнопка возврата к верху страницы; ссылки и кнопки.
Также реализованы спойлеры (аккордеоны) и калькулятор расчёта полиса ОСАГО.
Анимация
На сайте сделаны простые, плавные анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.
Также присутствуют плавные раскрытия при отработке спойлеров и плавные изменения цветов элементов карточек при наведении на них.
Результат
- Посмотреть работу сайта: перейти
Затрачено времени:
6 дней
Бюджет проекта:
Конфиденциально