Образцовые лендинги. Наш топ-50
Article title
16 мая 2019

Образцовые лендинги. Наш топ-50
~25 минут на чтение

Что такое лендинг

Лендинг (англ. Landing page, «лендинг пейдж») — это посадочная страница для сбора контактов посетителей или продажи товара. Как правило, это одностраничный сайт, на котором кратко и емко представлена информация об услуге или товаре, что позволяет повысить эффективность рекламы.

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

Лучшие образцы лендинг пейдж

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

1. Centros

Лендинг компании Raleigh — мини-путешествие на инновационном велосипеде Centros. При скролле пользователь словно совершает поездку на разработке компании и в деталях может ознакомиться с ее преимуществами.

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

2. Maslo

Промо-страница Maslo презентует преимущества приложения — платформы для вычисления эмоционального интеллекта. Hey, I’m maslo — с первого экрана тезисы ненавязчиво знакомят пользователя с разработкой. Текста минимум, однако каждое предложение понятно и лаконично описывает характеристики разработки. Сместить навигационное меню вниз — нетривиальное решение: экраны можно листать, как страницы издания.

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

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

4. Userbot

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

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

5. Miro

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

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

7. Airbnb

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

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

8. Balsoy

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

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

Интерфейс приложения показан полно и развернуто: дизайнеры постарались, чтобы внимание пользователя удерживалось на протяжении всего просмотра. Контрастные экраны использованы уместно: только для того, чтобы показать фоновые решения приложения.
На странице кафе Catch fish and chips все просто и со вкусом. Динамичный слоган, постепенно заполняющийся водой, — нестандартное решение для индикатора загрузки.

При скролле появляется анимация из серий фотографий — любопытный ход, чтобы удержать внимание и показать процесс приготовления блюд в кафе. В хедере страницы размещены кнопки «Меню» и «Контакты»: ненавязчивое побуждение изучить позиции и забронировать столик.
Feel the taste of emotions («Попробуйте эмоции на вкус») — с первых секунд страничка азиатского ресторана Spisy no spisy побуждает посетить заведение. Забронировать столик можно, не покидая главный экран — кнопка CTA открывает форму заявки, где удобно зарезервировать место на конкретную дату.

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

12. Toggl

Страница сервиса для планирования внутренних процессов команды Toggl привлекает внимание оригинальным цветовым решением. Проработанные анимированные персонажи здорово передают смысл тезисов, описывающих продукт. Фантазийное и нестандартное решение — дизайнерская фишка.
Дизайн, тона и типографика. Страница профессионального сообщества дизайнеров Squarespace / Circle — ода минимализму.

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

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

15. Not pot

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

Элементы в стиле pop-art, интересная анимация и понятный интерфейс — изучать страницу приятно.
Промо-сайт Australian Emu презентует лимитированную золотую монету от компании Metal Market Europe. Цветовое решение — лаконичное, интерфейс — плавный и интуитивный. При скролле движущаяся монета управляет вниманием, а продуманные тезисы помогают изучить все характеристики продукта.

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

17. RBK Money

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

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

18. MNFST

Промо-страница MNFST знакомит с приложением для монетизации постов в соцсетях. Тезисы, визуальные приемы и анимация показывают результат использования сервиса. Так, mock-up c видео на главном экране объясняет, как работает сервис: размещая баннер известного бренда на фото, пользователь может получить деньги.

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

20. Fontface

Fontface — расширение для браузера, которое позволяет просматривать и добавлять в закладки любые шрифты. Управление вниманием реализовано отлично. Экран двигается плавно, меняет форму, на нем появляется лупа: при скролле пользователь может подробно ознакомиться, как работает расширение. Логичное завершение страницы — предложение установить расширение.

21. Revolut

Лендинг приложения Revolut предлагает переводить деньги за границу без комиссий. Призыв к действию размещен на первом экране страницы: выглядит гармонично, побуждает ненавязчиво. Анимация с меняющимися экранами в деталях показывает преимущества приложения. Дизайн — простой и лаконичный, интерфейс — понятный и чистый: оба работают на репутацию ресурса и оставляют приятное впечатление от использования.
ActiveCollab — программа для управления проектами. Изучать характеристики продукта легко на протяжении всего скролла. Первый экран дополнен 3D-анимацией, демонстрирующей преимущества использования ПО: все персонажи заняты своим делом, а работа происходит одновременно. Анимированные иконки и текстовые тезисы помогают понять философию платформы. Пример чистого и понятного UI-дизайна.
Страница Dental Loupes демонстрирует преимущества инновационной разработки — очков для стоматологов. При загрузке страницы использован зрелищный анимационный эффект: очки вращаются на 180°, увеличиваются и уменьшаются. Можно рассмотреть разработку в деталях и с разных ракурсов.

На первом экране крупным планом — 3D-модель, далее при скролле — CTA «Заказать бесплатную демонстрацию очков». В завершение — отзывы и оценки покупателей. Слева — ключевая особенность страницы — бот-консультант в необычном исполнении. С его помощью можно задать вопрос напрямую или изучить часто задаваемые вопросы.

24. Unaweel

Лендинг Unaweel демонстрирует характеристики самокатного колеса с рулевым управлением для инвалидных колясок.

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

25. Dipsea

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

Еще одна особенность страницы — удобная реализация листания и увеличения изображений. Есть 3D-рендер — можно покрутить модель со всех сторон, посмотреть различные варианты дисков, цвета кузова и салона.
Хорошая работа с типографикой, эффектные slowmotion-видео, крупные фотографии с детализацией модели велосипеда целиком и его отдельных частей. Подробная информация об особенностях велосипеда открывается прямо на странице. Реализована эффектно — с помощью выезжающих справа блоков. Это отличный пример непрерывного взаимодействия.
Это продающая страница узкоспециализированного товара — термальной воды для малышей. Лаконичная, с понятными и убедительными тезисами, а также притягательной анимацией. Простой, но «говорящий» продукт.

29. Lobster

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

30. Flixxo

Промо-страница Flixxo знакомит с приложением сообщества по зарабатыванию токенов. Ховер, который следует за курсором мыши, — стандартное решение в контрастном исполнении: на темном фоне экрана смотрится выигрышно. Цвета, масштаб изображений, проработанные иконки — получилось интересно и привлекательно.
Так выглядит подборка 30-ти современных лендингов, которые совмещают в себе тренды дизайна и маркетинга. Мы в Uplab стараемся быть в курсе нововведений и учитывать примеры прошлых лет — и предлагаем попробовать практику вам.
Рассчитать стоимость разработки лендинга
Получите бесплатную консультацию по стоимости разработки лендинга.
Оцените наш топ-20 посадочных страниц за 2016 год, которые отличают побуждающие CTA и убедительная подача информации.
Страница вакансий «Альфа-банка» рассказывает целую историю. Посетитель сайта может не только посмотреть вакансии, но и оценить возможности карьерного роста.
Основные конверсионные кнопки представлены в шапке и нижней части сайта. Первая — «Отправить резюме», вторая — «Все вакансии». Обе ведут на соответствующие страницы сайта «Альфа-Банка».
Сайт продает двухколесные скейтборды. На главном экране — слайдер с ключевыми преимуществами магазина c кнопкой CTA в центре. Контакты магазина встречаются дважды — вверху и внизу страницы, а также дублируются под «гамбургером». Они не всегда на виду, но всегда рядом — лендинг довольно короткий. Удобно, что на сайте указаны альтернативные способы связи — Viber и WhatsApp.
Сайт-презентация нового смартфона Fly Tornado раскрывает основные функции телефона. Лендинг имеет минималистичный дизайн, нет ничего лишнего. Конверсионная кнопка «Купить», представленная в шапке, направляет посетителя на сайт производителя в карточку товара. Шапка сайта, а вместе с ней и кнопка «Купить», двигается при прокручивании страницы.
Лендинг с простым дизайном и минимумом текстовой информации. Заманивает привлекательным оффером — гарантией максимально низкой цены. Формы обратной связи «ловят» пользователей на каждом экране, предлагая оставить заявку на остекление и заказать выезд специалиста. Преимущества утепленного остекления перед холодным продемонстрированы c помощью инфографики.

5. Dinero

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

6. EnjoyMe

Интригующий лендинг. На первой странице практически нет информации — встречает коробка с подписью «Эмоции в кубе». Отличный способ удержать внимание пользователя. Кнопка CTA — подписка на один из трех тарифов посылки. Весь контент подан таким образом, что посетитель с наибольшей вероятностью доберется до нее.

7. Bork

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

10. Clubium

Digital-агентство, занимающееся продвижением в Instagram, встречает потенциальных заказчиков сильным оффером — «Горячие клиенты с первого дня продвижения». Простая инфографика показывает продажи и преимущества продвижения в социальной сети.
Первый экран лаконичный, но при этом очень информативный. Посетителя встречает сильный слоган проекта — «Стартапы взлетают здесь». А также короткая видеопрезентация. Преимущества коворкинга дополняют отрисованные иконки.

12. Росстур

Лендинг по продаже туров по Уралу рассчитан на конкретную целевую аудиторию — заядлых путешественников, исследователей, тех, кто предпочитает активный отдых. Подход к оформлению приветственного экрана позволяет «отсеять» тех, кому неинтересна история региона. Текст на первом экране интригует и одновременно с этим дает понять, куда и с какой целью планируется поездка.
У страницы есть «фишка» — по мере продвижения к форме заказа запчасти сыпятся в корзину. Это помогает посетителю понять, какое действие нужно совершить. Конверсионная кнопка находится к самом конце страницы, под формой обратной связи. Поскольку лендинг короткий, ее одной достаточно. Тем не менее форму обратной связи можно вызвать в любой момент, ссылка на нее есть в шапке сайта.
У страницы есть «фишка» — по мере продвижения к форме заказа запчасти сыпятся в корзину. Это помогает посетителю понять, какое действие нужно совершить. Конверсионная кнопка находится к самом конце страницы, под формой обратной связи. Поскольку лендинг короткий, ее одной достаточно. Тем не менее форму обратной связи можно вызвать в любой момент, ссылка на нее есть в шапке сайта.
Промо-страница инвестиционной компании продает вебинар об инвестировании. Тема вебинара, указанная на главном экране, интригует пользователей. Многие захотят узнать, как купить недвижимость за 1% от ее реальной цены. Лендинг подробно рассказывает, какую практическую выгоду можно получить от вебинара.
Лендинг, предлагающий услуги копирайтинга. Слайдер выполнен в винтажном стиле. На странице представлена вся информация, необходимая для принятия решения о сотрудничестве — подробное описание услуг, цены, примеры работ, отзывы клиентов. Конверсионная форма обратной связи встречается на странице дважды. Предложение выполнить бесплатный анализ контента вызывает доверие и стимулирует отправить заявку.

17. Fuelfree

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

18. Lingualeo

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

19. Binn

Лендинг презентует предложение по поддержке сайтов от агентства Binn. Первый экран встречает тремя вопросами, которые помогают определиться, что делать дальше. По клику на один из них потенциальный клиент переходит на блок с ответами. После описания преимуществ сотрудничества на странице появляются пакеты услуг компании. Каждый блок имеет конверсионную кнопку.
Pimp Your Eyes нестандартно подошли к оформлению страницы. Контент представлен «вкусно»: необычное описание подхода к работе, красивые фотографии, увлекательные описания очков и цены. Кнопка CTA «Подписаться на рассылку» расположена в середине страницы и сопровождается простой формой: посетителя просят ввести только e-mail.
Каждый лендинг в подборке — синергия продуманного дизайна, понятного интерфейса и грамотной расстановки CTA-элементов. Надеемся, что наша подборка вдохновила вас — создайте свой лендинг, который будет одновременно решать и пользовательские, и коммерческие задачи. Ведь второе прямо вытекает из первого.
Получить бесплатную консультацию по стоимости разработки лендинга

Поделитесь материалом с друзьями и коллегами:

73645
Оцените статью
(4.01)

Комментарии к статье

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Юнит-экономика: как оценить успешность бизнеса

146
13 сентября 2019
Статьи ~ 10 минут на чтение

Как в Uplab разрабатывают сайты. Этап frontend

140
10 сентября 2019
Статьи ~ 20 минут на чтение

Автоматизированное тестирование сайта — за и против. С расчетами

175
06 сентября 2019
Статьи ~ 25 минут на чтение

Обзор конкурсов для разработчиков сайтов: как участвовать и сколько это стоит

201
23 августа 2019
Статьи ~ 15 минут на чтение

Цифровой детокс: что это такое и как его устроить. Советы сотрудников Uplab

1206
16 августа 2019
Статьи ~ 35 минут на чтение

Обработка и защита персональных данных: инструкция для владельцев сайтов

330
08 августа 2019
Статьи ~ 10 минут на чтение

Как написать статью, которую будут читать? Пошаговая инструкция

515
26 июля 2019
Статьи ~ 25 минут на чтение

OKR. Как достигать амбициозных целей

957
28 июня 2019
Статьи ~ 25 минут на чтение

Мобильный UX: как разработать удобный сайт финансовой компании

304
25 июня 2019
Статьи ~ 30 минут на чтение

Микроразметка для «Яндекс» и Google: как настроить и проверить

1195
07 июня 2019
+7 499 653 78 83