Правильная структура лендинга 2020: список блоков
Первый экран лендинга
Лендинги могут быть очень длинными. Вот пример посадочной страницы о франшизе Додо Пиццы:
Пример лендинга франшизы
Могут быть и совсем крохотными. При этом у каждого из лендингов, независимо от длины и тематики, есть общий обязательный элемент: первый экран. Это отдельный смысловой блок, выделенный графически.
Небольшой лендинг по продаже курсов английского языка
Вы можете месяцами продумывать путь клиента, формировать доверие и подбирать социальные доказательства.
Заголовок, подзаголовок и надзаголовок
Хороший первый экран отражает не только суть оффера – предложение, но и раскрывает решение проблемы. Послание не должно быть сложным. Понять его нужно с первого взгляда. Для этого на первый экран помещается заголовок.
Пример размещения заголовков
Нет заголовка – нет продажи. Не делайте заголовок интригующим. Так вы не превратите посетителей в клиентов, а только выкинете добрую их половину. Сделайте заголовок максимально простым и понятным, отражающим суть проблемы целевой аудитории.
Подзаголовок – это ответ на вопрос пользователя «Что я получу», либо пояснение заголовка.
Элементы
На первый экран помещается несколько дополнительных элементов. Это название организации, ссылки на социальные сети, контакты, лид-форма и призыв к действию (CTA). Не думайте, что использовать нужно все из перечисленного. Название компании или бренда обязательно.Оно помогает клиентам запомнить рекламодателя.
Пример оформления первого экрана лендинга
Смысл всех перечисленных элементов в том, чтобы позволить части пользователей оформить заказ сразу. «Теплые» посетители не станут изучать лендинг до конца, а позвонят немедленно. Им проще позвонить и получить быстрые ответы, чем скроллить всю страницу в поисках нужных данных. Учитывайте это, разрабатывая структуру продающего лендинга.
Кстати, обратите внимание, на данном примере вместо формы заявки располагается небольшой интерактивный элемент, позволяющий рассчитать стоимость услуг. Такой формат может значительно повлиять на повышение конверсии. Подробнее о его особенностях мы рассказывали в статье про квиз-лендинги.
Логотип
Логотип на лендинге не нужен, только если он никак не сказывается на продажах. Известным же брендам стоит его использовать. Например, Додо Пицце:
Логотип на лендинге
Сразу понятно, какая компания предлагает купить франшизу. Также трудно представить лендинг компании Apple, где нет их фирменного логотипа. Что же касается малоизвестных компаний, то помещать или не помещать логотип на лендинг – дело десятое.
Кнопки соцсетей
Вопрос с кнопками соцсетей спорный, и часто на лендинге от них отказываются. Социальные сети – это внешние ссылки.
Представим, что пользователь попадает на лендинг и загорается желанием купить ваш товар. Доходит до формы заявки, готовится ее заполнить, но видит кнопку перехода в инстаграм. Человек хочет узнать о компании чуть больше и кликает по кнопке. Переходит в соцсеть, листает ленту, читает комментарии, затем смотрит истории и напрочь забывает о покупке.
Небольшой процент подобных сценариев – это уже потерянные заказы и недостаточная прибыль. Не хотите этого? Делайте как здесь:
Пример размещения контактов и формы обратной связи
И в футере, и в остальной части лендинга – только контакты и форма заявки. Никаких лишних ссылок и отвлекающих элементов.
Форма заказа
Чем дороже продукт, тем больше времени понадобится пользователю на размышления. Так, посетитель не примет молниеносное решение о покупке комбайна, даже если он сильно нужен. Учитывайте это, помещая форму заказа на первую страницу лендинга.
Если товар или услуга достаточно простая, то форма заказа уместна. Если большинству клиентов нужно время на подумать, то поместите на первый экран небольшую кнопку «связаться с нами». Сэкономленное место можно отвести на подзаголовок или картинку.
Также это уместно для товаров которые все знают, необязательно делать объемную форму заявки на первом экране, достаточно кнопки.
Оформление первого экрана лендинга по продаже популярного товара
Здесь вместо банальной фразы “связаться” используется призыв к действию “выбрать размер”. Пользователям интересно, насколько большим может быть плюшевое авокадо, а потому они чаще кликают по кнопке.
Реклама
Лендинг должен быть на 100% релевантен рекламе, с которой пришел посетитель. Допустим, вы продаете посудомоечные машины и выделяете две группы ЦА: домохозяйки и холостые мужчины. У вас два креатива под каждую группу. Для домохозяек преимущества – удобство пользования, много режимов и скорость работы. Для холостяков – невысокая цена, экономия времени и надежность машины.
Для каждого сегмента целевой аудитории желательно составить отдельный лендинг с особой структурой, то есть следует использовать мультилендинг. Иначе пользователь не поймет, почему в рекламе было одно, а на сайте об этом ни слова.
Дизайн
Не делайте лендинг слишком сложным, это понизит конверсию. Дизайн должен быть простым и лаконичным. Фон – простой, не затмевающий лид-форму и заголовок. Товар или услуга изображены детально, чтобы у пользователей не возникло вопросов.
Пример дизайна Landing page
Картинка на весь экран отражает суть предложения. При этом заголовок и подзаголовок видны хорошо, форма заказа тоже.
Изображение товара
От картинки, которую вы поместите на первый экран, зависит чуть ли не половина успеха. Структура landing page может быть идеальной, все маркетинговые требования соблюдены, но конверсия при этом на нуле. Причина простая: картинка плохо отражает суть продукта, выполнена в невысоком разрешении, либо и вовсе отсутствует. Большинству пользователей все равно на текст, он хочет визуала. Позаботьтесь об этом.
Пример удачно подобранного изображения для лендинга по продаже и монтажу окон
Оффер
Торговое предложение – это то, ради чего создается лендинг. Он показывает преимущества товара и причины его приобрести. Сделайте оффер простым и понятным. Клиент не должен вчитываться. Всего за пару секунд он должен осознать суть предложения. Вот пример оффера:
Пример оффера
Здесь упор делается на качество. Но есть и другие два критерия: скорость и стоимость. Используйте любой из критериев и поясняйте их в контексте своего предложения. Например:
- Качество. Крепкий итальянский стол из красного дерева.
- Скорость. Доставка мебели в течение суток.
- Стоимость. Скидка 30% на второй товар.
В одном предложении сочетаются максимум две выгоды. Соединять сразу три не стоит, выглядит это навязчиво и неправдоподобно.
Продающий слайдер
На многих лендингах слайдер используется, чтобы показать сразу несколько товаров. Это неправильно. Так нарушается важнейшее правило построения посадочной страницы – «1 продукт – 1 лендинг».
Использовать слайдер можно, чтобы показать один товар с разных сторон. Например, на этом сайте не поместишь одну фотографию щенка. Нужна карусель:
Пример слайдера
Использовать слайдер для перечисления преимуществ не стоит. На большинстве лендингов это работает плохо.
Список выгод
Если на первом экране остается место, то можно поместить небольшой список выгод. Ключевое слово – небольшой. Тут лучше сработают числа:
Пример оформления списка выгод
Не повторяйте выгоды, которые обозначили ранее в оффере. Либо раскройте их чуть подробнее, совместив с другими преимуществами.
Стикеры
Стикеры кажутся необязательным элементом, но часто именно они помогают пользователям принять окончательное решение. Это отличный способ подчеркнуть основную или одну из самых важных выгод, которая поможет клиенту принять решение. В стикере вы можете указать гарантию, скидку, возможность приобретения продукта в кредит, бесплатную доставку или подарок.
Стикеры на лендинге
На скриншоте этого главного экрана в качестве стикера используется убеждение: прекрасный подарок на любой повод.
Типовые ошибки первого экрана лендинга
Мы разобрались, какой должна быть правильная структура первого экрана продающего лендинга. Однако применять все перечисленные элементы нужно с умом. Не допускайте их нагромождения. Если элементов слишком много, то пользователь может запутаться. Одновременно и отсутствие обязательных элементов значительно сократит конверсию. Например, как здесь:
Нет формы заявки
Есть стикер, уведомляющий о немецком качестве, но нет открытой формы заявки.
Еще одна ошибка – слишком много офферов. Не стоит совмещать несколько предложений под разные сегменты аудиторий на одном лендинге. Это не «цепляет» пользователя, с большой вероятностью он покинет сайт.
Награмождение офферов
Еще одна ошибка – плохой дизайн. Вы можете создать отличную схему лендинга с вроде бы высокой конверсией, но дизайн все испортит. Много цветов, плохой шрифт и некачественный фон создадут «информационный шум».
Пример неудачного дизайна лендинга
Это создает впечатление недоработанности, которое влечет догадки о низком качестве рекламируемого продукта.
Тело лендинга
Вы создали идеальный первый экран, теперь нужно позаботиться об остальной части сайта. Все последующие блоки должны убеждать пользователя приобрести ваш товар или услугу.
О проекте
Функция этого элемента – понятно и развернуто рассказать пользователю о том, что же вы предлагаете.
Видеобзор на лендинге часто получается более информативным чем текст
Необязательно это делать в текстовом формате. На многих лендингах размещен короткий видеообзор продукта, который дает более полной представление.
Логично расположить этот блок сразу после главного экрана. Так пользователь убедится, что попал на нужную страницу и ему тут помогут.
Преимущества
Если на главном экране преимущества представлены очень кратко, а то и вовсе отсутствуют, то в остальной части лендинг пейдж список выгод должен быть полным и точным. Сопроводите тексты иконками, фотографиями или простыми иллюстрациями.
Преимущества товара
Не ставьте иконки ради иконок. Они должны быть особенными. Каждый элемент на сайте нужно тщательно продумать, всему нужна своя роль.
Сценарии использования / Ход работ
Сценарии демонстрируют примеры использования продукта или сообщают о том, кому пригодится товар или услуга. Отличайте сценарий от списка выгод. Выгоды – это то, что получит клиент по итогам покупки, а сценарий или ход работ – это то, как заполучить покупку.
Пример сценария
Форма подачи должна быть такая же, как и в списке выгод. Поставьте заголовок, описание и картинку.
ЦА
Необязательно делать блок с описанием целевой аудитории слишком большим. Тут все зависит от особенностей продукта, который вы предлагаете. Вы можете включить в список выгод текст о том, кому пригодится товар или услуга. Можете оформить форму отдельно, как здесь:
Пример описания целевой аудитории для некоторых типов продуктов или услуг
Если вы продаете диван, то не стоит расписывать, что нужен он «семьям, пенсионерам и т.д». Выглядит это глупо. Если же товар необычный, и пользователь может подумать, зачем ему такая покупка, то блок с описанием ЦА лишним не будет.
Тарифы и цены
Цену можно указать на главном экране. Но если там нет места, либо прайс-лист нужно раскрыть чуть подробнее, то поместите на лендинге отдельный блок с ценами. Оформите его максимально просто:
Блок с ценами
Выделите один популярный тариф. Так человеку не придется сравнивать и выбирать подходящий вариант.
Призыв к действию
Призыв к действию должен повторяться на лендинге несколько раз, каждый раз – около кнопки «связаться» или формы захвата. Недостаточно написать «позвоните нам» или «кнопка для связи». Человека это не побуждает, а обязывает. Смените риторику, заинтересуйте потенциального клиента. Вот как здесь:
Пример призыва к действию на странице лендинга
Согласитесь, что фраза «получить деньги» сработает куда лучше, чем «связаться с нами».
Форма регистрации
Форма регистрации повторяется на лендинге 3-4 раза. Первый раз – на главном экране, затем в середине и в конце. Оформите форму в зависимости от того, какую цель преследуете. Если на лендинге продается вебинар, то соберите подписки. Если сайт продает конкретный товар, то ваша цель – получить контакты.
Пример формы регистрации
Чем меньше в форме полей, тем больше конверсий вы получите. На примере выше видно, что рекламодатель требует только имя и телефон. Будь там абсолютно ненужные строки «фамилия», «отчество» или «место проживания» — часть клиентов просто бы отпала.
Отзывы
Впечатления разных людей помогают принять решение. Если другие пользуются и им нравится, то лендингу можно доверять.
Отзывы на лендинге
Самый простой вариант – просто поместите имена и фото клиентов вместе с отзывами. Можно поэкспериментировать и добавить ссылки на посты с отзывом в инстаграм, видеорецензии и пр. Как вы смотивируете клиентов оставить такие отзывы – зависит только от уровня фантазии.
Партнеры
Необязательный элемент для компаний, реализующих маленькие недорогие товары, но важный для крупных рекламодателей. Например, вы поставляете цемент оптом. Укажите, что работали с крупными строительными компаниями.
Блок с партнерами
Видео
Видео – отличный способ сэкономить место на лендинге и описать все преимущества продукта без текстов и фотографий. Естественно, видео должно быть коротким, ярким и продающим.
Видео пригодится, если услугу или товар тяжело описать или представить в виде фотографий. Например, вы продаете щенков. Снимите про них видео, покажите животных с разных сторон.
FAQ
Отличный блок, чтобы сэкономить место на лендинге и закрыть оставшиеся возражения клиентов. Оформляется как список вопросов, при клике по которым пользователь получает исчерпывающий ответ.
Оформление FAQ на лендинге
Заранее соберите все страхи и сомнения клиента, переформулируйте их в вопросы и предоставьте развернутые ответы.
Контакты
Тут все просто: всегда перед глазами пользователя должен быть телефон или электронная почта. Возможно, потенциальный клиент устал листать сайт и хочет наконец позвонить. Не позволяйте ему искать контакты, поместите на самое видное место.
Помимо телефона, группа контактов включает карту, адрес и данные о ИП или юридическом лице.
Команда
Необязательный блок, но хуже точно не сделает. Люди доверяют тем, кого знают, или хотя бы кого видят. Поместите фотографии членов своей команды, их имена и должности.
Сделайте фото команды в одном стиле и разместите их на лендинге
Желательно, чтобы все фотографии были выполнены в одном стиле. Поместить такой блок лучше в конце.
Факты в цифрах
Цифры работают хорошо. Воспринимаются они легко и привлекают внимание. Вот пример их использования на сайте:
Использование фактов в цифрах
Вот только использовать цифры нужно с умом. Например, есть предложение «Поставили 150 тыс. тонн щебенки для 3 тыс. км дорожного полотна за 10 лет». Вызывает ли оно у пользователя какие-то эмоции? Вряд ли, потому что ничего не понятно. Представленные цифры слишком большие, осознать их в реальности трудно. Ситуацию можно исправить так: «Поставим до 10 тыс тонн щебенки всего за 24 часа». У пользователя уже есть представление о необходимом количестве, он сравнивает условия и делает заявку. Вывод – цифры не для красоты, а для клиента.
Сертификаты
Если у вас есть сертификаты, благодарственные письма, грамоты или что-то подобное, то сделайте их скриншоты и поместите рядом с отзывами. Скорее всего, сертификаты никто досконально изучать не будет, но небольшой «вау-эффект» они создадут.
Портфолио
Если у вас есть примеры успешных кейсов или качественно выполненных работ, поместите их на лендинг в формате карусели. Достаточно будет 3-4 фотографий с текстом.
Если вы адвокат, то оформить портфолио можно нестандартным способом. Например вот так:
Пример оформления портфолио для адвоката
Счетчик
Еще один прекрасный элемент, который поможет ускорить оформление заявки. Выглядит он так:
Счетчик на лендинге
Поместить его можно как на главный экран, так и в остальной части. Важно лишь, чтобы рядом с формой заявки.
Всплывающие окна
Пользователь не находит на лендинге ничего интересного, тянется его закрыть, как вдруг выскакивает окошко с индивидуальным спецпредложением. Это последний шанс оставить посетителя на сайте, довести его до оформления заявки. Выглядит всплывающее окно так:
Пример всплывающего окна на лендинге
Некоторые критикуют этот элемент за навязчивость, многих пользователей он и правда раздражает. Проверить, действительно ли он хорошо сказывается на конверсии, можно только путем сплит-тестирования.
Виджет обратной связи
Виджет обратной связи всегда рядом. Находится он в нижнем правом углу. Если пользователь захочет задать вопрос – он просто вбивает его в это окошко.
Виджет обратной связи
Как оформить этот виджет, решать только вам.
Футер лендинга
Футером называют конечную полоску лендинга, самую нижнюю его часть. Футер бывает разных размеров и форм. Основная цель футера – размещение контактов, навигационных ссылок, повторение логотипа и заголовков.
Пример оформления футера лендинга
Наличие футера не считается строго обязательным. Но если вам есть что в него поместить, то оформляйте в общем дизайне сайта. Вот какие элементы могут присутствовать в футере:
- Информация об авторских правах.
- Контакты.
- Условия обслуживания.
- Отзывы и обратная связь.
- Карта.
- Вторичная навигация.
Итак, мы перечислили все главные элементы структуры, которые стоит учитывать при создании лендинга, но пожалуй самым важным пунктом будет проработка первого экрана, этому следует уделить больше всего внимания.
10 секси-лендингов Рунета / Блог компании Yagla / Хабр
Вспомните, как выглядит типичный лендинг. «Шапка» с картинкой из фотостока → Наши преимущества или почему к нам обратились 100500 клиентов → Как мы работаем → Отзывы → Закажи бесплатную консультацию, замер, первое занятие и т.д.
В premium нишах еще какое-то разнообразие, а в ремонте, натяжных потолках и прочих «народных» темах ощущение «те же яйца, только в профиль». Онлайн-конструкторы и Бизнес Молодость делают свое дело)
В этой статье вы увидите 10 лендингов, которые разрывают шаблон. Мы не знаем, какая у них конверсия и сделали выбор по субъективным признакам: дизайн, юзабилити, представление ценностного предложения. От пластиковых окон до wow-страницы рекламного агентства. Итак, поехали.
EnjoyMe Box
Что это?!? Вот и у нас такой же вопрос в первую секунду. Ок, идем дальше. Это лендинг-игра, где вы как ребенок разворачиваете коробку с новогодними подарками. Зуб даем, что 99,9% пользователей докручивают страницу до конца. Расчет на эмоции: «Хочу!»
Минусы: кроме картинок никаких подробностей, что за подарки внутри.
1С: БухОбслуживание
А вот здесь оффер бьет наповал: «Забудьте о проблемах с бухучетом». Минимум «воды», короткие и простые предложения. Знаковые моменты выделены цветом + картинки отлично подчеркивают суть работы компании. Дизайнерам +100 к карме) Да, обратите внимание на представление отзывов: рекомендуем взять этот ход на заметку.
Минусы: форма заявки, на наш взгляд, перегружена + запутывает поле с промо-кодом. Что за промо-код, где его взять? Это может увести от целевого действия.
Главред
На странице продвинутого курса Главреда букв, наоборот, о-о-чень много, и это оправдано. Максим Ильяхов раскладывает всю кухню в стиле «кушать подано». Рука сама тянется к кнопке «Оплатить и подписаться».
Минусы: не нашли.
Рокетбанк
Пример того, как нужно представлять новый продукт. Ясные и конкретные выгоды в цифрах, легкий визуал — ничего лишнего. Одно «но»: минимализм круто работает, когда потребитель знаком с брендом.
Как Рокетбанк обыграл новость о слиянии с банком «Открытие» (ссылка в хедере) — это космос.
Минусы: форму заявки можно сделать проще.
Церебро
Мы не нашли более четкого ценностного предложения для IT-продуктов, чем у Церебро: «Найдет для вас аудиторию ВКонтакте, готовую к действиям». Представление выгод сервиса, социальные доказательства — все сделано так, что не остается возражений.
Минусы: не нашли.
3208
Лендинги ремонтников, пожалуй, больше всего напичканы маразмами и шаблонами. В этом плане страница Алексея Земскова не идеальна + капля тщеславия «делаем самые лучшие ремонты» на первом экране. При этом, чем дальше смотрим, тем больше доверия.
Да, дизайн не дешевый. Да, тексты неплохие. Call-to-actions на уровне. Но сильнее всего цепляет «настоящесть» вместо копирайтерской брехни и изображений улыбающихся мужиков в касках.
Это фото мастера + честные мужские тексты: «если серьезно, в жизни есть 3 больших глупости — ссать вверх, лежа на спине, долго смотреть на сварку и делать ремонт без проекта. И я даже не знаю, что из этого глупее…»
Минусы: сложная форма заявки.
Окна людям
Такого вы еще не видели. Самая упоротая страница в нашем списке. Реакция коллег от «что за г… о?» до «ах%#енный сайт!» Скорее всего, неплохо конвертит за счет нестандартного подхода на суперконкурентном рынке.
Минусы — обратная сторона нестандартности. Значительная часть аудитории не будет вчитываться в прописные буквы.
VideoDays
Пафосная страница конференции VideoDays работает на интриге. Представьте, что вы ничего не знаете о событии и видите месседж «Будущее уже наступило». Что за будущее, что произошло, о чем вообще речь? Крутите дальше и через минуту вы поймаете себя на мысли «Я хочу на это событие!»
Минусы: не нашли.
Yagla
Да, мы не скромные, и включили в список свою страницу. Вчера один из наших пользователей написал: «Ребята, вы раскладываете все так, что понятно даже дилетанту». Продукт → Как это работает → Что он дает → Кейсы с результатами → В каждом блоке кнопка CTA.
Плюсы и минусы оставляем на ваш суд.
Egostyle
Разработчики из web-лаборатории Egostyle превратили свою промо-страницу в путешествие с wow-эффектами. Разумеется, эти понты расчитаны на соответствующую аудиторию. Ну, а простым смертным — поглазеть)
Минусы: скорость хромает + автозвук.
P.S. Поделитесь в комментариях, какая из страниц «зацепила» вас больше всего & предлагайте свои версии лучших лендингов в Рунете.
Лендинг — страница или сайт, созданный для получения конкретных целевых действий пользователей. Задача landing page — повышать конверсию, вокруг этого выстраивается дизайн и структура. Мы выбрали удачные примеры лендингов и поделили на группы по их назначению.
Особенности построения landing page
Чаще всего лендинги создают для продажи товаров, анонсирования конкурсов, регистрации на мероприятия, набора учеников или поиска сотрудников.
Можно создать посадочную страницу по своим правилам, но проще руководствоваться проверенными советами.
Дизайн
Подавайте информацию блоками, один блок — одна мысль или предложение. Чтобы отделить одну часть от другой, используйте контрастную подложку.
Важно не перегружать посадочную страницу визуальной информацией. Чем меньше на ней элементов, тем проще пользователю сосредоточиться на сути вашего предложения. Это не значит, что landing page должна состоять только из текста и картинки. Используйте динамические блоки, анимацию, свободное пространство между элементами страницы.
Контент
Предлагайте на сайте-одностраничнике только один продукт, акцию или услугу. Чем больший выбор вы предоставляете, тем меньше вероятность покупки.
На первом экране коротко расскажите о своем предложении. Никаких вводных слов, используйте эту часть страницы, чтобы завоевать внимание. Здесь должны находиться самые убедительные аргументы в пользу покупки или заказа у вас.
Обязательный элемент посадочной страницы — кнопка CTA или призыв к действию. Сделайте ее заметной и добавьте между блоками текста на всем протяжении страницы. Другой вариант — плавающая кнопка, которая перемещается вслед за пользователем.
Мы писали подробный материал о том, как сделать лендинг самому.
Важно! Лендинги не продвигают с помощью SEO, так как их жизненный цикл слишком короткий. Большинство посадочных страниц создают на время действия акции или для вывода на рынок нового товара. Пользователи приходят через email-рассылку, таргетированную, баннерную и контекстную рекламу, поэтому вряд ли удастся найти удачный пример landing page, оптимизированной под поисковики.
Вместо того, чтобы подбирать ключевые слова, сосредоточьтесь на болях клиентов и на том, как вы помогаете их решить. Подробнее об этом читайте в статье «Как написать текст для лендинга».
Примеры хороших лендингов
Мы сделали подборку лендингов с необычным дизайном и контентом. Смотрите, вдохновляйтесь и сохраняйте удачные примеры себе в подборку.
Продажа товаров
На лендинги приходит теплая аудитория, хотя бы частично знакомая с продуктом. Задача landing page — «дожать» таких посетителей и принести конверсию в виде покупки. Посмотрите примеры продающих лендингов с оригинальным подходом к подаче товара.
Производители острого соуса Mule создали красивый лендинг, чтобы рассказать о достоинствах продукта. Динамическая анимация побуждает листать страницу до конца, а часть информации о продукте упакована в развлекательное видео, из-за чего страница не перегружена текстом. В конце лендинга есть рецепты и социальные доказательства в виде отзывов покупателей с фотографиями.
Пример лендинга от производителя кетчупа е>На странице завода по производству бетона «Центр бетона» — много подвижных элементов, а фон повторяет цвет и фактуру бетона. Информация подана блоками с ценами, акциями, условиями работы. Яркие цвета и выезжающие картинки по бокам привлекают внимание, а небольшое количество текста упрощает поиск информации.
Пример красивого лендинга в сегменте B2B е>«Рокетбанк» рекламирует платежную карту с помощью лендинга. Особенность страницы в горизонтальной прокрутке вместо стандартной вертикальной. Информация представлена в сжатом лаконичном виде, чтобы не отнимать время пользователей. Преимущества карты дополнительно выделены графическими элементами, чтобы направить внимание на главное.
«Рокетбанк» создал лендинг с горизонтальной прокруткой е>Страница компании «Окна людям» выполнена в стилистике написанного от руки черновика. Оригинальный ход привлекает внимание и выделяет производителя среди остальных.
«Одностраничный сайт, пример от компании «Окна людям» е>Сервис аренды электросамокатов Youdrive привлекает внимание динамическим лендингом и отсутствием больших текстовых блоков. Даже если вы не прокручиваете страницу, картинка постоянно меняется благодаря видео. Информация об условиях аренды сформулирована в нескольких коротких фразах, а между текстом и картинками оставили много места.
Стиль лендинга для аренды самокатов — движение е>Конкурсы и специальные проекты
У конкурсных страниц короткий жизненный цикл, но это не значит, что стараться над их созданием не нужно. Мы собрали примеры хороших лендингов, разработанных для привлечения участников акций и конкурсов.
Компания Rafaello придумала конкурс для влюбленных. Нужно создать два аккаунта, зайти на основной сайт бренда с двух телефонов и поднести их друг к другу. Призовые баллы копятся пока пара находится на сайте. Помимо необычной механики конкурса, пользователей привлекают контрастным дизайном. На лендинге много воздуха и свободного пространства, на фоне которого выделяются блоки текста.
Лендинг для конкурса от компании Raffaello е>Сервис Airbnb приглашает пользователей придумывать необычные экскурсии в родном городе и зарабатывать. Компания сделала ставку на живые фотографии и минимум текста, чтобы вызвать эмоциональный отклик. Блоки не сливаются между собой, так как на странице чередуется черный и белый фон. Во время прокрутки кнопка регистрации остается неподвижной, чтобы в любой момент перейти по ней и начать регистрацию.
Пример хорошего лендинга от сервиса Airbnb е>Регистрация на мероприятия
Лендинги удобно использовать для привлечения людей на фестивали, мастер-классы, лекции и другие мероприятия. Создавать отдельный сайт для регистрации, чаще всего, не имеет смысла, проще и быстрее сделать лендинг.
Организаторы Digital sales and marketing world приглашают маркетологов зарегистрироваться на воркшоп. Поскольку информации много, ее разбили на небольшие блоки и разбавили фотографиями. Видеоподложка на первой странице демонстрирует масштаб мероприятия.
Лендинг Digital sales and marketing world сочетает видео, фото и текст е>Другой пример удачного лендинга — страница фестиваля «Пить и жарить». Организаторы добавили динамическую прокрутку, в которой буквы и фон движутся отдельно друг от друга. Разные шрифты, размеры и цвета здесь выглядят уместно, потому что соответствуют стилистике фестиваля.
Развлекательный фестиваль использует неформальный стиль для лендинга е>На лендинге от «Прятки в темноте» пользователей приглашают зарегистрироваться на квест. Страница оформлена в духе компьютерной игры, чтобы передать атмосферу квеста. Уровень сложности и пакет услуг участник тоже выбирает в игровой форме, передвигая бегунок влево или вправо.
Ищите примеры крутых лендингов среди квестов е>Набор на обучение
Страницы учебных заведений рассчитаны на два типа клиентов: ученики и учителя. Иногда к ним присоединяется третий тип — родители учеников, когда речь идет о занятиях для школьников. Задача — создать привлекательный и понятный дизайн для разных групп.
Khan Academy выбрала стиль оформления в духе энциклопедий научпоп. Чтобы донести свое послание до будущих учеников и преподавателей, на лендинге кратко сформулированы преимущества академии и добавлены яркие живые фотографии. Кнопка CTA есть почти в каждом блоке.
Образовательный лендинг, пример от Khan Academy е>Вирусный контент
Поскольку лендинги продвигают с помощью рекламы, вирусность помогает сэкономить бюджет. Мечта маркетолога — страница, которую люди пересылают друг другу.
Сайт-агрегатор авиабилетов S7 ко Дню космонавтики открыл бронирование билетов на Луну, Венеру, Марс и другие планеты. Через форму лендинга можно выбрать параметры путешествия, ввести данные, получить билеты и поделиться ими в соцсетях.
S7 обыгрывает тему Дня космонавтики е>Поиск сотрудников
Иногда крупной компании проще искать сотрудников через лендинг, чем через сайты о работе. Одностраничник не накладывает ограничений в плане подачи материала, что особенно ценят компании в сфере digital.
Creative People придумали персонажей и изобразили будущих сотрудников в роли супергероев. С помощью этого приема удалось небанально и увлекательно рассказать соискателям о компании.
Creative People ищет супергероев в команду е>Творчество и юмор
Творческий проект тоже можно оформить в виде лендинга. В этом случае цель — не в достижении конверсии, а в самовыражении и в привлечении внимания.
Вы тоже можете создать посадочную страницу для реализации своих идей. Для этого не нужно быть программистом, создать лендинг поможет специальный конструктор. Как это сделать, мы подробно описываем в статье «Конструкторы лендингов: лучшие платформы для создания одностраничников».
Австралийский информационный портал SBS адаптировал рассказ из книги «Лодка» вьетнамского писателя Нам Ле и поместил его на лендинге. Это творческий проект по переводу художественных книг в визуальный формат. Получился графический черно-белый роман с интерактивными элементами. По мере прокрутки страницы обновляется текст, меняется фон и появляются дополнительные эффекты в виде дождя и молний. На момент написания статьи лендинг собрал 19 тысяч лайков.
Графический комикс анимировали с помощью лендинга е>Активисты бегового клуба Run Evolution создали шутливый лендинг, чтобы привлечь внимание к беговому клубу. Вместо того, чтобы в очередной раз рассказать о пользе здорового образа жизни, они пообещали избавить от беговой зависимости. Лендинг получил вирусный эффект и появился на многих развлекательных сайтах.
Проект «СТОП-БЕГ» в шутку предлагает избавить от беговой зависимости е>Часто лендинг создают под конкретный товар, акцию или мероприятие, поэтому он быстро теряет актуальность. Чтобы попасть в список лучших одностраничников, придумайте или позаимствуйте необычную идею оформления. Пишите короткими фразами. Добавьте картинки, видео и фото, но оставьте много незанятого пространства. Делайте кнопку CTA доступной в любом месте прокрутки лендинга.
Аудитория попадает на landing page благодаря таргетированной и контекстной рекламе. Еще один способ привлечь посетителей — настроить email и push уведомления или создать чат-бота. Это удобно сделать с помощью сервиса SendPulse.
[Всего голосов: 6 Средний: 4.7/5]Базовые элементы лендинг пейдж можно условно сгруппировать как “дизайн” и “копирайтинг” составляющие. Дизайн — это сердце, он будет порождать эмоции, направлять внимание и притягивать к самому главному — к призыву к действию. Копирайтинг — это мозг, текстовая подача аргументов и фактов, описание предложения, которое либо склонит посетителя к выполнению определенного действия, либо заставит закрыть страницу и отвергнуть ваше ценное предложение на веки вечные. C чего начать?
1. Посылайте пользователя на релевантную, таргетированную страницу
Каким типом рекламных сообщений вы привлекаете пользователя?
Как SEO-трафик, так и контекстная, баннерная реклама имеют общую цель — привести таргетированный трафик на конкретную страницу. Используйте простую формулу: одна цель — одно сообщение — одно действие — одна страница.
Вы уже просегментровали своих посетителей и имеете несколько сегментов? Тогда проложите отдельный маршрут для каждого типа аудитории на конкретную лендинг-страницу. Пусть рекламное сообщение соответствует типу аудитории и ожидаемому от посетителя действию. При настройке целей в аналитике также действует правило: одна цель — один лендинг.
2. Без неожиданностей
Жаркий вечер, отпуск, Таиланд. Вы знакомитесь с прекрасной леди, прогуливаетесь в ваш номер. И вдруг, оказывается, что она… это вовсе не она. Испуг, разочарование, фрустрация… Обманутые ожидания не приветствуются нигде.
Предоставьте пользователю единообразие: визуальное, текстовое. К тому моменту, когда человек кликает на ваш баннер или ссылку, вы уже сформировали у него определенное ожидание. Оправдывайте его.
В дизайне как баннера, так и лендинг пейдж, отталкивайтесь от бренда или же определенного предложения/продукта. Фирменные цвета и шрифты в рекламе и на лендинге помогут связать их между собой в голове пользователя.
В случае использования контекстной рекламы, единообразие пользовательского опыта, который вы создаете, будет выражаться в высоком или низком показателе качества ключевых слов (Quality Score). Чем он выше, тем больше рекламные сообщения и ключевые слова соответствуют содержанию страницы с точки зрения поисковой системы.
При создании рекламных кампаний, подборе ключевых слов и привязки к ним посадочных страниц — сегментируйте. Сегментируйте типы клиентов и источники, из которых вы их ведете на конкретные страницы.
3. Сфокусируйтесь на заголовке и подзаголовках
Представьте себя проходящим мимо киоска с прессой. Вы останавливаете взгляд на долю секунды, чтобы просмотреть крупные заголовки. Если какой-то из них привлечет ваше внимание, вы остановитесь на несколько секунд, чтобы вчитаться. А если он окажется достаточно интересным, вы даже купите это издание, не так ли?
Сделайте заголовок понятным, заметным и релевантным, ведь это самый важный текстовый элемент на странице, наряду с призывом к действию. Только пятая часть посетителей, прочитавших заголовок, прочтет что-то еще на странице.
С точки зрения содержания, чаще всего на посадочных страницах используются три типа заголовков:
— Руководство, демонстрирующее положительное следствие, преимущество
— Обращение, апеллирующее к страху потери (или упущенной выгоде)
— Вопрос
На практике, самым сильным оказывается демонстрация преимуществ, а худшим — вопрос. Апелляция к негативным последствиям хорошо работает в том случае, если вы предлагаете решение очень специфичной проблемы, которая беспокоит пользователя. Креатив вообще лучше оставить для других занятий. Креативные заголовки обычно конвертируются намного хуже простых и понятных.
9 признаков хорошего заголовка:
— называет преимущества, а не характеристики
— простой, понятный, целенаправленный
— использует общественное мнение и отзывы
— обещает получение преимуществ в конкретный срок
— правдоподобный и осуществимый результат
— преподносит потенциальное облегчение и удобство пользователю
— апеллирует к “авторитетному мнению”
— создает ощущение ограниченности товара, времени и т.д.
— содержит ключевые слова, оптимизирован под поисковые системы
4. Избавляйтесь от лишнего
Во-первых, на лендинг пейдж не нужна навигация. Во-вторых, как можно меньше внешних ссылок. Работая над дизайном посадочной страницы, важно учитывать как цели бизнеса, так и покупателя. Они могут пересекаться. Если какой-то из элементов не служит ни одной из них, пожалуй, его лучше убрать.
Помните, что вы уже заплатили за то, чтобы посетитель оказался на этой странице? Сфокусируйте его на важной информации и совершении действия. Если посетителя действительно интересует дополнительная информация о вашей компании или месторасположение на карте, он может посетить ваш сайт в другой раз. Не ставьте ссылок, уводящих от совершения действия.
5. Меньше текста?
Мир захватила тенденция к сокращению длины текста повсеместно. Журналисты отказываются от длинных материалов, сайты дробят текстовый контент как могут, сокращать советуют и лендинг пейдж. Якобы посетитель — кретин, не готов обрабатывать больше 500 символов, да и вообще читает с трудом, поэтому нужно сокращать, чтоб было как в Твиттере… Аргумент убедительный, но.
Есть негласное правило — чем ближе к покупке, тем длиннее текст. Если вам нужны подписчики, контакты, то короткого текста будет достаточно. Если же целью конверсии является покупка, к тому же не самая дешевая (и речь не идет о вещах первой необходимости вроде iPhone 6+), то лучше подумать о более длинном и убедительном тексте. Для раскрытия ценности предложения нужно время, которое в данном случае эквивалентно длине лендинга.
Пример того, как “В 6 раз длиннее, на 52% эффективнее” от Рэнда Фишкина
6. The fold — скролл, прокрутка
И наоборот, не создавайте неоправданных сложностей для юзера в поиске информации о вашем бизнесе. Донесите информацию о том, чем вы занимаетесь на первом экране (до необходимости скролла), если это возможно.
Вопреки популярности “портянок” — бесконечно длинных лендингов на 5-8 экранов — исследование тепловых карт показывает, что гораздо больше внимания сосредоточено на первом экране.
Убедительный текстовый контент, заинтересованность в товаре или услуге, эмоциональное вовлечение заставят посетителя прокрутить вниз и найти заветную кнопку в глубине нескольких экранов. Но… На длинных лендингах лучше оставлять фиксированную или повторяющуюся на каждом экране кнопку CTA (Call to action). Не всегда можно предугадать, в какой момент посетитель “готов”. Поэтому призыв к действию должен быть на виду.
Несколько слов о восприятии
Залезая посетителю прямо в мозги, обнаруживаем там стандартные процессы. Общие правила восприятие веб-контента и айтрекинга гласят, что сканирование страницы происходит по модели F-pattern/сетки. Поток важной информации должен располагаться слева, так как там концентрируется больше всего внимания. F-сетка означает, что вначале пользователь просматривает верхнюю строку, затем движется вниз по левой части экрана, делая второе горизонтальное движение в середине, чуть короче, чем первое.
Eye tracking center, Institute for Software ergonomics and usability AG
На e-commerce сайтах второе горизонтальное скольжение чуть ниже, чем обычно, из-за сканирования изображения товара. Пользователи также задерживаются значительное время в верхней правой части страницы, где размещается цена и кнопка «добавить в корзину».
Данные исследований nngroup.com по айтрекингу говорят о том, что внимание распределяется следующим образом:
— Левая часть экрана — 69% пользовательского времени
— Правая часть экрана — 30% времени пользователя
Что касается скроллинга, то ключевые моменты, безусловно, должны выноситься на первый экран, так как время, которое пользователь тратит на просмотр, распределяется следующим образом:
— До скролла 80,3%
— Ниже скролла 19,7%
7. Последовательность и эмоциональность
Все элементы дизайна и текста должны соответствовать ценностям вашего бренда.
Лого — это лицо вашего лендинга.
Посетитель должен как минимум вспомнить его при следующей встрече.
Со вкусом оформленное и размещенное лого — неотъемлемый атрибут абсолютно любой посадочной страницы. Лого должно передавать дух вашего бренда и его индивидуальность — как старым, так и новым клиентам. Лого, само по себе, способно раскрыть суть бизнеса компании… Ну или убить все…
Привычно логотип размещается вверху страницы, это очередное клише, проверенное опытом. Если ваш бренд знают все, даже дети, то что вы тут делаете, то брендингом можно не злоупотреблять. В общем, используй маркетинг с умом!
Изображения
Доносят ли изображения на сайте и стоковые картинки идею вашего бизнеса? На сайте желательно использовать картинки, совпадающие с идеей бизнеса. Как мы уже писали ранее, в тренде e-commerce дизайна — крупные изображения. Вокруг этого крупного изображения и стоит выстраивать свой лендинг пейдж. Крупная графика, крупный текст основного сообщения — вот все, что нужно, чтобы донести свой бизнес-месседж до посетителя. Но не ограничивайтесь только картинками.
8. Экспериментируйте с типами контента (данных, информации)
Согласно эксперименту unbounce.com лучшего эмоционального эффекта и вовлечения поможет добиться видео на лендинге. Опытно доказано, что, как встраиваемые видео, так и видеофон, обладают интенсивным эмоциональным эффектом и дают более глубокое понимание продукта, увеличивая конверсии. Посетитель с большей вероятностью проведет продолжительное время на странице, просматривая видео, чем читая текст.
Далеко не каждый продукт требует видео-демонстрации. Мы писали о том, что нужно соответствовать ожиданиям пользователя, быть последовательными и убирать все лишнее. Не перегружайте страницу видео, если это не нужно. Если не знаете нужно или нет — протестируйте.
Например, видеофон лендинга GoPro не просто захватывает, он еще и идеально передает ценности компании и образ жизни, с которым она себя ассоциирует — быть героем и проживать каждый день на пределе своих возможностей.
Обязательно дайте возможность посетителю поделиться вашим видео и страницей, так же как GoPro дает возможность задокументировать свою захватывающую жизнь и поделиться лучшими моментами онлайн…
9. Возможность распространения
Дайте возможность посетителю опубликовать ваше видео прямо в Facebook-ленту или в Twitter. А еще лучше, чтобы целой страницей можно было легко делиться в социальных сетях. Помимо того, что рекомендации реальных пользователей повышают доверие к вашему бренду, социальные шеры также хорошо влияют на поисковую выдачу страницы.
10. Не делайте умозаключений — тестируйте!
Значение имеет все — цвета, картинки, расположение, тестируйте все, что помогает вовлечь, удержать и сконвертировать посетителя.
A/B тестинг и другие метрики помогают точно определить, что именно влияет на ваш лендинг. Если вам кажется, что изображение розового слона принесет больше конверсий вашему сайту, чем слона серого — протестируйте это предположение.
Исследование dynamicwebsolutions
Интернет-маркетологи, дизайнеры, психологи ищут философский камень, который превратит в золото все вокруг… Но, увы, нет рецепта волшебной большой оранжевой кнопки в правом нижнем углу, c CTR 100%. Большая или маленькая? Зеленая или красная? А текст какого цвета? Со стрелкой или без? Есть только один способ узнать что будет работать — тестирование!
Call to action
Ваш призыв к действию, или CTA, является основной целью конверсии посетителя вашей целевой страницы. Варианты ожидаемых действий на странице: покупка, подписка на рассылку, звонок или заказ обратного звонка, загрузка электронной книги, файла, демо-версии продукта или запрос информации.
CTA советуют размещать в том месте лендинга, где наибольшая концентрация положительных эмоций — после видео, напротив счастливого лица. На базовом уровне кнопка должна быть заметной в любом месте лендинга, и иметь четкий текст призыва. Тестировать нужно как дизайн кнопки, так и сам текст: одно слово или два, с местоимением или без, и т.д. Значение имеет все — от цвета и слов до шрифта и теней.
11. Дайте что-то взамен или поблагодарите
Для того, чтобы что-то получить, нужно что-то отдать, не так ли? Если вы собираете контактные данные, подарите пользователю бесплатный white paper — последний отчет лидера отрасли или ваше исследование, любой ценный контент. Или просто поблагодарите за совершение действия. В общем, оставьте после себя положительные эмоции.
Оптимизация посадочной страницы — это создание совершенной комбинации убедительных текстовых элементов и дизайна, привлекающего и направляющего внимание пользователя. Помните, что лендинг не существует отдельно, сам по себе, а должен вписываться в вашу общую маркетинговую стратегию. Для того, чтобы понять, насколько эффективен ваш лендинг и его отдельные элементы, ставьте конкретные цели и пропишите диджитал-маркетинг стратегию. Высоких вам конверсий!
Лендинг пейдж (Landing): что это такое и как создать
Что такое лендинг пейдж (или landing page), его особенности и преимущества
Итак, лендинг пейдж – это страница для «захвата» клиента. Идеальный landing page должен побудить потенциального клиента к тому или иному активному действию на сайте: оформить заказ, совершить звонок, оформить подписку на рассылку, заполнить анкету и т.д.
Таким образом, отвечая на вопрос, что такое лендинги, можно ответить и так, что это специальные страницы, которые нужны для привлечения новых клиентов и продвижения товаров в Сети и за ее пределами.
Лендинг страница – это страница, не перегруженная всевозможными меню, подменю, «простынями текста», ненужными изображениями и сторонней рекламой. Можно сказать, что здесь все выверено буквально до миллиметра и последней запятой. Также такие страницы отличаются крайне упрощенной навигацией.
История развития лендинг пейдж
Отвечая на вопрос, что такое лендинг, невозможно пройти и мимо истории создания лендинга. Данное понятие было введено в интернет-обиход примерно лет 10 тому назад американскими сетевыми маркетологами.
Просто в один момент стало понятно, что потребитель – потенциальный клиент – настолько перегружен всевозможной информацией, что больше не способен определить, где хороший рекламодатель, а где плохой, где предлагается качественный товар, а где не очень. Словом, коммерческих сайтов стало появляться настолько много, что стало трудно в них ориентироваться, как трудно ориентироваться и среди продающих компаний.
Стало быть, возникла необходимость в том, чтобы максимально упростить ситуацию. Так родилась идея создать лендинг пейдж – самую простую страницу в Сети, которая бы представляла бы всего лишь один-единственный товар. Здесь же, на лендинг пейдж можно было прочесть обо всех его достоинствах и тут же осуществить заказ.
Подобные примеры лендинг пейджа видел каждый, кто пытался найти тот или иной продукт в Сети.
Цели и задачи посадочной страницы
В Википедии говорится о том, каковы задачи и цели таких страниц. Но можно более подробно рассмотреть данный вопрос.
Факт! Главная цель лендинга – это получить контакты от потенциальных покупателей, которые заходили на страницу. При этом сама продажа продукта производится уже на следующем этапе, когда уже была совершена заявка на консультацию о нем на лендинг пейдж.
Экспертами интернет-маркетинга утверждается, что грамотно составленная лендинговая страница может значительно повысить конверсию ресурса. Примеры удачных лендинг страниц показывают, что показатели конверсии при этом увеличивались от 8 до 40%.
Воронка продаж и конверсия
Практически любая landing page в Википедии будет раскрывать и такие понятия, как «конверсия» и «воронки продаж». Ведь конечная цель создания любого коммерческого сайта или лендинга в Интернете – это увеличение показателей по продажам, следовательно, и увеличение прибыли. На это рассчитывает каждый владелец лендинг пейдж. И, если знать не только, что такое лендинг простыми словами, но и оперировать более продвинутыми понятиями, можно будет более осознанно подходить и к вопросу, как сделать лендинговую страницу, и к адекватной оценке ее эффективности.
Итак, так называемая конверсия сайта на сегодняшний момент считается самым значимым и самым объективным показателем того, насколько эффективно работает коммерческий сайт или лендинг пейдж. Показатель конверсии лендинг пейдж выражается обычно в процентах. Он вычисляется отношением посетителей, которые совершили то или иное целевое действие к общему числу посетителей. Таковым целевым действием может быть, кстати, не только совершение непосредственно покупки, но и, например, заполнение анкеты, подписка на рассылку, подписка на новости, регистрация на сайте или лендинг пейдж и т.д.
Важно знать! Причем, показатели по конверсии в каждой области продаж на лендинг пейдж считаются хорошими по-разному. Стопроцентная конверсия – недостижимый идеал, так же, как и идеальный лендинг пейдж. Однако именно к этому все, разумеется, и стремятся.
В той или иной области продаж хорошими конверсионными показателями считаются разные цифры. Например, если конверсия лендинг пейдж с элитной парфюмерией составляет 15%, то это считается весьма неплохой цифрой. Ведь далеко не каждый сможет себе позволить приобрести дорогой парфюм.
В принципе, 40% конверсии на лендинг пейдж считается отличным результатом. Это будет говорить о том, что практически каждый второй посетитель сделал то, что от него ожидалось. У лендинга конверсия, как правило, лучше, чем в случае с традиционными сайтами.
Нельзя обойти стороной и так называемые воронки продаж. Она, можно сказать, представляет прямо противоположные данные. Как правило, она показывает число посетителей лендинга, не совершавших целевые действия.
Она представлена в виде графика в форме перевернутой пирамиды, отсюда и название – воронка. Как правило, она представлена так:
- число людей, выполнивших посещение сайта;
- число уников лендинг пейдж, выполнивших то или иное целевое действие;
- количество клиентов лендинг пейдж, выполнивших оплату продукта.
Данное представление в графике станет весьма серьезным помощником при проведении расчетов нужного объема материала, контактов на той или иной ступени реализации на лендинг пейдж и т.п. На основании показателей этого графика строятся выводы касательно качества проведенного менеджмента и касаемо нужности проведения корректировочных работ на том или ином этапе.
График продаж даст ясность того, каким именно образом потенциальные посетители лендинг пейдж принимают решение о том, чтобы приобрести предлагаемый товар, а также, что именно на лендинг пейдж их подталкивает сделать это.
Если детально выполнить анализ таких шагов, то станет возможно контролировать поведение контрагентов с помощью грамотно разработанной посадочной страницы.
Кроме того, воронка продаж может сортировать клиентов по их поведению и их интересам.
Можно привести примеры landing page и того, как именно работает воронка. Два человека желают приобрести какое-либо транспортное средство. Причем, один из них еще толком не знает, будет ли это автомашина, либо мотоцикл. Другой же уже четко для себя решил, что это будет машина. Так вот, с точки зрения маркетинга, это совершенно два разных человека. Так как первый может на следующий день вообще передумать и пойти за велосипедом, а другой уже готов приобрести машину хоть сегодня.
Пример хорошего лендинга, когда потенциальный клиент лендинг пейдж проходит 4 шага:
- осознание того, что нужно приобрести;
- проявление интереса к предложению;
- принятие решения о покупке;
- совершение целевого действия, сама покупка.
Таким образом, грамотное создание лендинг пейдж должно побудить посетителя пройти целиком все эти четыре шага, и как результат, совершение покупки на лендинг пейдж.
Накладывая эти этапы на количество людей, находящихся на каждом из этапов, можно в самом деле получить график в виде воронки:
- В верхней части графика будут располагаться посетители лендинг пейдж, которые осознали то, что им необходим предлагаемый продукт. На данном этапе контрагент пытается отыскать некие обобщенные характеристики о предложении на лендинг пейдж, а также вероятные его более недорогие аналоги.
- На последующей ступени возникает предметный интерес к конкретной марке. Человек сравнивает на лендинг пейдж главные параметры, плюсы, дизайн и т.п.
- В случае принятия решения о приобретении, то потенциальный контрагент проследует на следующую ступень. Здесь важно наиболее четко и ясно представить товар в самом лучшем свете. Как раз этот этап можно считать критическим. Человек готов совершить покупку, а правильное создание и организация создания посадочных страниц landing page способны подтолкнуть его к финальному шагу – покупке.
- Внизу воронки продаж располагаются люди, перешедшие из разряда простых посетителей в статус покупателя. В идеале клиент должен совершить покупку на том же самом сайте.
Правильная структура лендинга должна продвигать посетителя страницы по всем этим этапам. Для этого важно знать, как создать лендинг правильно. В качестве привлекающего внимание материала применяются специализированные статьи, отзывы от покупателей, различные графики и т.п. информация.
Интересный факт! Примеры продающих лэндингов показывают, что хорошим эффектом обладают специализированные статьи, написанные простым, но в то же время и не обиходным языком. Также сюда не будет лишним включить мнение экспертов и т.д.
Эффективность страницы захвата
Конечно, грамотное создание сайта лендинг пейдж должно осуществляться настоящими профессионалами своего дела. Лучше, если это будет слаженная команда из специалистов в своей области. Мало прочитать информацию о том, что такое лендинг в Википедии, чтобы создать landing page. Порой нужно проявить свою изобретательность и самую настоящую изворотливость. Ведь далеко не каждого покупателя можно побудить расстаться со своими деньгами прямо здесь и сейчас…
Хорошие примеры продающих страниц на лендинг пейдж показывают, что даже для создания одностраничного лендинга потребуется участие таких людей, как:
- Менеджеры проекта. Они обозначают конечные цели при изготовлении лендинг пейдж, следят за всеми этапами исполнения технического задания на лендинг пейдж, рассчитывают окупаемость потраченных средств на рекламу, а также принимают все самые важные решения.
- Маркетологи. Они занимаются разработкой общей стратегии проекта лендинг пейдж, созданием прототипа будущей страницы. Также в их задачу входит поиск наиболее эффективных партнерских программ и формирование уникальных торговых предложений (так называемый УТП). Кроме того, ими определяется перспективность разработанных концепций, осуществляется аналитическая деятельность по полученным результатам.
- Веб-дизайнеры. Они заняты разработкой прототипа страницы и отвечают за ее спецэффекты.
- Front-end разработчики. Занимаются непосредственно программированием исходного кода и последующей версткой. В их задачу входит тестирование страницы на различных устройствах, а также корректировка форм обратной связи и отправки заказа.
- Копирайтеры. Эти специалисты пишут тексты, создают заголовки 4U. Их привлекают и на этапе прототипирования посадочной страницы, ее оптимизации и при разработке смысловых блоков.
- Специалисты- контекстологи SEM. Проводят анализ семантического ядра сайта, подбирают нужные целевые запросы для поисковых сервисов, настраивают контекстные рекламы, проводят анализ эффективности рекламной кампании.
В разработке могут принимать участие и другие специалисты. Лишь скорректированная работа опытных спецов позволит сделать действительно хороший сайт лендинг пейдж, способный хорошо продвигать и продавать продукт. Именно такие страницы затем и попадают в top landing page и служат для других примером.
Для чего создавать одностраничный сайт, три главных преимущества лендинга
Разобравшись с тем, что такое лендинг, можно продвигаться дальше. То есть рассмотреть, для чего именно он может потребоваться, стоит ли создание сайта лендинга в каждом конкретном случае своих затрат?
Перед тем как создать лендинг бесплатно своими руками, либо обратиться за помощью к специалистам, не будет лишним понять, действительно ли именно лендинг будет оптимальным выбором?
Выделяют три преимущества лендинга:
- Одностраничники помогают увеличить число активных посетителей, которые подписываются на новостную рассылку, в среднем на 20-30%.
- Повышается на 50% вероятность приобретения предлагаемого продукта.
- Посетители легче убеждаются в том, что им необходимо скачать ту или иную программу для компьютера или для мобильного устройства.
Подробно как создать сайт самому бесплатно можно узнать в другой нашей статье. Пошаговая инструкция + 7 этапов создания сайта прилагается.
13 базовых правил по созданию своей Landing Page
Можно привести различные примеры лендинг сайтов, на которых конверсия достигала 70%! Тому способствовало всего два фактора:
- Главная масса всех посетителей таких лендинг пейдж — сугубо целевая аудитория. Лендинг пейдж посещали пользователи, действительно заинтересованные в предлагаемом им продукте.
- Посадочные страницы лендинг пейдж создавались в соответствии со всеми правилами, призванными обеспечить высокую посещаемость.
Имеет смысл рассмотреть более подробно эти правила и понять, каким же именно образом они работают на практике.
Правило №1. На лендинге должен размещаться один продукт
Даже в статье на Википедии говорится о том, что посадочная страница лендинг пейдж должна в данном случае предлагать один и только один товар. Это – базовое правило, и нарушать его ни в коем случае не следует.
Хорошая продающая страница показывает, что здесь:
- внимание посетителя лендинг пейдж сосредотачивалось лишь на одном-единственном продукте;
- рассказывалось о достоинствах лишь одной-единственной программы;
- на лендинг пейдж выставлялась цена со скидкой только на один продукт;
- посетители лендинг пейдж заинтересовывались рассылкой исключительно по одной теме.
Неправильный лендинговый сайт, напротив, содержит в себе хотя бы одну рекламную ссылку на другой продукт. В итоге посетитель лендинг пейдж, пусть и случайно, пусть из простого любопытства, может нажать на эту ссылку. В итоге целевая страница лендинг пейдж, где он находился до того, будет закрыта. Посетитель лендинг пейдж буквально через пару минут уже может совершенно забыть об изначальной странице, его увлечет иное предложение.
Мнение эксперта! Правильная же лендинговая страница будет сосредотачивать внимание посетителя лишь на чем-то одном. Тот начнет более детально вникать в предложение на лендинг пейдж, рассматривать продукт со всех сторон и все больше убеждаться в необходимости его приобрести.
Правило №2. Призыв к действию должен быть ясным
Хороший пример лендинг пейдж также показывает, что посетителю нужно как можно скорее объяснить, что это за страница лендинг пейдж, для чего он на нее зашел. Если в первую же минуту тот не может четко определиться с тем, для чего ему может быть полезна данная информация на практике, а также не может найти ответы на самые простые для себя вопросы, то можно считать, что клиент потерян безвозвратно.
Неумолимая статистика говорит о том, что до 80% случайных посетителей лендинг пейдж уходят с нее уже после 15 секунд пребывания. Причин тому может быть несколько. Вот лишь самые главные из них:
- Нет четкого побуждения к действию. Иными словами, посетитель не понимает, для чего именно его перевели на этот лендинг. Именно поэтому в landing page правильное построение сайта подразумевает наличие «большой красной кнопки» с побуждением нажать на нее и получить немедленно нужный результат.
- На лендинг пейдж наблюдается перегруженность посторонней информацией. Обилие ненужных данных лишь раздражает посетителя. Знание того, как правильно оформить лендинг, подразумевает умение сконцентрировать лишь самое значимое в пределах одной страницы. Если посетитель сбит с толку обрушившейся на него неструктурированной информации, то и прямые призывы не возымеют своего действия.
Советы, которые помогут и сделают призывы более действенными:
- Наличие той самой пресловутой большой красной прямоугольной кнопки с ясным глаголом, что нужно сделать. Кнопку нужно поместить в самом начале страницы, а затем и в ее конце.
- Выражаться нужно максимально ясно и лаконично. Если растекаться мыслью по древу, то посетитель не очень скоро поймет, что он, собственно, говоря, должен сделать и что за это получит.
- Убрать со страницы все, что будет отвлекать от главной мысли. Если без чего-то можно обойтись, то это следует немедленно и без сожалений выбросить!
- Нужно постараться убедить клиента в том, что он покупает исключительный и даже уникальный в своем роде товар. Тому поспособствовать могут различные графики и таблицы, мнение эксперта, отзывы от других покупателей… Сразу после этого у клиента может возникнуть спонтанное решение приобрести продукт, и тут-то нужно помочь ему – поместив «большую красную кнопку».
- Выгоды, которые пользователь получит в случае покупки, нужно расписать максимально емко и четко.
Впрочем, если слишком увлекаться призывами и проявить назойливость, то эффект может оказаться обратным. Посетитель может заподозрить что-нибудь неладное, либо просто войдет в раздражение от навязчивости. Итог – покинутая страница и упущенный клиент.
Правило №3. Делайте продающие и цепляющие заголовки
Что такое landing page? Это, в первую очередь, призыв к действию, и он должен содержаться уже в самом заголовке. Нужно постараться поместить всего в одном заголовке всю суть выгодного предложения.
Внимание! Пример продающей страницы: «Экономьте на строительстве до 50%», «Получите фигуру телезвезды!» и т.д.
При этом крайне желательно заголовки оформлять при помощи тегов h2, h3 и т.д. По возможности, в заголов
90000 18 Amazing Landing Page Examples That Highly Convert in 2020 90001 90002 Some landing page examples should serve as warnings. Earlier today I was searching for a better way to find deals on plane tickets. I clicked onto one of the first sites that popped up on Google — it seemed promising … 90003 90002 But the homepage was a terrible color, and the content was jumpy and glitchy, and blocks of text covered my screen. I did not immediately find any helpful information, so I clicked back, in less than two seconds, and I moved on to the next page.90003 90002 We all do this every day: 90007 internet searchers are ruthless and unforgiving 90008. 90003 90002 We expect information quickly, easily, and beautifully to top it off. 90003 90002 And we make that judgment in a fleeting moment. 90003 90014 A high converting landing page will make or break your campaign. 90015 90002 Landing pages are the perfect opportunity to give your audience what they want on a golden platter, but if you present the wrong gift, or do it the wrong way, you’ve thrown away your shot.As an entrepreneur, you know each customer is way too valuable to be this disposable. 90003 90002 90019 But you’re in luck 90020: we collected these landing page examples so you do not have to. 90003 90002 You’ve got to instantly establish your authority and present a really solid call to action in an impactful and convincing manner to reel in your leads. The people visiting your page should 90019 need 90020 what you have to offer. 90003 90002 At Proof, we’re all about helping people get more conversions with less work.We believe good business should be efficient, honest and beneficial for both parties. We’ve seen a handful of top-tier entrepreneurs swing for the fences and attain incredible conversion rates with this attitude. 90003 90002 We’re really proud of them, and we’re thrilled to have been part of their journey to success. Our research shows that only 1% of websites in the world get conversion rates above 60%. 90003 90030 90002 Today, we’re excited to reveal the first round of members of Conversion Club, an elite group for the top 1% of converting pages on earth.These members all have conversion rates over 60%, have acquired over 100 conversions, and use Proof on their site. 90003 90002 We’re going to take a look at what they’re doing with these landing page examples and discover some of the keys to their success. 90003 90014 18 Landing Page Examples with Conversion Rates That Blew Us Away! 90015 90037 Brendan Burns from Mastering Instagram: CR 61.88% 90038 90039 90002 Brendan uses his site to offer free online training on building an Instagram following.He teaches businesses and social influencers how to grow and monetize their Instagram accounts. The landing page example pictured above has a 61.88% opt-in rate. His site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 scarcity incentive 90008 90046 90043 90007 exit popup 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Devin Zander from SMAR7 Apps: CR 92.46% 90038 90066 90002 Devin created BringTheZander to develop Shopify apps that help users increase their store’s sales. He has an astonishing conversion rate of 92.46% and his webinar opt-ins are in the thousands. His site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 scarcity incentive 90008 90046 90043 90007 exit popup 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Franck Rocca from Propulser: CR 60.5% 90038 90093 90002 Franck specializes in Facebook ads to help his audience of entrepreneurs learn more about online commerce. His class reached opt-in conversion rates of 60.5% for over 1,300 attendees. His site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 authenticity by showing a photo of a human 90008 90046 90043 90007 special offer on the top right corner 90008 90046 90063 90037 Régis Moscardini from Auxois Nature: CR 88.72% 90038 90112 90002 Regis developed a wildlife photography guide for other photographers. Last month, his guide was downloaded several hundred times and his landing page attracted an 88.72% opt-in rate. His page features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Nate Morse from RVing Planet: CR 73.31% 90038 90135 90002 Nate helps people in the market for a new RV go through the complete journey from research to purchase of a new mobile home. With this free guide for shoppers, he’s built up a conversion rate of 73.31%. His page features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Kim Snider from Reverse Your Funnel: CR 60.03% 90038 90158 90002 Kim conducts a webinar for small businesses who are interested in learning minimum viable marketing. Her conversion rate of 60.03% from Facebook ads is far beyond the industry standard conversion rate of 9.21%. Her page features: 90003 90042 90043 90007 scarcity incentive 90008 90046 90043 90007 exit popup 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Travis Stephenson from Wealthery: CR 68.35% 90038 90185 90002 Travis launched Wealthery to teach entrepreneurs how to use Chatbots and other SaaS tools in his live webinars. His most recent bootcamp registration attracted an opt-in rate of 68.35%. His page features: 90003 90042 90043 90007 scarcity incentive 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Brad May from Tackle Trading: CR 85.43% 90038 90204 90002 Brad is a coach at Tackle Trading, where he educates people on the best way to trade and invest their own money.One of his most recent webinar registration campaigns had a conversion rate of 85.43%. His site features: 90003 90037 Aarin Chung from Honey Bar Media: CR 64.10% 90038 90002 90007 90211 90008 90003 90002 Aarin offers real estate marketing products, services, and websites to real estate agents. Her free online marketing plan download has a 64.10% conversion rate. Her site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 exit popup 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Richard Patey from Funnel Engine: CR 63% 90038 90240 90002 Richard offers an introductory landing page for entrepreneurs who are learning to set up their first sales funnel.The affiliate marketing site promotes sites such as Clickfunnels and Samcart, with a successful 63% conversion rate. His page features: 90003 90042 90043 90007 scarcity incentive 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Tim Han from Success Insider: CR 77.86% 90038 90259 90002 Tim runs Success Insider, a personal development course for entrepreneurs who are seeking accelerated growth, individual training sessions, and exclusive membership.The opt-in rate of 77.86% last week brought over 1,000 applications. His page features: 90003 90042 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Rubén Gallardo Lobato from Aprendamos Marketing: CR 67.54% 90038 90274 90002 Rubén runs Aprendamos Marketing, a digital marketing firm focused on educating business owners and entrepreneurs on the most efficient ways to improve their outreach. He has successfully attracted thousands of registrants with a sign-up rate of 67.54%. His page features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Matt Gartner, E-Commerce Consultant: CR 75.45% 90038 90293 90002 Matt’s 5 Day Clickfunnels E-Commerce Challenge uses a breakthrough strategy with Clickfunnels to help entrepreneurs and business owners interested in e-commerce and dropshipping how to leverage their audience for more conversions.He has earned a 75.45% opt-in rate for this introductory challenge. His site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90037 Stephen Somers from Marketplace Superheroes: CR 66.45% 90038 90312 90002 Stephen helps entrepreneurs learn how to profit from Amazon’s business model and leads them through the process of beginning their own brand by «scratch selling» products.His webinar training attracted a 66.45% registration for the live session, and hundreds of people attended. His site features: 90003 90042 90043 90007 scarcity incentive 90008 90046 90043 90007 exit popup 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Scott Baptie from Food for Fitness: CR 62.69% 90038 90339 90002 Scott runs Food For Fitness to provide simple, enjoyable, and realistic nutrition and fitness advice.His recipe eBook freebie has accumulated thousands of opt-ins with a conversion rate of 62.69%. His site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quotes 90008 90046 90063 90037 Rob Warner from Invisible PPC: CR 80.89% 90038 90362 90002 John helps growing pay-per-click agencies learn how to get new leads.The 3-part masterclass webinar offers 23 lead generation strategies, which has brought hundreds of attendees with an 80.89% conversion rate. His page features: 90003 90042 90043 90007 scarcity incentive 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90043 90007 testimonial quote 90008 90046 90063 90037 Aiman Nizam from Riezthelicious: CR 65.78% 90038 90385 90002 Aiman gives online pastry baking tips and insights through online courses on Riezthelicious.The email opt-in form offering a brownie recipe and coaching has resulted in a 65.78% conversion rate. This site features: 90003 90042 90043 90007 prominent lead capture button 90008 90046 90043 90007 testimonial quote 90008 90046 90063 90037 Reelika Schulte from Design Dream Lifestyle: CR 75.75% 90038 90400 90002 Reelika is a coach for other coaches, focusing on training women in developing their own packages, creating passive income products, and setting high converting sales funnels to launch businesses and achieve minimal-effort success.Her free downloadable workbook has a conversion rate of 75.75%. Her site features: 90003 90042 90043 90007 minimal background, bright accent colors 90008 90046 90043 90007 prominent lead capture button 90008 90046 90043 90007 emphasis on profit / gain 90008 90046 90063 90014 What do these landing pages have in common? 90015 90002 At a glance, these high performing, high converting landing page examples are pretty different from one another. They’re all offering different things across several different sectors to dozens of different audiences.90003 90002 But when we started taking notes, we realized they’re doing a lot of the same things. Since a few of these common practices probably lead to these entrepreneur’s crazy-high conversion rates, there’s got to be value in what they’re doing. Here’s a breakdown: 90003 90037 56% of the top-performing landing pages that convert used bright accent colors on a minimal background. 90038 90002 Blurgroup, an enterprise marketing service, says warm, bright colors are visually engaging. They appear to enlarge objects and make them seem closer- which is a great tactic for a subtle marketing improvement.90003 90002 Using color to highlight your offers and call to action will attract your audience to the best content, while a minimal background keeps the space clean and approachable. As da Vinci said, 90019 «Simplicity is the ultimate sophistication.» 90020 90003 90037 39% of the best landing page examples advertised scarcity. 90038 90002 Limiting supply to increase demand is a basic principle of economics. Even if the demand for what you’re selling remains constant, scarcity will increase your price.Diamonds are considered a rare supply with high demand and increasing price. We all believe diamonds are incredibly rare. 90003 90002 But this is all rooted in a marketing ploy by De Beers and other large diamond companies: they positioned themselves as a top-level supplier in their market, tailored their messages to the proper elite audiences, then watched the money roll in. 90003 90002 Diamond producers have vaults of diamonds the world has never seen because it’s all about limiting supply: as long as we believe there’s a shortage, we’ll search for an opportunity to get what we want and feel incredibly satisfied when we find it.That’s a fantastic position to put yourself in if you’re looking for more conversions. 90003 90439 90037 45% of these great landing page examples provided testimonial quotes. 90038 90002 Testimonials are the original social proof. People need to see they’re not alone. They feel reassurance in learning from others ‘experiences. A simple quote or two on a page (bonus points if they’re from a well-recognized company) guides prospective clients toward trusting you. 90003 90002 If you’re looking for a babysitter, you’d probably rather hire your friend’s favorite, trusted babysitter before you dive into the Craigslist ads.Here’s a great guide to testimonials with tips for using them legally and effectively. 90003 90037 89% of the best landing pages prominently featured their lead capture button. 90038 90002 Highly effective lead captures are critical for a successful campaign, but we’re frequently surprised by how poorly some landing page examples integrate theirs in their content. 90003 90002 Nearly all of these high converting landing page examples use clear, concise messaging and design to attract their audience to this section.And it clearly worked: prominent lead capture buttons lead to astronomical conversion rates. 90003 90037 28% of high-converting landing pages used an exit intent popup. 90038 90002 You’ve probably seen several pages use an exit intent popup before: as soon as you scroll to close the tab, or click back from the page you’re on, the page springs to life with a «Hey, wait !!» message. There’s plenty of reasons a user may leave your page. 90003 90002 Exit popups give you the opportunity to make one final attempt at attracting whatever portion of your audience needs a boost in conversions.Maybe price point is your biggest detractor: you can offer a discount or an added value offer. Whatever you need, exit popups give you one last chance to attract a few more conversions. 90003 90458 90037 89% of the top landing page examples put an emphasis on profit or gain for the customer. 90038 90002 It’s a tried-and-true method: «FREE» is a great way to sell. Valuable generosity makes customers feel prioritized and accommodated. While free content will not attract a highly-targeted audience, it will attract a wide audience that contains your target, and a small sample of what’s to come will always help attract the paying customers.90003 90014 And of course, 100% of the best converting landing page examples used this one critical method … 90015 90002 18/18 of the top converting landing page examples displayed above all used Proof to optimize conversions throughout their campaign. We’re really proud of what Proof is doing to grow amazing companies like the ones we’ve shown above. Each of these landing pages that convert yielded a conversion rate of over 60%. 90003 90467 90002 This is your invitation to join us and boost your conversion rate starting today: join our email list below, and you’ll get more amazing conversions tips, and an opportunity to try Proof free for two weeks.And we’d love to hear what you think after you’ve tracked your results. 90003 90002 Do you belong on this page? Join our brand new Conversions Club if your campaign has a conversion rate of over 60%. 90003 90002 And curious about Proof? Why not give it a try … 90003 90002 What other methods do you use to optimize your landing page and reach sky-high conversion rates? Tell us what you think in the comments. 90003 .90000 9 Best Landing Page Design Trends for 2019 90001 90002 Landing pages are about first impressions … but if you do not update them with the latest design trends, the impression will be a company that’s outdated and out of touch. 90003 90002 Design trends are crucial to landing pages because they act as signals, even subconsciously, that communicate to visitors that you’re on the ball. That goes double if your page is the first time someone sees a trend, so the sooner your update yours, the better.90003 90002 That’s what this article is about. At 99designs, we process hundreds of design requests every day from all over the world. By analyzing which trends are on the rise — and which are fading away — our team can predict which trends will impress users enough to raise your conversion rates and customer engagement in 2019. 90003 90002 99design’s web design trends article hand-picked the 9 most effective design trends for 2019, but here we adapt those trends to landing pages. For each trend, we explain 90009 what it is 90010, 90009 who it helps 90010, and 90009 how to use it 90010.Apply them now to make your first impression an impressive one! 90003 90002 90009 Editor’s note: 90010 Try GetResponse Landing Page Creator if you want to apply your learnings from this article — right away. Get your creative hat on and design them from scratch or just use one many ready-made mobile-responsive templates. 90003 90020 1. Serifs 90021 90022 What it is 90023 90002 Serifs refer to those little tags some letters have, and the fonts that use them. With the prevalence of minimalism in digital design these last few years (see # 8), serif fonts have been scarce with designers favoring simpler fonts without embellishments (known as «sans-serif»).90003 90002 But in 2019 serifs will return, bringing with them a little old-fashioned sophistication. Serifs can add a classy atmosphere to a landing page and brand, but can also be modified to be more playful. And because sans-serif fonts are the norm at the moment, serifs can help you stand out. 90003 90022 Who it helps 90023 90030 90031 Brands that want to appear traditional and / or elegant. 90032 90031 Brands that value professionalism and want to be taken seriously. 90032 90035 90022 How to use it 90023 90030 90031 Because they’re more ornate, serif fonts work great for titles and headers, but not as well for large blocks of print.It’s best to switch it up: use serifs for text that needs the most attention, but use sans-serif for longer texts to facilitate readability. 90032 90031 Serif fonts come in varying degrees, with some more elaborate than others. If you want to retain some minimalistic elements, you can choose a more moderate font with smaller serifs. 90032 90035 90020 2. Friendlier geometrics 90021 90022 What it is 90023 90002 A popular design trend lately has been geometrics: grids, lines, abstract shapes and other visuals you might find in a geometry textbook.While this style adequately represents modern society’s fascination with futuristic tech, such visuals tend to be cold and lifeless, at times even imposing. 90003 90002 So counteract these drawbacks, designers are starting to use both warmer colors and more curves to make these designs just a little more welcoming. These «friendly» modifications let you have your cake and eat it too: futuristic, mathematical imagery that’s still comfortable and inviting. 90003 90022 Who it helps 90023 90030 90031 Tech companies and other brands that need to appear as technologically advanced.90032 90031 Brands that want to emphasize structure and order without appearing authoritarian. 90032 90035 90022 How to use it 90023 90030 90031 Do not be stingy with warm tones — yellows, oranges, and soft red — in the background or for the main elements. 90032 90031 If you want to use abstract shapes, you can soften the image by using rounded corners instead of sharp ones. Take this effect further by adding curves to otherwise straight lines. 90032 90035 90020 3. Grayscale color palettes 90021 90022 What it is 90023 90002 Grayscale color palettes (black & white) are a shortcut to more artistic and visually dynamic images.90003.90000 Examples of the Best Landing Page Designs in 2019 90001 90002 If you run a website, then you know how difficult it can be to convince a visitor to stay on your page and even more to convince them to buy! Your landing page’s design plays an important role. 90003 90004 How to choose your landing page’s design? 90005 90002 Designed to convert your visitors into leads or customers, landing pages focus visitors ‘attention on your value proposition in order to get them to perform an action that you have previously determined: purchasing a product, filling out a form or participating in a free trial.90003 90002 But with all the offers available and all the competitors that exist on the market, it can be hard to stand out from the crowd. For this, 90009 you must create a striking, persuasive landing page adapted specifically to your business. 90010 90003 90002 Because we know it can be difficult to find inspiration before sitting down to design your future landing page, we have selected for you ten modern and efficient landing pages that convert in 2018. 90003 90002 If you have questions about landing pages and would like to learn more before you get started, check out our articles on landing pages with best practices and concrete examples.90003 90002 These examples are taken from real sites; see for yourself! Of course, none of these landing pages is perfect: perfection does not exist, and it is up to you to adapt your design to your customers ‘requirements. We also recommend you A / B test your landing pages. 90003 90004 10 examples of the best landing page design 90005 90020 LeadQuizzes 90021 90002 LeadQuizzes is a company specialized in selling «quizzes» designed to capture «leads». We immediately notice the (very well designed) explanatory video of the service that answers basic questions such as: 90003 90024 90025 What is it for? 90026 90025 Is it relevant to me? 90026 90025 What does it offer me? 90026 90031 90002 Secondly, the orange call-to-action stands out from the rest of the page and very clearly invites you to click: «Try it Free» reassures us that we will not pay immediately and that there is a free trial.Find out more about the optimization of calls to action. 90003 90002 The social proof is obvious and well developed: the references are well-known market players, and the text indicates that more than 3 million leads have been generated via LeadQuizzes: it makes you want it! 90003 90002 90037 90003 90002 90040 90003 90002 The rest of the landing page does not disappoint either: it is built around educating the visitor of the product’s usefulness. The goal: use a (big) page to convince visitors that LeadQuizzes’s service is powerful and used by the big players in digital technologies.90003 90002 90045 90003 90002 Social proof is strongly highlighted on the LeadQuizzes landing page. It answers concrete and tangible questions that concern potential buyers: 90003 90024 90025 How many more sales will I make? 90026 90025 How many new prospects can I capture? 90026 90031 90020 GrowthHackers 90021 90002 GrowthHackers is a company that markets software to increase marketing teams ‘productivity and coordinates business development actions and new ideas from innovative teams.90003 90002 Similar to LeadQuizzes, the orange call-to-action stands out nicely from the rest of the page’s colors and invites action. We are also invited to a «free trial» to reassure a large number of visitors who would not be willing to pay until they have been convinced of the service’s usefulness. 90003 90002 90062 90003 90002 The landing page continues with navigation in the form of a drop-down menu that answers the main questions asked by potential GrowthHackers Project users. 90003 90024 90025 «Why should I use the service? «90026 90025» Why do managers love the software? «90026 90025» Who is this service for? «90026 90031 90002 We also notice that a» chat «bubble is there to ask questions: a useful feature when we are undecided or have questions.90003 90002 90077 90003 90002 As for social proof, it is highlighted in two ways: 90003 90024 90025 We see that a «community» exists around the service. 90026 90025 We see that many people use the service and are active in the community. 90026 90031 90002 One could criticize, however, that the numbers may not be visible enough. 90003 90002 90090 90003 90020 ElegantThemes 90021 90002 ElegantThemes is a company specializing in selling WordPress templates or «themes» and also markets a «builder» called Divi, which allows users to create pages in WordPress visually.On this topic, see our examples of landing page templates for WordPress. 90003 90002 We immediately see the social proof: it is the first element put forward that reassures the visitor about the service’s popularity: more than 400,000 users according to the site. 90003 90002 90099 90003 90002 We then notice that the value proposition is twofold and that two separate call-to-actions were created for the occasion: one to discover the ready-made templates and another to discover the brand’s plugins.90003 90002 Another interesting element: on the lower right side a conversation bubble appears, ready to answer questions that a visitor might ask. 90003 90002 The chat module is especially interesting since it also allows the user to send attachments, emojis, and GIFs which can only enhance the richness of the interaction. 90003 90002 90108 90003 90002 While browsing the landing page, visitors are offered the opportunity to try a «live» demonstration of the Divi Builder. This is a significant and compelling value proposition as users can discover the product directly without paying or even registering.90003 90002 90113 90003 90002 Further down on the landing page, the social proof is reiterated, and the paragraph contains an element intended to reassure potential buyers: a 30-day refund. 90003 90002 Additionally, the red-pink call-to-action contrasts with the blue background of the page, reinforcing our curiosity: we are visually attracted to the button placed in the center of the page. 90003 90020 Shopify 90021 90002 Shopify is a CMS that allows you to quickly and easily create e-commerce sites without programming knowledge.They stand out with their numerous resources available to users (guides, videos, podcasts, forums) as well as additional services that complement their core business: a store of ready-to-use «themes», a library of free photos, etc. 90003 90002 90124 90003 90002 On the landing page, the value proposition is immediately put forward: «the e-commerce platform made for you». The idea is therefore to address a large, often independent audience as evidenced by the photo illustration. 90003 90002 The special feature of this landing page is that the call-to-action contains a field for an e-mail address.This field is required to access the 14-day free trial offered just below that specifies that no credit card is required for the test: it is a major argument. 90003 90002 90131 90003 90002 90134 90003 90002 The rest of the landing page focuses on the features of the Shopify service. 90003 90002 With unique illustrations and short paragraphs, the company presents Shopify’s features and benefits to convince visitors to take advantage of the free trial or purchase a monthly subscription. 90003 90002 A major argument in the CMS sector, the widespread use of the service is highlighted with two elements: 90003 90024 90025 The graphical representation of the number of users and the income generated 90026 90025 Testimonials from real customers whose sites are online.90026 90031 90002 90149 90003 90002 The idea is to create a feeling of mimicry in the minds of visitors: «If 1,000,000 people use Shopify to create real shops without programming, so can I». 90003 90020 Salesforce 90021 90002 Salesforce needs no introduction. The king of «CRM» (Customer Relationship Management), the American company has several particularly well-developed landing pages that are worth a look. 90003 90002 90158 90003 90002 The first thing that jumps out is the illustrations and colors.An overview of solutions on Computer-Tablet-Mobile is presented on a background that inspires calm and serenity. 90003 90002 We also note that two calls to action are present on the upper left part above the fold: one for a demonstration and a second for a free trial. 90003 90002 Salesforce also offers a solution for large companies whose call to action is placed to the right of the free trial: great for capturing potential leads from large companies. 90003 90002 90167 90003 90002 When a visitor clicks on a call-to-action, they go from the home page to a landing page created specifically to convince as many people as possible to sign up for the free trial.90003 90002 Among the elements that stand out, we can see: 90003 90024 90025 The reminder of value proposition, «30-day free trial» 90026 90025 A telephone support hotline 90026 90025 The statement «no download, no software» in capital letters 90026 90025 Social proof by including logos of well-known references 90026 90025 Easy sign-up with Google+, Facebook, and LinkedIn 90026 90031 90020 Neil Patel 90021 90002 Neil Patel is a digital marketing consultant with a big reputation in the United States and around the world .His site receives several million hits a month thanks to an accessible content strategy and a variety resources created for visitors: blog articles, YouTube videos, practical guides, etc. 90003 90002 90190 90003 90002 What strikes us first on Neil Patel’s site is its uninhibited and straightforward approach to the issue. 90003 90002 The color theme is extremely simple and plays on the contrast between the orange background and the white text. The idea: ask visitors a direct, simple and short question to build engagement to a maximum.90003 90002 We also notice that the landing page offers a field (above the fold) designed to perform a live analysis of your site: it is a show of force that leads the visitor to discover by him or herself what could be improved on their own site. 90003 90002 90199 90003 90002 The particularity of Neil Patel’s site is that almost all pages are designed as landing pages each with one goal: to convert a maximum number of visitors. 90003 90002 The «Services» page, for example, (shown above) shows a long set of text that acts as a proof of authority for visitors.It explains what Neil can do for you, but also what he has done (see below) and the clients he has worked for. 90003 90002 90206 90003 90002 The approach is always very direct and focused on results and benefits. 90003 90002 Neil’s idea is to prove by A + B that he has the skills to help you improve your SEO. 90003 90002 90213 90003 90002 On the same «Services» page, the call to action comes at the end (and one can wonder, is it a good idea?). It is structured in several stages that invite visitors to enter their information in order to be contacted later.90003 90020 UpWork 90021 90002 UpWork is a world-renowned freelance platform. It allows companies to find skilled labor quickly for various assignments and allows the self-employed to register on the platform to offer their services. 90003 90002 90222 90003 90002 On the homepage, we can see from the outset that the graphical design is clear and that it is the «professional» aspect that is highlighted. Interestingly, the chosen tagline is not for freelancers but for companies. 90003 90002 The tone is direct, effective, and clear; we immediately understand the value proposition: to subcontract work efficiently.90003 90002 The call to action is placed on the left side above the fold. Its green color sets it apart from the rest of the landing page and consists of a search bar used to indicate the type of work that visitors want to outsource. If we pay attention to details, we can see that the background is actually a customer testimonial and we can watch the story: it has a lot of impact! 90003 90002 90231 90003 90002 The rest of the landing page is classic: it details the various services offered by freelancers and shows the paid offers for users.90003 90020 CodeCombat 90021 90002 CodeCombat is an interesting example. It is an educational game that allows children (and adults) to learn to program using a video game. The concept is simple: you program to progress in the game. 90003 90002 90240 90003 90002 The first interesting point of CodeCombat’s landing page is that the audience is twofold: it targets both teachers (who wish to use it in class) and children (who discover it by themselves or through by word of mouth). 90003 90002 The landing page’s focus is therefore on teaching and the program’s ease of use.Thus, we can see two calls to action: one for teachers and one for children / players. 90003 90002 90247 90003 90002 The rest of the landing page presents the benefits of using CodeCombat as well as screenshots to make the service «tangible». 90003 90002 90252 90003 90002 In a fairly traditional way, the rest reiterates the service’s strengths and includes a customer testimonial adapted to the target: that of a school principal. 90003 90004 Plated 90005 90002 Plated is a company specializing in delivering recipe ingredients: you select inspirations for recipes, and the company delivers all the ingredients needed to make the dish.90003 90002 90261 90003 90002 The first thing that strikes us about the Plated landing page is the graphic design; the colors are studied, and the company has a real visual identity. The photos of dishes stand out well, and the illustrations are well chosen. 90003 90002 Words are chosen carefully and are well suited to a target of «food lovers»: we would get hungry just looking at the site! 90003 90002 The call-to-action is clear, well placed above the fold; its green color clearly distinguishes it from the rest of the page.90003 90002 90270 90003 90002 The Plated landing page is long: you have to scroll for a long time to reach the end. However, each paragraph of the home page is thought of as an argument or a benefit in order to convince: 90003 90024 90025 Save time 90026 90025 Large range of choice 90026 90025 No more shopping 90026 90025 Quality products 90026 90025 Save money 90026 90031 90002 90287 90003 90002 We can also see a particularly attractive instant discount coupon in the header and whose color stands out.90003 90002 By offering 50% off the first order, Plated encourages the undecided to take action by decreasing the financial commitment. 90003 90002 Social proof is highlighted at the end of the landing page. Although it could have been placed higher, it remains visible and relevant. 90003 90002 90296 90003 90002 Plated offers chat support, something we find more and more on landing pages. 90003 90002 By offering this service, the idea is to make up for the lack of human interactions that one would find in stores and to provide help to undecided visitors.90003 90002 Plated’s strengths are highlighted successfully using simple, soothing images that convey simplicity and serenity to show that Plated makes your life easier. 90003 90020 MailChimp 90021 90002 MailChimp is an extremely popular automated marketing and emailing company. Their services are used by many to create e-mail, marketing and newsletter campaigns for e-commerce sites. 90003 90002 90309 90003 90002 As direct as Neil Patel, this landing page is extremely clear and straightforward: it addresses visitors in a frank manner while remaining vague: «Build your brand, Sell more stuff.». 90003 90002 This allows MailChimp to address visitors globally by avoiding excluding too many users from the outset. 90003 90002 The value proposition is as simple as possible: build your brand, sell more. 90003 90002 This straightforward and uninhibited approach is prevalent in Software as a Service (SaaS) solutions: the goal is to speak directly to business leaders of all sizes and get straight to the point. 90003 90002 Note that the call to action is very visible: it is located in the central position above the fold and offers a free trial (another one ?!).90003 90002 90322 90003 90002 As on Plated, the rest of the landing page details the benefits of using the service. This allows visitors to quickly «visualize» the service’s added value and get a clear idea of the following question: «Is this service for me?». 90003 90002 By building a long landing page, you allow your visitors to «scroll» as much as they want: this allows them to answer as many questions as possible while acting as a commercial brochure to highlight your added value. 90003 90002 90329 90003 90002 By using screenshots, MailChimp allows visitors to project themselves more easily.The idea is to help visitors better understand the service by viewing a sample. This technique can be adapted to video or even in the form of a live demonstration as ElegantThemes does. 90003 90002 We note that the free trial’s call-to-action is always accessible, wherever you are on the page, here at the top right. 90003 90002 90336 90003 90002 Once in the conversion funnel, visitors land on the form page needed to activate the free trial. In order to maximize conversions, the MailChimp registration form is intentionally: 90003 90002 By limiting the number of fields to three, MailChimp allows hesitant visitors to take the plunge more easily.The commitment requested is kept to a minimum: an e-mail, a username, and a password. 90003 90002 If it were to be improved, we could consider adding quick signup via Facebook or Google that would encourage even more conversions. 90003 90002 Did you like this article? If you are inspired and want to take the plunge, read our article dedicated to Bootstrap landing page templates. It’s the perfect asset for a successful landing page. 90003 90346.90000 Landing Page Design Inspiration For Your Next Layout 90001 90002 90003 Does beauty matter? Well, when it comes to landing page design, it can definitely influence how your offer is perceived. Ultimately, if your landing pages do not look good-or follow some best-practices-your conversions can suffer. 90004 90003 Landing pages that are well designed often convert better than those that are not, and the difference can be dramatic. Done right, design should support the text on your page and work with all other elements to prompt visitors to take action.90004 90007 But first: What are some design best practices? 90008 90003 Below we’ve rounded up tons of examples of amazing landing page design from Unbounce customers. But before we share them, let’s review some of the characteristics we typically see on great pages: 90004 90011 They’re Super Focused 90012 90003 A good landing page has only one objective: prompting visitors to do the one action you want them to do and convert. This is why 90014 many landing pages do not have menus or a ton of external links 90015 -you want your visitor to complete the call to action, not navigate away or get distracted.90004 90011 They Keep Scrolling to a Minimum 90012 90003 It can be great to include additional information about your offer on a page, but 90014 visitors should have everything they need-including the CTA button-without scrolling for days 90015. While long-form landing pages can convert in the case of complex offers, consider using lightboxes to showcase extra info instead of adding tons of page sections. 90004 90011 They Use Relevant, Engaging Visuals 90012 90003 Amazing design requires striking images.No matter how technical your offer (see the Panoply example below), you need something to break up the text. 90014 Your images should be engaging, relevant, and consistent with your brand 90015. They should also encourage visitors ‘eyes to scan the landing page and settle on the CTA button. 90004 90011 They Maintain Consistent Branding 90012 90003 Your 90014 landing page design should be consistent with your overall look 90015 so visitors can instantly recognize and associate it with your brand.This typically means using the same color scheme and design elements from your general website. It can be a tough line to walk, though, because landing pages should look different from your overall website-they’re generally simpler and do not include navigation, for example. Nonetheless, the branding and colors will often remain the same. 90004 90011 They Use F or Z Patterns 90012 90003 Research shows that 90014 most people’s eyes move around a website in an F or Z pattern 90015. The best landing page design usually takes these patterns into account.For instance, having a vertical visual on the left with the header on the top right and the CTA button a little lower on the right allows visitors to follow an F pattern-and end up with their eyes right on your CTA. 90004 90014 Not sure if your current design is driving conversions? 90015 Try out our Unbounce Landing Page Analyzer and see how your landing page scores across nine distinct performance categories. 90003 It also goes without saying that beauty is not the only thing to consider when evaluating landing page design.You want pages to look good, but they should also convert. Always combine good looks with some research about how your visitors behave to create especially 90044 effective 90045 pages. 90004 90003 This is where testing comes in. Depending on your industry, we’ve actually seen incredibly simple and understated pages perform crazy well-no design overhauls necessary. 90004 90003 And with that, let’s check out some beautiful designs! 90004 90007 The Best Landing Page Design Examples 90008 90011 1.Indochino 90012 90003 90004 90057 Image courtesy of Indochino. (Click image to see the full page.) 90003 If you’re creating a good-looking landing page, it helps to have an attractive product, which Indochino has covered. The Unbounce-built page above is an example of how Indochino provides not just tailored suits, but also handsome, tailored landing pages. 90004 90003 Here’s what we think makes this landing page design awesome: 90004 90062 90063 90014 Great visuals 90015: If you’ve got an attractive product, show it off.We get to see Indochino’s suits modeled here-and the dynamic pose helps visitors see how suave the product looks in the context of use. 90066 90063 90014 Use of space 90015: Just as importantly, visitors have all the information they need without a ton of scrolling. The CTA button is prominent and focused. This page’s design is simple and understated, but it gets the job done. 90066 90063 90014 On-brand 90015: The header text here is in a font that looks similar to the company logo, which helps create a feeling of brand consistency.90066 90075 90003 The page we see here is specifically created for men in Calgary-and designed to encourage them to take an offline action. (OK, first to book an appointment online, but then to physically visit the new showroom.) Part of successful landing page design is making offers specific to a certain audience, something that Indochino has mastered. 90004 90003 This landing page is actually 90044 so 90045 tailored that the fine details do not really make sense to someone who does not live in Calgary.You might miss that Chinook Centre is a shopping mall, for example, but the page is designed for those who know this already. 90004 90011 2. Zola 90012 90003 90004 90086 Image courtesy of Zola. (Click image to see the full page.) 90003 If you’re in the wedding industry, like online retailer / gift registry Zola, you know that design matters. The example page above showcases the company’s design savvy by serving up a simple, elegant landing page for brides and grooms-to-be. 90004 90003 Here’s what makes Zola’s page attractive: 90004 90062 90063 90014 Consistent branding 90015: It’s not immediately apparent if you’re a first-time visitor, but Zola’s branding uses shades of bluish-grey (see the hearts in the company logo).The backdrop maintains those colors while also providing excellent contrast for the images-that white wedding cake needs a contrasting background to pop. 90066 90063 90014 Simplicity 90015: Zola’s main ecommerce site is pretty busy. If the landing page included any of the standard navigation, visitors might get distracted by clicking around instead of starting their registry, which is the page’s goal. Keeping it simple means more visitors will complete the action instead of wandering aimlessly through the website.This page is perfect for directing their paid ads to as a way to lower cost-per-click. 90066 90075 90101 90011 3. Lujo 90012 90003 90004 90106 Image courtesy of Lujo. (Click image to see the full page.) 90003 This Z-pattern landing page designed for Lujo by the conversion gurus at digital agency KlientBoost manages to provide a ton of context while not being overwhelming. You could argue that there are two CTAs here-shopping the collection 90044 and 90045 watching the video. Lujo gets away with it because the video is presented so discreetly, as an extension of the product photos.It’s clear that the most important CTA on this page is checking out the collection of loungers. 90004 90003 Here’s what we love about this page: 90004 90062 90063 90014 Stunning (and consistent) visuals 90015: Not only is the product photography excellent, but it supports the Z pattern of landing page design while reinforcing the brand’s messaging. Lujo’s tagline is «put life on pause,» and everything about the visuals in this landing page reinforces that branding-from the sunhat resting on the video box to the deck shoes and the iced tea.Design should work hand-in-hand with messaging so that the text and the images combine to create an overall experience that makes sense. Lujo does that well in this landing page. 90066 90063 90014 Obvious USP 90015: Right below the photos, Lujo articulates-with both text and design elements-three unique selling points: free shipping, a five-year warranty, and New Zealand craftsmanship. Finding a way to subtly work those three ideas into the design means the visitor might not need to keep exploring before clicking that CTA button-they see these major benefits and that could seal the deal.90066 90075 90101 90011 4. Panoply 90012 90003 90004 90128 Image courtesy of Panoply. (Click image to see the full page.) 90003 Unlike some of the other examples, data analytics tool Panoply does not have an especially visually attractive product to show off-I mean, at the end of the day, it’s analytics software and not a snazzy suit. But Panoply’s landing page (designed by Directive Consulting) stands as a gorgeous testament to the fact that design and beauty are important even for technical B2B products and services.90004 90003 This is what we think makes this a beautiful (and effective) landing page: 90004 90062 90063 90014 Clever visuals 90015: Creatively showing off Panoply’s user interface in a subtle (but clear) way is one of the biggest wins of this landing page . Interesting visuals are always important, even when the product does not lend itself to photography. 90066 90063 90014 Social proof 90015: Including industry awards and a testimonial from GoDaddy above the fold-and doing so in a way that matches the overall design-is another great touch.A visitor does not need to go anywhere else on the landing page to know that industry experts trust Panoply. 90066 90075 90101 90011 5. Daily Harvest 90012 90003 90004 90148 Image courtesy of Daily Harvest. (Click image to see the full page.) 90003 Using imagery to evoke a strong emotional reaction might not be easier with any product than food. (People just need one look to tell whether or not they want to put something in their mouths.) Fortunately, Daily Harvest has a great-looking line of healthy snacks, and they’ve made strong design choices to help showcase that on this landing page.90004 90003 Here’s what we love about this page: 90004 90062 90063 90014 Animated visuals 90015: It would have been easy for Daily Harvest to use a static image of one of their smoothies here, but the brand takes it one step further. This animated hero shot is engaging-the smoothie looks like something I could have right now, if it were not for this darn computer screen-and the how-to GIFs help me immediately understand how this service works. 90066 90063 90014 Product examples 90015: The rest of the landing page is arranged with loads of lovely product images.It’s one thing to tell me you’ve got a huge catalog of nutritious treats-it’s another to show me actual examples of the meals I can order after I sign up. 90066 90075 Those slick animations are all great, but they could make for nightmarish load times on mobile. Check out Unbounce’s 2019 Page Speed Report and find out how other marketers are weighing page speed vs. beauty. 90011 6. Greats 90012 90003 90004 90167 Image courtesy of Greats. (Click image to see the full page.) 90003 Fashion is all about social identity, and it’s essential for brands to exhibit attributes that consumers want to ascribe to themselves: things like authenticity, quality, and 90014 90044 cool 90045 90015.This landing page for footwear brand Greats (built by WITHIN) does a beautiful job of brand-building through design while still driving visitors to convert. 90004 90003 Here’s why we think this is a (oh no, do not say it) «great» example of landing page design: 90004 90062 90063 90014 Amazing video 90015: This whole landing page is pretty sleek, but what really knocks it out of the park is the video just below the fold. Not only does the stop animation style look awesome, but it also gives Greats a chance to elaborate on their unique selling proposition-one stitch at a time.Check it out on YouTube below. 90066 90075 90003 90183 90184 90004 90062 90063 90014 Rule of three 90015: Greats applies the rule of three throughout this layout, making the benefit statements both visually striking and easily digestible. 90066 90063 90014 Mobile-responsive 90015: This landing page looks just as good on mobile as it does on desktop. Considering that mobile is projected to account for 54% of all ecommerce sales by 2021, it’s never been more critical to make on-the-go consumers a priority.90066 90075 90101 90011 7. Unbounce 90012 90003 90004 90201 Image courtesy on Unbounce. Hey, that’s us! (Click image to see the full page.) 90003 If we do say so ourselves, this recent landing page from our brand is great at showing, not telling. We’ve all been to slow websites and navigated away immediately-but what does that mean for marketers? Sure, we could explain with a bunch of text, but the animation on the right side of this page really makes it clear why fast-loading landing pages are a must.This landing page’s design follows an effective F pattern-and it’s hard to take your eyes off the dropping conversion rate in the animation. 90004 90003 Here’s what we think looks great here: 90004 90062 90063 90014 Animation 90015: Landing page load time is not the easiest thing to show in a static image (as we found), but it’s obvious once you add in an animation. 90066 90063 90014 Visual hierarchy 90015: Fitting the most important information in this animation into an overall F layout helps keep visitors reading.The animation-and the visuals it contains-helps make what could otherwise be a pretty boring landing page more dynamic and engaging. 90066 90063 90014 Text features 90015: We jam-packed this landing page with stats to back up our claims about slow loading pages, and we want those numbers to pop so they’re often bolded. When there’s a fair amount of text on your landing page, break it up by using separate paragraphs and putting the essential information in bold. This makes it easier for visitors to scan-and take action.90066 90075 90014 Do not think you’ve got the skills to make your pages look this good? 90015 Browse our huge collection of landing page templates and see how easy it is to build and publish something beautiful by yourself, no developer required. 90003 At the end of the day, when it comes to creating beautiful, effective landing pages, it’s about combining a sense of design with an understanding of how people behave when browsing the web. When you’re designing your next landing page, get the best of both worlds by watching your CTA placement, sourcing product photos and visuals, balancing header text, and ensuring your design elements both look good and drive conversions.90004 90224 90101 90007 More great landing pages examples (related content) 90008 90003 If you’re still not feeling inspired after all these gorgeous examples, we’ve got even more Unbounce-built landing pages to show off. (What can we say? Our customers are 90044 really 90045 good at it.) Take a look at a few of the features below: 90004 90232 90063 The proof is in the pudding. See conversion rates, insider tips, and more beautiful design by reading 12 High-Converting Landing Pages (That’ll Make You Wish You Built ‘Em).90066 90063 Still not feeling it? We got ya covered. You’ll find a tons of inspiration and new landing page ideas in The Best Landing Page Examples You Gotta Save for Your Swipe File. 90066 90063 Sometimes, creating landing pages for your mobile campaigns is a whole other ballgame. Here are mobile landing page examples that’ll totally knock your socks off. 90066 90063 Finally, if you’re promoting an iOS or Android app, look no further than these incredible examples of landing pages for mobile apps before you start creating your own.90066 90241.