Мы собрали 35 крутых лендингов, которые вдохновят вас при разработке своего дизайна. Представлены лучшие примеры посадочных страниц именно на русском языке — поскольку зарубежный опыт не всегда применим в Рунете.

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

Что же делает дизайн посадочной страницы эффективным?

Можно назвать много факторов, но важнее всего соблюдать фундаментальные правила дизайна, сосредоточенного на конверсии:

  • Изложение преимуществ должно быть ясным и кратким, чтобы посетители сразу же понимали назначение страницы. Именно по такому принципу построены лучшие продающие одностраничные сайты.
  • Страница должна выражать одну-единственную идею с одним главным призывом к действию (Call to action, СТА).
  • При создании макета посадочной страницы используйте приемы дизайна для выделения своего СТА (пустое пространство, цвет, контраст, направляющие сигналы).
  • При использовании форм для сбора данных старайтесь сбалансировать объем запрошенной информации и ценность предложения, получаемого взамен (отчет, «белая книга» и т.п.)
  • Используйте модальные диалоговые окна для выведения вспомогательной информации (условия, политика конфиденциальности, подробная информация о товаре) вместо перенаправления посетителей на другие страницы (что заставит их свернуть с намеченного вами пути конверсии).

Итак, приступаем к разбору примеров действительно хороших посадочных страниц для E-commerce, мобильных продуктов и услуг, финансовых продуктов и страхования, офлайн-услуг, B2B, спецпроектов, анонсов мероприятий, HR-лендингов и вирусных landing pages.

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

Содержание

E-commerce

Влюбиться в продукт по фото

Крутой баннер с рисованными продуктами

О сервисе доставки продуктовых наборов

Крутая анимация первого экрана

Милые (как котики) тексты

Теплый ламповый сайт

Мобильные продукты и услуги

Отвечает на вопросы

Забавная графика

Регистрация в 2 строчки

Начать без регистрации

Проще некуда

Все самое главное в одном экране

Финансовые продукты и страхование

Просто о сложном продукте

Люди. Люди. Люди.

Продать страховку в два экрана

Офлайн-услуги

Call to Action с размахом

Продать любой ценой

Связь

Просто как в интернет-магазине

Экспериментальный минимализм

Спецпроекты

Красивое путешествие

Виральный контент для сложной тематики

Сайты B2B

Кнопка на каждом экране

Легкий дизайн посадочной страницы для сложного сервиса

Веселые картинки для B2B

Анонсы мероприятий и курсов

Точечная анимация и живые отзывы

Сначала история — потом продажи

Поиграли со шрифтами

Лендинг как авангардное искусство

Новый модный русский дизайн

HR-лендинги

Определение ЦА

Страница одного удачного элемента

Хайповые лендинги

Мемы и шуточки для своих

Шутки шутками — но не забываем про продукт

Образцово-показательный лендинг

Дочитали до конца? Круто!

Плюсы хороших лендингов

Минусы ну таких лендингов


E-commerce

Влюбиться в продукт по фото

kitchenceremony.com

Примеры лучших посадочных страниц в ecommerce

Плюсы. В первую очередь — очень аппетитные картинки с налетом luxury. Большая привлекательная фотография на весь первый экран. Аккуратное и понятное меню над ней. Динамика при проскролле в следующем экране.

35 посадочных страниц: лучшие примеры [и критический разбор]

Можно улучшить: блок с самыми популярными товарами в каталоге. Наличие самого блока — очень хорошо, но, субъективно, фотографии могли бы быть более аппетитными (например, добавить насыпанные горкой приправы рядом с баночкой и т. д.). Хотя не поспоришь, качество фото и создание ощущения премиальности — на высоте.

Примеры лучших посадочных страниц в электронной торговле

Рекомендуем почитать: «ТОП-35 ошибок юзабилити и дизайна сайта»

Крутой баннер с рисованными продуктами

ji-fruits.ru

Примеры лучших посадочных страниц в электронной коммерции

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

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

Примеры лучших посадочных страниц в интернет магазине

Удачная иллюстрация процесса заказа — переписка в мессенджере:

Страница оплаты и доставки - пример

Об организационных моментах доставки мы писали в статье: «Тише едешь — дальше будешь, или кому нужна срочная доставка»

Можно улучшить: серьезных недочетов мы не видим. В качестве эксперимента можно попробовать добавить небольшие описания к экзотическим фруктам (например, при наведении курсора на картинку).

Пример посадочной страницы с товарами

О сервисе доставки продуктовых наборов

chef.yandex

35 посадочных страниц: лучшие примеры [и критический разбор]

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

Уникальные авторские картинки — всегда хорошо:

35 посадочных страниц: лучшие примеры [и критический разбор]

Привлекательные фото готовых блюд и понятно организованное меню (выбор набора «Сбалансированное», «Домашнее» и т. д.).

Примеры красивых лендингов

Можно улучшить: все действительно очень хорошо. Можно поэкспериментировать и перенести блок с описанием схемы работы на первый экран (или снять фоновое видео).

Крутая анимация первого экрана

satellite-express.ru

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

Примеры посадочных страниц и критический разбор

Все продукты (их четыре) расположены на втором экране:

Пример посадочной страницы — продукты

Процесс использования глюкометра наглядно показан в картинках, выполненных в стилистике сайта:

Пример процесса использования продукта на посадочной странице

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

Рекомендуем почитать: «На что обратить внимание при оптимизации главной страницы»

Милые (как котики) тексты

www.kotofabrika.com

Плюсы. Этот сайт выделяется отличным копирайтингом. И если он покажется излишне «ми-ми-ми», то стоит вспомнить, кто является ЦА производителя. А это хозяева котиков, которые покупают для них домики. Достаточно ми-ми-ми?

35 посадочных страниц: лучшие примеры [и критический разбор]

35 посадочных страниц: лучшие примеры [и критический разбор]

Нестандартно подписанный блок для связи с консультантом (а ведь на 99% сайтов они абсолютно шаблонные, хотя кастомизировать их совсем не сложно):

35 посадочных страниц: лучшие примеры [и критический разбор]

И в целом стиль коммуникации очень дружелюбный и расслабленный, при этом покупатель найдет ответы на свои вопросы:

35 посадочных страниц: лучшие примеры [и критический разбор]

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

35 посадочных страниц: лучшие примеры [и критический разбор]

Теплый ламповый сайт

oknaludyam.ru

Пример оригинальной посадочной страницы

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

Необычный лендинг — пример

Во втором окне сразу видим кнопку «Рассчитать стоимость» (обратная связь).

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

35 посадочных страниц: лучшие примеры [и критический разбор]

35 посадочных страниц: лучшие примеры [и критический разбор]

Можно улучшить: возможно, это была часть задумки «сделано на коленке», но кнопки (шрифт) выглядят не очень удачно (см. «Рассчитать стоимость» выше). Их можно оформить в стилистике сайта (рисунок ручкой), либо сделать максимально нейтральными.

35 посадочных страниц: лучшие примеры [и критический разбор]Карта и Васька прекрасны

Еще один минус — текст кнопки «Рассчитать стоимость окон» не оправдывает ожиданий — вместо калькулятора открывается стандартная форма обратной связи.

Инструменты PromoPult для рекламы в соцсетях: все каналы в одном кабинете, минимальные бюджеты, все делают штатные специалисты системы, вам нужно только дать вводные.

Мобильные продукты и услуги

Отвечает на вопросы

lite.youdrive.today

Плюсы. Видео в первом экране привлекает внимание и отлично «продает эмоцию»: электросамокат — это быстро, стильно, радостно, динамично.

Видео на первом экране лендинга - пример

Кнопки приложений для Android и iOS — сразу под видео:

Кнопки приложений для Android и iOS на лендинге

Количество текста сведено к минимуму, вместо повествовательного стиля — короткие ответы по делу:

FAQ на лендинге - пример

Что можно улучшить: поскольку это лендинг для приложения, имело бы смысл разместить ссылки на Google Play и AppStore на странице несколько раз, а не один.

Рекомендуем почитать: «40+ гайдов по работе в PromoPult: привлекаем клиентов без помощи агентств»

Забавная графика

molodost.bz/fact/

Плюсы. Основной плюс — интересный подход к визуализации пути к цели. Стильные анимированные иллюстрации с умеренной иронией.

Пример красивой графики на посадочной странице

Пример наглядной графики на посадочной странице

И вот такой баннер на третьем экране:

Пример оригинальной графики на посадочной странице

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

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

Пример первого экрана посадочной страницы

Решение по оформлению отзывов также кажется не очень удачным. Один отзыв занимает целый экран и… многовато экспрессии:

Примеры отзывов на посадочной странице

Ну и маленькое примечание: стоит следить за скидками. Скидка с 12 900 до 12 990 — так себе бонус.

Примеры скидок на посадочной странице

Рекомендуем почитать: «Чек-лист по оптимизации сайта: юзабилити и коммерческие факторы»

Регистрация в 2 строчки

lingualeo.com

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

35 посадочных страниц: лучшие примеры [и критический разбор]

Дизайнеры последовательно используют символ продукта — львенка — на всей странице:

35 посадочных страниц: лучшие примеры [и критический разбор]

Можно улучшить: стоит присмотреться к блоку с ценами. Из плюсов — наиболее выгодное для продавца предложение расположено посередине и выделено цветом, это хороший прием для «продажи» выгодной цены. А вот скидку хотелось бы показать более привлекательно (вынести стоимость со скидкой выше, дополнительно выделить цветом, зачеркнуть полную цену и т. д.).

35 посадочных страниц: лучшие примеры [и критический разбор]

Начать без регистрации

www.duolingo.com

Плюсы. Еще один сервис для изучения языков — но здесь первый экран еще круче!

Пример посадочной страницы сервиса для изучения языков

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

Кстати, кнопка «Начать» есть не только в самом начале, но и внизу короткого лендинга.

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

Пример посадочной страницы — неудачные шрифты

Проще некуда

https://www.strava.com/

Плюсы. 100% прямолинейность и простота.

Пример простой посадочной страницы

Можно улучшить: 0% для улучшения. Можно включать в список лучших лендингов мира в категории минимализм.

Все самое главное в одном экране

ru.bookmate.com

Плюсы. Скидка крупно на первом экране. Здесь же — все нужные кнопки («Получить подписку», «Войти», «Магазины приложений») и краткая формулировка сути сервиса. Все по делу.

Пример посадочной страницы приложения для чтения

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

Пример посадочной страницы приложения

Можно улучшить: call to action (CTA, призыв к действию) остается в хедере сайта при прокрутке, но, возможно, стоит поэкспериментировать с его размерами и/или добавить кнопки подписки после отдельных блоков.

Пример посадочной страницы приложения для чтения книг

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

Финансовые продукты и страхование

Просто о сложном продукте

rocketbank.ru

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

Пример посадочной страницы банка

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

Пример лендинга с тарифами банка

Люди. Люди. Люди.

www.mtsbank.ru/malomu-biznesu

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

Пример посадочной страницы сотового оператора

Скучный банковский продукт максимально очеловечен. И не только в рамках верхнего баннера (это уже привычный прием). В каждом информационном блоке — живая фотография с эмоцией. На этом фоне тем более ярко выделяется изображение кассы (да еще и с пометкой «Акция»).

Пример посадочной страницы мобильного оператора

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

Можно улучшить: мало call-to-action элементов. Возможно, кнопку «Открыть счет» следовало бы разместить не только в верхнем баннере, но и в середине и конце лендинга и сделать ее более очевидной. Также не хватает формы обратной связи/онлайн консультанта или номера телефона в видимой части экрана (телефон можно найти только рядом с навигацией в футере сайта, и это общий колл-центр банка, без привязки к продукту).

Рекомендуем почитать: «Как установить бесплатный онлайн-консультант на сайт [инструкция PromoPult]»

Продать страховку в два экрана

www.tinkoffinsurance.ru/autoinsurance

Плюсы. Отличный лендинг на 2 экрана! Первый — сочетание привлекательной картинки и ключевой информации (часто в угоду дизайну первый экран занимает лишь изображение с заголовком). Здесь же сразу видны основные преимущества, дополнительно выделена финансовая выгода.

Пример посадочной страницы страхование

И затем — схема из трех шагов:

Пример посадочной страницы в сфере страхования

Два экрана — три СТА (call to action) (Купить полис — Рассчитайте страховку — Позвоните мне). Все максимально лаконично, белый фон, черный шрифт, один цвет для расстановки акцентов, много воздуха, минимум слов, прямолинейный текст на кнопках.

Можно улучшить: пожалуй, все на своих местах. Но если нет предела совершенству — то в первом экране хотелось бы видеть больший контраст между подложкой и графикой/текстом.

Как настраивать контекст на профессиональном уровне — без агентства? В модуле контекстной рекламы PromoPult — автоматический подбор слов, автоматическая генерация объявлений, «умное» управление ставками. Готовые отраслевые решения. Статистика в реальном времени. Для профессионалов — множество точных настроек.

Офлайн-услуги

Call to Action с размахом

moscowfreetour.ru

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

Пример посадочной страницы - туризм

Шапка сайта перемещается при проскролле, так что навигационная панель и номер телефона (!) всегда доступны.

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

Пример посадочной страницы - туристические услуги

Пример посадочной страницы в сфере туризма

А еще это лендинг, который можно включать в списки сайтов с самым большим количеством повторений CTA. При этом текст кнопок очень разнообразный: «Хочу на бесплатную экскурсию», «Задать вопрос», «Посмотреть экскурсии», «Записаться прямо сейчас», «Участвовать в акции», «Записаться на бесплатную экскурсию». Список можно продолжать.

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

Продать любой ценой

qlean.ru

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

Пример посадочной страницы клининговой компании

Предложение «Рассчитать стоимость» и напоминание о скидке остается с вами при прокрутке:

Пример посадочной страницы клининг

Цены в блоке с расценками отображаются сразу с 30% скидкой:

Пример посадочной страницы компании по уборке

… и прежде чем уйти, вы увидите финальное предложение о заказе уборки)

Пример посадочной страницы клининговая сфера

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

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

Пример посадочной страницы клининг

Кажется, можно смело брать в качестве примера лендинга с высокой конверсией.

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

Запускаете рекламу в системе PromoPult? Не уверены, что все делаете правильно? Хотите сделать лучше, но не знаете как? Обращайтесь за помощью к профессионалам системы. Ваш персональный менеджер в системе PromoPult.

Связь

Просто как в интернет-магазине

moskva.mts.ru/personal/mobilnaya-svyaz/mobilniy-internet/podklyuchit

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

Пример посадочной страницы сотового оператора

Максимально просто и понятно оформлен блок допродажи:

Пример посадочной страницы мобильного оператора

Обратите внимание, USSD запросы для подключения дополнительного трафика не спрятаны в «Подробнее», а сразу видны в основном блоке. Быстрые ответы на вопросы: «что я получу», «сколько это будет стоить», «как мне это сделать».

Можно улучшить: все очень хорошо, но если уж искать способы улучшения — возможно, использовать фотографии, менее похожие на стандартные стоковые (см. первый скриншот).

Экспериментальный минимализм

www.yota.ru/#/promo

Плюсы. Очень необычный лендинг. Один экран, все что мы видим — 4 ссылки слева и большой голубой баннер справа из трех слайдов: «Реклама интернета для планшета» — «Реклама скидки 50% за привязку карты» — «Реклама Wi-Fi роутера для YOTA». Вот такой смелый минимализм и постмодернизм в действии.

Пример посадочной страницы связь

Можно улучшить: не надо ничего улучшать. Идеальный экспериментальный лендинг.

Аудит поискового продвижения сайта в системе PromoPult: прогоните сайт по чек-листу, подготовленному профессионалами. Хотите больше информации — закажите аудит. Выполнение всех рекомендаций после аудита дает кратный рост показателей сайта.

Спецпроекты

Красивое путешествие

www.visit-rogaska-slatina.si/ru

Плюсы. Фишка сайта — красивое фоновое видео. Здесь живые фотографии и анимированные элементы.

Пример лендинга туризм

Можно улучшить: стоит поработать над шрифтами и дизайном кнопок — они кажутся устаревшими.

Пример посадочной страницы в сфере туризма

Виральный контент для сложной тематики

changes.docplus.ru

Плюсы. Этот лендинг веселый, виральный, качественный как с визуальной, так и с текстовой стороны.

Пример посадочной страницы спецпроекта

При этом с большинства карточек есть ссылка на основной сайт.

Пример посадочной страницы спецпроекта

И в конце посадочной — промокод на услугу.

Пример посадочной страницы спецпроекта

Можно улучшить: ничего. Только радоваться, восхищаться и делать вовлекающие лендинги для спецпроектов.

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

Съем позиций, кластеризация запросов, парсер Wordstat, сбор поисковых подсказок, сбор фраз ассоциаций, парсер мета-тегов и заголовков, анализ индексации страниц, чек-лист оптимизации видео, генератор из YML, парсер ИКС Яндекса (бесплатно).

Сайты B2B

Кнопка на каждом экране

megaplan.ru/megaplanstart

Плюсы. Сайт 100% заточен под продажи. В первом же экране — форма заявки. Затем кнопка с призывом к действию «Попробовать бесплатно» появляется после каждого блока (1 раз на каждый экран).

Пример посадочной страницы b2b

Пример посадочной страницы в сфере b2b

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

Очень хороший прием — блок «Зачем Мегаплан руководителю и сотруднику». В зависимости от того, кого вы выбираете, вы видите конкретный набор преимуществ, маркированный иконками.

Пример посадочной страницы b2b

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

Легкий дизайн посадочной страницы для сложного сервиса

www.cloudpayments.ru

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

пример лендинга B2b

Кнопка «Подключить» на первом же экране — большой плюс.

Хороший подход к блоку отзывов: крупные фотографии в рост, человеческий язык.

Пример отзывов на лендинге b2b

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

Пример страницы нам доверяют на лендинге b2b

А еще с основного лендинга можно перейти на лендинг 18+… Но мы не можем гарантировать, что среди наших читателей нет 18–, поэтому просто покажем, как организован переход. Любопытно?

Страница с преимуществами на посадочной странице для b2b

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

Веселые картинки для B2B

piratecode.ru

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

Хороший пример страницы для b2b

Яркие иллюстрации сочетаются с лаконичным текстом на белом фоне, по итогу нет ощущения перегруженности.

Хороший пример лендинга для b2b

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

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

Фрагмент посадочной страницы для b2b

Устранить рутину в простановке внешних ссылок можно с помощью модуля «Естественные ссылки» от PromoPult. Мы подберем качественные площадки — и к вам придет заинтересованная аудитория, которая лучше ведет себя на сайте и конвертится в покупателей.

Анонсы мероприятий и курсов

Точечная анимация и живые отзывы

another-georgia.com

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

Пример посадочной страницы - анонсы мероприятий

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

Отличный прием — тексты от первого лица:

Пример лендинга - анонсы мероприятий

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

Пример посадочной страницы - анонсы мероприятий

Что можно улучшить: сейчас на посадочной странице слишком мало призывов к действию (call to action). Кнопка «Записаться» есть только в шапке сайта, при этом она не очень заметна. Стоило бы попробовать добавить более очевидные и крупные кнопки после отдельных блоков и повторить CTA несколько раз.

Пример посадочной страницы - анонсы мероприятий

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

Сначала история — потом продажи

noboring-finance.ru/planerka

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

Пример посадочной страницы - сторителлинг

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

Пример посадочной страницы - анонсы мероприятий

Хороший пример посадочной страницы - анонсы мероприятий

А далее — три истории вот в такой стилистике:

Пример посадочной страницы - анонсы мероприятий

И только после блока классного сторителлинга посетитель видит описание курса

Пример посадочной страницы - курсы

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

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

Поиграли со шрифтами

special.meduza.io/storm/2017/

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

Пример лендинга конференции

И вот образец того, как коротко и понятно сформулировать тематику конференции, показать проблемы и определить ЦА:

Пример посадочной страницы конференции

Для юмора (и котов) тоже осталось немного места:

Пример лендинга конференции

Отличный блок, стимулирующий не откладывать покупку билетов, а заодно помогающий продать запись предыдущей конференции:

Пример лендинга конференции

Что можно улучшить: не надо ничего улучшать. Надо учиться :)

Лендинг как авангардное искусство

kaskadproject.com

Плюсы. Это не просто лендинг, а произведение концептуального искусства.

Пример концептуального лендинга

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

Пример концептуальной посадочной страницы

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

Что можно подсмотреть, вне зависимости от смелости ваших взглядов: короткая форма регистрации, никаких лишних вопросов вроде фамилии, города, возраста и т. д.:

Пример концептуального лендинга

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

Рекомендуем почитать: «Как собирать email посетителей интернет-магазина с помощью pop-up виджетов [пошаговая инструкция]»

Новый модный русский дизайн

rubyrussia.club/ru

Плюсы. Дизайн верхнего баннера — на острие современных модных трендов, образец landing page «made in Russia» (привет единению советских авангардистов и Гоши Рубчинского):

Пример авангардного лендинга

Как и на лендинге Шторма Медузы, описание конференции отлично уместилось в один экран крупным шрифтом. Динамично и на человеческом языке.

Пример авангардного лендинга

Очень компактно — о каждом из спикеров:

Пример авангардного лендингаИ снова котики — да что ж такое…

(кстати, использование строчных букв в именах обращает на себя внимание).

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

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

HR-лендинги

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

Определение ЦА

hr.cpeople.ru

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

Пример посадочной страницы для hr

Пример посадочной страницы для hr

Яркий лендинг, который на визуальном и текстовом уровне четко определяет ЦА: смелые, творческие, нескучные. Все смысловые блоки на месте: преимущества работы в компании, лидерство на рынке, проекты, команда, вакансии, фотографии офисной и около-офисной жизни.

Конкретные вакансии расположены относительно далеко внизу, но к ним можно перейти сразу по кнопке «Хочу в команду!».

Что можно улучшить: флажок «работодатель года» можно попробовать сделать чуть заметнее (но что хорошо — он остается при проскролле страницы). И все-таки поэкспериментировать с дополнительными кнопками перехода к вакансиям.

Страница одного удачного элемента

job.alfabank.ru/moskva/#1520

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

Пример посадочной страницы для hr

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

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

Пример посадочной страницы для hr

Можно улучшить: в 2018 году немного странно видеть примечание «используйте колесо мыши для прокрутки сайта».

Более серьезные проблемы — в области верстки. Если стоит задача сделать сайт с необычным дизайном, стоит обращать внимание на любые мелочи. В этом случае есть целый ряд крупных и мелких недочетов:

  • крошечное окошко с видео.

Пример посадочной страницы для hr

Да, есть опция «развернуть», но само видео настолько плохого качества, что лучше этого не делать. Кроме того, длится оно почти 2 минуты, что очень много для имиджевого ролика (да и сам ролик оставляет желать лучшего).

  • Фирменная цветовая гамма (сочетание белого и красного) сама по себе прекрасна, но не тогда, когда на ярко-красном фоне размещен мелкий белый шрифт:

Пример посадочной страницы для hr

  • Очередной недочет в верстке — темный шрифт попадает на темный фон и становится практически нечитабельным:

35 посадочных страниц: лучшие примеры [и критический разбор]

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

Обновленный модуль SEO: для тех, кто ценит эффективную работу. Все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов.

Хайповые лендинги

Мемы и шуточки для своих

yasdelie.ru

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

Пример хайпового лендинга

Вся страница построена на картинках-мемах и немного упоротых текстах — невозможно оторваться:

Пример хайпового лендинга

Пример хайпового лендинга

Можно улучшить: ничего. Только расскажите нам, какая конверсия у этого лендинга и кто так тщательно охраняет конфиденциальность калининградского автора.

Шутки шутками — но не забываем про продукт

roltrol.by

Плюсы. Такой лендинг о роль-шторах вы еще не видели — а их в Рунете, пожалуй, тысячи.

Пример хайпового лендинга

Пример хайпового лендинга

Несмотря на общий ироничный формат сайта, есть здесь очень крутой блок — описание разных типов рулонных штор. Все очень понятно, примерно так вы объясняли бы принцип устройства шторы своему знакомому (если бы разбирались в этом).

Пример хайпового лендинга

Лендинг не выглядит совсем уж непродающим — регулярно появляются кнопки с призывом к действию «Заказать звонок» или «Перейти на сайт партнера».

Можно улучшить: можно спорить о том, кому какие шутки нравятся… но лендинг действительно хорош.

Образцово-показательный лендинг

24run.ru

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

Пример креативного лендинга

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

Пример креативной посадочной страницы

Ответ на вопрос, кто за этим стоит — в конце лендинга.

Пример креативной посадочной страницы

Можно улучшить. Не можно.

Дочитали до конца? Круто!

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

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

Плюсы хороших лендингов

  1. Лаконичность в тексте и дизайне.
  2. Стильная анимация.
  3. Нестоковые фотографии.
  4. Оригинальные рисунки.
  5. Человеческий язык, уместный юмор.
  6. Понятные кнопки CTA, встречающиеся на странице несколько раз.
  7. Нестандартный подход к стандартной тематике без ущерба содержанию.
  8. Апелляция к эмоциям.
  9. Четко обозначенные преимущества, акции, скидки.
  10. Нешаблонные отзывы.
  11. Максимально простые формы регистрации.

Минусы ну таких лендингов

  1. Невнимание к мелочам (огрехи в верстке, отсутствие фавиконов, контраст шрифта и подложки и т. д.).
  2. Недостаточно CTA.
  3. Слишком большой объем информации, длинный лендинг.
  4. Неинтересные и некачественные видео.

⌃ ↩

35 примеров??? как много текста!!!

0

А будут ли призы для тех, кто дочитает эту статью до конца? :)

0
Надежда Рябикина

Кто прочитает статью до конца получит приз — ценные знания, вдохновение и рекомендации от настоящего профессионала в своем деле, Оли Гарднера:)

0

Спасибо SeoPult за такой интересный и познавательный материал и за ваши труды, статья внушительная конечно..!

0
Надежда Рябикина

Большое спасибо за ваш отзыв!

0

Благодаря вам, познакомился с блогом и творчеством Оли Гарднера, спасибо за переводы его материалов! В английском варианте эту статью я бы точно не осилил!

0
Надежда Рябикина

Всегда рады вдохновить и поделиться интересным материалом с нашими читателями:)

0

Вау! Зрелище не для слабонервных))

0
Виктор Сенин

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

0

Полностью с вами согласна, отлично выразили мою мысль!

0

Статья интересна, но, к сожалению, я по английски не очень понимаю, для меня многое осталось непонятным, потому как комментарии не смогла соотнести с иллюстрациями.

0
Надежда Рябикина

Возможно, я смогу помочь вам разобраться? С радостью разъясню вам те моменты, которые вам интересны:)

0

hdfghd dfgh dfgh dfgh dfghd fghdfghdfg

0

Here are a unit few smart list of journal commenting sites

0

Very good move guys… this can undoubtedly improve the
standard of the web. terribly dangerous news for spammers…

0

Просто титанический труд. Куча примеров, хорошие, доходчивые описания — прочитал на одном дыхании. Полный респект!

0

Спасибо большое! Действительно кладезь полезной информации вдохновения

0

Настоящий сервис собирает информацию, зарегистрированную в файлах «cookies» для целей адаптации функционала сервиса к потребностям пользователей, в целях сбора статистической информации для анализа и улучшения качества работы сервиса, а также в рекламных целях. При использовании данного сервиса, вы подтверждаете свое согласие на использование файлов «cookies». Файлы «cookies» будут сохранены в памяти вашего устройства (ЭВМ). Вы можете изменить настройки файлов «cookies» в вашем браузере, однако такие изменения могут повлиять на функциональность сервиса и ограничить его использование.

Настоящим Я даю свое полное согласие на получение электронных уведомлений (на указанные мой абонентский номер и адрес электронной почты), а также выражаю явное и полное согласие на сбор, хранение, обработку и передачу персональных данных, согласно положениям, изложенным в Политике конфиденциальности, расположенных по адресу: promopult.ru/rules.html?op=private, с которыми я ознакомился и принял.