Немного предисловия

   

Несмотря на то, что наша работа сводится в основном к созданию/продвижению сайтов, каждый ресурс – это нечто уникальное и неповторимое. Мы ищем к каждому клиенту индивидуальный подход, создавая классные и продающие решения, которые работают.

Компания Decor Wood – не стала исключением. Более того, данный проект полюбился всей нашей команде, так как направление работы у фирмы очень интересное и новое. В реализации именно этого проекта сразу чувствуется полная отдача каждого сотрудника Зекслер. В таких случаях и получается классные сайты, которые развиваются и растут. Читайте ниже о том, как создался продающий лендинг!

Четкая постановка задачи –
залог успешной работы

   

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

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

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

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

• Главная картинка;
• Каталог продуктов компании;
• Мотивационный блок, отображающий преимущества продукции;
• Блок с шагами заказа;
• Истории успеха компании;
• Блок с командой;
• Блок с преимуществами компании;
• Блок, отображающий производство стеновых панелей;
• Форма обратной связи;
• Карта с контактными данными;
• Футер.

Разработка прототипов

Когда в команде есть хороший прототипист – это уже гарантия успешного проекта. Нам повезло – у нас есть такой специалист. Не будем сильно перехваливать, лучше подробно расскажем о том, что получилось:

• Шапка сайта – слайдер из фотографий продукции компании, содержащий небольшое описание. Здесь находится меню сайта с анкорноой прокруткой – очень удобно для пользователей, позволяет сразу перейти в нужный раздел, без необходимости долго пролистывать страницу.

   

• Блок «О нас» - небольшое текстовое поле с основной информацией о компании. Справа – фотографии работ фирмы.
• Каталог продуктов – фотографии работ компании, при наведении на которые появляется ховер-описание с основными характеристиками и стоимостью. Такая подача очень удобна – не перегружает пользователей, в то же время, предоставля им необходимые данные. Под каталогом находится кнопка «Смотреть все», при нажатии на которую разворачивается весь каталог продуктов.

   

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

   

• Блок «Наши работы» оформлен в виде слайдера с реальными историями успеха компании. Каждый кейс – это фотография с краткой информацией о работе и комментарий довольного клиента. Данный блок очень важен – он демонстрирует работу пользователям сайта и одновременно показывает отзывы довольных клиентов.
• Блок «Наша команда» в виде слайдер с реальными фотографиями сотрудников компании. Данный блок положительно настраивает потенциальных клиентов, так как людям нравится видеть лица, чтобы знать, с кем предстоит работать. Сразу за данным блоком идет возможность рассчитать стоимость панелей.

   

• Блок с особенностями работ компании в виде коротких мотивационных текстов и картинок в тему каждого мотиватора.
• Блок «Производство» состоит из фотографий каждого этапа работ. При наведении на фото появляется небольшое ховер-описание, которое рассказывает, что именно происходит на данном этапе. Такая подача информации  позволяет клиенту не только наглядно познакомиться с процессом производства, но и вникнуть в детали.

   

• Простая форма обратной связи с минимальным количеством полей. Мы сделали ее персонализированной, что положительно настроить клиента.
• И последний блок «Контакты» с картой, на которой изображен адрес компании. Чуть ниже расположены телефоны и электронный адрес фирмы.

   

Разработка дизайна

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

• Использование «деревянных» блоков сразу дает понять, что деятельность компании направлена на работу с деревом.
• Первый экран лендинга – стильный слайдер с продукцией компании. Каждый слайдер – фотография из портфолио компании с кратким описанием. Время смены слайда достаточное для того, чтобы посетители смогли все детально рассмотреть.
• Над шапкой сайта – анкорное меню, чтобы клиент сразу мог выбрать интересующий его раздел.

   

• Удобный каталог продуман до мелочей – аккуратные блоки, с фотографией продукции и ховер-описанием при наведении. Кликабельные продукты, при нажатии на которых открывается фотография.

   

• Удобная и простая форма обратной связи, с фразами-ловушками побуждает клиента к совершению целевого действия.

   

• Кейсы с историями успеха – простой блок в лаконичном стиле и без лишних деталей не выглядит слишком навязчиво.

   

• Все кнопки имеют подсветку оранжевым цветом – не только стильно, но и привлекает внимание.
• Эффектная галерея из блока производство привлекает внимание клиентов, а ховер-описание при наведении дает разъяснения тому, что изображено на фотографии.
• Удобная карта наглядно демонстрирует расположение компании.

   

Верстка лендинга,
или как оживить макет

   

Именно данный этап наиболее любим нашей командой – ведь он позволяет наконец-то увидеть результат плодотворной работы. Над этим проектом разработчик поработал качественно – сайт был сделан быстро и, что самое главное, хорошо. Расскажу самые важные моменты разработки, а если останутся вопросы – заполняйте форму обратной связи, и мы все-все Вам расскажем.

Итак:

• Лендинг был разработан на CMS Drupal – отличная, современная система, в которой есть все, чтобы сделать действительно классный сайт.
• Простой и удобный админский интерфейс – не нужно каких-то особых знаний, чтобы наполнять сайт контентом.
• Использование анкорного меню – очень удобная функция, которая экономит массу времени пользователя.
• Использование ховер-описаний в блоках «Производство» и «Каталог продукции».
• Использование CSS анимации.

Результат работы

   

Мы сделали лендинг, который продает. Яркий, стильный, необычный – вот как можно его описать. Результатом работы заказчик остался доволен – для нас это самое главное.