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

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

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

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

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

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

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

Содержание

E-commerce

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

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

О сервисе за 27 секунд

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

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

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

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

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

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

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

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

Проще некуда

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

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

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

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

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

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

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

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

Связь

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

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

Спецпроекты

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

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

Сайты B2B

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

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

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

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

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

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

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

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

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

HR-лендинги

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

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

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

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

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

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

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

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

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


E-commerce

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

kitchenceremony.com

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

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

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

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

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

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

ji-fruits.ru

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

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

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

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

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

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

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

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

О сервисе за 27 секунд

partiyaedi.ru

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

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

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

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

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

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

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

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

satellite-express.ru

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

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

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

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

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

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

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

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

www.kotofabrika.com

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

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

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

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

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

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

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

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

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

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

oknaludyam.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

lite.youdrive.today

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

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

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

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

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

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

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

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

molodost.bz/fact/

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

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

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

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

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

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

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

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

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

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

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

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

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

lingualeo.com

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

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

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

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

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

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

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

www.duolingo.com

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

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

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

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

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

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

Проще некуда

https://www.strava.com/

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

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

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

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

ru.bookmate.com

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

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

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

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

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

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

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

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

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

rocketbank.ru

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

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

Описание тарифов — компактно и наглядно:

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

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

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

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

www.mtsbank.ru/malomu-biznesu

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

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

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

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

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

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

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

www.tinkoffinsurance.ru/autoinsurance

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

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

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

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

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

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

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

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

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

moscowfreetour.ru

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

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

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

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

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

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

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

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

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

qlean.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связь

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

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

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

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

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

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

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

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

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

www.yota.ru/#/promo

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

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

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

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

Спецпроекты

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

getlost-getnatural.ru

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

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

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

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

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

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

И еще один минус — неочевидные иконки.

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

Подсказка: верхняя — войти, нижняя — зарегистрироваться.

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

changes.docplus.ru

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

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

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

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

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

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

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

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

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

Сайты B2B

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

megaplan.ru/megaplanstart

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

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

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

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

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

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

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

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

www.cloudpayments.ru

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

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

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

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

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

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

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

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

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

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

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

piratecode.ru

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

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

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

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

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

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

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

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

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

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

another-georgia.com

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

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

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

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

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

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

35-posadochnyx-stranic-luchshie-primery-77

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

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

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

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

noboring-finance.ru/planerka

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

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

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

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

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

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

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

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

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

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

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

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

special.meduza.io/storm/2017/

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

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

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

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

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

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

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

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

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

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

kaskadproject.com

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

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

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

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

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

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

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

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

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

rubyrussia.club/ru

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

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

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

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

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

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

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

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

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

HR-лендинги

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

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

hr.cpeople.ru

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

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

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

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

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

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

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

job.alfabank.ru/moskva/#1520

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

yasdelie.ru

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

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

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

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

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

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

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

roltrol.by

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

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

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

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

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

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

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

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

24run.ru

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

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

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

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

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

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

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

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

Поздравляем, теперь вы увидели 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
Рекламная система
для продвижения бизнеса
Размещайте рекламу в YouTube, социальных
сетях и статьи на популярных сайтах

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

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