ЧТО ТАКОЕ СТРУКТУРА ЦЕЛЕВОЙ СТРАНИЦЫ И КАК НАПИСАТЬ ПРОДАЮЩИЙ ЗАГОЛОВОК

Сколько стоит сделать лендинг

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

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

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

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

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

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

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

Цена лендинга у фрилансеров

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

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

Цена лендинга в агентстве

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

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

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

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

Подвал (footer), завершающий элемент

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

Что можно добавить в footer?

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

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

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

Кстати, по любым вопросам можешь писать нам тут 🙂

Доверительные элементы

В мире онлайн-бизнеса доверие — валюта. Сделай так, чтобы твои заслуги работали, а не просто висели на стене.

Разновидности доверительных элементов

Как правильно их использовать для увеличения доверия

Как оформить первый экран

Первый экран традиционно содержит следующие элементы:

Разберемся более детально.

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

Дескрипт входит в категорию триггеров. Он информирует пользователя о том, куда тот попал и чем занимается компания. Иными словами, это описание деятельности, которое нужно уложить в 2-4, максимум в 6 слов. Чек-лист дескрипта:

Обычно указывается номер телефона, ставится кнопка заказа звонка. Можно указать любой другой способ связи. Где-то хорошо работает whatsapp и viber. Контакты всегда повышают к Вам доверие. У людей складывается ощущение, что они в любой момент (или в рабочее время) могут позвонить, если что не так. И лучше в этот момент им ответить.

Примеры, как это может выглядеть:

Примеры расположения логотипа, дескрипта, телефона и заказа звонка в верхней части первого экрана

Теория хороша, но практика – это главное! Я обещал, что вы получите продающий лендинг по завершении курса. У нас есть сервис для тестирования гипотез и создания лендингов. Есть простой конструктор страниц, который при этом способен на многое.

Давайте сразу закреплять то, что вы узнали!

Заголовок или самая важная часть Landing Page

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

Технология 1. Как сделать продающий заголовок: 4U

Майкл Мастерсон — предприниматель, которой придумал и внедрил данную технику. Он не думал, что она буквально взорвет рынок продаж. С помощью 4U многие предприниматели удваивали, утраивали конверсию сайтов, и увеличивали открываемость писем e-mail рассылок. Они меняли только заголовок! В чем же суть 4U?

Ваше предложение должно быть очевидно полезным для потенциальных клиентов. Люди не любят думать. Напишите, какую выгоду получит человек, если совершит нужное вам действие. Почему только здесь он решит свою проблему, причем решит так, как ему нужно? Продавайте не дрель, а дырку в стене. Помните технику «трех почему»? Единственно, что нужно от вас – дать решение проблемы посетителя. Это 1U.

Urgency (Срочность или Актуальность)

Актуальность есть соответствие заголовка Landing Page и проблемы клиента. Если пользователь что-то начал искать, то, скорее всего, это нужно ему не послезавтра, а сегодня, еще лучше — вчера. Большинству горячих клиентов из рекламного трафика (например, Яндекс Директ, Google Adwords) нужно то, что они ищут, прямо сейчас. Дайте конкретную цифру, когда он получит искомое? Поэтому актуальность и срочность это 2U.

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

Процесс изучения посетителями одностраничника

Если Ваш заголовок похож на тот, который уже где-то видели, вы теряете клиента и снижаете конверсию. С сайта уйдут. Информацию даже изучать не будут. Уникальность обязательна! Все продают красный кирпич, а вы продавайте зеленые, фиолетовые, да хоть с бабочками. Дайте клиентам что-то новое. Покажите технологии или нечто такое, за счет чего вы эффективно решите его проблему, причем путь решения — лучший на рынке. Это 3U.

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

Как грамотно создать заголовок? Обратимся к примерам. Это всегда понятнее.

Пример 1
Исходный заголовок: Дизайн интерьеров.

Добавляем пользу. Зачем дизайн? Сэкономить время и деньги и получить уютное и комфортное жилье:
– Разработаем дизайн интерьера, который сделает дом удобнее.

Добавляем уникальности. Объясним, насколько удобнее:
– Разработаем дизайн интерьера, в который захочется возвращаться.

Добавляем срочность:
– Разработаем дизайн интерьера в который вы захотите возвращаться, сэкономив 30% бюджета за 2 недели.

Ультра-специфичность на закуску. За счет чего:
– Профессионалы индивидуально разработают дизайн интерьера, в который вы захотите возвращаться, сэкономив 30% бюджета за 2 недели.

Сравним:
– Дизайн интерьеров на заказ
– Профессионалы индивидуально разработают дизайн интерьера, в который Вы захотите возвращаться, сэкономив 30% бюджета за 2 недели
Ощутите разницу. Она огромна. Такова же разница в эффективности продаж.

Пример 2
Исходный заголовок: Купить шины.

Польза — зачем они? Безопасно ездить, или гонять, зависит от целевой аудитории:
– Увеличьте безопасность автомобиля на дороге.

Ультра-специфичность. Насколько безопасно:
– Увеличьте безопасность автомобиля на дороге на 35%.

Срочность. Как быстро:
– Увеличьте безопасность автомобиля на дороге на 35% за 1 час.

Уникальность. Каким образом:
– Увеличьте безопасность автомобиля на дороге на 35% за 1 час за счет инновационной резины шин «Шинус».

Сравним:
– Купить самые лучшие шины у нас
– Увеличьте безопасность автомобиля на дороге на 35% за 1 час за счет инновационной резины шин «Шинус»

Работает магически, не правда ли? Остается думать и тренироваться ради результата. Он вам нужен? Используйте все 4U, а не 1U, 2U или 3U. Вы обойдете 97% конкурентов.

Что сделать:Написать 5 заголовков по технике 4U. Добавить в интеллектуальную карту в раздел заголовок.

Технология 2. Как создать продающий заголовок: 3В

Речь идет о том, что можно просто комбинировать выгоду. Формула выглядит примерно так: Выгода + Выгода + Выгода = Успех.

– Зарабатывайте на 30% больше уже через 1 день после аудита сайта профессионалами
– Делайте молочные коктейли за 1 минуту у себя дома с блендером
– Увеличим прибыль вашего сайта в 2 раза с технологией создания заголовков по 4U

Технология 3. Создание заголовка: 2М

Сделай Минимальные усилия – получи Максимальные результаты.

– Как продать автомобиль за 3 часа на 10% выгоднее, не выходя из дома
– Как заработать 1000 рублей лежа на диване за 1 день
– Как увеличить конверсию в 2 раза за 10 минут без вложений

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

Пример, как это может выглядеть:

Пример заголовка на первом экране Landing Page.

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

Что сделать:Перейти в редакторДобавить заголовок на первый экран

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

– Заголовок: Зарабатывайте на 30% больше уже через 1 день после аудита сайта профессионалами.
– Подзаголовок: Все еще не хватает на новый Феррари? Звоните прямо сейчас, и мы увеличим ваши продажи.

Что сделать:Перейти в редакторДобавить подзаголовок на первый экран.

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

Основное в изображениях — качество. Не обратили на него внимание, не устранили шумы, разместили нечеткую картинку, видны пиксели? Конверсия «убита»!

Пример качественных фото и некачественных:

Используем четкие, без шумов, яркие картинки.

Пример качественных и некачественных картинок на одностраничнике

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

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

Каким характеристикам должна отвечать картинка? Она:

Где искать изображения? Рекомендую бесплатные фото отличного качества:

– unsplash.com;
– allthefreestock.com;
– Поиск в Google картинках на английском (переводим с помощью онлайн-переводчика и вперед!).

Пример первого экрана для заголовка и изображения Landing Page.

Что сделать:Перейти в редакторДобавить изображение на фон или рядом

Это очень важный элемент одностраничника. На кнопке пишется призыв к действию. Именно она конвертирует посетителя в следующий шаг воронки. Чек-лист кнопки:

С кнопкой, вроде бы, все просто. На ней размещается тот призыв к действию (CTA), который мы определили ранее из воронки продаж.

Примеры призыва к действию

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

Пример формы в блоге одного из крутых западных маркетологов Нила Пателя:

– Заголовок формы – это CTA, который сделали раньше. Задайте себе вопрос: что я предлагаю посетителю? Ответьте на него и пишите в заголовок формы.
– Подзаголовок формы – это подтверждение выгоды. Почему важно заполнить форму прямо сейчас? Что ценного получит пользователь? Подзаголовок не является обязательным элементом, если все уложилось в заголовок. Лишнее убирайте.
– Поля – это данные которые критически необходимы для связи с потенциальным клиентом. Помните: чем больше полей, тем ниже конверсия. Лучше 1 поле, оптимально сделать 2 поля – e-mail или телефон + имя (как обращаться).
– Поля контактов (телефон/e-mail/skype/профиль в социальных сетях) Что-то одно может быть обязательным к заполнению. Остальные поля должны быть не обязательными.
– Кнопка – призыв к действию. Она покажет, что получит пользователь, если нажмет на нее, что произойдет после нажатия.
– Подпись – последний шанс развеять сомнения пользователя. Что здесь стоит указать? Социальное доказательство (более 3000 подписчиков), сроки (перезвоним через 5 минут), выгоды (бесплатно), важные детали (14 дней бесплатный период).

Пример формы на первом экране Landing Page

Что сделать:Перейти в редакторДобавить кнопку или форму на свой первый экран

С помощью этого раздела вы помогаете понять посетителям, насколько полезен им предлагаемый продукт. Вы определяете аудиторию, с которой работаете, и позволяете пользователю сходу определить, входит ли он в нее. Делается это сразу, в лоб, без объяснений и вычитывания лендинга. Клиентам не нужно разбираться. Экономьте их время, и они скажут вам «спасибо». Это сблизит вас с ними, поднимет продажи.

Для кого подойдет?
– Для владельцев бизнеса
– Для начинающего бизнеса
– Для владельцев веб-студий
Для кого не подойдет?
– Для дачников
– Для домохозяек
– Для автовладельцев

Что сделать:Перейти в редакторДобавить идентификацию на первый экран

Если осталось место на первом экране и вы использовали фоновое изображение вместо картинки, добавьте еще 2-3 выгоды. Они не помешают.

– С нами вы сильно увеличите продажи! (Сильно — это как?).
– С нами вы увеличите продажи в 2 раза! (Это понятно).
– С нами вы увеличите продажи на 30%! (Сразу понятно, на сколько).

Что сделать:Перейти в редакторДобавить еще 2-3 выгоды

Почему должны присутствовать именно эти элементы?

Все это анализ сотни высококонверсионных сайтов и опыт создания собственных лендингов.

– Во-первых, схема гарантировано работает.
– Во-вторых, к такому построению лендингов уже привыкли клиенты, и это их не отпугнет.

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

На следующем шаге мы создадим карточку продукта, и я раскрою разные «фишки» про цены.

Рады помочь, команда Bloxy — простого редактора для быстрого создания сайтов под Ваши задачи (Landing Page, подписные страницы, мероприятия, конференции, вебинары, персональные страницы, маленькие интернет-магазины и т.д.). Попробовать и создать сайт можно бесплатно, а по любым вопросам мы поможем в тех. поддержке.

Для читателей Хабра мы дарим промокод habr6 – удвоит оплаченный период на любом тарифе. Например, оплати 6 месяцев и 6 месяцев получишь в подарок. Действует 1 неделю с момента публикации.

Примеры лендингов

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

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

Оригинальный дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Минималистичный дизайн

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

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

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

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

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

Подробное объяснение

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

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

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

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

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

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

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

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

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

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

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

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

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

Одноэкранный лендинг

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

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

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

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

Лендинг на главной странице сайта / Продуктовая страница

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

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

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

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

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

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

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

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

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

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

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

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

Мобильный лендинг

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

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

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

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

Порядок размещения блоков

Порядок размещения блоков на странице имеет решающее значение для удержания внимания человека и направления его к желаемому действию.

Теперь перейдем к конкретике. Начнем с УТП. О важности заголовков мы говорили в прошлой статье. Вернись к ней, если есть вопросы по теме.

Формы заявки и онлайн-консультант

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

Нет универсальной формулы, сколько нужно форм на странице, часто можно встретить такое распределение:

Также можно использовать кнопки с якорной ссылкой — кликнув по ней, пользователь попадет в раздел с формой заявки.

На кнопках можно использовать призыв к действию:

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

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

Структура лендинга

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

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

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

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

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

Конверсия лендинга и UI

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

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

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

Повышение уровня конверсии через улучшение UI

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

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

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

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

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

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

Уникальное торговое предложение (УТП)

В мире, где каждый день появляются новые предложения, УТП поможет оставаться на плаву и привлекать клиентов.

Как выделить предложение среди конкурентов?