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

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

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

Сайт «Дом на Поварской», разработанный в Uplab

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

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

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

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

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

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

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

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

Сайт «СМУ-199», разработанный в Uplab

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы в стиле pop-art, интересная анимация и понятный интерфейс — изучать страницу приятно.

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

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

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

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

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

Промо-страница Flixxo знакомит с приложением сообщества по зарабатыванию токенов. Цвета, масштаб изображений, проработанные иконки — получилось интересно и привлекательно.

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

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

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

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

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

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

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

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

Сайт Pared — это аналог LinkedIn для американских специалистов из ресторанного бизнеса. Работники могут составить здесь своё резюме и найти вакансии. А владельцы бизнеса — схантить хороших работников. Хотя продукт сравнительно оригинальный, рассказ о нём лаконичный и, судя по размещению CTA на первом экране, предполагается, что пользователи будут готовы скачать приложение сразу после входа на сайт.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#разработка сайтов #проектирование #дизайн