Понедельник , 23 декабря 2024
Бизнес советы / Сайт лендинг что это – Лендинг — что это такое простыми словами и 12 советов по созданию landing page в примерах

Сайт лендинг что это – Лендинг — что это такое простыми словами и 12 советов по созданию landing page в примерах

Содержание

Лендинг пейдж — что это такое? Полное описание с примерами

Место лендинга в цепочке продажи
схема

Вот как выглядит полная схема: Трафик — Лендинг — Заявка — Оказание услуги — Профит

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

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

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

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

Профит — получаете оплату или предоплату, зависит от того, как вы ведете свой бизнес. Лид превращается в клиента. Сделка совершена!

Какое может быть ключевое действие у лендинг пейдж?


1. Получить контакт

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

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

2. Продать

На лендинге вы можете сразу продавать товары, обычно такие товары из низкой ценовой категории – до 2000-3000 р. Это относится к страницам, которые продают на холодную аудиторию в лоб, например товары из Китая (портмоне, очки, наушники и пр.) продают именно так.

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

ichigarev.ru

Что такое лендинг простыми словами и зачем он нужен

Доброго времени суток, дорогие читатели!

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

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

Зачем нужен одностраничный сайт

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

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

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

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

Допустим, если на одностраничнике будет слишком много неинтересного текста, например такого: “Мы работаем на рынке уже миллион лет, все наши клиенты довольны и т. д. и т. п.”, – то посетители его явно не оценят. Вы увидите, как они скоротечно покидают сайт.

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

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

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

Лендинг с технической стороны

Продающую страницу можно написать даже на чистом HTML + CSS. Но там не будет форм для отправки заявок, поэтому такой лендинг будет крайне низкопробным. Также проблемой станет редактирование элементов, потому что не каждый вебмастер справится с HTML и CSS. Перед непосредственной версткой шаблон landing page обычно создается в каком-нибудь графическом редакторе: Adobe Muse, Photoshop и т. д. В какой-то мере это двойная работа.

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

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

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

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

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

Разновидности лендингов

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

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

Страница сбора контактов

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

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

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

Само собой, на таком лендинге должен быть функционал сборщика. То есть просто знание HTML и CSS тут не подойдет. Либо придется дописывать специальный скрипт на Java, либо делать такую страницу на другой платформе. Отлично подойдут WordPress и Joomla. В них имеются различные шаблоны, которые легко смогут зацепить внимание клиентов и побудить их к заполнению формы заявки.

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

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

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

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

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

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

Сайт-визитка

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

 

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

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

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

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

Лендинг с услугами

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

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

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

Брендированный лендинг

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

Допустим, тот же Apple. У них все просто и банально. Выходит новинка – iPhone XS MAX. Задача лендинга – представить не только новый продукт, но и повысить узнаваемость бренда компании.

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

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

Делать самому или заказывать

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

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

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

Заключение

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

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

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

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

Поэтому создание лендинга – это не просто склепать что-то на готовом шаблоне. Учитывайте этот факт.

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

iklife.ru

Landing page, которая работает / Habr

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

Что такое landing page?


Перед тем, как мы начнем давайте определим понятие landing page:
  • с технической точки зрения landing page – это страница, которая состоит из таких же элементов, как и обычная веб-страница (HTML, CSS, текст, картинки, видео и т.д.)
  • с точки зрения бизнеса – это страница, которая подталкивает пользователя совершить требуемое действие (покупка или подписка)
  • с точки зрения пользователя – это страница, на которую он перешел по ссылке с другого сайта (из поисковика, твиттера, кликнув на баннер)

Три наиболее частых причины создания landing page:
  • заставить пользователя зарегистрироваться или подписаться на рассылку
  • продать конкретный продукт в конкретной ситуации (распродажа или промо-акция)
  • заставить пользователя скачать или установить софт

Принципы разработки эффективной landing page


Давайте обсудим компоненты или факторы, присущие хорошей landing page.
Call to action (призыв к действию)

Call to action просит и даже заставляет пользователя совершить конкретное действие. Пример call to action – «Подпишитесь на нашу рассылку». Часто call to action предлагает пользователю кликнуть на какой-то элемент страницы (ссылку или кнопку) или заполнить форму.

Советы:

  • Выражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом.
  • Не злоупотребляйте call to action-ами. Если на сайте их немного, то можно сфокусироваться на том, чтобы пользователь предпринял желаемое действие как можно скорее.
  • Используйте кнопки. Кнопки – это традиционный контрол и любой пользователь знает, что по нему можно кликнуть. Хороший дизайн кнопки еще раз обращает внимание на call to action.
  • Дополнительная информацию должна быть наготове. Именно она должна убедить пользователя предпринять необходимое действие.

Landing page компании Square – отличный пример хорошего call to action, который направлен на регистрацию пользователя. Сайт предлагает завести аккаунт, и, как результат действия, Вы бесплатно получаете продукт компании (считыватель кредитных карт Square).

Заголовок

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

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

Когда делаете заголовок, спросите себя: «Достаточно ли это интересный заголовок и действительно ли заставляет пользователя продолжать читать дальше?»

Советы:

  • Пишите простые и короткие заголовки. Не тратьте время пользователя, объясните ему главную идею того, что он может получить на этом сайте как можно скорее.
  • Дизайн должен привлекать внимание пользователя. Используйте большой шрифт и располагайте заголовок на заметном месте – вверху страницы, там где ему положено быть.
  • Используйте релевантные слова. Используйте слова и фразы, благодаря которым пользователи придут к Вам из поисковиков – используйте тэги h2 и h3 для заголовков.

Хороший пример заголовка у landing page компании Shopify. Он весьма короток и дает представление о том, чем занимается сервис, и привлекает внимание, ведь использован крупный размер шрифта и расположен заголовок на видном месте. Найти Shopify в поисковике можно, набрав «ecommerce store».

Простота

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

Советы:

  • Каждый элемент страницы должен подталкивать пользователя совершить действие. Используйте принципы редукционизма, чтоб убрать лишние элементы и текст.
  • У landing page должен быть один главный call to action. Цель странички должна быть предельно ясна и заключается в том, что пользователю необходимо выполнить одно единственное действие. Наличие других действий призвано способствовать выполнению главного.
  • На landing page должно быть много свободного пространства. Слишком перегруженная страница может отпугнуть пользователя.

Landing page Dropbox крайне простая. Там всего 3 элемента: логотип, видео и одна единственная кнопка. Call to action – скачать приложение. Но ведь видео – это дополнительный call to action, дающий пользователю информацию о том, почему он должен стать пользователем Dropbox.

Траектория взгляда

Чтобы быть уверенным, что посетитель увидел все элементы landing page, которые помогут ему принять решение для совершения call to action, траектория взгляда должна быть хорошо продуманной.

Надлежащая траектория ускоряет восприятие информации и гарантирует, что посетитель сайта в конечном счете понял call to action.

Советы:

  • Расположите элементы landing page в логической визуальной последовательности.
    Определите порядок, в котором нужно просматривать элементы и придерживайтесь его. Узнать больше о визуальной последовательности можно тут: «Working with Visual Weight in Your Designs», «Creating Focal Points in Your Web Design» «Using Power Structure and Gestalt for Visual Hierarchy».
  • Используйте графические элементы. Стрелки, иконки и яркие картинки могут помочь направить взгляд пользователя на нужную область страницы.
  • Используйте контрастные цвета для определенных компонентов веб-страницы. Яркие элементы выделяются, привлекая к себе внимание.

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

Релевантность

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

Советы:

  • Создавайте отдельные landing page для каждой маркетинговой кампании.
    Если Вы делаете рекламную компанию с Facebook, то это должно быть отражено на landing page.
  • Landing page должна меняться в зависимости от источника – добавляйте контент, промо-коды и call to action-ы.

Не подвергайте пользователя риску

Очевидно, что никто не любит рисковать. Отнеситесь ответственно к вопросам безопасности, конфиденциальности и мошенничества.

Советы:

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

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

Дефицит

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

Советы:

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

На сайте Mighty Deals размещается таймер, показывающий срок действия скидки. Он подталкивает пользователей не откладывать покупку на потом.

Элементы доверия

Есть много способов, чтобы убедить пользователей в том, что пользование сайтом надежно и безопасно.

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

Также имеет смысл отобразить полученные награды или сертификаты.

Советы:

  • Размещайте социальные данные из авторитетных и известных веб-сервисов.
    Хорошим примером является количество лайков в Facebook.
  • Используйте элементы доверия связанные с call to action и размещайте их рядом.
  • Будьте честными. Не стоит публиковать поддельные статусы или отзывы с других сайтов.

На сайте FreshBooks Вы можете видеть три различных элемента доверия: (1) число людей, использующих сервис, (2) цитаты из авторитетных и известных источников, таких как Нью-Йорк Таймс и (3) сертификат безопасности.

Заключение


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

habr.com

Что такое лендинг простыми словами

 

 

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

 

Что такое Лендинг Пейдж?

 

Лендинг – это такая страница (сайт), которая призывает пользователя сделать одно конкретное действие: подписаться, зарегистрироваться или купить. Такие страницы создаются именно для узкой аудитории.

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

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

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

 

 

 

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

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

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

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

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

Существует несколько вариантов завлечения человека в свою базу подписчиков:

 

  1. Это полезный бесплатный материал, который даст человеку результат. Чем больше и качественные вы будете давать человеку бесплатных материалов, тем больше вероятность, что они начнут вам доверять, останутся с вами надолго и будут покупать ваши продукты в дальнейшем.
  2. Это продажа. На лендинг пейдже можно сразу продавать, если это недорогие качественный товары, просив за них совсем небольшие деньги, причем желательно, чтобы при этом этот клиент оставался в вашей базе, чтобы и дальше предлагать ему другие продукты. Если у вас чисто продающий лендинг без захвата посетителей, то вы вы теряете 95% трафика, так как средняя конверсия продающего лендинга, где вы хотите просто взять с человека деньги, составляет всего 5-7%. А средняя конверсия лендинга с бесплатными материалами может достигать до 30%.
  3. Часто люди через лендинги регистрируются на различные онлайн или оффлайн мероприятия, чаще всего на бесплатные, где люди охотно соглашаются поучаствовать.

Преимущества лендинга

 

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

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

 

Как увеличить конверсию посадочных страниц (лендингов)?

 

  • Цепляющие заголовки и продающий текст
  • Уникальное торговое предложение, которое уверяет человека в его необходимости ему
  • Реальные видеоотзывы потребителей данного продукта
  • Качественные фото и видео материалы
  • Примеры работ или результаты, полученные после приобретения рекламируемого продукта
  • Правильные призывы к действию
  • Мотивирующие предложения

 

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

Пример неудачного сайта (лендинга) посмотрите ниже:

 

 

 

Если вы хотите получить уже готовые красивые и правильные лендинги, то я вам предлагаю скачать 25 готовых шаблонов Landing Page для упаковки своих инфопродуктов абсолютно бесплатно от создателя этого мини видеокурса с пошаговыми уроками — Владимира Фирсова.

Правила эффективной посадочной страницы

 

  1. Слово «сейчас» увеличивает конверсию оффера (принцип срочности)
  2. Упрощение восприятия контента и подачи материала (использовать списки вместо длинных предложений)
  3. Яркая и привлекающая кнопка призыва к действию
  4. Перечисление выгод для человека (что он получит в результате)
  5. Использовать дедлайн (ограничение по времени): кратковременная скидка или ограничение в наличии товара + страх потери (приобретайте сегодня, иначе вы потеряете или упустите шанс)
  6. Социальное доказательство: сертификат, рейтинги, отзывы (минимум 3 отзыва)
  7. Использование триггеров: крючок, который цепляет пользователя и подталкивает к покупке

 

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

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

 

  1. Привлекательный заголовок
  2. Подзаголовок
  3. Преимущества продукта (бренда)
  4. Подписная форма (справа)
  5. Выгоды
  6. Призыв к действию (кнопка)
  7. Цены
  8. Примеры работ
  9. Социальные доказательства (отзывы)
  10. Социальные сети
  11. Элемент благодарности

 

 

 

 

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

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

 

Почему именно сервис LeoPays?

 

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

 

 

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

 

 

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

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

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

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

 

Типы лендингов:

 

  1. CTR-целевые страницы

 

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

 

 

 

 

  1. Страницы захвата лидов

 

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

 

 

 

 

  1. Микросайт

 

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

 

 

 

 

  1. Главная страница сайта

 

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

 

 

 

  1. Рекламные (продающие) лендинги

 

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

 

 

 

 

 

 

  1. Вирусные целевые страницы

 

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

 

 

 

 

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

 

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

Я надеюсь эта статья была для вас полезна. Если у вас возникли какие-то вопросы, задавайте их в комментариях ниже!

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

P.S. НЕ ЗАБУДЬТЕ скачать мою бесплатную pdf инструкцию 5 шагов до первых денег на партнерках, где я рассказываю о своём опыте заработка на партнерских программах и делюсь очень важными фишками. Благодаря подробной пошаговой инструкции вы сможете заработать свои первые деньги на партнерках и превратить это в прибыльный инфобизнес.

Благодарю вас за внимание!

Я вам желаю удачи и до встречи с вами в следующих моих статьях!

С любовью, Вера Ангел

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

verangel.ru

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

Главная проблема большинства современных лендингов – все они будто сделаны под копирку. А где же креатив, огонь, где дизайнерские безумства?

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

Смотрите, вдохновляйтесь, применяйте понравившиеся идеи на практике, миксуйте их со своими и не забывайте проводить A/Б-тестирования – вот единственно правильный рецепт создания убойных посадочных страниц.

Гарантируем продажи и рост бизнеса в любой нише. Беремся за задачи любой сложности. Performance-маркетинг от TexTerra – продвижение бизнеса с оплатой за лиды.

Расширенная форма

Обычно на одностраничниках используют стандартную форму заявки с несколькими полями. Чаще всего клиенту нужно указать контактные данные – имя-фамилию, почту или телефон. Но в некоторых сложных сферах лучше раскрыть тему подробнее. Вот как это сделали в «Текстерре»: в форме лендинга dellservers.ru клиент может выбрать модуль, параметры, задачи сервера. Может сбросить значения, если что-то пошло не так.

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

Серьезный подход к серьезным задачам

Две кнопки СТА

На лендинге планировщика задач wunderlist.com/ru – сразу два призыва к действию, которые усиливают друг друга: «Создать бесплатную учетную запись» и «Загрузить Wunderlist». Пользователи кликают по обеим ссылкам, конверсия растет, а лендинг выполняет свою работу на отлично.

 Выбирай любую!

Конкретные цифры (результаты)

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

Конкретика воспринимается лучше абстрактных рассуждений Мы делаем лендинги с учетом интересов ЦА и юзабилити. 7 дней – и посадочная готова. Обращайтесь!.

Персонализация

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

Практически команда супергероев Как сделать хороший лендинг еще лучше?

Удобная форма ответа

На многих лендингах и сайтах задать вопрос можно только через форму. А это значит, нужно указывать имя и фамилию, оставлять телефон и электронную почту. Иногда вообще приходится вводить капчи и коды – ужас! Понятно, что это делается для того, чтобы получить лиды. Но есть и другой вариант – как на лендинге «Церебро Таргет». Если вы зарегистрированы во «ВКонтакте», ничего заполнять не нужно – бери и пиши. И клиенту удобно, и владельцу хорошо – контакт оставлен, можно работать дальше.

Никаких обязательных полей для заполнения, никаких капч – красота!

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

Можно попросить клиентов рассказать о своих впечатлениях и опубликовать полученные тексты на лендинге. Но загвоздка в том, что посетитель никак не проверит – реальные это отзывы или фейковые. Лучше пойти дальше и убедить посетителей в этом. На лендинге huskypark.info, который разрабатывала «Текстерра», приводятся слова клиентов из «Инстаграма» со ссылками на их аккаунты. Все честно – зайдите и убедитесь.

Стоит навести курсор на фото – появляется текст отзыва

Демонстрация результатов

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

Покажите пользователям, что они получат от вашего продукта

Параллакс-эффект

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

Следуй за мной – как бы говорит она нам Как сделать крутой лендинг: 13 небанальных идей

Анимация

Вообще, у анимации функций много. Движущиеся картинки и предметы привлекают и удерживают внимание пользователя, направляют его взгляд на самые важные элементы лендинга (кнопку СТА, таймер, виджет и так далее), частично заменяют текст. Один из примеров – на сайте madwell.com. Пройдите по ссылке – цепочки двигаются. И мало того что двигаются – слушаются каждого движения мышки.

Внимание, вопрос: какую функцию выполняет эта анимация? Ответить можно в комментариях к статье.

Очень залипательное зрелище!

Иллюстрации

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

Авторские иллюстрации «от руки» – находка для дизайнера

Еще один пример на лендинге satellite-express.ru. Иллюстрация идеально дополняет заголовок: «Главное при диабете – найти баланс».

А вот и не упадет!

Мультилендинги

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

Нажми на кнопку – получишь результат… каждый раз другой

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

Клиент планировал сделать отдельные лендинги для трех продуктов: инструментов автоматизации делопроизводства.

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

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

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

Для каждого продукта мы сделали подробные разделы. Общий объем контента на мультилендинге – примерно 30 тыс. знаков. На каждой странице есть подробные разделы:

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

Раздел «Тарифы» на странице каждого продукта работает по-разному. Например, на странице тарифов «Контур.Экстерн» пользователь может прочитать описания трех тарифных планов, выбрать один из них и оформить подписку на один или два года.

Раздел «Тарифы»

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

Нover-эффект

При наведении курсора картинки меняют цвет, увеличиваются, приближаются и удаляются. Это делает лендинг необычным и привлекает внимание к отдельным его элементам. Если навести курсор на строку «Фотографии и общение с хаски» – появится фотография собачки. На строку «Семейная беседка-гриль» – интерьер этой самой беседки, и так далее.

Дизайнеры «Текстерры» активно используют современные тренды

Сплит-макеты

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

А вы на какой стороне?

Трехмерная графика и дополненная реальность

Лендинг создан для приложения Qubi. Это игра для детей 3+ лет и взрослых. Суть игры проста. На первом шаге пользователь по предложенной схеме склеивает реальный бумажный, картонный или деревянный кубик.

В реальном мире это обычный кубик из бумаги, картона или дерева

Потом он устанавливает приложение, открывает его на смартфоне и «смотрит» на кубик через камеру устройства.

Например, как эти дети из ролика

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

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

Трехмерную модель кубика можно увидеть на иллюстрации (gif).

Трехмерная модель кубика

Что хотел клиент

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

Что мы сделали

Мы реализовали трехмерность с помощью 3D-трансформаций CSS3. Переходы между гранями кубика сделаны с помощью чистого JavaScript с отслеживанием событий drag и touch. Благодаря необычным переходам между экранами у пользователя создается ощущение объемности экрана. Это особенно ярко выражено на рабочей версии посадочной страницы.

Первый вариант лендинга

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

Финальный вариант лендинга

Лендинг полностью адаптивный.

Интерактивный выбор цветов окраски интерьера и мебели

Необычность лендинга «ДСК.Color» заключается в возможности самостоятельно выбрать цвет мебели и предметов интерьера с помощью интерактивной палитры.

Компания «ДСК.Color» окрашивает любые поверхности в разные цвета. Можно заказать окраску мебели, бытовой техники, велосипедов, музыкальных инструментов и других предметов. Клиент может выбрать любой цвет.

Самая востребованная услуга – окраска мебели и предметов интерьера. На нее приходится около 80 % работ клиента.

Что хотел клиент

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

Что мы сделали

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

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

Первый прототип

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

Рабочий прототип

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

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

Модальное окно

Необычные и обычные прелоадеры

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

Что такое прелоадер и какие задачи он решает

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

Пример прелоадера или спиннера

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

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

Элементы страницы прогружаются неравномерно

Прелоадеры реализуются с помощью стандартных инструментов фронтенд-разработки: HTML, CSS, JavaScript и дополнительных библиотек и фреймворков, например, jQuery, React.

Как мы улучшаем лендинги с помощью прелоадеров

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

Для лендинга Qubi мы сделали прелоадер, который повторяет навигационное меню. Это позволяет пользователю понять принцип управления страницей до ее загрузки.

Прелодер на лендинге Qubi

На сайте Levellen Interiors мы использовали прелоадер в виде логотипа компании. Это дополнительный элемент брендинга сайта.

Прелоадер на лендинге Levellen

На лендинге Whalenet можно увидеть спиннер в виде бирюзового прямоугольника.

Прелоадер на лендинге Whalenet

На сайте Parielle работает классический прелоадер в форме круга.

Прелоадер на лендинге Parielle

На лендинге Projectto использовали прелоадер в форме прямоугольника.

Прелоадер на лендинге Projectto

Внешний вид прелоадера обычно обсуждается на этапе проектирования лендинга.

Интерактив

На лендинге бизнес-центра «Фидель» необычно реализована возможность посмотреть свободные офисы и подать заявку на аренду.

Как работает лендинг

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

Пользователь видит наличие свободных помещений

При наведении курсора на свободный офис всплывает кнопка «Подробнее».

Пользователь видит предложение узнать подробности об офисе

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

Страница с описанием офиса

Особенности реализации

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

Собственно дизайн

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

Ну согласитесь, аппетитно!

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

А завещание успею написать? М-м-м, люблю апельсиновые корочки! Лендинг хоть и стебный, но обязан быть в этой подборке Какое там у меня желание? А, хомяка купить…

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

12-primerov-velikolepnykh-lendingov-cherpaem-vdokhnovenie-u-professionalov

texterra.ru

Что такое лендинг пейдж простыми словами. 7 фишек

Лендинг пейдж что это такое простыми словами

Мы попытаемся Вам объяснить, что такое лендинг простыми словами. И, так, landing page с английского дословно переводится, как посадочная страница. У нас окрестили, как целевая страница. Предназначена такая страничка для выполнения конкретного действия — нажатия на кнопку «Купить», «Подписаться» и т. п.  В инете прозванная, как лендинг пейдж или просто лендинг, на сленге ленд.

Что такое лендинг — это денежный станок

Что такое лендинг? Лендинг это двигатель интернет торговли, локомотив продаж! Работает в связке с грамотно настроенной рекламной кампанией. При правильных настройках может стать Вашим денежным станком!

Антон Петроченков

Данная технология пришла к нам из США, там появилась ввиду большой конкуренции интернет магазинов. По словам генерального директора ведущего интернет маркетингового агентства Антона Петроченкова, именно он вдохнул жизнь в посадочные странички у нас в России. Антон долгое время работал в Америке маркетологом в престижной фирме. В 2012 году вернулся в Москву и стал усиленно продвигать технологию продающих сайтов. Её цели и задачи далее и рассмотрим.

Содержание:

1). Что такое лендинг пейдж простыми словами

2). Назначение лендинга

3). Состав лендинга

4). Продвижение лендингов

5). A/B тест лендинг пейдж.

6). Политика конфиденциальности.

7). Разработка лендинга и публикация в интернете — видео инструкция!

8). Заключение

1.Что такое лендинг пейдж простыми словами

Если говорить простыми словами о лендинг пейдж, то это одностраничный сайт. Задачей таких сайтов одностраничников 90 % является продажа товаров или услуг. Ленд эффективно работает для сбора подписной базы. На лендингах никогда нет сторонней рекламы, ограниченное меню в пределах этого документа. Состоит из блоков, начиная от одного и более. Каждый блок расписывает товар поэтапно, подводя человека к выполнению конкретного действия. Предназначен практически для рекламы одного товара или услуги. Должен иметь хорошую графику, грамотно составленные продающие тексты.

2. Назначение лендинга

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

Посадочная страница, подписная

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

3. Состав лендинга

Одностраничный сайт это набор из нескольких файлов и папок.

  • CSS (таблицы стилей)
  • img (картинки)
  • (Ява скрипт)
  • Сам лендинг с HTML кодом

Как видно, структура таких сайтов предельно проста. И их вид зависит от универсальности и наворота таблиц стилей CSS и набора скриптов JS. В разработке и верстке достаточно просты. Скрипты можно найти в бесплатном доступе и скачать или прописать самому, стили достаточно просто меняются и разрабатываются под свои нужды с минимумом познаний.

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

Модель — AIDA

Attention — Внимание;

Interest — Интерес;

Desire — Желание;

Action — Действие;