Как создавать и использовать лендинги: разбор с примерами

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

В этой статье вы узнаете:

01

02

03

07

06

05

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

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

Большинство лендингов создается для продажи определенной категории товаров или услуг, предназначенных для широкой аудитории. Но в реальности возможности использования таких сайтов гораздо шире. Вот основные типы лендингов:

информационные страницы для сбора подписчиков;

•

рекламные сайты для сбора контактов;

•

сайты для продажи одного продукта или товаров одной категории;

•

•

промо-сайты, анонсирующие событие;

•

брендовые страницы для презентации компании или продукта.

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

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

Если у продукта есть несколько несхожих целевых аудиторий, можно разработать для каждой ЦА отдельный лендинг. Даже если ЦА — это одна строго очерченная группа потребителей, то можно создать два лендинга в рамках A/B тестирования, чтобы узнать, какая страница работает эффективнее.

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

Вне зависимости от степени знакомства интернет-пользователя с продуктом, после посещения лендинга он должен совершить действие. Действием может быть покупка, заказ обратного звонка, подписка на e-mail рассылку и т. д. Чтобы лид понял, что требуется сделать, в лендинг добавляют специальные призывы к действию (от англ. «call to action, CTA»). Чаще всего CTA представляет собой кнопку или форму обратной связи.

Кнопки CTA имеют четкое указание, что нужно сделать: «позвоните», «оставьте контакты», «свяжитесь с нами» и т.д. Форма обратной связи, очевидно, — это блок, где лид оставляет свои контактные данные. Объем формы обратной связи в значительной степени зависит от продукта. Однако следует помнить, что чем меньше полей пользователю необходимо заполнить, тем охотнее он это выполнит.

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

Вот классический пример построения лендинга.

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

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

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

4. И снова CTA-кнопка. К концу лендинга пользователь убедился в пользе продукта и готов совершить целевое действие — купить, зарегистрироваться, оставить заявку и т. д.

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

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

Уровень конверсии (conversion rate, CR) — это соотношение между количеством клиентов и количеством посетителей, умноженное на 100%. Например, если при 100 посещений лендинга было получено три клиента, уровень конверсии составляет 3%. Нормальный уровень конверсии — величина, которая зависит от сегмента рынка. Можно ориентироваться на данные, собранные маркетологами WordStream. Согласно их анализу, четверть лендингов имеют уровень конверсии в диапазоне 1,5−3%.

Конечно, CR может быть и выше 10%, но для этого необходимо сочетание многих факторов. В значительной степени имеет значение состояние конкурентной среды и насыщенность рынка. Однако и от качества лендинга зависит успех. Рассмотрим, как повысить конверсию лендинга, используя различные элементы UI.

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

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

проработка дизайна, который будет визуально объединять лендинг от начала до конца;

•

определение темы текстовых блоков на каждом экране;

•

создание общего макета;

•

•

написание всех недостающих текстов.

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

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

функционал (простая страница с CTA-кнопками, или полноценный интернет-магазин с витриной, корзиной и личным кабинетом);

•

вид дизайна (шаблонный или авторский);

•

цель разработки сайта (продажи, сбор контактных данных, регистрация на мероприятие и т. д.);

•

•

наличие контента для будущего сайта;

•

срок разработки (за срочность всегда придется доплатить);

•

исполнитель (фриланс или агентство).

Мы изучили популярные сервисы и биржи фрилансеров. В среднем, цена на лендинг варьируется от 4 000 до 25 000 рублей. Почему такая большая вилка? Большинство фрилансеров не фиксируют цену за услугу, а высчитывают среднюю стоимость лендинга, учитывая число сделанных блоков/экранов, количество знаков текста, количество загруженных на сайт товарных карточек, и другие параметры.

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

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

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

К цифрам. Стоимость разработки лендинга в агентстве обойдется в 60 000−500 000 рублей и даже больше, если проект совершенно уникальный и трудоемкий. Да, ценники агентств в несколько раз выше, чем у фрилансеров, но они оправданы сервисом и прогнозируемым результатом.

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

Рассмотрим примеры лендингов, которые послужат примером при разработке вашего следующего проекта.

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

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

1. Ovechkin-800

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

2. Darko Pasalic

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

3. Rolling Beast

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

4. Notoriousnooch

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

5. Криминальный Омск

«Криминальный Омск» — пиксельный лендинг с отсылкой к интерфейсам программ, которыми пользовались полицейские из боевиков 90-х годов прошлого века. Несмотря на олдскульность, на сайте представлена актуальная статистика по различным правонарушениям, которые произошли в городе за последние 5 лет.

6. Klarna

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

7. Memoapp

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

8. Farago Projects

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

9. Tommaso D'intino

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

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

Еще одна «фишка» лендинга — раздел About. Интересное сочетание разных шрифтов внутри одного текста и залипательный эффект следования за курсором удерживают внимание пользователя и выделяют сайт среди похожих.

10. Non-objective

Оригинальный лендинг креативного агентства. Дизайнеры студии убедительно показывают, что могут предложить множество дизайн-решений в зависимости от задачи. Чтобы доказать это, они разместили на своем сайте более 80-ти вариантов дизайна циферблата часов.

11. Julia Plaza

Сайт видеоредактора и монтажера Julia Plaza представляет собой шоурил, отличительная особенность которого — в том, что пользователь может сам менять порядок воспроизведения фрагментов видео.

12. YUANN

Лендинг-портфолио кинорежиссера из Японии тоже встречает шоурилом, но отличается подачей. Навигация по фрагментам видео стилизована под киноленту, листая которую, пользователь может выбрать интересный ему сюжет. Каждый сюжет сопровождается оригинальной 3D-анимацией, с которой можно взаимодействовать.

13. Akuto Studio

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

14. Cuban’s EDGE

Промо-страница платформы для трейдеров — пример того, как эффектность и информативность могут органично сочетаться и вместе работать на благо продукту. Демонстрация интерфейса достаточно непростого продукта дополнена анимацией стеклянных 3D-моделей, что вместе смотрится целостно и уместно.

15. CYLNDR

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

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

16. Jetson by Mute

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

17. Bankn v2.0

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

18. Mint Ventures

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

19. nuka

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

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

20. Userbot

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

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

21. Airbnb

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

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

22. Squarespace / Circle

Дизайн, тона и типографика. Страница профессионального сообщества дизайнеров Squarespace / Circle — ода минимализму.

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

23. RBK Money

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

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

24. Class Creator

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

25. Sundae

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

26. Smalls

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

27. Roomeze

Roomeze представляет собой идеальный лендинг, который рассказывает о сравнительно новом удобном сервисе (аренда комнат в Нью-Йорке и Нью-Джерси), объясняет, как пользоваться сервисом, акцентирует внимание на преимуществах и предлагает подобрать жилье по заданным параметрам. За считанные минуты посетитель проходит все этапы: от знакомства с продуктом до конверсии в лида.

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

28. Catch fish and chips

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

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

29. Mont Roucous

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

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

30. Petalcard

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

31. Revolut

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

32. Australian Emu

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

33. Yeti Cycles SB150

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

34. Bork

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

35. Smart Fasad

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

36. Коворкинг #tceh

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

37. HelloFresh

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

38. Codecademy

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

39. Patreon

Главная страница сайта Patreon подробно и доходчиво объясняет, в чём преимущества от использования данной социальной платформы. Для наглядности приведено несколько историй успеха.

40. Todoist

Главная страница Todoist содержит минимум информации, необходимой для понимания основной идеи приложения. За счёт использования блоков с убедительным ярким контентом посетитель сайта мгновенно убеждается в преимуществах приложения.

41. Shopify

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

42. Offset

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

43. Labor Sync

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

44. Branch

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

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

45. Promo

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

46. ClaimCompass

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

47. Apple TV+

Промо-кадры новых фильмов и сериалов. Цена подписки в месяц. Ничего лишнего.

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

48. Living with OCD

Яркий имиджевый сайт с трендовыми анимационными переходами привлекает внимание пользователя и погружает в тематику с первого экрана.

49. Neverland.agency

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

50. The Craftsmen Agency

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