Лучшие landing page: экспертная выборка. Какой конструктор лендингов выбрать

Большое количество сайтов, которые находятся в рунете, очень однообразны, а всегда необходимо создавать что-то новое, необычное, привлекающее внимание. На этот раз я решил написать статью не просто об очередном эффекте на сайте, а показать как данные эффекты можно объединить в рамках одного большого проекта. Это очень важно, чтобы Ваш сайт не смотрел как набор бессмысленно появляющейся из разных сторон анимации. Вашему вниманию я хочу представить подборку из 10 лучших интерактивных Landing Page, на которые стоит обратить внимание.

О том с чего начать при изучении создания сайтов, а в частности лендингов, я рассказал в небольшом мини-курсе: .

Итак, вот подборка из 9 лендингов где стоит черпать вдохновение:

Подборка — лучшие интерактивные Landing Page

1 Fixed Group

Отличный вариант сайта, на котором нельзя даже мышку сместить, как сразу увидите искажение блока с контентом в ответ. Сзади медленно "плывет" космос. Переходы также не могут оставить равнодушным, ведь они все происходят с интересным эффектом, и создается впечатление, что каждый из блоков "разрезан" на две половинки.

2 Fubiz

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

3 Vimeo

Этот проект должен быть Вам уже знаком — это профессиональный видео-хостинг. Но данная страница рассказывает о возможности редактирования видео прямо из мобильного устройства. Но я хочу заострить внимание на эффектах, которые происходят при прокрутке страницы. Сначала происходит уменьшение фонового изображения в шапке, а затем появляется в телефон. Очень привлекает внимание, не правда ли?

4 Black Negative

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

5 Super Top Secret

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

6 WE AIN’T PLASTIC

В процессе прокрутки на странице появляются (рисуются) различные иконки и заголовки. Не осознавая начинаешь смотреть на процесс рисования и ждать что же там появится в конце, тем самым читая текст, который нарисовался. Если Вам интересно как же создается данный эффект и Вы хотите создать такой же эффект на своем сайте или лендинге, тогда изучите данные статьи: и .

7 ANTON & IRENE

8 BLITZ

Что привлекло меня данном сайте, так это эффекты при наведении. Хоть сайт и создан в современном стиле минимализма, но здесь очень красиво сочетаются 3D объекты: раскрывающиеся открытки, движение объектов на открытке. Также обратите внимание на

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

Интересные экраны загрузки landing page

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

Гамбургер-меню landing page

Согласно ресурсу Digital Telepathy, многие сервисы предпочитают скрытое меню, чтобы сэкономить место и упростить адаптацию сайтов к мобильным устройствам. Иконки и опции появляются только тогда, когда читатель наводит курсор на определенную область. Такой специфичный дизайн помогает избежать загромождения информацией вашего сайта. В результате, пользователи могут сосредоточиться на заполнении контактной формы, ни на что не отвлекаясь. Эта тенденция позволяет заполнить лендинг пейдж большим количеством контента, и предоставляет потребителям небольшой сюрприз, когда они осознают свои возможности по поиску на сайте.

Мобильная оптимизация landing page

По данным Google, в 10 странах, включая США и Японию, пользователи предпочитают поиск через мобильные устройства. В результате, оптимизация лендинг пейдж под мобильные девайсы остается важной тенденцией наступившего года и в первую очередь проявляется в дизайне. Разработчикам необходимо создавать мобильно-отзывчивые сайты, которые могут подстраиваться под любой экран, будь то смартфон, планшет или что-то еще.

Landing page и двойное подтверждение подписки

Чтобы охватить больше клиентов и собрать максимальное количество информации, создатели лендинг пейдж стараются избегать подписки с одиночным подтверждением. Двойное подтверждение считается более точным способом сбора важной информации. Если потенциальные потребители случайно подписываются на почтовую рассылку, они могут обновлять свои предпочтения при помощи этого инструмента. Многие организации создают лендинг пейдж, чтобы в короткие сроки получить важную информацию о клиентах и их интересах. Каждый год у сайтов появляются новые функции, которые облегчают этот процесс. В 2016 году контент-менеджер компании Lander Йен Пабло Кастро советует сосредоточить внимание на мобильной оптимизации, использовать в дизайне сайтов такой элемент, как скрытое меню и предложить своим клиентам двойное подтверждение подписки. Все эти инструменты помогут привлечь аудиторию и наладить с ней более плотное взаимодействие.

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

Список конструкторов для лендинга

• LPGenetaror на первом месте. За внимательное отношение к контенту. Может быть с редактором и придется повозиться, чтобы понять принцип работы, но вы всегда можете использовать их блог как библиотеку маркетинга. LPGenerator публикует по несколько статей в день. Как правило, переводы и выжимки зарубежных источников.

Что касается работы с конструктором, например, выбор шаблона для лендинга - предоставляется более 100 вариантов, плюс десятки с продвинутым дизайном. Но не увлекайтесь выбором внешнего вида сайта - паралич анализа еще никто не отменял (более подробно об этом читайте )

• LPTREND. Сравнение четырех сервисов показало, что LPTREND простой. Редактор понятен пользователям с любым уровнем знаний.
• LPmotor. Блочная система шаблонов этого сервиса может съесть час времени, прежде чем вы ее поймете (Информация из первых уст. С нашей стороны, этот конструктор тестировал пользователь, далекий от сайтостроения - студентка гуманитарного факультета).

У LPmotor есть один необычный плюс - он предоставляет своим клиентам библиотеку готовых картинок и иконок. Так что необходимость искать бесплатные стоки или изображения с высоким разрешением в интернете отпадает.

• PlatformaLP предлагает блочную систему для создания лендинга, как и LPmotor. Сложно сказать, какой из двух лучше. При работе с ним есть возможность одновременно создавать шаблон лендинга и смотреть обучающее видео.

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

• дает свои клиентам до 15 дней бесплатного использования сервиса.
• LPGenerator предлагает 7 дней тестового периода после того, как вы регистрируете новый аккаунт.
• Чтобы протестировать конструктор для создания лендинга LPmotor - придется зарегистрироваться. Открытой информации о пробном периоде нет.
• PlatformaLP доверяет пользователям 14 дней бесплатной работы с конструктором.

Конструктор или агентство?

Если позволяет бюджет, можете заказать одностраничник у веб-студии, но это дорогой вариант. Минимальная цена за минимальное качество - 15 тысяч рублей. Кроме того, работа агентства может занять больше времени, чем вы рассчитывали. Как правило, на один заказ у разработчиков уходит минимум неделя. За неделю вы можете создать неограниченное количество посадочных страниц, воспользовавшись конструктором лендингов. Что лучше - сэкономить, заплатив несколько тысяч рублей за премиум-аккаунт, и самостоятельно сделать несколько одностраничников или ждать неделю, чтобы еще раз объяснять разработчикам, что вы имели в виду под ненавязчивым дизайном и продающим текстом? Да и с конструктором вы не остаетесь одни. Компании дают обучающую информация в блоге, возможность просматривать вебинары и общаться с сотрудниками техподдержки, которые отвечают на любые вопросы по платформе.

Еще один отличный пример геймификации - сайт банка Тинькофф.

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

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

4. Клиент хочет видеть больше, чем читать

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

Часто мы сталкиваемся с тем, что клиенты хотят поместить на landing page все, что только возможно: кейсы, бенефитс, ревью. Не надо так. Это только отпугнет потенциального лида.

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

Еще 3 факта, которые стоит учесть

Трафик

Хорошо, если , но бывает и по-другому. Часто на сайт попадают «заблудшие души», которые видят здесь не то, о чем говорилось в таргетированной рекламе. Так происходит, если Вы заранее не подумали о соответствии текста в объявлении и на сайте.

Есть вероятность, что это было сделано намеренно, но в большинстве случаев такие действия ни к чему не приведут. Нецелевой трафик быстро помашет ручкой и уйдет в закат.

Представьте, что студент-старшекурсник не сдал экзамен, его перевели на контракт, денег нет. И тут он видит Ваше объявление: «Измени свою жизнь к лучшему!» «Почему бы и нет, хуже уже не будет!» - думает он. Как же он удивится, когда, перейдя на страницу, увидит, что изменить жизнь значит записаться на кератиновое выпрямление волос. Как-то неудобно даже…

Так что в первую очередь думайте о целевом трафике.

Подсознание

И снова о психологии. Умение управлять бессознательным - ключ к привлечению клиентов. Нет, не нужно завлекать потенциального лида незаконными методами типа гипноза. Просто учитывайте потребности человеческой натуры при создании landing page.

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

Если Вы создаете сайт знакомств, то не помешает привлечь внимание целевой аудитории с помощью фото модели Victoria’s Secret. Вот пример такого landing page.

Здесь важно не утрировать и не перегибать палку. Не делайте акцент исключительно на «хлебе и зрелищах», выдерживайте пропорцию в ингредиентах, чтобы получилось вкусно и интересно.

Недооценка аудитории

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

Никогда не подсовывайте клиенту среднюю работу, потому что «не было времени», «дизайнер заболел», «у копирайтера пропала кошка». Помните, что результат будут рассматривать под увеличительным стеклом, сравнивать с другими и только потом делать выводы.

9 трендов современного лендинга

Как сделать лендинг пейдж продающим? Следуйте простым правилам.

Тренд 1. Мультилендинг и геотаргетинг

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

Это касается и геотаргетинга. Как-то мы спроектировали посадочную страницу для курсов польского языка в Кракове. У этого сайта меняется подложка в зависимости от страны проживания посетителя.

Так что если Ваш бизнес не имеет границ - этому правилу стоит следовать.

Тренд 2. SMS-информирование

«Здравствуйте! Вы оставили заявку на нашем сайте. Наш оператор скоро Вам перезвонит!» Приблизительно такое сообщение клиент получает после заполнения формы на лендинге. Так Вы фактически поздравляете посетителя с тем, что он стал лидом. Советуем отправлять уведомления и на свой телефон, чтобы было легче держать руку на пульсе и отслеживать конверсию.

Тренд 3. CRM-система для работы с лидами

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

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

Тренд 4. Полезные письма для клиентов

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

Тренд 5. Умный ремаркетинг

Наверное, все уже сталкивались с преследующей онлайн-рекламой. Вот Вы зашли на сайт, возможно, даже просмотрели его, закрыли вкладку и забыли об этой странице. А о Вас не забыли. Теперь, куда бы Вы ни зашли - Facebook, YouTube - баннер лендинга появляется следом. Звучит как синопсис триллера, но на практике такие объявления «подогревают» клиента.

Ремаркетинг нужно проводить с умом. Предложите клиенту выгоду. Он ждет коммерчески ценного предложения. Тогда вместо раздражения Вы вызовите интерес.

Не стоит выдумывать сложные акции. Мы в таком случае используем правило ВДГ - «Всегда Думай Головой». Предложение в первую очередь должно быть логичным.

Тренд 6. Паттерны Z и F

Если просто - это наглядная модель просмотра страницы пользователем. Лендинги читают слева направо и наоборот. Поэтому для такого вида сайтов подходит паттерн Z. От этой модели нужно отталкиваться на этапе и в дальнейшей работе.

Паттерн F подходит для интернет-магазинов. Такие сайты мы читаем строго слева направо. Да, поначалу кажется, что пользователь просматривает все сайты одинаково, но это не так. Все зависит от расположения элементов страницы.

Тренд 7. Интерактив

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

Мы поняли, что этим «чем-то» был интерактив. Тогда было решено добавить блок, где можно самостоятельно рассчитать уровень загрязнения воздуха: заполнить данные о размерах помещения, удаленности жилища от дороги и т. д

Такое взаимодействие с клиентом позволяет добиться лояльности и увеличивает количество лидов.

Тренд 8. Синергия элементов

Звучит как глава учебника по алхимии, но на самом деле «алхимичить» Вам не придется. Термин «синергия» обозначает взаимодействие всех элементов (в нашем случае речь идет о фирменном стиле). Доверие к компании возрастает, если у нее есть логотип. Еще лучше, если Вы обзаведетесь всеми элементами фирменного стиля компании:

• Слоган;
• логотип/товарный знак;
• шрифт;
• цвет.

Допустим, Вы представлены на пяти площадках: у Вас есть landing page, профиль «ВКонтакте», группа в Facebook, канал на YouTube и аккаунт LinkedIn.Брендируйте все эти площадки - и посетитель узнает Вашу компанию с первых секунд.

Используйте дизайн так, чтобы было сразу понятно, о чем эта страница. Проведите эксперимент. Покажите сайт бабушке или ребенку. Если они за 5 секунд поймут, что Вы продаете, то поздравляем, все элементы на месте.

Тренд 9. Персонификация компании

Когда руководитель компании не скрывает лицо, это вызывает доверие. Еще лучше, если он настолько отзывчив, что лично идет на контакт с клиентом. В Uni Consulting такую функцию выполняет наш CEO, Станислав Цыс. и в соцсетях можно найти его обучающие видео, записи лекций и т. д.

Кстати, вот вебинар, где Станислав как раз говорит о трендовых решениях для landing page:

Теперь, когда Вы знаете все о продающем лендинге 2016, задайте себе вопрос: «Каким из этих критериев соответствует мой сайт?» Сколько баллов Вы бы поставили своей странице? Давайте мы поможем определить это с помощью нескольких вопросов.

Тренды продающего лендинга в 2016 году:

1. Пользуетесь ли Вы современными инструментами (мультилендинг и геотаргетинг)?
2. Пробовали ли Вы отправлять клиентам смс-уведомления?
3. Используете ли Вы CRM-систему для работы с лидами?
4. Есть ли у Вас рассылка полезной информации для клиентов?
5. Пользуетесь ли Вы ремаркетингом?
6. По какому паттерну спроектирован Ваш сайт: Z и F?
7. Есть ли на Вашей странице интерактивные блоки?
8. Используете ли Вы элементы фирменного стиля в оформлении своих площадок?

Пытаетесь ли Вы стать ближе к потребителю с помощью персонификации компании?

(голосов 3 , средний: 4,67 из 5)

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

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

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

№1: Четкий и персонализированный призыв к действию

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

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

№2: Анимированные элементы или встроенное видео на заднем плане

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

№3: Респонсивный дизайн

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

Респонсивный дизайн обеспечивает правильное отображение лендинга на всех видах устройств, как показано на изображении выше.

№4: Упрощенная навигация по сайту

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

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

№5: Большие изображения

Вместо того, чтобы размещать у себя на сайте множество мелких картинок, используйте одно большое изображение (hero image). Это поможет улучшить пользовательский опыт.

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

№6: Привлекательный минимализм

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

№7: Элегантный и изысканный внешний вид

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

№8: «Кирпичная кладка» и модульное расположение элементов на странице

Что касается расположения элементов на странице, самыми последними трендами являются:

• Masonry - вывод html-блоков в виде кирпичной кладки;
• Mosaic - тренд, определяющий внешний вид современных браузеров. На странице содержится меню, панель инструментов и строка поиска;
• Модульное расположение элементов, основной принцип которого можно кратко выразить как «от меньшего к большему».

№9: Динамическая персонализация

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

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

№10: «Исчезающий» контент

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

Бонус: Оптимизация дизайна ради увеличения скорости загрузки сайта

Медленно загружающиеся сайты раздражают пользователей. У вас есть всего лишь 5 секунд, чтобы заинтересовать посетителя. Даже 1 секунда промедления может стоить вам конверсии.

Используйте самые новейшие приемы, чтобы своего лендинга. Это так важно, потому что, согласно данным статистики, пользователь покидает сайт, если время его загрузки превышает 4 секунды. Это исследование было проведено в 2014 году, и можно предположить, что этот показатель уменьшился еще сильнее с тех пор.