Как создать идеальный лендинг в 2020-м


Содержание материала:

Как создать лендинг в 2020. Пошаговая инструкция из 9 этапов разработки

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

Если вам нужна информация только по сервисам с помощью которых можно сделать landing page, то переходите сразу к этапу 5 — выбор инструмента верстки. Если же вы хотите понять алгоритм создания лендинга от А до Я, то читайте статью полностью.

Как сделать Landing page — пошаговая инструкция из 9-ти этапов

Этап 1. Подготовка

Цель лендинга

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

1. Продажа товара / услуги (пример: продажа меда, продажа услуг по разработки логотипа, продажа онлайн курса);
2. Получение контакта (пример: подписка на рассылку, заявка на замер);
3. Информирование (пример: приглашение на бесплатное оффлайн мероприятие, промо страница магазина с акциями).

Определяем целевую аудиторию и что для нее важно

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

Как определить ЦА?

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

Смотрим конкурентов (бенчмаркинг)

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

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

Как я это делаю: создаю отдельную папку с названием «Идеи» и делаю скриншоты интересных блоков.

Этап 2. Пишем текст для лендинга

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

Хаос в голове перенесите на бумагу

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

Составляем блоки лендинга

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

Вот основной список блоков, который можно встретить на 90% лендингов:

  1. Первый экран с УТП (уникальным торговым предложением)
  2. Раскрытие продукта (Описание услуги или товара)
  3. Информация об авторе / компании
  4. Отзывы
  5. Кейсы (Истории успеха)
  6. Форма / призыв к действию
  7. FAQ (Ответы на частые вопросы)
  8. Контакты / подвал сайта

Какие еще могут быть блоки на сайте:

  • Факты в цифрах
  • Выгоды (преимущества)
  • Видео
  • Портфолио
  • Для кого
  • Этапы сотрудничества (или Как сделать заказ, Как оставить заявку)
  • Тарифы и цены
  • Партнеры
  • Галерея
  • Расписание
  • Команда
  • Сертификаты, дипломы, благодарственные письма
  • Документы
  • Таймер

Когда готов каркас лендинга, начинаем писать текст. Вы можете это сделать сами или отдать на аутсорс копирайтеру.

Советы по составлению текста

  1. Главное ставим в начале. Не нужно в начале сайта писать о себе, покажите сначала свой продукт.
  2. Замените общие слова на факты. Не нужно убеждать посетителей в чем-либо, оставьте это право за ними. (Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным).
  3. Проработайте особенно хорошо первый экран и УТП. После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет серфить дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт. (Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»).
  4. УТП (Уникальное торговое предложение). Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. УТП вы можете составить по технологии 4U.
  5. Чем короче тем лучше. Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки.
  6. Больше заголовков. Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт он будет именно по ним.

Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.

Где искать копирайтера

  1. Биржа копирайтинга ContentMonster.ru
  2. Биржа копирайтинга Etxt.biz
  3. Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях (Вк, Фейсбук, Инстаграм).

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

Этап 3. Составляем прототип

Перед этапом дизайна важно составить прототип, давайте расскажу почему. Причин несколько:

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

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

Пример из моего кейса прототипа и дизайна, сделанного по данному прототипу.

На прототипе мы указываем:

  • Расположение текста, выделяем заголовки;
  • Где будет находится графика (картинки, иконки);
  • Где будут кнопки;
  • На каком блоке фон будет светлым, а на каком темным.

Сервисы для прототипирования:

  • Photoshop. Я делаю в Фотошопе. После того как прототип утвердим с заказчиком, удобно здесь же по прототипу делать дизайн.
  • Сервис Moqups . Специальный сервис с готовыми элементами, просто перетаскивайте и добавляйте свой текст.
  • На бумаге. Можете от руки набросать прототип, если лендинг не сложный, не хотите сильно заморачиваться.

Я всегда начинаю прототип на бумаге, мне так удобнее. Потом уже переношу в Фотошоп.

Используйте сетку Bootstrap

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

Шаблон Photoshop с сеткой, который я использую в работе, вы можете скачать по ссылке.

Этап 4. Делаем дизайн

Ввсе элементы дизайна лендинга можно разбить на три части, это подбор:

  1. Шрифта
  2. Цвета
  3. Графики (фото, иконки, картинки)

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

Как пример: На сайте по оказанию ритуальных услуг навряд ли будут уместны яркие цвета и девушка с лучезарной улыбкой с надписью крупными буквами АКЦИЯ!. Или же сайт про организацию праздников в серых, блеклых тонах, с черными кнопками и шрифтом с брусковыми засечками, после просмотра которого хочется впасть в депрессию, а не заказать праздник для ребенка. Примеры конечно утрированные, навряд ли вы их встретите в жизни (хотя не исключено), но суть я думаю вы уловили.

Давайте обсудим каждый элемент подробнее.

Шрифт

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

Отталкивайтесь от своей тематики и от того какую эмоцию вы хотите вызвать у посетителей.

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

Выберите один или два из них и смиксуйте.

Заголовок — Roboto (Bold)
Текст — Roboto (Light)

Заголовок — Open sans (Bold)
Текст — Roboto (Light)

Заголовок — Pt sans (Regular)
Текст — Open sans (Light)

Где брать шрифты?

Есть бесплатные и платные шрифты. На первых этапах я вам советую использовать бесплатные шрифты от Google Fonts. Там есть хорошие варианты и те, что я описал выше, тоже есть.

Почему я советую именно Гугл шрифты?

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

Если вы делаете сайт для себя, подставите себя, если делаете для заказчика, подставите заказчика.

Как правильно подобрать цветовую гамму для сайта?

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

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

Посмотрите интересное видео на эту тему

Вам их нужно подобрать также исходя из вашей тематики.

Примеры, какое настроение вызывает каждый цвет:

Материал про цвета взят отсюда .

Графика (фото, иконки, картинки)

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

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

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

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

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

  • Сервис ShopDiz.pro — скачивание картинок со стоков по 0,5-1 доллару.
  • Сервис ShutterStock — самый популярный сток с большим количеством фото, вектора, видео.

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

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

Этап 5. Выбираем инструмент для верстки

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

Магазин шаблонов WordPress — ThemeForest

1. CMS WordPress + конструктор WPBakery или Elementor

Устанавливаете CMS WordPress, устанавливаете шаблон, конструктор WPBackery платный, но он идет бесплатно в наборе с 99% шаблонов, которые я рекомендую в своих подборках. Есть и второй удобный конструктор, это Elementor, он бесплатный, но чтобы расширить его функционал, покупается Pro версия Elementor . Для меня оба конструктора удобны, какой-то один посоветовать не могу, у каждого свои плюсы. Посмотрите описание и варианты сайтов с обоими конструкторами и выберите подходящий.

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

Например на данном блоге я использую шаблон The7 , в наборе которого идет плагин WPBakery.

Плюсы/минусы инструмента:

  • шаблон все же советую использовать платный, он покупается один раз (стоит в среднем 50$). Я покупаю шаблоны на ThemeForest. Регулярно платите только за хостинг и домен ;
  • гибкий вариант, настраивается все, можно адаптировать готовое демо, можно сверстать landing с нуля.

Сайт Tilda.cc

2. Конструктор Tilda

Tilda — очень крутой конструктор, сайт верстаете прямо в браузере. Для меня это топ 1 конструктор в плане функций, дизайна и юзабилити (очень удобный). На нем можно тоже сделать абсолютно любой сайт. И лендинг, и магазин и статьи можете верстать.

Плюсы/минусы инструмента:

  • абонентская плата 500-1250 р/месяц в зависимости от тарифа и оплаты за месяц/год;
  • функций очень много;
  • есть встроенная CRM;
  • есть бесплатный тариф с ограниченным функционалом;
  • Ваш сайт находится на сервисе, отдельно платить за хостинг не нужно.

Сайт LPGenerator.ru

3. Конструктор LPGenerator

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

Плюсы/минусы инструмента:

  • Цена от 800 до 16000 р/месяц;
  • Много инструментов для улучшения конверсии, a/b теста;
  • Менее удобный конструктор чем в Тильде (на мой взгляд);
  • Ваш сайт находится на сервисе, отдельно платить за хостинг не нужно.

4. Ручная верстка

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

Но все равно вот несколько сервисов по поиску исполнителей, где можете найти верстальщика:

Плюсы/минусы инструмента:

  • Нужно дополнительно платить за верстку верстальщику;
  • Трудно вносить правки самостоятельно;
  • Чистый код верстки (если верстальщик толковый);
  • Сайт находится на вашем хостинге.

До недавнего времени еще популярная была программа Adobe Muse. Это программа от Adobe, которая скачивается на компьютер и работаете в ней как в Фотошопе. Самый жирный минус у данного метода в том, что разработчики программу больше не будут развивать, об этом сделали официальное заявление. Поддержку оказывают до 2020 года, но обновлений программы больше не будет. Поэтому если планируете использовать Музу, учитывайте этот момент.

Я верстаю только на WordPress или в Тильде, для меня это лучшие варианты.

Напишите в комментариях, какой метод используете или будете использовать вы?

Этап 6. Домен

Какой бы метод верстки вы не выбрали, в любом варианте нужен будет свой домен. Домен это имя сайта, например мой домен это ichigarev.ru, у вас будет свой.

Хотите узнать больше о том, что такое домен? Статья для вас Что такое хостинг и домен.

Подобрать домен вы можете на сервисе:

  • Reg.ru — регистрация доменов
  • Timeweb.com — если покупаете домен сразу с хостингом, то выгоднее купить тут

Пример подбора шаблона на reg.ru

Регистрация домена у всех сервисов одинаковая:

  1. Зарегистрируйте аккаунт на сервисе;
  2. Подберите вариант домена, имя должно быть свободно;
  3. Выберите зону (ru, com, рф и пр.);
  4. Введите свои паспортные данные, если регистрируетесь как юр.лицо то данные компании;
  5. Оплатите домен на год (или сразу на несколько лет);
  6. Готово!

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

Этап 7. Верстаем лендинг

Когда дизайн готов и вы определились с методом верстки. Следующий шаг, все это дело заверстать.

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

  1. Курс «Лендинг на WordPress» — это мой курс, который я записывал на шаблоне The7 и конструкторе WPBakery;
  2. Tilda.Education — уроки и вебинары по конструктору Tilda;
  3. Канал WPlovers — парень записывает уроки по Elementor;
  4. База знаний LPGenerator — ответы на частые вопросы по платформе LPGenerator.

Этап 8. Прикручиваем дополнительные инструменты

Онлайн чат

Онлайн чат повышает конверсию, проверено! Если что-то человеку не понятно и нужна консультация. не каждый будет звонить или писать в поддержку на почту, удобнее спросить и сразу получить ответ в онлайн чате. Подключить можете например Jivosite, я сам его использую, он мне «приводит» новых клиентов. Можете написать мне в чат «Привет!».

Пример чата на моем блоге

Обратный звонок

Тоже важный инструмент повышения количества заявок. Человек оставляет свой номер, система связывает вас и клиента за 30+- секунд и вы уже общаетесь. Посетитель приятно удивлен такой скоростью, а у вас новый клиент. Этот инструмент тоже есть у Jivosite . Подробный обзор сервиса от меня можете почитать тут.

Метрика

Важно отслеживать показатели сайта, без цифр вы будете как слепой котенок. Важно понимать сколько человек посетило сайт, сколько оставили заявку, какие вообще показатели у сайта, можете даже посмотреть поведение посетителей, как они просматривают сайт. Установить можете Яндекс метрику и/или Google Analytics.

Ретаргетинг

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

ЦРМ отвечает за то, чтобы ни одна заявка с сайта не пропала, чтобы по каждой заявки вы понимали какое действие нужно сделать (перезвонить, отправить КП, встретиться, напомнить о себе через 14 дней и пр.). Это актуально если у вас поток клиентов, если же 2-3 в месяц, то думаю что CRM вам не нужна.

Топ-пост этого месяца:  CSS от А до Я как добиться кроссбраузерности

Наиболее популярные CRM это:

  • AmoCRM (цена 499 — 1499 рублей/месяц)
  • Битрикс24 (цена, от бесплатного тарифа до 11990 рублей/месяц)
  • Таблица Гугл , Exel или ручка с листочком (если нужно совсем бюджетно)

Калькулятор

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

Пример создания калькулятора на сервисе uCalc

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

Сбор базы подписчиков

Ели вы решили собирать контакты клиентов в базу подписчиков, чтобы потом делать емейл или смс рассылку, то нужно использовать специальный сервис. Можете рассмотреть SendPulse , недавно я делал обзор на этот сервис, который можете почитать здесь. У СендПульс есть бесплатный тариф, с помощью которого вы можете протестировать сервис. Если не его, то есть и другие предложения на рынке, например MailerLite, UniSender, JustClick , GetResponse и пр.

Этап 9. Проверка

Итак! Все настроили, подключили, сайт уже в интернете, ура, молодцы. Теперь самое время его проверить. Что именно проверять?

Проверка текста

Обязательно сделайте вычитку текста или обратитесь к корректору/копирайтеру, чтобы это сделал он. Проверяем текст на наличие ошибок, нечаянно скопированных блоков при верстке и пр. Ничто так не портит впечатление от серьезной компании, как ошибки в тексте.

Проверка адаптивности

Обязательно проверьте верстку лендинга с планшета и телефона. Всё ли хорошо адаптируется? Да, иногда бывает что не получается все подстроить идеально, но должно быть хотя бы читабельно и более менее аккуратно. Если какой-то блок не получается нормально адаптировать, тогда нужно сделать два одинаковых блока, один скрыть на компьютерной версии, а второй скрыть на мобильных устройствах. И каждый блок удобно настроить для выбранного разрешения.

Проверка кнопок

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

Проверка форм заявки

Отправьте тестовую заявку, проверьте доставляемость письма. Если делали интеграцию с CRM, то проверьте чтобы заявка попадала в CRM.

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

Вы можете посмотреть примеры лендингов, которые я разработал в разделе сайта «КЕЙСЫ»

Если Вам нужно сделать лендинг на заказ, пишите в комментариях или оставляйте заявку на странице «КОНТАКТЫ»

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

Полезные ссылки:

  • Статья про составление заголовков по технологии 4U
  • Вебинар «Как создать продающий landing page»
  • Статья «Что такоел Лендинг пейдж»
  • Первые 12 уроков курса «Лендинг на WordPress»
  • Видео «Цвет. Беспроигрышное сочетание»
  • Статья «65 трендов веб-дизайна в 2020 году»
  • Статья «Как создать сайт на WordPress. Пошаговое руководство»
  • Подборка «80 шаблонов WordPress для Elementor»
  • Подборка «40 лендинг пейдж шаблонов для WordPress 2020 года»
  • Шрифты Google Fonts

Пишите в комментариях ваши мысли. До встречи в других статьях!

Как должен выглядеть идеальный лендинг? (10 советов)

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

  • О чем ваши клиенты думают?
  • Как они нашли вашу целевую страницу?
  • Какой заголовок привлечет их внимание?
  • Какое устройство они используют?
  • Какую потребность они испытывают?
  • Что нужно сделать, чтобы превратить их в лиды?

1. Минимализм

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

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

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

2. Используйте правило 5 секунд

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

Как этого достичь? Это возвращает нас к первому пункту — минимализм. Броский заголовок, цепляющая картинка, призыв к действию, и ваш лид готов.

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

Крейг Томлин, специалист по юзабилити, объясняет, почему правило 5 секунд так важно:

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

Например, давайте посмотрим на поисковую выдачу по запросу “landing page”:

Что же происходит дальше? Вы нажимаете по объявлению и видите эту страницу:

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

3. Быстрая загрузка страницы

За каждую секунду задержки загрузки страницы, коэффициэнт конверсии снижается на 7%. Это еще раз подтверждает правило 5 секунд. Посетитель должен усвоить суть и преимущества вашего предложения в течение 5 секунд. Если страница довольно “громоздкая” и медленно загружается, делайте всё возможно для ее ускорения.

Для проверки скорости загрузки можно использовать Google PageSpeed.

4. Забудьте о каруселях и слайдерах

Да, со стороны это выглядит красиво. Может поэтому маркетологи так часто используют всевозможные слайдеры и карусели. Но на самом деле это может губительно сказаться на коэффициенте конверсии. Эксперимент на сайте университета “Нотр Дам” показал, что только 1% пользователей кликали на установленный слайдер.

Когда картинка меняется пользователи и не думают на нее кликать. Такие элементы только умаляют значение лендинга.

5. Используйте белое пространство

Современный пользователь сети не хочет увязнуть в громоздких блоках текстов и длинных параграфах. Исследования показали, что правильное использование белого пространства между пунктами, а также в левом и правом полях увеличивает понимание содержимого на 20%. Так читателю легче сосредоточится на основном контенте. Например, обратите внимание как использует белое пространство Buffer:

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

Apple также славится использованием белого пространства. Их брендинг, дизайн продукта и даже магазин основаны на важности отрицательного пространства/белого пространства.

6. Социальное доказательство

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

Например, вы могли бы установить на свой лендинг список ведущих компаний с их логотипами, которые использует ваш товар или услугу.

Это поможет существенно поднять доверие к вашему продукту со стороны посетителей.

7. Доступная контактная информация

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

8. Отзывы

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

9. Добавьте видео

С помощью видеоролика на целевой странице можно увеличить количество конверсий на 86%. Кажется невозможным, но это так.

Видео помогает более наглядно показать преимущества вашего продукта. И если посетитель посмотрел ваш видеоролик, то, скорее всего, он воспользуется вашим продуктом. Почему? Потому что, как минимум, он потратил свое время на его просмотр, и более детально понял важность и полезность продукта.

Следите за тем чтобы ролик был относительно коротким (5 минут максимум) и информативным.

10. Добавьте кнопки социальных сетей

Сарафанное радио ещё никто не отменял. “Шейр” довольного пользователя может принести дополнительные конверсии.

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

10 составляющих идеального лендинга

Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.

1. Заголовок с УТП

У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:

  • сразу дает посетителю понять, куда он попал;
  • показывает ему уникальность вашего предложения.

Размещается заголовок в верхней части лендинга, на уровне глаз пользователя. Большой, яркий, интригующий.

От заголовка зависит показатель отказов.

Вот примеры заголовков лучших лендингов нашей компании.

2. Дескриптор

Дескриптор также влияет на показатель отказов, хоть и меньше, чем заголовок. Обычно состоит из логотипа, названия компании, слогана или нескольких слов об услугах или товарах. Размещается вверху слева или в середине.

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

Лучшие лендинги всегда содержат оригинальный дескриптор.

3. Блок с контактными данными

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

  • реальный номер телефона;
  • электронную почту;
  • кнопку «Обратный звонок».

В зависимости от специфики рекламируемого товара или услуги, блок может содержать дополнительные контакты: skype, icq, viber.

Обязательно используется призыв – просьба позвонить.

4. Привлекательное изображение

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

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

На скриншотах вы видите красивые лендинги с привлекательными изображениями.

5. Формы захвата

Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.

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

Если на лендинге проходит акция, форма захвата содержит таймер обратного отсчета.

Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.

6. Блок с выгодами для клиента

Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.

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

7. Отзывы клиентов

Блок с отзывами – ключевой в лендинге.

На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.

  • содержит имя и реальное фото клиента;
  • содержание с ключевыми подробностями, которые позитивно скажутся на конверсии лендинга.

Вот примеры блоков с отзывами на лучших лендингах нашей студии.

8. Тарифы или пакеты услуг

Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.

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

9. Примеры Лендинг Пейдж

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

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

Посмотрев примеры лендингов посетитель должен убедиться в качестве продукта или услуги.

10. Реальные контактные данные в футере

Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.

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

Также тут размещается заключительная форма захвата.

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

Как создать идеальный лендинг

Ваши лендинги не конвертируют посетителей в подписку и в покупателей? Значит, с ними что-то не так. Не с покупателями, а с лендингами. Хотите научиться создавать идеальный лендинг, который принесет вам сотни продаж? Тогда внимательно читайте нашу статью!

Landing Page — отдельная от сайта страница, созданная с определенной целью: набрать подписчиков в базу, продать продукт, получить заявки на покупку и так далее.

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

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

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

Как создать идеальный лендинг

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

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

2. Структура страницы. Как правило, структура лендинга включает в себя следующие элементы:

— хедер;
— форма подписки;
— описание продукта;
— цены на разные пакеты;
— кейсы;
— отзывы;

Расположите эти элементы в следующем порядке:

— Заголовок, подзаголовок;
— Предложение (оффер);
— Изображение, видео;
— Ценовая политика;
— Отзывы;
— Форма подписки;
— Призыв к действию;


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

Тест должен быть не о вас и вашей компании, а о клиенте. А ваш оффер — это решение проблемы клиента, о которой вы хорошо знаете.

Также отлично работает эффект срочности, то есть вы говорите клиенту не просто действуй, а указываете время — действуй прямо сейчас! По проведенным тестам это увеличивает конверсию на 12%.

Призыв к действию должен быть четким и понятным — подписаться, купить, оставить заявку, записаться на мастер-класс, оплатить участие!

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

Также текст следует выделять буллетами, чтобы посетитель мог просматривать информацию быстрее.

Кстати говоря, подробно о том, как написать продающий текст вы можете изучить в статье «Как написать по-настоящему продающий текст за 20 простых шагов».

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

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

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

Также важно выделить форму цветом или рамкой, чтобы она выделялась.

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

А вы знали, что первый экран эффективного лендинга — это 80% успеха? Если нет, то вам срочно требуется изучить эту информацию! Читайте инструкцию в Лаборатории Бизнес Кейсов : «Анатомия идеального первого экрана лендинга».

Начинаете свой интернет-проект? Приглашаем на онлайн-встречу «Как собрать подписчиков и превратить их в деньги». Расскажем как создать актив в интернете который будет приносить вам стабильный доход уже через 100 дней. Регистрация здесь (клик).

Понравился материал? Ставьте Лайк, и закрепите себе на стену в социальных сетях!

8 правил идеального лендинга: советы и рекомендации по избежанию типичных ошибок

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

Правило первое — лендинг должен содержать уникальное торговое предложение

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

  • анализ портрета целевой аудитории. Выявляем интересы ЦА, ее проблемы и боли. Смотрим, что мы можем ей предложить, чтобы закрыть эти вопросы своими товарами или услугами;
  • анализ конкурентов. На этом этапе нужно изучить максимальное количество посадочных страниц ваших соперников, особенно успешных. Удачные ходы берем на вооружение, откровенно слабые исключаем;
  • чтение отзывов об аналогичных товарах и услугах. Это дает понимание того, чем можно зацепить покупателя, каких ошибок нужно избежать и что ему нравится.

Применение формулы УТП на примере поисковика Google

Пример плохого УТП:

“Строительство домов быстро, качественно, недорого”

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

Пример хорошего УТП:

“Строительство домов под ключ из своего материала за 2 месяца по цене от 30 000 за квадратный метр”

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

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

“Бесплатный проект загородного дома в подарок”

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

Этапы разработки УТП

Правило второе — нужен правильный текст

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

Плохо:

“Наши дома качественные и надежные. Мы строим уже 20 лет и знаем толк в своем деле. В штате обученные специалисты-строители с опытом работы от 5 лет”

Здесь нет ни постановки проблемы, ни предложения ее решения, ни ценности для потенциального клиента.

Хорошо:

“До сих пор живете с мамой в однушке? Купите дом на берегу реки. Экологически чистый район, развитая инфраструктура, 2 километра от МКАД. Первый платеж — через 6 месяцев после заселения. Помощь в оформлении ипотеки по сниженной процентной ставке. От 30 тысяч рублей за квадратный метр дома с отделкой”

В этом тексте есть все, чтобы зацепить клиента:

  • постановка проблемы (“До сих пор живете с мамой в однушке”);
  • предложение ее решения (“Купите дом на берегу реки”);
  • ценность для клиента (“Экологически чистый район, развитая инфраструктура, 2 километра от МКАД”);
  • снятие возражений “дорого” и “нет денег” (“Первый платеж — через 6 месяцев после заселения. Помощь в оформлении ипотеки по сниженной процентной ставке”);
  • отстройка от конкурентов (“От 30 тысяч рублей за квадратный метр дома с отделкой”).

Составляющие хорошего контента

При создании посадочной страницы часто встает вопрос о том, сколько текста вообще писать. Напишешь много — никто не дочитает до конца. Мало — не удастся раскрыть детали и дать максимум информации. Где золотая середина? Универсального ответа на этот вопрос не существует — все зависит от продукта. Если это набор шариковых ручек с “Алиэкспресс” — можно ограничиться описанием на 2-3 тысячи знаков. В случае со сложным товаром можно написать и больше. Например, если это узкоспециализированная ниша, можно углубиться в детали и написать максимум подробностей. В таких сегментах важно показать себя экспертом.

Правило третье — лендинг должен содержать призыв к действию

А если точнее — призывы к действию. Они должны быть размещены в нескольких местах посадочной страницы. Во-первых, в тексте — об этом мы уже говорили. Во-вторых — в конверсионных кнопках — их еще называют кнопками СТА (call to action — призыв к действию). В третьих — в самом конце текста. Расскажем подробнее.

Топ-пост этого месяца:  Теория дизайна сайта для веб-разработчиков.

Кнопки целевого действия содержат самый убойный и конкретный призыв. Обычно на них написано “купить”, “заказать”, “оставить заявку”. Это прямой призыв. Он используется при продаже недорогих товаров. Для продажи дорогого продукта или при длинном цикле сделки (как в нашем примере с домами) нужно зайти с другой стороны.

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

Кнопки призывов к действию на строительном сайте

Третий и последний призыв к действию размещаем в конце страницы — ближе к контактным данным и сведениям об организации. Есть один тонкий нюанс: кнопки СТА должны меняться и быть релевантными тому блоку, в котором они расположены. Рассказываете о неземных красотах дикой природы вокруг вашего коттеджного поселка — ставьте рядом кнопку “заказать презентацию”. Пишете о проекте жилья, разработанном в НИИ — разместите напротив него кнопку “заказать бесплатный проект”. Здесь все зависит от опыта автора, который пишет вам текст на лендинг. Хорошие копирайтеры должны понимать эту логику.

Правило четвертое — вызовите доверие

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

  1. Разместите всю документацию о компании. Это могут быть лицензии, сертификаты, свидетельства и другие бумаги. Так вы дадите понять, что работаете официально, с соблюдением всех норм законодательства.
  2. Покажите регалии. Пусть посетитель увидит все награды: “Компания года по версии “ХХХ””, обладатель премии “Лучший интернет-магазин бытовой техники 2020”, “Входим в ТОП сайтов согласно опросам клиентов” и так далее.
  3. Предоставьте социальные доказательства, или, попросту, отзывы клиентов. Это очень мощный инструмент, если использовать его с умом. Отзывы должны быть настоящими. Покупные пассажи видно сразу, особенно наметанным взглядом. Их отличают стиль письма, стоковые фото и отсутствие подробностей.
  4. Разместите кейсы удачных проектов. С фотографиями, описанием и краткой историей. Вот, мы строили такой-то дом, нашли удачные решения, покупатель остался доволен. А вот мы делали коттедж на сложном грунте, вышли из положения при помощи хитрого фундамента по американским технологиям — постарались наши инженеры. И так далее. Чем больше примеров приведете — тем лучше.
  5. Предоставьте всю правовую документацию, а также контакты компании. Если о вас неизвестно ничего, кроме адреса электронной почты, это не вызовет доверия. Перестараться здесь невозможно, любая информация будет только плюсом. Укажите ИНН, ОГРН (ОГРНИП), адреса, телефоны и другие данные. Фото сотрудников или руководства — тоже большой плюс. Иногда вообще делают целый блок, посвященный команде. В нем можно разместить фото и должности специалистов. Высший пилотаж — возможность выбрать персонального менеджера, который будет вести сделку.

Пример оформления видеоотзывов на сайте

Правило пятое — составляйте логичную структуру

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

  • первым блоком размещают информацию о компании. Посетитель должен понимать, куда он попал и с кем имеет дело. Плохо:“Производственная компания “Промснабстройкомплект””. Это, простите, что вообще? Ни о чем не говорит. Хорошо:“Производственная компания “Промснабстройкомплект” — 20 лет строим загородные дома под ключ”. Теперь понятно, что речь о застройщике;
  • вторым блоком идет оффер или УТП. Про него мы рассказывали выше;
  • описание продукта, его характеристики и преимущества. Опять же, кратко, но при этом емко и информативно рассказываем о вашем товаре или услуге;
  • блок с доказательствами;
  • призыв к действию;
  • снятие возражений;
  • заключение.

Если лендинг составлен по принципу “В огороде бузина, а в Киеве дядька” — продавать он не будет. У пользователя просто не сложится логичная картина того, что вы хотите донести.

Правильная структура лендинга

Правило шестое — тестируйте гипотезы

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

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

Правило седьмое — расскажите о ценовой политике

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

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

Всплывающее окно на посадочной странице

Правило восьмое — нужен хороший дизайн

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

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

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

Как новичку создать качественный лендинг пейдж самостоятельно: пошаговое руководство

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

Что такое лендинг и для чего он нужен

Лендинг пейдж (landing page) это страница для продвижения товара или услуги. Она призвана «направить» посетителя на совершение определенного действия:

  • обращение за бесплатной консультацией;
  • заявка на покупку товара;
  • бронирование мест;
  • подписка на рассылку;

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

Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, landing page, целевая страница.

Делать самостоятельно или заказать работу «под ключ»?

Итак, мы разобрались с основами. Следующий вопрос, который обязательно возникнет у вас: стоит ли сделать лендинг самостоятельно или заказать у фрилансера или в студии веб/дизайна.

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

Реальность: сделать хороший, рабочий лендинг не сложнее чем создать страничку в социальной сети.

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

  1. вы новичок в бизнесе;
  2. хотите протестировать новую нишу;
  3. у вас небольшой стартовый капитал.

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

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

Единственное, что вам действительно необходимо — это знание своего продукта: его достоинств, недостатков и целевой аудитории.

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

Помните, что если вы решили заказать лендинг «под ключ», вам нужно составить как можно более точное ТЗ и согласовать все детали с разработчиками.

Итак, если вы решились делать все самостоятельно, то ваш следующий наш шаг это выбор качественной платформы. Я подобрал 4 самых и удобных и функциональных сервиса для создания landing page, и сделал короткие обзоры, которые помогут вам выбрать.

LPMotor — самый лучший конструктор одностраничников

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

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

Для каждого макета можно дополнительно подключить мобильную версию, которую можно редактировать отдельно.

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

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

При оплате за год вы получите скидку 40%.

Оплатить услуги и тарифы платформы можно с помощью банковской карты, через Сбербанк Онлайн, Альфа-клик, посредством перевода через Связной, Евросеть, МТС, Теле2 и Билайн. Поддерживаются электронные кошельки: Яндекс.Деньги, QIWI, Webmoney.

3 простых совета как создать крутой лендинг

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

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

Вам также может пригодиться информация из этих статей про посадочные страницы:

1. Первый слайд – самый важный. Продано!

Первый слайд (экран), который увидит посетитель вашего лендинга – очень-очень важен. Бросив беглый взгляд на этот слайд, посетитель должен сразу же понимать, что именно ему предлагают, почему выгодно купить это именно здесь, и вызывать доверие. Я не раз сталкивался с лендингами, которые долго листал и так и не мог понять, что именно они предлагают. Более часто встречаются лендинги, из первого слайда которого ничего не понятно, и чтобы разобраться, надо листать вниз и внимательно читать тексты целиком. Поймите, у вас полно конкурентов, у которых отличные лендинги, на которых сразу все ясно. Пользователь откроет от 10 до 30 посадочных страниц и в процессе первичного отбора закроет те, что ему не понравились, или те, где непонятно, что предлагают, или не вызывающие доверие.

Ваша цель – продать ваше предложение посетителю сразу же при беглом взгляде на первый слайд. У вас всего 3-8 секунд, чтобы убедить посетителя остаться на вашей посадочной странице. Это важно!

Как это сделать? На первом слайде должна быть кратко изложена вся суть вашего предложения и ваши преимущества по сравнению с конкурентами. В идеале посетитель должен смотреть на первый слайд и сразу думать: “О, это то, что я искал, это то, что мне нужно! Цена хорошая, отличное качество, даты подходящие, и компания вызывает доверие”. На первом слайде должны быть только выгоды и преимущества.

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

Вот схема идеального первого слайда:

Шаблон идеального лендинга

2. Заголовки – второй самый важный элемент!

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

Заголовки на первом слайде играют самое важное значение. Именно в них надо вложить всю мощь, всю уникальность вашего предложения. В заголовке и подзаголовке на первом слайде стоит написать ваше уникальное предложение и одно из важнейших преимуществ перед конкурентами.

Не перегружайте лендинг длинными текстами!

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

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

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

3. Лендинг должен мгновенно вызывать доверие

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

Образцы отзывов на хорошем лендинге

» data-medium-file=»https://wilhard.ru/wp-content/uploads/2020/11/good-landing-page-testimonial-300×87.png» data-large-file=»https://wilhard.ru/wp-content/uploads/2020/11/good-landing-page-testimonial.png» src=»https://wilhard.ru/wp-content/uploads/2020/11/good-landing-page-testimonial.png» alt=»Отзывы и бренды на хорошем лендинге» w /> Отзывы и логотипы известных брендов вызывают доверие к лендингу

Элементы доверия хорошего лендинга

  • отзывы покупателей. Обязательно наличие отзывов от ваших покупателей. Отлично работают видеоотзывы, подойдут также и текстовые. Также хорошо работают счетчики лайков в социальных сетях;
  • гарантии. Гарантия возврата денег в течение 30-ти дней тоже вызывает доверие;
  • тест-драйв. Предложение бесплатно протестировать товар или услугу вызывает доверие;
  • наши клиенты. Огромное доверие вызывает наличие логотипов крупных брендов. Если, конечно, у вас были такие клиенты в прошлом или есть сейчас;
  • контактные данные:
    • престижный телефон и адрес. В контактных данных надо указывать прямые городские номера, а также адреса престижных бизнес-центров класса А. Даже если у вас совсем нет офиса, то арендуйте недорого виртуальный офис с адресом в престижном бизнес-центре и в случае необходимости проводите встречи с клиентами именно там, в переговорной. Прямой городской номер с переадресацией на любой мобильный номер тоже стоит недорого. Если вы укажете в контактах свой мобильный номер и не укажете адрес офиса, то тем самым вы сообщите посетителям вашего лендинга, что вы – физическое лицо, не имеющее офиса и у вас нет даже 500 рублей в месяц на то, чтобы купить прямой городской номер. Как вы думаете – это вызовет доверие к вашему предложению?
    • значки-ссылки на профили в социальных сетях. Укажите ссылки на профили вашей компании в социальных сетях, а также на профили ваших сотрудников. Всего лишь несколько значков социальных сетей – все, что нужно для повышения доверия. Вы видите их повсюду. Если у вас нет социальных плагинов, вы теряете возможность воспользоваться отличным способом получения доверия.
  • раздел “О компании”. Создайте раздел “О компании” и напишите подробно, как давно она существуют, ее цели, достижения и успехи. Если вы только открылись, то напишите здесь о конкурентных преимуществах и целях вашей компании, и очень подробно об основателях и сотрудниках со ссылками на их профили в социальных сетях;
  • оформление лендинга. Если у вас некрасивый лендинг, который выглядит дешево и содержит много ошибок, то это сильно подорвет доверие к нему. Дизайн лендинга должен быть безупречным, не должно быть грамматических ошибок или ссылок, указывающих на то, что лендинг расположен на бесплатном хостинге или бесплатном конструкторе сайтов. Также очень важно, чтобы у вас было доменное имя второго уровня (например, site.ru), а не третьего (site.spb.ru). Это тоже подрывает доверие;
  • множественные способы оплаты. Чем больше у вас способов оплаты, тем больше вам будут доверять посетители вашего лендинга. В идеале у вас должны быть доступны все имеющиеся в России способы платежей;
  • значки платежных систем, логотипы и сертификаты других брендов. Обязательно выводите значки всех систем оплаты – это тоже повысит доверие к вам. В исследовании UXMatters аналитики выяснили, что «значки систем оплаты, таких как PayPal, VeriSign, Visa», являются одним из важнейших элементов на сайте, вызывающих доверие у посетителей;
  • просто красивые значки. Также повышают доверие совершенно бессмысленные значки (см. картинку ниже), которые вы можете найти в любом фотобанке в больших количествах. Обязательно добавьте их на свой лендинг!

Значки, повышающие доверие к лендингу

  • покажите социальную поддержку (social proof). Создайте группу в одной из популярных сетей (vk.com и fb.com) и раскрутите ее или же накрутите и добавьте виджет вашего сообщества на лендинг. То, что на вашу группу Вконтакте подписалось так много людей, сильно повысит доверие к вам.

Виджет VK – важный фактор повышения доверия к лендингу

Дополнительные советы

– Крутой дизайн на миллион

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

– Большая кнопка зеленого или красного цвета

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

– Видео-лендинги

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

– Кроссплатформенность и кроссбраузерность

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

– Короткие, простые формы

Если вы собираете контакты, то формы должны быть очень простыми и состоять в идеале не более чем из трех полей (имя, e-mail, телефон). Большие формы с большим количеством полей отпугивают людей и сильно снижают конверсию. Кстати, исследования показывают, что люди охотно оставляют свой электронный адрес, а формы, которые содержат поле “телефон” отпугивают половину посетителей. Поэтому в идеале ваша форма должна содержать всего два поля: “имя” и “e-mail”. А всю дополнительную информацию вы всегда можете запросить позже на странице “Thank you”.

– Свой лендинг для отдельной аудитории

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

– Тестируйте

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

Заключение: как создать крутой лендинг

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

Желаю вам больших продаж при помощи вашего лендинга! Если у вас будут вопросы, пишите их в комментариях, постараюсь ответить, когда будет время.

Rusability

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

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

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

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

Более подробно с работой над целевой страницей, мы познакомим вас в инфографике ниже.

План для идеальной тестируемой целевой страницы

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

Топ-пост этого месяца:  301 редирект вместо директивы HOST в Яндекс.Вебмастер

CTA (призыв к действию)

Каждый из этих элементов мы подробно рассмотрим ниже.

1. Заголовок

Цель вашего основного заголовка – заинтересовать читателей, чтобы они захотели прочитать весь текст.

Выделите достаточно пустого пространства вокруг заголовка.

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

Путешествуйте на Марс первым классом

Отодвиньте заголовок немного влево от основного текста.

Не забывайте, что SEO и PPC ключевые слова, которые будут привлекать посетителей на страницу, желательно включить не только в текст, но и в заголовок.

2. Основное изображение

Основное изображение – это главное фото вашего продукта или сервиса.

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

Согласно нескольким исследованиям возможность изучить продукт с обзором в 360 градусов значительно увеличивает показатели конверсии.

Используйте основное изображение, чтобы пробудить положительные эмоции в умах пользователей. Это помогает установить доверие.

Изображения, которые вы используете на посадочной странице (особенно основное изображение) должны соответствовать центральной теме.

3. Сбор данных

Подписка на рассылку, контактные формы и опросы – примеры элементов для сбора данных.

    Убедитесь, что пункты вашего элемента для сбора данных легко понять.

    Установите доверие – Ваши данные в безопасности

    Вежливо указывайте на ошибки

  • Обычно чем меньше вы используете полей, тем выше будут показатели конверсии, но не всегда. Иногда, если не задавать достаточно вопросов, потом будет сложнее закрыть важные лиды. Проведите тест и определите, что будет работать для вас.
4. CTA

CTA , или призыв к действию, – это элемент страницы, который побуждает посетителя к действию.

Небольшие изменения в CTA (цвет, размер, размещение) могут значительно повлиять на показатели конверсии. Определите, что эффективнее работает для вас.

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

  • “Рамка” – это граница той части страницы, которую видит пользователей, только попав на сайт. Посетители проводят 80% времени выше этой рамки, поэтому самые важные элементы (в том числе CTA ) необходимо размещать в этой зоне.
5. Преимущества

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

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

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

6. Гарантийный CTA

Второстепенный CTA может иногда привлечь потенциальных клиентов, которые пока не готовы конвертироваться.

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

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

В заключении

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

Как создать идеальный лендинг: виды landing page, структура и советы

Андрей Батурин

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

Мы продолжаем серию статей про разработку и продвижение лендингов, и на этот раз обобщим весь опыт и расскажем, как создать идеальный landing page.

Зачем вам создавать лендинг

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

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

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

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

Информирование. На лендинге можно разместить подробную информацию о товаре или услуге, красочно оформить, сделать нужные акценты. В отличие от стандартных карточек товаров, landing page дает возможность раскрыть все преимущества и особенности.

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

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

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

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

Виды лендингов

Отталкиваясь от задач, структуры и особенностей оформления, можно выделить шесть видов landing page.

1. Информационный

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

Особенности информационных лендингов:

  • отсутствие или ненавязчивость call-to-action;
  • относительно много текста;
  • форматирование как в лонгридах: подзаголовки, списки, цитаты, полужирный шрифт и курсив;
  • много статистики и цифр, наглядные графики и диаграммы, инфографика;
  • иллюстрации занимают меньше места, чем в продающих landing page.

2. Внутренний лендинг

Лендинг не обязательно должен лежать на отдельном домене. Нередко его встраивают в структуру уже готового сайта, выделяя отдельный раздел. Часто в формате landing page создают главную страницу компании. Это подходит для ситуаций, когда пользователь принимает решение о сотрудничестве сразу на главной странице: в сфере услуг, IT-сервисах и пр.

Такие лендинги проще продвигать в поисковиках, так как они индексируются в качестве страниц большого структурированного сайта.

3. Стандартный продающий лендинг

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

Особенности продающего landing page:

  • ясный призыв к действию;
  • заметная форма лида;
  • минимум абстрактной информации;
  • небольшой объем текста.

Через посадочную страницу продают товары и услуги. В первом случае создают landing page с акцентом на иллюстрациях, видеообзорах, подробных характеристиках. Покупателю важно рассмотреть товар, убедиться в его качестве. Лучше сосредоточиться на одном товаре или на одной категории. Не пытайтесь уместить в одном лендинге все предложения.

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

4. Резюме и портфолио

Такой лендинг имеет смысл создавать для маленьких фирм, индивидуальных предпринимателей и фрилансеров. В случае с резюме, landing page поможет подороже “продать” ваши умения. Вместо стандартного документа Word с перечнем навыков и опытом вы можете создать уникальное CV, расставить нужные акценты и удивить будущего работодателя.

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

5. Многостраничный

Если вы планируете разместить много информации или просто хотите использовать landing page не для разовой акции, а на постоянной основе, создайте многостраничник с несколькими разделами.

Технически он все равно останется одностраничным, но в нем будет удобная навигация:

  • статичная “шапка” с разделами сайта: контакты, портфолио, цены и пр.
  • переход к разделам в один клик.

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

6. Собиратель данных

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

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

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

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

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

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

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

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

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

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

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

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

Цена дороже, чем у конкурентов? Зато у нас гарантия и страховка! Платная доставка? Зато товар точно не потеряется на почте и доедет прямо вам домой. Нет всей суммы на покупку? Можем оформить рассрочку или кредит.

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

Call-to-action. Элемент в структуре лендинга, ради которого все и затевалось. Обычно призыв создают в виде кнопок “Купить”, “Заказать”, “Зарегистрироваться”, “Подписаться”. Маленькая хитрость для повышения конверсии: текст кнопки должен соответствовать мыслям посетителя. То есть, не “Заберите промокод”, а “Забрать мой промокод”.

Контакты. В конце структуры лендинга создайте блок с контактами: телефон, email, адрес (если у вас есть офис). В последнем случае неплохо также прикрутить карту от Яндекса или Гугла.

Еще четыре совета при создании структуры продающего лендинга.

  1. Только один призыв к действию.
  2. Не запрашивайте много информации. Пользователи знают, что лендинг — это разовая страница для рекламы конкретного продукта или услуги. И они не готовы оставлять вам всю личную информацию, просто чтобы купить курс лекций или подписку на онлайн-кинотеатр.
  3. Смотрите глазами клиента. Рассказывайте и показывайте не то, что вам хочется, а то, что заинтересует посетителя.
  4. Не рассчитывайте на готовые конструкторы. Если у вас нет знаний в интернет-маркетинге, рекламе и копирайтинге, конструктор готовых лендингов не поможет создать эффективную страницу. Сервисы конструкторов — это полезный инструмент для специалистов, но без нужных знаний они неэффективны.

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

Тренды в дизайне лендингов 2020

Востребованность лендингов объясняется современными особенностями поведения пользователей. У современного человека нет достаточного количества времени, а потому каждая минута на счету. Тренды в дизайне 2020 призваны обеспечить оперативность и удобство для пользователей. Лендинги – далеко не новшество, но сегодня они активно трансформируются, развиваются и совершенствуются. Их делают более оригинальными и интересными, но при этом простыми в использовании.

Общие тенденции в дизайне лендингов

Если условно разделить все многообразие трендов на группы, то получится вот такой список основных моментов, на которые рекомендуем обратить внимание:

  1. Ставка на удобство и комфорт. Элементарный лаконичный функционал, отказ от бесконечного количества разделов.
  2. Применение интересных подходов к подаче информации, чтобы цеплять пользователей и удерживать на странице. Например, необычное расположение информационных блоков.
  3. Динамичное меню, которое «следует» за посетителем, например, сверху, давая возможность выбрать необходимый раздел.
  4. Интересное поведение курсора, привлекающее внимание клиента и подсказывающее путь.
  5. Использование лонгридов или сторителлинга для передачи большого количества информации. Особенно актуально в данном тренде применение мультимедийности.
  6. Акцент на четкой структуризации текста.
  1. Использование красочных качественных изображений. В тренде минималистичные постановочные студийные фото.
  2. Размещение на сайте авторских иллюстраций, нарисованных от руки, или графических изображений, созданных в цифровом варианте.
  3. Грамотное соотношение текстуальных и изобразительных элементов на странице.
  4. В дизайне приветствуется использование анимаций и гифок.
  5. В оформлении лендинга актуальны броские цвета, двухцветные и многоцветные градиенты, а также 3D элементы.
  6. Особенно популярным становится брутальный, минималистичный и лаконичный стиль дизайна. Конечно, если сам бренд это позволяет.
  7. Использование интересных шрифтов, необычное их сочетание по размеру, цвету, написанию.

Главные тренды в дизайне лендингов 2020

А теперь более подробно об основных актуальных фишках, которые вы сможете применить на своих одностраничниках:

1. Изобилие графических элементов

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

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

Идеальный пример – сайт Enjoy me box. Минимум текста, большое количество маленьких изображений, которые динамично всплывают при скроллинге страницы.

2. Мультимедийность лонгридов

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

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

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

3. Типографика

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

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

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

4. Плавность в дизайне

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

5. Полноразмерные видео

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

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

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

6. Нетипичное размещение блоков

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

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

На сайте мобильного оператора Life:) блоки представлены совсем нестандартно, поэтому сайт запоминается и производит впечатление особой территории.

7. Эффект «параллакс»

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

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

8. Полупрозрачные кнопки призыва к действию

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

Загляните на сайт Голландского цветочника, чтобы посмотреть, как это выглядит.

9. Адаптивные логотипы

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

Приводим пример того, как это делают мировые бренды.

10. Студийные фотографии в стиле минимализм

Если для вашего бренда не годятся нарисованные вручную иллюстрации или графические изображения (о которых мы писали выше и которые тоже сейчас на пике популярности), предлагаем другой тренд. На смену «кричащим» и сложным по композиции кадрам приходят качественные фотографии с одним центом внимания. Главный объект съемки отражает всю концепцию, на снимке нет ничего лишнего и отвлекающего внимание. Только товар/отображение услуги.

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

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

Добавить комментарий