Лендинг пейдж примеры дизайна: Примеры лендинг пейдж с высокой конверсией


15.07.1978 Facebook Twitter LinkedIn Google+ Разное


Содержание

22 свежих примера дизайна Landing Pages

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

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

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

2. Проект Photoshelter — специализированная платформа для тех, чей бизнес связан с фотографией (создание сайта, управление лицензиями на фото, фотохостинг, инструменты для поискового и социального (SMM) продвижения).

3. Raventools — это проект, предоставляющий услуги по автоматизации маркетинговых онлайн-мероприятий, связанных не только с контент- и SMM-маркетингом, но и с SEO, а также с контекстной рекламой в Google AdWords.

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

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

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

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

8. Positionly — прекрасный лендинг по SaaS-решению, позволяющему отслеживать, анализировать и управлять положением сайта в поисковой выдаче.

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

10. Tapshop — лендинг чешского сервиса, продающий услуги по настройке автоматических онлайн-продаж в интернет-магазинах.

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

12. Postable — лендинг онлайн-сервиса по сбору и управлению почтовыми адресами с возможностью отправки писем в адрес получателя без участия отправителя.

13. Getharvest — landing page по продаже программного обеспечения по управлению временем и координации совместных проектов.

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

15. Grazsecrets — мобильное приложение-путеводитель по австрийскому городу Graz. Программный продукт интегрирован с Google Map и позиционируется в качестве приложения, которое поможет туристам увидеть и узнать о городе то, чего обычным способом они узнать никогда не смогут.

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

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

18. Showcaseapp — мобильное приложение, позволяющее создавать свое собственное онлайн-портфолио с помощью iPad, а затем управлять им через планшет.

19. Довольно известный конструктор сайтов и интернет-магазинов. Команда Shopify помешана на тестировании и оптимизации конверсии, к этому лендингу нужно отнестись серьезно.

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

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

22. Squareup предлагает получить специальное приспособление в виде карт-ридера (Card Reader), позволяющее акцептировать кредитные или дебитовые карты, используя девайсы, работающие под управлением мобильных операционных систем iOS и Android. Этот лендинг неоднократно появлялся в нашем блоге, как прекрасный пример сбалансированной, высокопрофессиональной страницы.

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

Заказать дизайн лендинга в Москве — YouDo

Чтобы заказать дизайн лендинга, посетите сайт Юду. На YouDo зарегистрировано много опытных программистов, веб-дизайнеров, разработчиков, которые предоставляют полный спектр услуг:

  • оформление сайтов
  • создание макетов
  • разработку индивидуального дизайна web-странички
  • установку эксклюзивных шаблонов
  • адаптивную верстку сайтов под разные устройства

Программисты, зарегистрированные на Юду, помогут сделать современный веб-сайт и landing page недорого. В процессе разработки специалисты Юду применяют новые технологии и эффективные методы управления контентом CMS.

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

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

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

Особенности разработки сайтов

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

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

Правильно оформленные посадочные страницы помогут расширить целевую аудиторию и улучшить посещение сайта.

Специалисты Юду выполняют задание в таком порядке:

  • готовят текст и прототип
  • создают новый современный дизайн или корректируют имеющийся
  • верстают и программируют сайт
  • размещают сайт на платном хостинге
  • запускают трафик

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

Стоимость услуг специалистов

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

  • сложность проекта
  • тип сайта
  • подключение формы онлайн-оплаты
  • тестирование и интеграция сайта
  • настройка системы администрирования

Узнайте, сколько стоит работа профессионалов из прайс-листа на сайте Юду. У специалистов Юду цены самые доступные в Москве. Убедитесь в этом, ознакомившись с информацией в профилях исполнителей. 

Почему стоит обратиться к специалистам Юду?

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

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

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

Сотрудничая со специалистами, вы получите ряд преимуществ:

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

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

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

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

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

Создание дизайна Landing Page / Хабр

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

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

Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части. Содержание, Оформление и Практика.

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

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

Часть 1. Содержание Landing Page


1.

1 Текст – это всё

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

О тексте по порядку.

1.2 Заголовок целевой страницы

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

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

Можно усилить заголовок словами «Лучшие, быстрые, самые мощные» и т.д. В результате должно получиться что-то вроде «Умные роботы пылесосы iRobot Roomba в Москве». Не стесняйтесь, это реально работает.

1.3 Меньше воды в тексте

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

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

Как избавиться от воды? Подкрепляйте каждое утверждение ФАКТАМИ, ЦИФРАМИ и ГРАФИКАМИ. Не нужно писать «У нас много довольных клиентов», напишите, сколько довольных клиентов, детализируйте и сегментируйте клиентов. Столько-то женщин приобрело пылесос, столько-то холостяков остались довольны чудо девайсом, столько-то часов данный пылесос сэкономил времени, столько-то часов проработал. Подкрепляйте каждое утверждение цифрами или не делайте утверждения вовсе, чтобы избавить посетителя от желания приобнять белого друга.

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

При грамотной работе в результате вы получите гармоничную целевую страницу. Главное, не торопитесь.

1.4 Не обманывайте

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

реально существуют

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

1.5 Выгода/Преимущества

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

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

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

1.6 Указывайте на то, что товар или услуга являются новинкой

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

1.7 Обязательно размещайте отзывы

Дополню. Размещайте

НАСТОЯЩИЕ

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

Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят

.

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

Каждый отзыв должен начинаться заголовком, которым может служить выдержка из текста самого отзыва с описанием преимущества для клиента, например, «Благодаря пылесосу iRobot Roomba я экономлю около 20 часов на уборке в месяц…». После заголовка идет текст отзыва. Затем, имя того, кто отзыв написал и кем он является – семьянин, ген. директор, бухгалтер, домохозяйка и т.д. Важно, чтобы отзыв был подкреплен не только хорошим заголовком, но и фотографией реального человека. Подчеркивайте важные достижения клиента (благодаря продукту или услуге, естественно) в тексте жирным выделением или цветом, соответственно и в дизайне при оформлении.

1.8 Гарантия возврата денег

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

Часть 2. Оформление Landing Page


2.1 Продукт в действии

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

Очень часто мне приходится наблюдать такой позор, как протухшая на вид пицца в шапке, черно-белая картинка автомобиля, летающий в воздухе непонятный девайс и прочие ошибки. Нужно сделать так, чтобы продукт или услугу захотелось приобрести. Если это пицца, пусть она будет такая аппетитная, с плавленым сырком, яркая, что ее захочется съесть немедля. Добавьте красок продукту, дымка, поджаристую корочку. В пределах разумного, конечно. Покажите продукт в действии. Если это приложение для мобильных устройств – сфотайте пользователя с телефоном и вашей софтиной на борту или, на худой конец, скачайте Mockup PSD с телефоном в руке и разместите скриншот приложения в рабочем состоянии. Еду отображайте яркой, горячей и готовой к употреблению. Это должно быть в шапке. Кроме того, было бы не плохо выложить видео с презентацией продукта. Лаконичный заголовок, кнопка и продукт в действии…

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

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

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

2.3 Забудьте о попандерах

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

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

2.4 Не делайте много полей в формах

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

2.5 Не стесняйтесь показывать лица, адреса и телефоны

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

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

2.6 Размещайте логотипы известных брендов

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

Итак, мы рассмотрели ключевые моменты, которые необходимо учитывать при разработке Landing Page. Давайте объединим все вышесказанное в следующем разделе, напишем текст и создадим дизайн целевой страницы в Фотошопе.

Разрабатывать Landing Page, волею судьбы, будем для Пылесоса iRobot Roomba. Пример абсолютно рандомный и пришел в голову в процессе написания данного мануала.

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

Часть 3. Практика


3.1 Текст Landing Page

Итак, после изучения 1 и 2 части у нас уже есть некоторое представление о том, какой должна быть «правильная» целевая страница. Этого вполне достаточно для того, чтобы написать текст. Обратите внимание, выше были приведены основные рекомендации, но в зависимости от продукта или услуги, могут добавляться свои пункты, секции и функционал – нужно изучить объект и немного подумать.

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

Текст.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
  • Секция Модельный ряд (Фото – Цена – Старая цена — Купить):
    • Roomba 630
    • Roomba 870
    • Roomba 880
    • Scooba 450

  • Гарантия. Текст гарантии возврата денег под моделями.
  • Секция преимущества:
    • Заголовок: «Преимущества перед обычным пылесосом»
    • Подзаголовок: «Это исключительно «умная» техника, которая самостоятельно производит уборку помещения и после завершения работы возвращается на станцию для подзарядки»
    • #1. Экономит время. Вы экономите свои силы и время, тратя его на более приятные занятия.
    • #2. Не нуждается в управлении. Пылесос сам составляет для себя оптимальный маршрут, благодаря интеллектуальной системе AWARE.
    • #3. Компактный. Техника не займет много места и работает без подключения к электросети.
    • #4. Самозаряжаемый. Зарядки аккумулятора хватает на 2 часа, после чего робот самостоятельно возвращается на платформу для подзарядки.

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
  • Секция Контакты. Адрес и карта с меткой.

3.2 Дизайн

Конечный результат всех потуг можно посмотреть

здесь

.

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

  • Всегда учитывайте бренд, стиль продукта, айдентику, если таковые имеются, старайтесь рисовать сайт в одном стиле;
  • Старайтесь использовать не более 3-х цветов в дизайне и несколько производных оттенков;
  • Выберите приятные сочетания шрифтов для дизайна;
  • Не лепите элементы близко друг к другу – это признак дурного вкуса;
  • Соблюдайте вертикальный ритм при расположении элементов, дайте воздуха дизайну;
  • Не делайте слишком маленький интерлиньяж (line-height) между строками в текстовых блоках;
  • Не используйте картинки плохого качества в дизайне;
  • Сжимайте всю графику с помощью TinyPng или подобных инструментов.
  • Перед ресайзом изображения обязательно конвертируйте его в смарт объект в Photoshop, на случай, если вдруг придется увеличить картинку без потери качества.
  • В данном примере максимальная ширина контента равна 1170px (сетка Bootstrap, чистый файл в архиве references/bootstrap-1170.psd).

Теперь нарисуем дизайн по составленному в п 3.1 тексту. Углубляться в основы работы с Photoshop не будем, рассмотрим ключевые моменты при создании дизайна Landing Page. Все секции будут на всю ширину макета, а контент в пределах сетки Bootstrap. Установим шрифты Raleway из папки Fonts. Размеры и цвета вы можете посмотреть в готовом макете references/ready_design.psd.

Итак, по тексту.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.

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

  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.

У секции имеется заголовок и подзаголовок, не забываем.

  • Секция Модельный ряд (Фото – Цена – Старая цена – Купить).

В следующей секции «Модельный ряд» отобразим 4 девайса. Новая цена, старая цена и кнопка заказать. Старая цена говорит посетителю о том, что работает система скидок и у него есть возможность купить аппарат дешевле. Каждый айтем размещаем в 3 колонки сетки.

  • Гарантия. Текст гарантии возврата денег под моделями. Данная секция крайне желательна, но, если у продавца нет такой опции в продажах, можно не выдумывать.

  • Секция преимущества:

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

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.

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

  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).

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

  • Секция Контакты. Адрес и карта с меткой.

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

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

Правильная структура лендинга 2022: список блоков

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

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


Пример длинного лендинга для продажи франшизы

А могут быть и совсем небольшими:


Небольшой лендинг онлайн-школы английского языка

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

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

Заголовок и подзаголовок

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


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

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

Нет времени разбираться?

Разработка сайта под ключ

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

Ваш сайт

Подробнее об услуге

Подзаголовок должен пояснять заголовок или отвечать на вопрос пользователя «Что я получу?»

Элементы

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

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


Пример оформления первого экрана лендинга

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

Логотип

Логотип на лендинге необходим, если он известен и прочно ассоциируется с брендом:


Логотип на лендинге

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

Форма заказа

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

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

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


Оформление первого экрана лендинга магазина, продающего популярный товар

Привлекли 35.000.000 людей на 185 сайтов

Мы точно знаем, как увеличить онлайн–продажи

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

Ваш сайт

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

Изображение товара

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


Пример удачно подобранного изображения для лендинга компании по продаже и монтажу окон

Оффер

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


Пример оффера

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

  • Качество: крепкий итальянский стол из красного дерева.
  • Скорость: доставка мебели в течение суток.
  • Стоимость: скидка 30 % на второй товар.

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

Слайдер

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

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


Пример слайдера с фотографиями щенков

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

Список выгод

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


Пример оформления списка выгод

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

Стикеры

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


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

В данном примере на стикере размещена убеждающая фраза «Прекрасный подарок на любой повод!».

Дизайн первого экрана

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


Пример дизайна лендинга

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

Типичные для первого экрана ошибки

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


На первом экране отсутствует форма заявки

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

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


Нагромождение офферов

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

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


Пример неудачного дизайна лендинга

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

Тело лендинга

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

Блок о проекте

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


Видеообзор на лендинге зачастую более информативен, чем текст

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

Блок с преимуществами

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


Блок с преимуществами товара

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

Сценарии использования / Ход работ

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


Пример блока со сценарием пользования

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

Описание целевой аудитории

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


Пример блока с описанием целевой аудитории

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

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

Тарифы и цены

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


Блок с ценами

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

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

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


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

Согласитесь, фраза «Получить деньги» привлекает куда больше, чем «Связаться с нами»?

Форма заявки

Форму заявки расположите в 3-4 местах: на первом экране (об этом говорили выше), в середине и в конце страницы. Целевое действие, которое пользователь совершит, заполнив форму, зависит от конечной цели лендинга. Если вы продвигаете вебинар, вам нужно, чтобы пользователи регистрировались на него. Если же вы продаете какой-то товар, то ваша цель — получить контактные данные.


Пример формы регистрации

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

Отзывы

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


Отзывы на лендинге

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

Партнеры

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


Блок с перечнем партнеров

Видео

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

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

FAQ

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


Оформление блока FAQ на лендинге

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

Контактные данные

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

Помимо номера телефона и email-адреса, в контактную информацию можно добавить адрес, карту и данные о ИП / юридическом лице.

Команда

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


Фото команды на лендинге

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

Факты в цифрах

Цифры привлекают внимание и легко воспринимаются, поэтому мы рекомендуем использовать их, к примеру, таким образом:


Использование фактов в цифрах

К формулированию подобного текста нужно подходить с особой внимательностью. К примеру, как вам такое предложение: «Поставили 150 тыс. тонн щебенки для 3 тыс. км дорожного полотна за 10 лет»? Вызывает ли оно у вас какие-то эмоции? Вряд ли, ведь из него ничего не понятно. Цифры в этом примере слишком большие, осознать их довольно трудно. Исправить ситуацию можно так: «Поставим до 10 тыс. тонн щебенки всего за 24 часа». У пользователя уже есть представление о необходимом ему количестве материала. Теперь он знает ваши условия, сравнивает их с предложениями конкурентов и делает выбор. Помните: цифры на лендинге — не для красоты, а для удобства клиента.

Сертификаты

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

Портфолио

Если у вас есть успешные кейсы, покажите их на лендинге. Достаточно будет 3-4 карточек с фото и текстом в формате карусели. Также обратите внимание на такой любопытный вариант:


Оформление портфолио на лендинге юридической компании 

Счетчик

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


Счетчик на лендинге

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

Всплывающие окна

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


Пример всплывающего окна на лендинге

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

Виджет обратной связи

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


Виджет обратной связи

Футер лендинга

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


Пример оформления футера

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

Кнопки соцсетей на футере

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

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


Пример размещения контактных данных и формы обратной связи в футере

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

Что такое лендинг пейдж | Евгений Еликов

Landing page — лендинг пейдж или посадочная страница.
Популярный сегодня маркетинговый инструмент.

Изначально страница была задумана как один из инструментов директ-маркетинга.

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

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

На самом деле идеальная посадочная страница, должна укладываться в один экран!

 

Существует два основных типа лендинг пейдж:

Информационный лендинг пейдж.

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

Страница действия (транзакционный лендинг).

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

 

Основные блоки дизайна лендинг пейдж:

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

1. Логотип и основная деятельность компании.

2. Заголовок. Собственно к чему всё это.

3. Коротенечко описание и картинка.

4. Блок преимуществ.

5. Для целевого лендинга — обязательна форма.

6. Желательно ограничение по времени или количеству.

7. Отзывы.

8. Дальше по вкусу.

Итак, смысл лендинга — коротко и ясно сделать выгодное заявление.

 

Подробнее о том, как я делаю дизайн лендинг пейдж →

Портфолио дизайнера. Лендинг пейдж →

 

Хорошие примеры западных лендинг пейдж:

Минимализм при создании landing page

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

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

Несколько примеров минимализма целевых страниц

Давайте рассмотрим минимализм landing page некоторых успешных веб-приложений:

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

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

Минимализм landing page: одна основная идея

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

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

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

Landing Page пример: Dropbox

Веб -сайт Dropbox является примером того, как минималистский дизайн ярко демонстрирует эту концепцию. Landing page от Dropbox имеет только один призыв к действию, исходя из  предназначения веб-страницы. Основная цель дизайна — получить посетителей сайта, чтобы они нажали на кнопку «Зарегистрироваться». Так, кнопка «Зарегистрироваться» является наиболее ярким элементом на странице. Все остальное не имеет такого значения.

Конечно, есть и вторичные альтернативные действия посетителей целевых страниц Dropbox. Это кнопки «Загрузите программное обеспечение», «войдите в систему» (если вы уже пользователь Dropbox) или «узнать больше о Dropbox». Однако эти альтернативные кнопки созданы таким образом, чтобы никак не препятствовать основной цели — нажатие на кнопку «РЕГИСТРАЦИЯ».

Все несущественные элементы удалены или приглушены:

-Название сайта ( Dropbox ) даже не отображается на странице;

-Чтобы объяснить, как работает Dropbox , используется простая иллюстрация, что вдвойне обращает внимание пользователей на кнопку «Зарегистрироваться»;

-Слоган («Ваш материал, в любом месте») короткий и несложный.

Так,  landing page от Dropbox уверенно и смело показала, какие действия требуются от посетителей сайта, причем это сделано очень грамотно и четко.

Landing Page пример: Mailbox

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

Первичное действие — нажать большую, отчетливо выделяющуюся кнопку с надписью «Получить приложение», которое дает пользователю Mailbox в Apple App Store.

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

Landing Page пример: Karma

Karma является еще одним прекрасным примером красивого минимализма целевой страницы.

Желаемое действие для этой landing page — нажать на кнопку «Купить». Первичное действие отображается дважды: одно в середине сайта, а другое — в его верхней части. Кнопки призыва к действию обе зеленые, одинаково помечены и визуально схожи, что создает между ними связь.

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

Краткое описание над кнопками вызова к действию коротко информирует об уникальной ценности предложения от Karma: подключение и обмен благодаря Wi-Fi.

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

Основные компоненты минималистских landing page

Минималистская landing page состоит из трех основных компонентов:

1.Первичное действие

2.Объяснение того, что такое продукт / услуга

3.Альтернативный вариант

Советы по созданию минималистских landing page

1.Сосредоточьтесь на создании правильной визуальной иерархии

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

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

Размер: большие элементы находятся выше по визуальной иерархии

Положение на веб-странице: для большинства сайтов  элементы в верхней и в левой части веб-страницы выше по визуальной иерархии 

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

Визуальная сложность: внешне более сложный элемент по сравнению с соседними элементами дает больший визуальный вес  

Пробелы: большие пробелы вокруг элемента дают ему высокий визуальный вес

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

Пример: Numbrs

Минималистский веб-дизайн Numbrs является хорошим примером для разговора о визуальной иерархии.

Описание приложения (1) и первичной кнопки призыва к действию (2) являются двумя наиболее яркими элементами веб-страницы.

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

Название сайта (4) и альтернативные действия (5) располагаются ниже по визуальной иерархии.

Пример: Wander

Другая версия грамотной визуальной иерархии можно увидеть в минималистской landing page от Wander. Здесь только четыре элемента веб-дизайна:

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

Значительно ниже в визуальной иерархии идут вторичные альтернативные действия посетителей landing page сайта Wander. Кому-то может захотеться бродить по Facebook (3) . Кнопка Facebook также отображает количество лайков, что выполняет еще одну задачу — доказательство интереса к  приложению среди посетителей соцсетей.

Другие посетители по альтернативному действию сайта могут зайти в другие социальные сети Wander или читать блог Tumblr (4).

Убедитесь, что первичное действие является заметным элементом на сайте

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

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

Пример: enthuse.me

Хороший вариант landing page, где первичное действие в виде выпуклой кнопки, можно увидеть на сайте enthuse.me:

Здесь хорошая визуальная иерархия, где сразу видно, что первичное действие — нажать на кнопку «Начать!».

Пример: IFTTT

Обратите внимание, какое совершенно очевидное первичное действие у целевой страницы сайта IFTTT:

Используйте цвета и оформление грамотно

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

Пример: Basecamp

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

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

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

Пример: Path  

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

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

Придерживайтесь сжатого содержания текста

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

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

Пример: Contently

Сайт Contently может описать свою веб-службу всего в 3 словах: «Расскажите отличные истории». Это настолько глубоко, учитывая то, что веб-сервис сосредоточен вокруг этого содержания! Небольшое количество текста на landing page снижает вероятность изменения решения посетителя сайта по выполнению действия.

Пример: Shipment

Еще один хороший вариант короткого текста можно увидеть на Shipment. В этих простых словах – «Примем участие и рассмотрим Ваш проект»- посетитель сайта становится мгновенно в курсе того, что сайт Shipment может сделать для него / нее.

Опишите товар / услугу быстро

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

Пример видеообъяснения: Couple

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

Так, видео постепенно раскрывается при нажатии на кнопку со значком «Play Now»:

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

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

Пример интерактивного объяснения: Apple Mac Pro

Минималистская целевая страница Apple Mac Pro демонстрирует другой популярный способ описания продукта: интерактивное  объяснение продукта.

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

Пример c фото: Wallmob

Фото высокого фонового разрешения на Wallmob является образцом того, как можно использовать важное изображение.

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

Простота — залог успеха

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

Автор — Karol K

Перевод и обработка — дизайн-студия ВладВеб

Дизайн целевой страницы Вдохновение для вашего следующего макета

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

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

Но сначала: каковы некоторые передовые методы проектирования?

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

Они очень сфокусированы

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

Они продолжают прокручивать до минимума

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

Они используют актуальные, привлекательные визуальные эффекты

Удивительный дизайн требует ярких изображений.Каким бы техническим ни было ваше предложение (см. пример Panoply ниже), вам нужно что-то, чтобы разбить текст. Ваши изображения должны быть привлекательными, актуальными и соответствовать вашему бренду . Они также должны побуждать посетителей сканировать целевую страницу и останавливаться на кнопке CTA.

Они поддерживают единый брендинг

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

Они используют шаблоны F или Z

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

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

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

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

И на этом давайте познакомимся с красивым дизайном!

Лучшие примеры дизайна целевой страницы

1.Индокино

 

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

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

Вот что, по нашему мнению, делает дизайн этой целевой страницы потрясающим:

  • Отличные визуальные эффекты : Если у вас есть привлекательный продукт, покажите его.Здесь мы видим смоделированные костюмы Indochino, а динамическая поза помогает посетителям увидеть, насколько учтиво выглядит продукт в контексте использования.
  • Использование пространства : Не менее важно то, что посетители имеют всю необходимую им информацию без тонны прокрутки. Кнопка CTA видна и сфокусирована. Дизайн этой страницы простой и сдержанный, но он выполняет свою работу.
  • Бренд : Текст заголовка здесь набран шрифтом, похожим на логотип компании, что помогает создать ощущение единообразия бренда.

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

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

2. Zola

 

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

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

Вот что делает страницу Zola привлекательной:

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

3. Lujo

 

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

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

Вот что нам нравится на этой странице:

  • Потрясающие (и последовательные) визуальные эффекты : Фотография продукта не только превосходна, но и поддерживает Z-образный дизайн целевой страницы, усиливая послание бренда. Слоган Луджо — «Поставь жизнь на паузу», и все, что касается визуальных эффектов на этой целевой странице, усиливает этот брендинг — от шляпы от солнца, лежащей на видеобоксе, до кроссовок и чая со льдом.Дизайн должен работать рука об руку с обменом сообщениями, чтобы текст и изображения объединялись для создания общего впечатления, которое имеет смысл. Lujo делает это хорошо на этой целевой странице.
  • Очевидное USP : Прямо под фотографиями Луджо (с помощью текста и элементов дизайна) формулирует три уникальных преимущества: бесплатная доставка, пятилетняя гарантия и новозеландское мастерство. Нахождение способа незаметно внедрить эти три идеи в дизайн означает, что посетителю, возможно, не нужно продолжать изучение, прежде чем нажимать кнопку CTA — они видят эти основные преимущества, и это может заключить сделку.

4. Panoply

 

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

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

Вот что, по нашему мнению, делает эту красивую (и эффективную) целевую страницу:

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

5. Daily Harvest

 

Изображение предоставлено Daily Harvest. (Щелкните изображение, чтобы открыть страницу полностью. )

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

Вот что нам нравится на этой странице:

  • Анимированные изображения : Daily Harvest было бы легко использовать здесь статичное изображение одного из своих смузи, но бренд пошел еще дальше. Этот анимированный снимок героя привлекает внимание — смузи выглядит так, как будто я мог бы получить его прямо сейчас, если бы не этот проклятый экран компьютера, а GIF-файлы с практическими рекомендациями помогают мне сразу понять, как работает этот сервис.
  • Примеры продуктов : Остальная часть целевой страницы состоит из множества красивых изображений продуктов. Одно дело сказать мне, что у вас есть огромный каталог питательных угощений, и совсем другое — показать мне реальные примеры блюд, которые я могу заказать после регистрации.
Все эти плавные анимации великолепны, но они могут привести к кошмарному времени загрузки на мобильных устройствах. Ознакомьтесь с отчетом Unbounce о скорости страницы за 2019 год и узнайте, как другие маркетологи оценивают скорость страницы по сравнению с ее красотой.

6. Greats

 

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

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

Вот почему мы думаем, что это (о нет, не говорите так) «отличный» пример дизайна целевой страницы:

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

  • Правило трех : Greats применяет правило трех во всем этом макете, делая заявления о преимуществах визуально яркими и легко усваиваемыми.
  • Мобильный : эта целевая страница выглядит так же хорошо на мобильных устройствах, как и на компьютере. Учитывая, что, по прогнозам, к 2021 году на мобильные устройства будет приходиться 54% всех продаж электронной коммерции, никогда еще не было так важно сделать мобильных потребителей приоритетом.

7. Unbounce

 

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

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

Вот то, что, по нашему мнению, здесь выглядит великолепно:

  • Анимация : Время загрузки целевой страницы не так просто показать на статическом изображении (как мы обнаружили), но это становится очевидным, если вы добавите анимацию.
  • Визуальная иерархия : Включение самой важной информации в этой анимации в общий макет F помогает посетителям читать. Анимация и содержащиеся в ней визуальные эффекты помогают сделать довольно скучную целевую страницу более динамичной и привлекательной.
  • Особенности текста : Мы заполнили эту целевую страницу статистикой, чтобы подтвердить наши заявления о медленной загрузке страниц, и мы хотим, чтобы эти цифры выделялись, поэтому они часто выделяются жирным шрифтом. Когда на вашей целевой странице достаточно текста, разбейте его, используя отдельные абзацы и выделяя основную информацию жирным шрифтом. Это облегчает посетителям сканирование и принятие мер.
Не думаете, что у вас есть навыки, чтобы ваши страницы выглядели так хорошо? Просмотрите нашу огромную коллекцию шаблонов целевых страниц и убедитесь, как легко создать и опубликовать что-то красивое самостоятельно, без разработчика.

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


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

  1. Доказательство находится в пудинге. Узнайте о коэффициентах конверсии, советах инсайдеров и более красивом дизайне, прочитав статью «12 целевых страниц с высокой конверсией (которые заставят вас пожалеть, что вы их не построили»).
  2. Все еще не чувствуете? Мы тебя прикрыли.Вы найдете массу вдохновения и новых идей для целевых страниц в «Лучших примерах целевых страниц, которые вы должны сохранить для своего Swipe-файла».
  3. Иногда создание целевых страниц для мобильных кампаний — совсем другое дело. Вот примеры целевых страниц для мобильных устройств, которые просто сразят вас наповал.
  4. Наконец, если вы продвигаете приложение для iOS или Android, обратите внимание на эти невероятные примеры целевых страниц для мобильных приложений, прежде чем создавать свои собственные.

23 эффективных примера дизайна целевой страницы, которые конвертируют

Нил Патель стал соучредителем Crazy Egg в 2005 году.300 000 веб-сайтов используют Crazy Egg, чтобы понять, что работает на их веб-сайте (с такими функциями, как тепловые карты, карты прокрутки, реферальные карты и записи пользователей), исправить то, что не работает (с помощью редактора WYSIWYG) и протестировать новые идеи (с помощью надежного A/ B Инструмент тестирования).

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

Зачем вам создавать целевую страницу — или множество целевых страниц? Потому что они являются одними из самых мощных инструментов конвертации в вашем заднем кармане.Вы можете создать целевую страницу для каждого источника рефералов.

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

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

23 примера дизайна целевой страницы, которые вы захотите украсть в 2018 году

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

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

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

Давайте копать.

1. Моз Про

Мне нравится целевая страница Moz Pro, потому что на ней быстро указывается USP продукта. Клиенты могут рассчитывать на более высокий рейтинг, качественный трафик и измеримые результаты. Затем у вас есть призыв к действию — «Начать бесплатную пробную версию» — повторяющийся в панели навигации и на главном изображении тем же ярким цветом.

2. Предприятие Twago

Почему бы не стать большим, смелым и красочным? Целевая страница Twago Enterprise проста и энергична.У вас есть USP крупным шрифтом, за которым следует краткое описание продукта.

CTA — Запросить демонстрацию — имеет цвет, которого нет больше нигде на странице.

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

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

3.180fusion Даллас

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

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

4. Фликр

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

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

.

5. Unbounce для агентств

Целевая страница сервисов Unbounce на уровне агентства действительно выделяется. Ярко-синие акценты в сочетании с ярко-оранжевыми CTA работают визуально, чтобы передать последовательное сообщение.

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

Конкурирующие CTA могут работать против вас, если вы не будете осторожны. Ниже я объясню, как Crazy Egg Recordings может помочь вам понять, нужно ли вам удалить призыв к действию или создать более визуальное разделение на странице.

6. Авторы Upwork

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

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

7. Codecademy Pro

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

Мне также нравится использование слова «разблокировать» в начале основного текста. Это необычное слово в данном контексте и поэтому привлекает внимание.

8.

Веснушка

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

9. Квадрат

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

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

10. BuildFire

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

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

11. Привет Бар

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

Форма короткая и приятная, и у вас есть несколько вариантов регистрации, что увеличивает вероятность того, что люди дойдут до конца.

12. Полоса

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

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

13. Образовательный центр Нойхаус

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

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

14. Эйр Канада

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

15. Революция в дрессировке собак Зака ​​Джорджа

Это целевая страница книги Зака ​​Джорджа «Революция в дрессировке собак».Это бестселлер и всего лишь один из его продуктов. Вы получаете логотипы мест, где можно купить книгу, и заголовок, который вызывает любопытство. Симпатичная обложка тоже не помешает.

16. Костко

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

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

17. Асана

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

18. ХостГатор

Целевая страница общего веб-хостинга

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

19. Веганское общество

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

20. Дропбокс

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

21. Естественно говорящий дракон

Nuance, создатель Dragon Naturally Speaking, предлагает отличный пример дизайна целевой страницы на своей странице Dragon для ПК. Он включает в себя приятное изображение главного героя, простой заголовок и список УТП в основном содержании.

22. Инвестопедия

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

23. Фитбит

Целевая страница «Что нового» для Fitbit уникальна и стильна, с несколькими категориями на выбор и изящным сочетанием текста и иллюстраций.

Рекомендации по дизайну целевых страниц

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

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

Создайте целевую страницу для вашей целевой аудитории

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

Это неправильное мышление.

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

Версия 1:

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

Версия 2:

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

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

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

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

Выделите предложение визуально

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

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

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

Определите конкретную цель дизайна целевой страницы

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

Допустим, вы продаете очень простой инструмент SaaS, решающий небольшую проблему. Он крошечный, но мощный по-своему.

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

Выберите один из лучших инструментов для целевых страниц

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

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

Узнайте, как понять, что работает, а что нет

Когда вы создаете целевую страницу, вы вздыхаете с облегчением. Работа сделана, верно?

Совсем нет.

После того, как вы создали целевую страницу, вам необходимо следить за ней.Используйте такие инструменты, как Google Analytics и Crazy Egg, чтобы выяснить, насколько хорошо ваша целевая страница работает с вашей аудиторией. Куда нажимают посетители? Как долго они остаются на странице? Они кажутся растерянными или разочарованными?

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

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

Заключение

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

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

21 пример лучшей конверсии

Возникли проблемы с поиском наиболее конвертируемого дизайна целевой страницы для вашего бизнеса? Уже нет!

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

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

Создайте целевую страницу!

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

Без лишних слов, пришло время настоящей магии целевой страницы!

Но сначала…

Что такое целевая страница?

Вы уже тысячу раз слышали легенду о мифическом лендинге? Нет?

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

Источник

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

Теперь давайте посмотрим, как его создать!

Как создать целевую страницу

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

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

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

Добавление правильных ингредиентов даст вам целевых страниц с высокой конверсией для привлечения посетителей.

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

Лучшие дизайны целевых страниц, которые вдохновят ваше следующее творение

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

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

Лучшие дизайны целевых страниц электронной коммерции

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

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

Посмотрим!

1.Hemster — простая и элегантная структура

Заголовок и копия: Целевая страница Hemster имеет простой дизайн, отражающий элегантный дух бренда. Хотя заголовок не показывает преимущества конвертации, на помощь приходит поддерживающий текст! Более того, если вы присмотритесь, вы заметите, что бренд использует текст, когда необходимо подчеркнуть преимущества и не утомлять посетителя.

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

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

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

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

Вдохновись!

2. Quip — пример целевой страницы после клика

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

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

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

Социальное доказательство: Бренд использует социальное доказательство, чтобы показать посетителям, что у него есть законный продукт, признанный такими крупными компаниями, как TIME и GQ.

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

3. Dollar Shave Club – Целевая страница с видео

Заголовок и копия: Dollar Shave Club создал уникальную страницу, которая, согласно нашему исследованию, привела к 12 000 заказов в течение 48 часов. Страница привлекает внимание заголовком, подчеркивающим преимущества подписки на услугу.

Дизайн: Здесь выделяется уникальный контент, созданный Dollar Shave Club. Как видите, видео стратегически расположено рядом с кнопкой CTA, чтобы упростить конвертацию потенциальных клиентов. Различные цвета также создают приятный эффект, а три секции внизу дают посетителю больше причин приобрести лезвия бренда.

CTA: CTA оранжевого цвета привлекает внимание, привлекая потенциальных клиентов и превращая их в клиентов. Кроме того, призыв к действию очень действенный, несмотря на простое «Сделай это.”

Социальное доказательство: Конечно, социальное доказательство также является частью дизайна, в котором представлены некоторые известные бренды (и просвещенный клиент № 164), чтобы убедить целевую аудиторию в том, что услуга стоит их времени и денег!

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

4. Indochino — Целевая страница с Социальная лента

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

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

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

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

Умно, правда?

5. AXIS — Минималистский дизайн

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

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

CTA:  Секретным оружием AXIS является ярко-красный цвет кнопки CTA, усиленный бело-серой цветовой схемой. Копия CTA также проста, а использование «сейчас» добавляет немного срочности.

Социальное доказательство:  Бренд использует логотипы известных компаний, таких как CBS, Fox News и TechCrunch, чтобы повысить доверие к себе и убедить новых клиентов в том, что это не мошенничество.

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

Вдохновение для дизайна целевой страницы SaaS

Для предприятий SaaS целевые страницы — это настоящий швейцарский армейский нож для лидогенерации.

Планируете вебинар? Сделайте посадочную страницу! Расширить список адресов электронной почты? Сделайте посадочную страницу!

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

Посмотрим!

6.Moosend — Целевая страница вебинара

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

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

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

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

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

7. Hotjar — Пример страницы привлечения потенциальных клиентов

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

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

CTA: Hotjar использует ярко-розовую кнопку CTA, которая выделяется на целевой странице.Однако это не единственное, что заставляет его конвертировать. Копия призыва к действию также является действенной, используя дополнение «бесплатно навсегда», чтобы сделать предложение компании более ценным!

Социальное доказательство: Наконец, стоит упомянуть, что Hotjar использует свой значок G2 и логотипы компании в качестве социального доказательства для установления доверия и повышения конверсии.

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

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

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

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

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

9. Shopify – дизайн целевой страницы, протестированный A/B

Заголовок и копия: Целевая страница Shopify содержит все необходимые заметки по дизайну и многое другое! В заголовке нет лишнего, сразу к делу. Более того, компания использует дополнительный текст, чтобы объяснить, почему Shopify — лучший инструмент для них.

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

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

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

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

A/B-тестирование имеет решающее значение для улучшения коэффициента конверсии целевой страницы . Так что, как и Shopify, не забывайте проводить A/B-тестирование своих дизайнов, чтобы оптимизировать целевые страницы для достижения лучших результатов! От вашей цветовой схемы до вашей копии, каждое небольшое изменение может иметь значение!

10. Unbounce — Пример целевой страницы продвижения электронной книги

Заголовок и копия: Заголовок Unbounce начинается со смелого заявления и продолжается обещанием: научитесь оптимизировать свои страницы! Крупный шрифт привлекает внимание, а надпись «как Талия Вульф» показывает потенциальным клиентам, что это будет экспертный контент, а не общее руководство. Вспомогательная копия очень проста и объясняет, что влечет за собой бесплатное руководство. Тем не менее, немного больший шрифт мог бы быть и лучше.

Дизайн: Дизайн Unbounce — отличный пример сочетания пустого пространства с фотографией и онлайн-формами! Глядя на целевую страницу, посетители сразу понимают, о чем она. В оформлении также отсутствуют стоковые фотографии и скриншоты, что повышает конверсию страницы.

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

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

Дизайн целевой страницы недвижимости Вдохновение

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

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

11. Разведчик. – Адаптивный дизайн для мобильных устройств

Заголовок и копия: Целевая страница Scout соответствует правилам эффективной целевой страницы. У него есть интригующий заголовок, в котором используется вопрос, и вспомогательный текст, подчеркивающий «быстрые, бесплатные и точные» результаты, которые получат посетители.Использование краткого текста и значков также облегчает чтение преимуществ!

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

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

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

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

12. Фруктовое мороженое — целевая страница, ориентированная на призыв к действию

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

Дизайн: На первый взгляд, целевая страница Sundae белая, с минималистичными визуальными эффектами и черными шрифтами. Однако белое пространство здесь — сила! Тем более, что Sundae использует весь дизайн, чтобы усилить свой яркий призыв к действию. Хотя страница немного длинная, структура помогает посетителю определить основные моменты и приблизиться на один шаг к конверсии.

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

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

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

13. Flyhomes – Элегантный дизайн целевой страницы

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

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

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

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

14. Trulia — пример страницы с одним фокусом

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

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

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

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

Целевые страницы агентства

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

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

Давайте посмотрим!

15. Klientboost – Fun Landing Page Copy

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

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

CTA: Говоря о CTA, Klientboost выбрал красный цвет, чтобы его кнопка выделялась на странице.В сочетании с зелеными визуальными эффектами и белым пространством агентство создало красивый контраст, который привлекает посетителей к «Начать мой бесплатный маркетинговый план».

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

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

16. Yodle — пример традиционной целевой страницы

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

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

CTA: Хотя текст CTA мог бы быть более привлекательным и действенным, оранжевый цвет компенсирует это. Это умный способ заставить посетителей заметить вашу кнопку CTA, когда они попадут на вашу страницу.Что касается копии CTA, агентство могло бы использовать что-то более действенное вместо «Request Demo».

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

17. Блум — Сбалансированный дизайн страницы

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

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

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

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

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

Примеры целевых страниц блогов

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

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

18. ProBlogger – CTA, который выделяется

Заголовок и копия: Основная цель страницы ProBlogger – повысить число подписчиков на новостную рассылку путем сбора имени и адреса электронной почты посетителя. Заголовок выделяется своим цветом и интригующим предложением. Использование слова «эксклюзив» — отличный способ показать своим новым подписчикам, что это не просто еще одна регистрация, а уникальная возможность получать эксклюзивный контент. Копия внизу дает новым подписчикам повод для волнения, поскольку она обещает предоставить 180 идей для постов в блоге, когда они передадут свою электронную почту.

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

СТА: Что бросается в глаза в дизайне, так это выбор цвета СТА. Желтый — довольно мощный цвет, поэтому добавление его на страницу мгновенно привлекает внимание потенциальных клиентов.

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

19.BloggingWizard — пример яркого дизайна

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

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

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

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

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

Примеры целевой страницы онлайн-курса

Если у вас есть онлайн-курс, который нуждается в продвижении, то отличная целевая страница может помочь!

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

Ниже показано, как преподаватели онлайн-курсов использовали дизайн целевой страницы для достижения лучших результатов!

20. Даниэль Лесли – Продвижение онлайн-курса

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

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

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

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

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

21. Skillshare — Super Targeted Design

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

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

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

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

Разработка лучших целевых страниц

Как я уже говорил, создание целевых страниц с высокой конверсией — это и искусство, и наука!

Соберите вместе все нужные элементы, и вы получите конверсию своей мечты! Добавьте что-то лишнее, и ваша аудитория уйдет!

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

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

Если вы ищете конструктор (или альтернативу), вы можете зарегистрировать бесплатную учетную запись Moosend и попробовать конструктор целевых страниц в свое удовольствие!

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

Более 20 примеров целевых страниц, которые вдохновят вас на дизайн [+Шаблоны]

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

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

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

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

Вот что будет описано в этом руководстве (нажмите, чтобы пропустить):

  1. Примеры целевых страниц программного обеспечения
  2. Примеры целевых страниц продукта
  3. Примеры целевых страниц электронной торговли
  4. Примеры целевых страниц приложений
  5. Скоро появятся примеры целевых страниц
  6. Примеры целевых страниц для консалтинга и агентств
  7. Примеры целевых страниц электронных книг

Мы также добавили некоторые из наших шаблонов целевых страниц, чтобы вы могли сразу начать создавать свои собственные целевые страницы!

Ищете вдохновение, чтобы оживить редизайн вашей целевой страницы? Вы попали в нужное место.

Как вы используете наши шаблоны целевых страниц?

Существует множество способов использования наших шаблонов целевых страниц. Вот три из них:

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

Однако это всего лишь один вариант использования. Вы также можете создать целевые страницы по адресу:

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

Давайте начнем.

1. Примеры целевых страниц программного обеспечения

Целевая страница программного обеспечения Stripe

Когда дело доходит до целевых страниц программного обеспечения, я был ошеломлен недавним изменением дизайна целевой страницы Stripe.

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

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

Источник

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

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

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

В понедельник целевая страница регистрации

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

Кого лучше показать в качестве примера, чем понедельник? Их целевая страница регистрации чистая, минималистичная и приятная для глаз:

.

Источник

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

Шаблон целевой страницы программного обеспечения Venngage

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

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

Идите вперед и отредактируйте этот шаблон целевой страницы программного обеспечения прямо сейчас:

СОЗДАТЬ ЭТОТ ШАБЛОН

 

 

2.Примеры целевых страниц продукта

Интерактивная целевая страница TransferWise

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

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

Источник

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

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

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

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

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

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

Целевая страница продукта Astra 

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

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

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

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

Источник

Шаблон целевой страницы продукта Venngage

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

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

Совет профессионала: Беспокоитесь, что дизайн вашей целевой страницы не будет смотреться на бренде? С помощью нашей функции My Brand Kit вы можете мгновенно применить брендинг вашей компании ко всем своим проектам (включая наши целевые страницы).Импортируйте фирменные цвета , логотипы и шрифты и применяйте их к любому дизайну одним щелчком мыши. Это так просто. Узнайте больше о фирменном наборе здесь.

 

 

3. Примеры целевых страниц электронной торговли

Целевая страница электронной коммерции Casper 

Еще один пример правильного дизайна целевой страницы принадлежит мастеру матрасов Касперу.

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

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

Источник

Совет профессионала: Если вы хотите увеличить конверсию целевой страницы, используйте социальное доказательство в ваших интересах. Опубликовано в журнале TIME? Получили восторженные отзывы от инфлюенсеров? Получили оценку 5/5 от клиентов? Покажите их на целевой странице.

Вирусная целевая страница клуба бритья Dollar

Компания, известная своим гениальным маркетингом, подкрепленным серьезным отношением, трудно оспорить монументальный успех запуска продукта Dollar Shave Club.

Несмотря на то, что по сравнению с большинством примеров целевых страниц электронной коммерции дизайн довольно простой, эта целевая страница в сочетании с их вирусным видео помогла Dollar Shave Club привлечь около 12 000 новых клиентов всего за 48 часов.

Поговорим о том, чтобы стать вирусным.

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

Источник

Спустя почти десятилетие и приобретение спустя материнская компания Unilever решила пойти по пути традиционной целевой страницы электронной коммерции с Dollar Shave Club:

Источник

Шаблон целевой страницы электронной коммерции Venngage

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

4. Примеры целевых страниц приложений

Целевая страница приложения Hopper

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

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

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

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

Источник

Целевая страница мобильного приложения AnyList

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

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

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

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

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

Источник 

Шаблон целевой страницы приложения Venngage

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

Предпочитаете что-то более простое? Наши дизайнеры даже создали верхнюю версию целевой страницы приложения, которая включает заголовок, описание, изображение приложения, а также ссылки для скачивания:

СОЗДАТЬ ЭТОТ ШАБЛОН

5. Скоро появятся примеры целевых страниц

Playdate скоро будет целевая страница

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

Panic Inc. использовала готовящуюся целевую страницу для своего нового продукта. Их цель? Создайте ажиотаж вокруг выпуска своей новой портативной игровой консоли Playdate.

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

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

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

Источник

Целевая страница перед запуском приложения Brainfood

Вот еще несколько идей для дизайна целевой страницы, которые скоро появятся для вас. Это исходит от ярких умов, стоящих за Brainfood.

В верхней части Brainfood фокусируется только на трех элементах:

  • Заголовок: Четкое и понятное торговое предложение. Минус громкие слова.
  • Основное изображение: Демонстрация приложения в действии с поясняющим видео.
  • CTA: Спрятан в правом верхнем углу Приглашение пользователей зарегистрироваться.

Если вы, как и я, любите простые вещи, я уверен, что вы оцените этот дизайн целевой страницы, который скоро появится:

Источник

Шаблон целевой страницы Venngage скоро появится

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

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

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

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

СОЗДАТЬ ЭТОТ ШАБЛОН

 

 

6. Примеры целевых страниц для консалтинга и агентств

Целевая страница блога Роба Соберса

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

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

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

Источник

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

Целевая страница агентства Shortlist

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

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

Источник

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

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

Шаблон целевой страницы агентства Venngage

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

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

 

 

7. Примеры целевых страниц электронных книг

Отменить возврат целевой страницы электронной книги

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

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

Источник

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

Целевая страница электронной книги «Маркетинг для разработчиков»

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

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

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

И хотя это не совсем пример целевой страницы электронной книги, он соответствует стандартному дизайну целевой страницы электронной книги, с которым я хорошо знаком:

Источник

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

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

Шаблон целевой страницы захвата электронной почты Venngage

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

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

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

СОЗДАТЬ ЭТОТ ШАБЛОН

Как только вы почувствуете, как электронные книги помогают лидогенерации, начните экспериментировать с другими формами лид-магнитов, такими как официальные документы, инфографика и контрольные списки.

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

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

 

 

Ваша очередь создавать свои лучшие целевые страницы

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

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

Как сделать свой сайт РЕАЛЬНЫМ

• Простой > Вычурный
• Лица > Иллюстрации
• Социальное доказательство при любой возможности pic.twitter.com/gO4tY3LQWz

— Примеры маркетинга (@GoodMarketingHQ) 16 июля 2020 г.

 

Прежде чем создавать целевую страницу, запомните следующие советы:
  • Будь проще, глупец (KISS): Лучшие целевые страницы, которые конвертируют, приятны для глаз и легко читаются.
  • Используйте социальное доказательство: Новые посетители должны доверять вам перед покупкой. Устраните их скептицизм, демонстрируя упоминания в СМИ, цитаты влиятельных лиц и отзывы таких же клиентов, как они.
  • Говорите как человек: Меньше «Платформа конверсии посетителей с искусственным интеллектом» и больше «Как небольшие бренды продают больше в Интернете» Ваш текст должен говорить как человек.
  • Не повторяйтесь (СУХОЙ): Целевые страницы имеют ограниченное пространство, используйте его с умом.Отточите свое сообщение и не повторяйтесь, чтобы убедиться, что вы эффективно доносите ценность своего предложения.
  • A/B-тестируйте все: A/B-тестируйте ваши целевые страницы чаще, чтобы определить, что работает лучше всего. Тестируйте отдельные элементы, такие как дизайн, текст, торговое предложение, CTA, социальное доказательство, и получайте детализацию оттуда.

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

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

СОЗДАЙТЕ ПОЛЕЗНУЮ СТРАНИЦУ!

Хотите узнать больше? Вот еще несколько материалов по маркетингу и дизайну, подобранных специально для вас:

7 советов по использованию визуальных элементов для создания целевых страниц, которые конвертируют

Более 20 великолепных шаблонов электронных книг + советы по дизайну для начинающих

Маркетинг веб-сайтов для малого бизнеса: полное руководство 

 


 

32 лучшие целевые страницы популярных брендов

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

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

32 дизайна целевых страниц от популярных брендов

Вот список из 32 дизайнов целевых страниц для вдохновения:

1.Страница «О компании»

Целевая страница «О компании» — прекрасный пример упрощенной, но до краев заполненной информацией для любознательного посетителя.

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

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

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

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

2.Dasher от DoorDash зарегистрироваться

Иногда ключом к разработке отличной целевой страницы является выполнение обмена сообщениями. Страница регистрации Dasher на DoorDash является свидетельством этого мнения. Он предназначен для обеспечения высоких коэффициентов конверсии.

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

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

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

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

3. Целевая страница пользовательского интерфейса Figma

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

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

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

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

4. Целевая страница Mac Pro от Apple

Apple лидирует в технологической отрасли благодаря превосходному маркетингу и эстетическому использованию пустого пространства в своем брендинге.Это видно по дизайну их целевой страницы для Mac Pro.

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

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

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

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

5. ShareCalmly

ShareCalmly — отличный пример для стартапов и малых предприятий, которые рисуют пустой дизайн своей целевой страницы, и это сделано в Webflow!

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

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

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

6. Интеллект-карты ClickUp

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

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

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

7. Miro

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

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

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

8. На память

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

Целевая страница Memorisely имеет минималистичный дизайн, основанный на копировании, который устраняет шум и предоставляет только необходимое — что, почему, как и отзывы.

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

У Memorisely, безусловно, один из лучших примеров целевой страницы для обучающей/образовательной платформы, и он сделан в Webflow!

9. Дизайнер Webflow

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

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

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

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

И, конечно же, этот лендинг был сделан в Webflow.

10. Shef

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

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

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

11. Stripe для торговых площадок

Целевая страница торговой площадки Stripe — потрясающе красивая веб-страница!

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

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

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

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

12. Nightwatch

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

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

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

13. Совместная работа над содержимым Dropbox

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

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

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

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

14. Преимущества Gusto

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

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

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

15. Wise

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

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

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

16. Keeper Tax

Целевая страница Keeper Tax доказывает, что повествование на целевой странице не имеет границ, независимо от вашего продукта, услуги или бренда — если вы мечтаете об этом, это осуществимо.Вам просто нужен правильный дизайнер. (И платформа дизайна — это также предоставлено вам Webflow!)

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

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

17. Slack

Если вы не жили под скалой, вы слышали о Slack и, возможно, даже использовали его.

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

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

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

18. Поездка с Uber

Мы все знакомы с этой услугой каршеринга. Тем не менее, нельзя упускать из виду целевую страницу Uber «Drive with Uber».

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

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

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

19.Маркетинг по электронной почте Mailchimp

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

Люди знают, что Mailchimp работает — и бренд знает об этом. Они используют свою целевую страницу как обширное практическое руководство, а не как презентацию, чтобы подробно описать свое «почему».

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

Эта целевая страница, мягко говоря, обширна и не оставляет посетителю ни единого камня на камне.

20. Принимающие дома Airbnb

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

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

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

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

21. Proof Pulse

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

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

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

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

22. Kajabi

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

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

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

23. Gemnote

Gemnote, еще один веб-сайт, созданный с помощью Webflow, имеет впечатляющую целевую страницу.

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

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

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

24. Loom для маркетинга

Loom быстро стал любимым инструментом для различных случаев использования. Он был включен в качестве маркетингового инструмента для таких брендов, как HubSpot, Lacoste, Intercom и так далее.

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

Мы видим традиционный подход к созданию дизайна целевой страницы, но точный обмен сообщениями и макет Loom выделяют этот дизайн.

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

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

25. Buffer

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

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

Buffer намеренно берет тему, которая обычно ассоциируется со страхом — аналитику социальных сетей — и переосмысливает ее как приветствующую.

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

26. Intercom Customer Engagement

В качестве еще одного отличного примера передачи ценности сложного продукта или услуги через дизайн посетите целевую страницу Intercom Customer Engagement.

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

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

27. Lattice Grow

Компания Lattice понимает силу прокрутки и включила эту силу в дизайн своей целевой страницы в Webflow!

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

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

28. AngelList Venture

Компания AngelList Venture переосмыслила, как использовать целевую страницу для продвижения новых проектов и привлечения новых инвесторов (и они сделали это с помощью Webflow)!

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

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

29. Talkspace для бизнеса

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

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

30. VanMoof S3

Компания Apple установила новый стандарт дизайна веб-страниц продукта, и команда дизайнеров VanMoof приняла вызов, разработав дизайн целевой страницы для VanMoof S3.

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

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

31. Рынок неудачников

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

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

32. Пример использования целевой страницы Webflow

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

Целевая страница Webflow о целевых страницах — это обширное подробное руководство по началу работы над созданием собственной целевой страницы с помощью нашей платформы веб-конструктора.

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

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

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

Ваша целевая страница — это ваша рекламная презентация

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

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

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

9 советов по дизайну целевой страницы для улучшения конверсии

Включить подробную информацию о продукте

Целевые страницы

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

Напишите привлекательное описание продукта

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

Прямо

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

Ответьте на вопросы покупателей о вашем продукте

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

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

Оживите свой продукт с помощью изображений

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

Несколько изображений лучше, чем одно

В своем отчете об исследованиях потребителей за 2018 год компания Salsify обнаружила, что 73% людей хотят видеть 3 или более изображений при рассмотрении вопроса о покупке. К счастью, большинство мобильных устройств оснащены отличными камерами (а также встроенными инструментами редактирования), поэтому, даже если вы не профессионал в области фотографии, вы легко сможете использовать столько красивых, высококачественных и привлекательных изображений для своего интернет-магазина. как вам нужно.

Показать разные ракурсы

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

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

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

Использование образов образа жизни

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

Нужны еще несколько советов и идей для вдохновения при съемке образа жизни? Ознакомьтесь с этими полезными ресурсами от Shopify, Jungle Scout и Threadless.

10 лучших примеров целевых страниц, которые вдохновят вас на дизайн целевой страницы

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

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

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

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

Примеры целевых страниц

Ниже приведены 10 наших любимых хорошо продуманных целевых страниц.

1. Apollo.io

Apollo.io позволяет найти рабочие электронные письма потенциальных потенциальных клиентов и корпоративных контактов.

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

CTA имеет одно поле (адрес электронной почты). Понятно, что произойдет, когда посетители предоставят свой адрес электронной почты.

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

2. Chili Piper

Хорошо, мы предвзяты, но нам нравится наша целевая страница.

Concierge, онлайн-инструмент планирования, позволяет мгновенно определять, направлять и планировать встречи с покупателями в тот момент, когда они заполняют веб-форму.

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

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

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

3. Twilio

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

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

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

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

4. Conversica

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

Заголовок делает сильное заявление. В главном предложении есть сильная статистика эффективности его помощников ИИ.

В тексте объясняются основные преимущества ИИ-помощников. Преимущества подробно описаны ниже на странице.

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

5. PatientPop

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

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

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

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

6. Shopify

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

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

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

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

7. Bills.com

Bills.com позволяет потребителям узнать об ипотечных кредитах и ​​оценить их текущую ипотечную ситуацию, а также получить реальные ставки и ипотечные кредиты в Интернете.

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

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

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

8. Брендинг и дизайн IMPACT

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

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

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

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

9. Unbounce

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

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

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

10. Lyft

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

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

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

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

Показатели хорошо спроектированной целевой страницы 

Следующие восемь характеристик указывают на хорошо спроектированную целевую страницу.

1. Целенаправленный обмен сообщениями

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

Хорошо написанные целевые страницы попадают прямо в цель.Они используют прямой подход к донесению ценности и преимуществ до посетителей.

2. Поддерживает ваши бизнес-цели

Каждая маркетинговая тактика и инструмент должны поддерживать ваши бизнес-цели. Хорошо спроектированная целевая страница должна делать то же самое.

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

3. Создает хорошее впечатление

Многие посетители впервые увидят ваш бренд, товары или услуги. Целевая страница служит точкой входа на ваш сайт.

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

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

4. Вызывает доверие

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

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

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

5. Генерирует потенциальных клиентов 

Целевая целевая страница генерирует высококвалифицированных и целевых потенциальных клиентов, что повышает коэффициент конверсии.

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

6. Продвижение новых продуктов и услуг

Когда вы запускаете новые продукты или услуги, вы собираетесь продвигать их, используя традиционные каналы (например, пресс-релизы) и социальные сети. Хорошо продуманная целевая страница — еще один инструмент для представления этих продуктов или услуг потенциальным клиентам.

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

7. Рост поискового трафика

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

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

8. Повышает вовлеченность

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

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

Итоги

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

.
Comments