Лучшие 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 объекты: раскрывающиеся открытки, движение объектов на открытке. Также обратите внимание на

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

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

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

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)

Продающие сайты. Что это такое? Каждый второй скажет: “Конечно же, это лендинги!”. Они же одностраничники, они же лендинг пэйдж, они же продающие страницы.

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

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

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

Критерии оценки сомнительны

По какому принципу оценивать ? Какие брать за основу? Как составить рейтинг ТОП-10 сайтов?

Где брать сайты на конкурс? Всё это усложняет ситуацию в создании настоящего и честного рейтинга лучших сайтов.

К тому же, мы не знаем сколько продаж компании совершают через подобные сайты. Им же нельзя позвонить и спросить: “А какая у вас ?” или “Сколько Вы получаете заявок из ?”.

Я уверен, никто не ответит на такой вопрос, так как либо никто не считает, либо скажет, что это конфиденциальная информация.

Ага, размечтались!

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

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

2. Мастерская “Dinero”

Это не сайт, это целый фильм об одном “персонаже” - деревянном кошельке. Если бы он стоил 1 000- 2 000 р., то сайт бы провалился.

6. Проект “Большая сушка”

Большинство женщин (их целевая аудитория) слышали о проекте “Бешеная сушка”. Их реклама к запуску заполоняет весь интернет. И это не удивительно, когда инвестируются миллионы на трафик.

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

Проект “Большая сушка”

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

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

7.

Мы сами пользуемся системой взаимоотношений с клиентами Битрикс24. Но так как у нас тема не “ ”, то сайт системы Мегаплан превзошёл все ожидания.

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

CRM “МегаПлан”

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

Кстати! Если Вы хотите использовать в качестве своей CRM-системы, то советую не забыть промо-код “Megastart”. Так Вы получите скидку на первую покупку 10% и 14 дней бесплатного использования.

8. Банк для предпринимателей “Точка”

Ещё один лендинг от банка. Он получает премию за свою оригинальность. Данная страница рассылается своим друзьям в качестве реферальной ссылки.

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

Банк для предпринимателей “Точка”

9. Оснащение тренажерных залов “Goodfit”

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

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

Для полной упаковки не хватает видео-презентации от лица генерального директора. Наверняка он у них в отличной физической форме.

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

Оснащение тренажерных залов “Goodfit”

10. Торговый центр “МЕТРОПОЛИС”

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

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

А значит логично было сделать небольшой дескрипшен (описание в несколько слов о компании), чтобы посетитель сразу знал куда попал и что его ждёт там.

Торговый центр “МЕТРОПОЛИС”

Только Россия!?

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

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

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

Это сайт, состоящий из множества лендингов. Практически многостраничный сайт. Но все-таки лендинг.

https://youtu.be/ClF-txTHGnc

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

Мы, русские, другие. У нас другой тип мышления, так как мы живём в другой стране.

Например, у Американца почти нет опасений в голове, что компания возьмёт деньги и растворится. Так как у них всё защищено на десять рядов, что только один PayPal стоит.

У нас же, в России, этот страх стоит в первых рядах. Поэтому у них на сайте мало убеждающих блоков доверять компании, а у нас их тьма.

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

Лучше наслаждайтесь нашими русскими решениями. Моделируйте наши тексты и блоки. А в зарубежных сайтах просто берите хорошие идеи для дизайна.

Коротко о главном

Теперь, когда Вы просмотрели всех претендентов, я не призываю Вас вслепую на них ориентироваться, но посмотреть лучшие landing page для примера определенно стоит.

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

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

Используйте для этого , например Платформа LP . А уже потом, мы ждём Вас к нам в гости на совместную разработку.

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

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

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

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

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

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

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

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

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

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

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