Современные, яркие, кайфовые, внезапные — лучшие лендинги Рунета
Мы собрали 35 крутых лендингов, которые вдохновят вас при разработке своего дизайна. Представлены лучшие примеры посадочных страниц именно на русском языке — поскольку зарубежный опыт не всегда применим в Рунете.
Конечно, нет предела совершенству, поэтому мы обратили внимание не только на преимущества, но и на недостатки, которые можно исправить. В некоторых случаях также предложили гипотезы, которые можно проверить A/B-тестированием. И конечно же, мы никак не комментировали содержимое сайтов — качество услуг и товаров, которые на них предлагаются.
Что же делает дизайн посадочной страницы эффективным?
Можно назвать много факторов, но важнее всего соблюдать фундаментальные правила дизайна, сосредоточенного на конверсии:
- Изложение преимуществ должно быть ясным и кратким, чтобы посетители сразу же понимали назначение страницы. Именно по такому принципу построены лучшие продающие одностраничные сайты.
- Страница должна выражать одну-единственную идею с одним главным призывом к действию (Call to action, СТА).
- При создании макета посадочной страницы используйте приемы дизайна для выделения своего СТА (пустое пространство, цвет, контраст, направляющие сигналы).
- При использовании форм для сбора данных старайтесь сбалансировать объем запрошенной информации и ценность предложения, получаемого взамен (отчет, «белая книга» и т. п.)
- Используйте модальные диалоговые окна для выведения вспомогательной информации (условия, политика конфиденциальности, подробная информация о товаре) вместо перенаправления посетителей на другие страницы (что заставит их свернуть с намеченного вами пути конверсии).
Итак, приступаем к разбору примеров действительно хороших посадочных страниц для e-commerce, мобильных продуктов и услуг, финансовых продуктов и страхования, офлайн-услуг, B2B, спецпроектов, анонсов мероприятий, HR-лендингов и вирусных landing pages.
PromoPult — рекламный комплекс для продвижения бизнеса в интернете. Полная автоматизация, готовые чек-листы, точные настройки. Создана для тех, кто хочет высвободить время на действительно серьезную работу.
E-commerce
Влюбиться в продукт по фото
Плюсы. В первую очередь — очень аппетитные картинки с налетом luxury. Большая привлекательная фотография на весь первый экран. Аккуратное и понятное меню над ней. Динамика при проскролле в следующем экране.
Можно улучшить: блок с самыми популярными товарами в каталоге. Наличие самого блока — очень хорошо, но, субъективно, фотографии могли бы быть более аппетитными (например, добавить насыпанные горкой приправы рядом с баночкой и т. д.). Хотя не поспоришь, качество фото и создание ощущения премиальности — на высоте.
Крутой баннер с рисованными продуктами
Плюсы. Яркий и привлекательный первый экран. Рисунки делают сайт выделяющимся на фоне конкурентов. Короткий текст заголовка четко формулирует, что вы можете найти на этой странице.
Второй экран — фотографии готовых наборов. Вероятно, это наиболее предпочтительный порядок для продавца, поэтому сперва размещаются коробки и только затем — фото отдельных фруктов.
Удачная иллюстрация процесса заказа — переписка в мессенджере:
Можно улучшить: серьезных недочетов мы не видим. В качестве эксперимента можно попробовать добавить небольшие описания к экзотическим фруктам (например, при наведении курсора на картинку).
Аппетитно и приятные бонусы
Плюсы: внимание в первом блоке лендинга сразу привлекает громкий заголовок и красивые фотографии готовых наборов. Текст отлично читается, картинки не только сочетаются по цветовой гамме, но и вызывают желание попробовать блюда.
На первой странице есть две СТА-кнопки — «Заказать программу» и «Консультация» (бесплатная).
На втором экране собраны все самые заманчивые для клиента «плюшки» — бесплатная доставка, скидки и специальные предложения. Акцент сделан и на меню от диетолога:
Подробно расписано меню с иллюстрацией блюд, в том числе указаны все цены. Тут же можно все добавить в корзину и быстро оформить заказ на сайте:
И напоследок, для большего убеждения, выставлены скрины реальных отзывов клиентов из социальных сетей. Зачастую в блоке с отзывами можно увидеть просто текст восхищения и подпись: «Егор, город Москва». Невольно появляется чувство, что никакой это не отзыв, а хорошая работа копирайтера.
Можно добавить: более полное описание блюд, например, состав. Для кого-то это имеет критическое значение — в случае пищевых аллергий, например. А звонить и узнавать состав каждого блюда, если клиент планирует питаться этим целыми неделями, не самая лучшая затея. Возможно, стоит добавить блок со специалистами, которые разрабатывают меню — диетологи, повара и консультанты. Фотографии, опыт, образование — все это придаст уверенности, что с клиентом работают профессионалы.
Крутая анимация первого экрана
Плюсы. Прекрасный лендинг с хорошими рисунками. Первый экран интересно ведет себя при проскролле.
Все продукты (их четыре) расположены на втором экране:
Процесс использования глюкометра наглядно показан в картинках, выполненных в стилистике сайта:
Что можно улучшить: на лендингах пользователи привыкли видеть навигационную панель на первом экране. Поскольку лендинг не длинный, без этого, конечно, можно обойтись, но все же лучше не отказываться от привычных элементов для такого типа страниц.
Сильная мотивация
Плюсы: на главной странице лендинга покупателя встречает заманчивое колесо фортуны. Золотистые оттенки привлекают внимание, а крутые призы не дают потенциальным клиентам интернет-магазина возможности уйти со страницы и не посмотреть, что же нужно сделать, чтобы стать счастливым обладателем нового авто. Отличный маркетинг и привлекательный лендинг вместе работают на увеличение вовлеченности и продаж.
Лендинг интернет-магазина по продаже косметики выделяется стильным и лёгким дизайном. Со светлым фоном отлично сочетаются продукты бирюзовых оттенков. Продажи нацелены на женскую ЦА, и сочные изображения точно привлекают внимание. Плюс рядом с каждым продуктом размещена кнопка о дополнительных прокрутках колеса — побуждает купить что-нибудь ещё и испытать удачу.
При добавлении товара в корзину в правом верхнем углу появляется всплывающее окно «Корзина». Дизайн сочетается с общей концепцией сайта: бирюзовая рамка, белый фон и минималистичный шрифт. Видно, что в этом лендинге каждая деталь продумана до мелочей.
Можно улучшить: в целом все круто, красиво и современно.
В модуле таргета PromoPult вы настроите готовую кампанию в myTarget и ВКонтакте за 15 минут. Автогенерация объявлений с креативами, гибкие возможности таргетинга, автоуправление ставками. С простым интерфейсом справится даже новичок в таргетированной рекламе.
Теплый ламповый сайт
Плюсы. Возможно, вы уже видели эту страницу в подборках необычных лендингов. Действительно, она выделяется на общем фоне. При высочайшей конкуренции среди продавцов окон ПВХ крайне сложно сделать сайт, который будут внимательно изучать. А эту страницу действительно интересно рассматривать.
На втором экране сразу видим кнопку «Рассчитать стоимость» (обратная связь).
Кстати, обратите внимание на стиль подачи информации. Несмотря на простоту, здесь можно найти ответы на все вопросы:
Можно улучшить: возможно, это была часть задумки «сделано на коленке», но кнопки (шрифт) выглядят не очень удачно (см. «Рассчитать стоимость» выше). Их можно оформить в стилистике сайта (рисунок ручкой), либо сделать максимально нейтральными.
Еще один минус — текст кнопки «Рассчитать стоимость окон» не оправдывает ожиданий — вместо калькулятора открывается стандартная форма обратной связи.
Мобильные продукты и услуги
Динамично и молодежно
Плюсы: на первом экране сразу размещены кнопки приложения для iOS и Android. Это важно, поскольку все дальнейшее взаимодействие между компанией по аренде электросамокатов и клиентами проходит в мобильном приложении. Дизайн посадочной страницы легкий, современный и молодёжный. Изображения показывают всю суть проекта.
Вторая страница лендинга анимированная и показывает принцип работы кикшеринга через приложение. На темном фоне интересно смотрятся смартфоны с включённым экраном вместо обычных скриншотов. Кнопки для установки приложения повторяются внизу страницы.
При скроллинге следующих четырёх страниц лендинга настроена анимация — смартфон остается неподвижным, меняются цифры слева, текст справа и надписи на экране телефона. Интересный подход, который привлекает внимание.
В лендинге равномерно размещены СТА-кнопки. Это не только ссылки на установку приложения, но и возможность купить подписку или пойти учиться в школу вождения электросамокатов. Отдельный блок — отзывы с фотографиями на самокатах. Комментарии клиентов в виде кратких фраз, например, «Это. Просто. Офигенно.» со ссылкой на социальную сеть пользователя, который оставляет отзыв.
Можно улучшить: все отлично, кратко, ясно и по делу.
Регистрация в 2 строчки
Плюсы. Первый экран может показаться слишком простым — так и есть. И это самый главный плюс лендинга. Присутствует емкое описание назначения приложения, но в первую очередь внимание привлекает форма регистрации. Всего два поля (или один клик на кнопку социальной сети) — и вы в деле. В общем, первый экран абсолютно самодостаточен.
Дизайнеры последовательно используют символ продукта — львенка — на всей странице:
Начать без регистрации
Плюсы. Еще один сервис для изучения языков — но здесь первый экран еще круче!
Чтобы начать, не нужно даже регистрироваться. Отлично сформулирован основной посыл. Все максимально просто и ничего лишнего.
Кстати, кнопка «Начать» есть не только в самом начале, но и внизу короткого лендинга.
Можно улучшить: в целом лендинг прекрасен, но бросилось в глаза, что в довольно важном смысловом блоке шрифт внезапно стал значительно мельче. С экрана 13-дюймового ноутбука читать оказалось не совсем комфортно.
Подписка на интригующую коробку
Плюсы: на главной странице лендинга нас встречает одинокое изображение коробки с надписью «Эмоции в кубе». Однозначно, интригует и вовлекает, побуждает пользователя добраться до конца лендинга и узнать, что же придумали его создатели.
Под каждым блоком размещены кнопки с действием: «Крути вниз», «Какие бренды» и так далее. Цвет фона меняется, нежные оттенки по всему лендингу сочетаются между собой.
Кнопка с призывом к действию и легкие рисованные изображения:
В конце самое важное — «Присоединяйся!» и указаны тарифы с кнопкой «Подписаться»:
Можно улучшить: хоть это и задумывалось как сюрприз, хотелось бы получить хоть немного конкретики. Какое наполнение будет в коробке? Если это безделушки, которые будут валяться в квартире, то многие будут не рады такому подарку, за который ещё и заплатили деньги. В лёгком и нежном оформлении лендинга некрасиво смотря сокращения слова «рублей» до «руб.». Лучше или указать значком ₽, или прописывать полностью — рублей.
Все самое главное в одном экране
Плюсы. Скидка крупно на первом экране. Здесь же — все нужные кнопки («Получить подписку», «Войти», «Магазины приложений») и краткая формулировка сути сервиса. Все по делу.
Привлекательный блок с бестселлерами — мотивация оформить подписку, чтобы получить к ним доступ.
Можно улучшить: call to action (CTA, призыв к действию) остается в хедере сайта при прокрутке, но, возможно, стоит поэкспериментировать с его размерами и/или добавить кнопки подписки после отдельных блоков.
Модуль SEO платформы PromoPult — для тех, кто ценит эффективную работу. Все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов.
Финансовые продукты и страхование
Лаконично и удобно
Плюсы: на первом экране яркое изображение, на чёрном фоне выделяется красная карта, которая помещена в орбиту и синюю планету. Здесь же сразу красная кнопка «Получить карту» и главное преимущество банковского продукта — кредитная карта с целым годом без %. Никаких лишних слов, много свободного пространства, все легко читается и выглядит лаконично. Второстепенные плюсы карты вынесены небольшими блоками, между ними много воздуха и краткое описание в одно предложение или фразу.
Весь лендинг — всего несколько страниц, с которыми пользователь может быстро ознакомиться и принять решение. Отдельно вынесены главные преимущества. Чтобы не утяжелять лендинг текстом, важные моменты спрятаны под ссылками, можно по ним перейти и читать полные условия обслуживания по банковскому продукту.
Схематично показано, как оформить карту — какие шаги нужно выполнить. Есть возможность сделать это через Госуслуги — удобно, предложение сразу выделяется на странице красной кнопкой «Заполнить через Госуслуги». Это важное преимущество для тех, кто не хочет терять своё время и не любит заполнять анкеты.
Можно улучшить: отличный пример короткого лендинга, в котором все на своих местах.
Нескучный банкинг
Плюсы. В верхнем баннере прямо под заголовком размещена кнопка «Открыть счет». При нажатии попадаем на форму оформления заявки (а не на форму обратной связи, как это часто бывает).
Скучный банковский продукт создатели лендинга попытались максимально «оживить». В каждом информационном блоке — 3D-графика в корпоративных цветах. Больше по размеру блок с пометкой «Акция».
В целом это очень компактная посадочная страница (3 экрана). Весь дизайн выдержан в одном стиле.
Можно улучшить: мало call-to-action элементов. Возможно, кнопку «Открыть счет» следовало бы разместить не только в верхнем баннере, но и в середине и конце лендинга и сделать ее более очевидной. Также не хватает формы обратной связи/онлайн консультанта или номера телефона в видимой части экрана.
Быстрая и понятная покупка страховки
www.tinkoffinsurance.ru/autoinsurance
Плюсы. Отличный лендинг на 2 экрана! Первый — сочетание привлекательной картинки (сочные и яркие цвета, которые идеально подходят общему дизайну сайта) и ключевой информации (часто в угоду дизайну первый экран занимает лишь изображение с заголовком). Здесь же сразу видны основные преимущества, дополнительно выделена возможность онлайн-оформления страховки.
На заглавном экране есть СТА-кнопка «Оформить полис», которая ведёт на форму самостоятельного расчёта стоимости страховки.
Расписана вся схема из трёх шагов: заполните параметры – оплатите страховку – получите готовый полис на электронную почту. Все максимально лаконично и сдержанно, белый фон, приятные желтые кнопки, черный шрифт разного размера для обозначения заголовков и основного текста, много воздуха, минимум лишних слов и понятные призывы к действию на кнопках.
Можно улучшить: все на своих местах, отсутствие ненужной информации, отличный дизайн и понятный для клиента интерфейс.
Как настраивать контекст на профессиональном уровне — без агентства? В модуле контекстной рекламы PromoPult — автоматический подбор слов, автоматическая генерация объявлений, «умное» управление ставками. Готовые отраслевые решения. Статистика в реальном времени. Для профессионалов — множество точных настроек.
Офлайн-услуги
Call to Action с размахом
Плюсы. Бейджи с наградами находятся в первом экране, прямо под навигационной панелью. Все очень ярко и стереотипно — логотип с матрешкой, собор Василия Блаженного, ушанка — в общем, то что нужно, чтобы сразу показать, что посетитель на правильной странице. Огромный заголовок не оставляет сомнений.
Шапка сайта перемещается при проскролле, так что навигационная панель и номер телефона (!) всегда доступны.
Блоки с описанием и расписанием экскурсий оформлены очень лаконично, использование графики позволяет сократить количество текста и делает информацию более наглядной:
А еще это лендинг, который можно включать в списки сайтов с самым большим количеством повторений CTA. При этом текст кнопок очень разнообразный: «Хочу на бесплатную экскурсию», «Задать вопрос», «Посмотреть экскурсии», «Записаться прямо сейчас», «Участвовать в акции», «Записаться на бесплатную экскурсию». Список можно продолжать.
Что можно улучшить: бесконечные лендинги могут быть достаточно трудны для восприятия. Примерно после ⅓ лендинга посетитель рискует забыть о том, что он уже увидел. На этой посадочной мы насчитали 17 смысловых блоков.
Милый дизайн и дружелюбная анимация
Плюсы: лендинг минималистичный, используются нежные спокойные тона и интересные изображения животных — все это создает атмосферу уюта и побуждает довериться именно этой гостинице для животных.
Второй блок наполнен информацией о стоимости услуг с подробным описанием, что входит в тот или иной комплекс. При переходе на кнопку «Рассчитать стоимость» выпадает окно, где клиент вводит все данные о своём питомце, указывает количество дней проживания, добавляет дополнительные услуги и сразу же узнаёт итоговую стоимость пребывания в гостинице. Отлично, вероятность возникновения лишних вопросов минимальна, можно отправлять заявку и не тратить время на разговоры. Ведь для многих именно цена и есть решающий фактор.
Лендинг скорее направлен на «горячую аудиторию», которой нужно здесь и сейчас забронировать место для своего питомца и без проблем отправляться в отпуск.
Блок с дополнительными процедурами кратко рассказывает о том, какие услуги доступны для питомцев в гостинице. Плюс — интерактивные элементы, все поэтапно подсвечивается при наведении курсора мышки, и по пунктирной линии перемещается небольшой кружок, побуждая дочитать текст до конца.
В лендинге есть несколько СТА-кнопок, при помощи которых получится быстро забронировать место в гостинице. И все это сопровождается милыми фото питомцев:
Можно улучшить. Для многих очень волнительно и тревожно оставлять своих животных в незнакомом месте на длительный срок. На сайте не хватает реальных фото и видео с места событий — как ухаживают за животными, проводят процедуры или кормят. Неплохим бонусом было бы загрузить видео одного дня из жизни животных в гостинице или хотя бы сделать обзор территории комплекса с условиями проживания питомцев.
О кейтеринге без лишних вопросов
Плюсы. В верхнем баннере яркое название и сразу форма заявки на расчет банкета. Поскольку в кейтеринге главное место занимает еда, то на протяжении всего лендинга есть сочные картинки с блюдами, закусками, показана идеальная сервировка. В отдельный блок вынесены все форматы выездного обслуживания на любой случай.
При скроллинге сайта в верхнем меню закреплена кнопка «Заполнить бриф», практически через каждый блок встречается CTA, например, «Отправить заявку» и «Отправить запрос».
Блок «Запрос меню» представляет собой не просто форму заявки с контактами, пользователь сразу же прописывает все важные моменты, которые потом не придется перечислять по телефону — количество персон, формат мероприятия и т. п.
Продуманы приятные бонусы для клиентов:
Можно улучшить: практически весь лендинг идет на белом фоне, а по центру — большой блок с картинками блюд. Они находят друг на друга, нет разделения белым фоном, сливаются между собой. Шрифт текста на некоторых блоках не сочетается с фоновым изображением или сливается с картинкой.
В трех блоках очень много текста сплошной простыней, которые вряд ли кто-то станет читать. Эти блоки визуально переполнены лишней информацией и не несут практического значения плюс сразу же выделяются не в лучшую сторону на фоне приятных картинок и кратких УТП по всему лендингу.
Строго и со вкусом
Плюсы. Большинство лендингов салонов красоты наполнены лишь фотографиями работ, на сайтах нет никакой конкретики в ценах, а пестрый фон мешает сконцентрироваться на услуге. Этот пример лендинга — полная противоположность. Все страницы сделаны в черно-белой цветовой гамме, текст не сливается с фоновыми изображениями и хорошо читается. На первой странице сразу же выделяется прорисованный логотип, который сочетается с концепцией всего лендинга.
На первой странице сразу три СТА-кнопки. В дополнение к этому под логотипом бросается в глаза заманчивое предложение — 15% скидка или 30% cashback на выбор.
В блоке с преимуществами вставлены не типичные иллюстрации из конструктора лендингов, а те, которые подходят именно салонам красоты — ножницы и манекены, плюс сохраняется черно-белый стиль. Доверие в преимуществах компании вызывают не просто слова, а цифры и факты.
В середине лендинга еще раз повторяются все предложения со скидками и акциями, чтобы у клиентов было меньше раздумий и все больше желания нажать на кнопки «Онлайн-запись» или «Позвонить»:
Еще ниже добавлен раздел с описанием услуг и подробным прейскурантом. Огромный плюс — указаны точные цифры и нет размытых цен, например, от 1000 рублей.
После прайса показаны примеры работ и отдельный блок выделен для описания квалификации сотрудников салона: стаж работы, образование, курсы, специализация. У всех работников есть фотографии.
Можно улучшить: проработать блок с фотографиями работ. В разделе «Уход за лицом» собраны просто стоковые изображения, которые никак не отвечают запросу потенциального клиента (например, интерьер салона или цветы). Появляется чувство, что фото добавили просто так, чтобы были.
Связь
Просто как в интернет-магазине
moskva.mts.ru/personal/mobilnaya-svyaz/mobilniy-internet/podklyuchit
Плюсы. Все коротко и по делу. Посадочная страница не перегружена, много воздуха, вся информация быстро считывается.
Максимально просто и понятно оформлен блок допродажи:
Обратите внимание, USSD запросы для подключения дополнительного трафика не спрятаны в «Подробнее», а сразу видны в основном блоке. Быстрые ответы на вопросы: «что я получу», «сколько это будет стоить», «как мне это сделать».
Можно улучшить: все очень хорошо, но если уж искать способы улучшения — возможно, использовать фотографии, менее похожие на стандартные стоковые (см. первый скриншот).
Экспериментальный минимализм
Плюсы. Очень необычный лендинг. Один экран, все что мы видим — 10 ссылок слева (четыре самые важные выделены более крупным шрифтом) и большой голубой баннер справа с выбором скорости интернета. CTA-кнопки выделены контрастными цветами. Вот такой смелый минимализм и постмодернизм в действии.
Можно улучшить: не надо ничего улучшать. Идеальный экспериментальный лендинг.
Спецпроекты
Брендированный дайджест
Плюсы. Спецпроекты выпускают по какому-то случаю и с конкретной целью. В этом примере онлайн-школа создала лендинг «Первый дайджест образования». Главная страница яркая, современная, черно-белые оттенки слегка разбавлены яркими акцентами. Все просто, коротко и по делу.
Дайджест направлен на повышение узнаваемости компании, привлекает целевую аудиторию и увеличивает охват потенциальных учеников. Здесь нет прямого намерения что-либо монетизировать. Задача проекта — собрать в одном месте полезную и интересную информацию о трендах в EdTech. Лендинг сопровождается комментариями экспертов, полезными материалами.
В некоторых блоках оставлены ссылки на бесплатные методички, подкасты, чек-листы и другие полезные документы. И вот здесь ЦА попадает уже на главный сайт онлайн-школы, где, возможно, захочет приобрести курс или другой образовательный продукт.
Лендинг не перегружен информацией, фон в основном чёрный или белый, остается много свободного пространства на страницах, информацию легко читать и воспринимать.
Можно улучшить: если нет цели продать, то и улучшать ничего не нужно. Главная задача спецпроекта — создать привлекательный имидж компании как профессионалов на рынке онлайн-образования. С этим лендинг отлично справляется. В одном месте собрано много полезной информации и комментарии экспертов, у которых есть чему поучиться.
Красивое путешествие
www.visit-rogaska-slatina.si/ru
Плюсы. Фишка сайта — красивое фоновое видео. Здесь живые фотографии и анимированные элементы.
Можно улучшить: стоит поработать над шрифтами и дизайном кнопок — они кажутся устаревшими. Некоторые фото дублируются на разных услугах.
Профессиональные инструменты PromoPult: быстрее, чем руками, дешевле, чем у других, бесплатные опции.Съем позиций, кластеризация запросов, парсер Wordstat, сбор поисковых подсказок, сбор фраз ассоциаций, парсер мета-тегов и заголовков, анализ индексации страниц, чек-лист оптимизации видео, генератор из YML, парсер ИКС Яндекса (бесплатно).
Сайты B2B
Кнопка на каждом экране
Плюсы. Сайт 100% заточен под продажи. В первом же экране — форма заявки. Затем кнопка с призывом к действию «Попробовать бесплатно» появляется после каждого блока (1 раз на каждый экран).
Сам продукт продемонстрирован очень подробно, много анимированных элементов, которые показывают, как именно пользователь сможет работать с сервисом.
Очень хороший прием — блок «Зачем Мегаплан руководителю и сотруднику». В зависимости от того, кого вы выбираете, вы видите конкретный набор преимуществ, маркированный иконками.
Можно улучшить: лендинг кажется очень длинным (14 смысловых блоков), при этом нет меню, с помощью которого можно было бы перейти к конкретному разделу.
Уникальные иллюстрации под конкретный проект
Плюсы: лендинг создан точно под проект. Организация занимается хранением документов и архивными услугами. Главный экран динамический, меняются услуги и изображения, плюс есть интерактив, который показывает рабочий процесс. Фишка лендинга — уникальные иллюстрации, которые сопровождают пользователя практически на всех страницах.
Ещё один вариант первого экрана — добавляются комментарии в бабле, на диаграмме поэтапно прорисовывается график:
Иллюстрации лендинга специально отрисованы для проекта, выполнены в едином стиле и одной цветовой гамме:
Под каждый вид услуг создана отдельная страница, чтобы не перегружать основной лендинг. Изображения визуализируют названия архивных услуг.
Можно улучшить: в мобильной версии сайта картинки не оживают и не окрашиваются в другие цвета, выглядит уже не так эффектно. На странице с речью генерального директора есть цифры и факты, но они некрасиво заходят на пиджак мужчины и частично с ним сливаются.
Веселые картинки для B2B
Плюсы. «Мультяшный» дизайн посадочной страницы выделяется на фоне многочисленных сайтов других разработчиков.
Яркие иллюстрации сочетаются с лаконичным текстом на белом фоне, по итогу нет ощущения перегруженности.
Хорошо смотрится параллакс: при прокручивании страницы постепенно появляется новый текст и изображения, создается ощущение истории, которую рассказывают здесь и сейчас.
Можно улучшить: проблема большинства страниц с параллаксом — медленная загрузка, и этот лендинг не исключение. И возможно, стоило бы более плотно поработать с текстовой составляющей. К сожалению, это — один из многих примеров, когда можно просто убрать название компании и разместить описание под любым другим бренднеймом.
Анонсы мероприятий и курсов
Точечная анимация и живые отзывы
Плюсы. Стильный лендинг с ненавязчивой анимацией на отдельных графических элементах. Страница выдержана в цветовой гамме грузинского флага (красные акценты на белом фоне) плюс черный текст и графика, фотографии в теплых тонах.
Нет больших полотен текста, вся информация разбита на мелкие блоки, между которыми достаточно воздуха.
Отличный прием — тексты от первого лица:
На этом лендинге удачно организован блок с отзывами-скриншотами из мессенджеров. Такой формат может вызывать больше доверия (и привлекать больше внимания), чем привычные текстовые блоки с фотографиями клиентов в окошках-кружочках.
Что можно улучшить: сейчас на посадочной странице слишком мало призывов к действию (call to action). Кнопка «Записаться» есть только в шапке сайта, при этом она не очень заметна. Стоило бы попробовать добавить более очевидные и крупные кнопки после отдельных блоков и повторить CTA несколько раз.
А вот в шапку можно добавить номер телефона и email (сейчас они в самом низу лендинга, там же и кнопки социальных сетей).
Прицел на молодёжь
Плюсы: лендинг запоминается уже после первого блока. Под названием аккуратно спрятан мат и перечеркнут словом censored — всем очевидно, что там, но всё в рамках цензуры. Лендинг обучающего курса направлен на молодежь. К посетителю обращаются на ты, стиль поддерживают и надписи на CTA-кнопках: «Что по обратной связи» или «Что по практике».
Больше пяти СТА-кнопок равномерно распределены по всей странице и не надоедают, ведь текст на них меняется.
Добавлен блок с примерами обратной связи. Разработчики курса подробно записывают разбор работ учеников на видео. Всегда приятнее получить отзыв с живыми эмоциями, пусть и в записи.
В целом лендинг легкий и ненавязчивый. Фотографии отлично сочетается с дизайн-концепцией, используется единая цветовая гамма и интересные шрифты. Много воздуха и минимум ненужной информации.
Можно улучшить: в целом отличный пример лендинга, но направлен он только на определенную возрастную группу ЦА. Вероятно, создатели курса этого и добивались.
Выглядит дорого и вызывает доверие
skillbox.ru/business-school/mba
Плюсы: лендинг по обучению лидерским качествам с первой страницы выглядит дорого. Для фона используются авторские качественные фотографии, записанные видеообращения преподавателей и студентов, которые уже прошли курс.
Чёрный фон, стандартные белые шрифты — всё это придаёт лендингу серьезности и не отвлекает пользователя от главной цели. СТА-кнопка «Подать заявку» — динамическая в мобильной версии сайта, сопровождает посетителя на всем пути скроллинга. В десктопной версии каждые 1-2 блока повторяются СТА-кнопки с призывом к действию.
Можно улучшить: лендинг длинный, особенно в мобильной версии. Во второй части лендинга начинается много сплошного текста, хочется разбавить его изображениями, чтобы хоть как-то облегчить визуальное восприятие большого потока текстовой информации. Стоимость обучения достаточно высокая (больше миллиона рублей), хотелось бы видеть более развернутую программу курса, пока все выглядит очень поверхностно и не формируется понимание столь высокой цены. Размыто расписан процесс отбора кандидатов на обучение.
Лендинг как авангардное искусство
Плюсы. Это не просто лендинг, а произведение концептуального искусства.
Выглядит достаточно безумно, чтобы посетитель не забыл этот сайт. И сбросил ссылку нескольким друзьям. Учитывая целевую аудиторию — это проектная школа для старшеклассников на базе галереи современного искусства — такое смелое решение кажется очень удачным.
Странички, расположенные каскадом — не отдельные вкладки, они передвигаются при обычном проскролле вниз. Очень интересные ощущения, проверьте сами.
Что можно подсмотреть, вне зависимости от смелости ваших взглядов: короткая форма регистрации, никаких лишних вопросов вроде фамилии, города, возраста и т. д.:
Можно улучшить: все прекрасно, это настоящий концепт-арт. Ну и если включить чууууточку занудства — в форме регистрации к посетителю сперва обращаются на «вы», а потом, в поле о любимых художниках — на «ты». Но это такие мелочи.
Ненавязчивые СТА на каждом шагу
Плюсы: сразу бросается в глаза необезличенный лендинг. На главной странице встречает привлекательная фотография автора курса.
Все блоки оформлены на белом фоне, сочетаются несколько оттенков шрифтов и изображений — голубые и чёрные цвета. Каждый блок ненавязчиво, по делу, сопровождается СТА-кнопками, например, «Выбрать курс» или «Узнать подробнее». Для вовлеченности аудитории эксперт предлагает оформить бесплатный демо-доступ к некоторым онлайн-курсам.
Тарифы вынесены отдельным блоком, каждый сопровождается интересной иллюстрацией под стилистику обучающего курса. Единственное, не хватает информации о стоимости обучения по тому или иному тарифу. При переходе на вкладку «Узнать подробнее» пользователь попадает в личный блог автора курса, а если нажать кнопку «Подписаться» — необходимо зарегистрироваться на сайте. Неудобно, отнимает много времени на поиск самой важной информации.
Можно улучшить: в лендинге не хватило информации о том, какие задачи решает обучение, какие потенциальные возможности открываются у человека после прохождения курса. Слабый оффер, который в мобильной версии ещё и не просматривается полностью. Вместо конкретики и фактов на главную страницу описания курса помещена фраза «и многое другое».
HR-лендинги
Лендинги под набор персонала — особый жанр. Их задача — продать место в компании соискателю. Два примера, как это работает.
Определение ЦА
Плюсы. Агентство позиционирует себя как команду супергероев, так что страница построена в стилистике комиксов:
Яркий лендинг, который на визуальном и текстовом уровне четко определяет ЦА: смелые, творческие, нескучные. Все смысловые блоки на месте: преимущества работы в компании, лидерство на рынке, проекты, команда, вакансии, фотографии офисной и около-офисной жизни.
Конкретные вакансии расположены относительно далеко внизу, но к ним можно перейти сразу по кнопке «Хочу в команду!».
Что можно улучшить: флажок «работодатель года» можно попробовать сделать чуть заметнее (но что хорошо — он остается при проскролле страницы). И все-таки поэкспериментировать с дополнительными кнопками перехода к вакансиям.
Живое приглашение
Плюсы: лендинг не перегружен лишней информацией и читается на одном дыхании. Главная особенность — загружены не просто изображения с работниками компании, а их видеосообщения потенциальному будущему коллеге. При наведении курсора на фото появляется подсветка на значке с воспроизведением видео.
Вакансии компании представлены в интересном формате в отдельном блоке лендинга. Подогревают интерес реальные фото сотрудников. Под названием вакансии всего в нескольких предложениях описаны основные обязанности того или иного сотрудника — коротко, легко и предельно ясно.
Все видео записаны в формате коротких сторис. Хватит буквально нескольких минут, чтобы посмотреть все видеообращения. И это не какие-то банальные фразы о том, какая отличная компания, вовремя и много платит и т. п. В основном, сотрудники с юмором рассказывают о смешных или нелепых случаях на рабочем месте.
Окончание лендинга — призыв к действию: «Приглашаем работать на равных!». Справа в цветном прямоугольнике выделены главные преимущества работы в компании. Предлагается заполнить анкету. На удивление в ней не так много информации, на ее заполнение уйдёт совсем мало времени.
Можно улучшить: креативный и живой лендинг, что очень важно для HR. Чувствуется тёплая и доброжелательная атмосфера, ничего улучшать не надо.
Хайповые лендинги
Мемы и шуточки для своих
Плюсы. Страница повышенной виральности. Кто за этим стоит и насколько лендинг помогает продавать — неизвестно, но не включить его в подборку крутых посадочных было бы несправедливо.
Вся страница построена на картинках-мемах и немного упоротых текстах — невозможно оторваться:
Можно улучшить: ничего. Только расскажите нам, какая конверсия у этого лендинга и кто так тщательно охраняет конфиденциальность калининградского автора.
Модный сторителлинг с Зоей
Плюсы: лендинг продаёт курс, который подойдёт всем тем, кто стоит на пороге создания чего-либо нового. И не просто продаёт, а делает это через сторителлинг с персонажем Зоей. На иллюстрациях изображена Зоя, которая сталкивается с такими же проблемами, которые возникают и у потенциальных студентов курса.
Главная концепция лендинга — игровой формат и простые интересные тексты без банальностей. Комикс помогает ЦА спроектировать всю боль на себя. Один из разделов посвящен отзывам о курсе в формате видеозаписи учеников, хорошая идея!
Очень необычные названия тарифов, которые сразу бросаются в глаза. «Попкорн», «Домашка плюс тусовка» и «Все или ничего». С учеником общаются на ты и чувствуется дружественная атмосфера, хочется пойти и записаться на обучение к таким создателям курса.
Можно улучшить: очень длинный лендинг, 20+ страниц, тяжело дочитать всю информацию до конца. С другой стороны, приходится читать, чтобы не упустить что-то важное. И под конец лендинга появляется много сплошного текста — забываешь о первоначальном крутом комиксе с Зоей. Сократить страницы и убрать много слов, оставить больше воздуха и сторителлинга.
Образцово-показательный лендинг
Плюсы. Здесь вы можете найти все обязательные составляющие лендинга (кстати, хорошего лендинга). Но… подвох чувствуется с самого начала.
Все блоки на своих местах, все строго по правилам: маркированные списки, кнопки CTA, иконки, описание процесса, преимущества, отзывы и т. д. И прекрасный ироничный копирайтинг.
Ответ на вопрос, кто за этим стоит — в конце лендинга.
Можно улучшить. Не можно.
Дочитали до конца? Круто!
Поздравляем, теперь вы увидели 35 примеров посадочных страниц с высокой конверсией и просто необычных лендингов.
Самое время подводить итоги. Какие плюсы и минусы нам встречались чаще всего?
Плюсы хороших лендингов
- Лаконичность в тексте и дизайне.
- Стильная анимация.
- Нестоковые фотографии.
- Оригинальные рисунки.
- Человеческий язык, уместный юмор.
- Понятные кнопки CTA, встречающиеся на странице несколько раз.
- Нестандартный подход к стандартной тематике без ущерба содержанию.
- Апелляция к эмоциям.
- Четко обозначенные преимущества, акции, скидки.
- Нешаблонные отзывы.
- Максимально простые формы регистрации.
Минусы ну таких лендингов
- Невнимание к мелочам (огрехи в верстке, отсутствие фавиконов, контраст шрифта и подложки и т. д.).
- Недостаточно CTA.
- Слишком большой объем информации, длинный лендинг.
- Неинтересные и некачественные видео.
#landing #лендинги #лендингпейдж
