Интерактивный лендинг БЛгрупп

Осенью 2017 года мы столкнулись с очень интересным проектом. К нам обратился представитель компании «БЛгрупп», который был недоволен устаревшим дизайном своего существующего сайта. Компании необходимо было выделится среди конкурентов, соответственно, требовался яркий лендинг, привлекающий внимание. Пожелания заказчика были следующими: лендинг должен производить «wow-эффект», быть интерактивным и выглядеть «живым». Изучив портфолио разных веб-студий, клиент понял, что разработку сайта такого уровня следует доверить именно нам.

Технологии: HTML, CSS, JavaScript.

Посмотреть сайт:  blgroup.by

OOO «БЛгрупп» занимается сбором и утилизацией отработанных масел. Это – серьезная компания, обладающая пятью международными сертификатами и имеющая 625 партнеров по всей Беларуси. Всю эту информацию нужно было отразить на сайте, причем сделать это красиво, интерактивно и интересно.

Целью лендинга было заинтересовать потенциального клиента с первого взгляда, удержать его внимание, побудить заказать услугу по сбору отработанных масел именно в компании «БЛгрупп».

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

Дизайн

Разработку дизайна доверили одному из самых талантливых и креативных дизайнеров нашей компании – Любе. Она тщательно изучила все пожелания заказчика и разработала прототипы. Согласовав их с заказчиком, Люба начала трудится над макетами лендинга. Она прорисовала 8 полноэкранных секций. Однако на этом ее работа не закончилась…

Некоторые секции содержат анимированные изображения. Требовалось сделать плавную заливку белой картинки цветом. Таких картинок у нас три: бочка масла, завод и трактор. Люба прорисовала эти анимации вручную. Каждая из них состоит из 30 картинок, которые верстальщик потом интегрировал на лендинг.

Еще одна анимация –подсолнух, меняющий синий цвет при прокрутке страницы на золотой. Для ее реализации Люба нарисовала 130 изображений!!!

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

Мы использовали современные svg анимации. Некоторые элементы лендинга плавно прорисовываются. Машинка на первом экране при прокрутке приходит в движение и исчезает.

Была реализована интересная анимация с движением Земли. Планета медленно кружится, при наведении подсолнухи начинают плавно появляться по очереди, движение планеты ускоряется. Также, облака приходят в движение, птицы перемещаются по небу.

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

Компания «БЛгрупп» готова приехать в любую точку Беларуси. Дизайнер и верстальщик интересно обыграли этот блок. Информация представлена на белом фоне, в котором есть отверстие в виде карты Беларуси. К нему ведет дорога и интерактивными машинами (двигаются при наведении курсора). Через отверстие видна зеленая трава, также интерактивная.

Компания предоставляет тару различного объема для утилизации масла. На сайте мы представили краткие характеристики каждой бочки. Для наглядности, мы расположили ее возле силуэта человека, ростом 186 см. Так клиент сразу получит полную информацию о необходимой ему таре.

Как правильно утилизировать использованное масло? Есть два варианта: самостоятельно либо обратиться к профессионалам. Эти варианты мы показали на слайдере. Он приводится в действие при помощи перетаскивания курсора. Перетягивая его влево, мы получаем картинку повара, размахивающего руками в ужасе от сопутствующих самостоятельной утилизации проблем, представленных на иконках. Если мы потянем за курсор влево, перед нами появляется довольный повар, обратившийся в компанию «БЛгрупп», и не знающий теперь никаких забот.

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

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

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

Компания обладает пятью международными сертификатами. Все они доступны для просмотра при клике на соответствующие кнопки с названиями.

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

Резюме

Лендинг представляет компанию «БЛгрупп» в Интернете, поддерживает ее положительный и современный имидж, знакомит потенциальных клиентов с услугами по сбору и утилизации отработанных масел. Он выгодно отличается от сайтов конкурентов благодаря оригинальному дизайну и современным технологиям верстки, таким, как параллакс, анимации и ховеры.

Заказчик остался очень доволен результатами сотрудничества и получил приток новых клиентов.