Дизайн лэндинга: Принципы дизайна лендинга // Создание Landing Page

Содержание

54 примера потрясающего дизайна лендингов

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

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

Надеемся, что среди них вы найдете вдохновение для вашего лендинга.

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

Содержание статьи

Электронная коммерция
Развлекательные сайты
Лендинги-портфолио
Розничная торговля
Интернет-проекты
Сфера услуг

Электронная коммерция

1. Luhse Tea

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

2. Fit For A Frame

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

3. Shop Locket

Простой, но симпатичный дизайн. Плюс в том, что можно войти на сайт через Facebook, не тратя время на регистрацию.

4. White Lotus Aromatics

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

5. Evel

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

6. Lega-lega

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

7. Urban Originals

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

8. Scotch & Soda

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

Развлекательные сайты

9. Clouds over cuba

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

10. Universeries

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

11. Jacqui co

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

12. Pottermore

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

13. Heath Life

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

14. Uncrate

Uncrate и после редизайна не меняет своей традиции расположения всех разделов сайта в удобном верхнем навигационном меню.

15. The good man

Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.

16. Silktricky

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

17. Magic Leap

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

18. Life and times

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

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

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

Читайте также: 10 примеров лендингов необычных стартапов

Лендинги-портфолио

19. Hello monday

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

20. Jib

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

21. Ride for the brand

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

22. Andy Patrick design

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

23. This is the brigade

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

24. Built by buffalo

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

25. Galpin

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

26. Made by Vadim

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

27. Art&code

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

28. Riley Cran

Страница-портфолио отображает самое главное — примеры работ.

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

Читайте также: 20 советов для создания идеального портфолио

Розничная торговля

29. Rei

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

30. Austin beerworks

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

31. Jaquet droz

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

32. Italio kitchen

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

33. TV safety

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

34. Grey Goose

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

35. Toyota

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

36. Got Milk?

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

37. Buffalo Wild Wings

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

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

Читайте также: Как создать успешный ecommerce-бренд?

Интернет-проекты

38. Chrome Web Lab

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

39. Viddy

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

40. Who is Wildlife?

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

41. Prezi

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

42. Impress a penguin

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

43. СSS piffle

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

44. Fannabee

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

Читайте также: Обновления LPgenerator: parallax-эффект, изображение на всю ширину, запрет редиректа на мобильную версию

Сфера услуг

45. Captain Dash

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

46. Woodwork

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

47. Sagmeister walsh

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

48. Madwell NYC

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

49. Ryan Edy

Это страница профессионального фотографа, и ее дизайн помогает нам увидеть самое главное — фотографии. Даже меню спрятано в «гамбургер».

50. Oliver Rassel

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

51. Quarter Rest Studios

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

52. Fancy Rhino

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

53. Flint Boutique

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

54. Blind Barber

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

Читайте также: 10 примеров лендинг пейдж из сферы рекламных услуг

Заключение

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

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

Высоких вам конверсий!

По материалам: hubspot.net Изображение: freepik.com

18-06-2016

54 примера потрясающего дизайна лендингов

Надеемся, что среди них вы найдете вдохновение для вашего лендинга.

Содержание статьи

Электронная коммерция

1. Luhse Tea

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

2. Fit For A Frame

3. Shop Locket

Простой, но симпатичный дизайн. Плюс в том, что можно войти на сайт через Facebook, не тратя время на регистрацию.

4. White Lotus Aromatics

5. Evel

6. Lega-lega

7. Urban Originals

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

8. Scotch & Soda

Читайте также: Лендинг vs главная страница: ключевые отличия

Развлекательные сайты

9. Clouds over cuba

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

10. Universeries

11. Jacqui co

12. Pottermore

13. Heath Life

14. Uncrate

15. The good man

16. Silktricky

17. Magic Leap

18. Life and times

Читайте также: 10 примеров лендингов необычных стартапов

Лендинги-портфолио

19. Hello monday

20. Jib

21. Ride for the brand

22. Andy Patrick design

23. This is the brigade

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

24. Built by buffalo

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

25. Galpin

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

26. Made by Vadim

27. Art&code

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

28. Riley Cran

Страница-портфолио отображает самое главное — примеры работ.

Читайте также: 20 советов для создания идеального портфолио

Розничная торговля

29. Rei

30. Austin beerworks

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

31. Jaquet droz

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

32. Italio kitchen

33. TV safety

34. Grey Goose

35. Toyota

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

36. Got Milk?

37. Buffalo Wild Wings

Читайте также: Как создать успешный ecommerce-бренд?

Интернет-проекты

38. Chrome Web Lab

39. Viddy

40. Who is Wildlife?

41. Prezi

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

42. Impress a penguin

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

43. СSS piffle

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

44. Fannabee

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

Сфера услуг

45. Captain Dash

46. Woodwork

47. Sagmeister walsh

48. Madwell NYC

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

49. Ryan Edy

50. Oliver Rassel

51. Quarter Rest Studios

52. Fancy Rhino

53. Flint Boutique

54. Blind Barber

Читайте также: 10 примеров лендинг пейдж из сферы рекламных услуг

Заключение

Высоких вам конверсий!

По материалам: hubspot.net Изображение: freepik.com

18-06-2016

Дизайн лендингов | Сайт веб-дизайнера фрилансера Яны Ходкиной

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

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

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

Скачать БРИФ на landing page

Как происходит работа

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

Результатом работы будет проект в программе Figma

Дизайн сайтов в Photoshop не делаю! Только в Figma.

Вы получаете ссылку на проект в программе Figma или файл формата .fig
UI гайд с состояниями всех активных элементов сайта
Файлы использованных шрифтов (если требуется)

Эту же ссылку (на макет), вы передаете верстальщикам/разработчикам. Они точно знают, что с этим делать 😉

Размеры макетов сайтов

По умолчанию, я делаю дизайн сайта под самое популярное разрешение на данный момент. Например 1920px, с контентной частью от 1170px и выше (зависит от тематики проекта).

Адаптив 3 разрешения (ноутбук, планшет, телефон). Например: 1366px, 768px, 320px.

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

Популярные устройства на данный момент времени, вы можете самостоятельно посмотреть на сайте – Statcounter. Global stats.

Примеры возможных разрешений:

Дизайн лендинг пейдж. Основные принципы.

«Встречают по одёжке…», гласит известная пословица. Что ж, в случае с интернет-маркетингом это в 9 случаях из 10 совершенно справедливо.

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

Первое правило дизайна: «Не заставляйте меня думать!»

Ключевое правило веб-дизайна сформулировано в Стивом Кругом. Вышедшая в далёком 2000 году книга «Не заставляйте меня думать» актуальна спустя 15 лет.

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

В чём суть правила? Среднестатистический потребитель не хочет думать. Зайдя на сайт или продающую страницу, он хочет рассуждать по принципу «так, понятно… а вот это… а вот и то, что мне нужно». И как часто владельцы сайта сами строят препятствия на пути у потенциального покупателя! Бездарный дизайн лендинга – то, что забивает первый гвоздь в крышку гроба вашего проекта.
Как же выглядят типичные ошибки?

4 ошибки, снижающие конверсию

Ошибки №1 и №2

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

В первом случае «дизайнеры» используют заезженные, безжизненные шаблоны. Утянутые с flaticon.com бесплатные пиктограммы, таймеры на весь экран со «специальными предложениями» и другие прелести – прилагаются.
Второй случай намного хуже первого, и, ей-Богу, лучше бы горе-дизайнеры лепили всё по одному (но хорошему) шаблону. Речь идёт о случаях, когда дизайн абсолютно не соответствует предлагаемому товару. Визуально «тяжёлые» блоки, тёмно-коричневый цвет, текстуры кожи, дерева и золота в лендинге, продающем чай для похудения? Легко!
Как этого избежать
Остерегайтесь бесплатных «стандартных» шаблонов. Они могут быть очень яркими и красочными, но абсолютно не выражающими суть вашего товара. Обратитесь к профессионалам, которые придадут лендингу действительно уникальный вид.
Чётко определитесь с ЦА. Если это девушки, то и дизайн landing page должен быть в меру «девчачьим» – в зависимости от товара. Если вы продаёте дрели новейших моделей, то пусть и дизайн landing page будет сдержанным, «профессиональным» – ведь именно этого ждёт мужская аудитория. Запомните: не получится угодить всем.

Ошибка №3

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

Мелкий шрифт. Это хуже… хуже всего, в общем. Когда текст набран крошечными буковками, ваш потенциальный клиент НЕ БУДЕТ напрягать зрение дольше нескольких секунд, и просто закроет страницу. Смиритесь. И начните, наконец, использовать большие буквы.
Слишком много текста. Лендинг может состоять и из 5, и из 25 блоков (последнее даже лучше – при соответствующем исполнении). Однако ни один из них не должен быть перегружен текстом. 90% людей визуалы – так дайте им картинки, образы, которые легко считываются и запоминаются. «Не заставляйте меня думать!» — не забыли?
Светлый текст на тёмном фоне, капслок, восклицательные знаки!!!, и другие мелочи. Всё это напрямую относится к дизайну. Текст в лендинге должен легко читаться. А читаемость зависит не только от того, как построена фраза, но и от того, как она выглядит.

Как этого избежать?

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

Ошибка №4

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

или это:

Ваш лендинг выглядит:

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

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

Немного о usability

К дизайну также относится «юзабилити» лендинга. Слово usability не имеет адекватного перевода на русский язык. «Удобство использования» – достаточно близкий перевод, лишённый, впрочем, оригинального «вкуса».
От того, как расположены и как выглядят элементы интерфейса на вашей landing page, во многом зависит решение посетителя о покупке.

Говоря упрощённо:

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

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

Помните, для чего нужен лендинг

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

Смотрите также

Создание дизайна 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 с готовым дизайном.

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

Спасибо за внимание. Пока.

Как сделать лендинг | maximsoldatkin.com

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

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

Рис.1. Схема лендинга

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

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

Рис.2 Лендинг «Украинские мишки европейского качества» ( http://fabrikamishek.com.ua)

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

Рис.3 Лендинг “Эксклюзивные торты ручной работы” (http://danilovskaya.com)

Кстати, рекомендую посмотреть прямо сейчас:

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

Рис.4 Лендинг “Школа боевых искусств” (http://budokanschool.ru)

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

Рис.5 Лендинг Basecamp (http://basecamp.com/)

Еще один пример адаптивного дизайна landing page, тоже западный аналог (рис.6). Более крупный заголовок, кнопка действия, подзаголовок и опять же есть картинка. На всех страницах есть определенная структура. Просто она немного отличается.

Рис.6 Лендинг Tictail (http://tictail.com/)

Еще несколько вариантов (рис.7), здесь «Макао» – огромная картинка, заголовок чуть даже меньше, внимание все на картинке уделено. Dropbox- простота.

Рис.7 Лендинги

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

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

И 7 важных правил хорошего лэндинга.

1. Картинка

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

Рис.8 Пример лендинга

Например, в случае Mycaw заголовок значительно меньше, чем картинка. Здесь картинка делает основную работу (визуально).

2. Заголовок

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

Рис.9 Пример лендинга

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

Что вы хотите, чтобы человек сделал на лендинге. Сделайте это действие самым заметным (рис.10). И в этом действии можно еще написать пользу. Например, на рис. 10 написано: используйте Basecamp бесплатно в течение 2 месяцев, и это очень хороший пример пользы. Старайтесь писать пользу.

Рис.10 Пример лендинга

4. Ценность для человека

Цель лендинга — вызвать доверие и убедить человека. Один слой — одна единица смыслов. То есть на странице dropbox (рис.11) человек увидит только картинку и только это описание. Здесь показана польза — у нас одна и та же фотография (как на компьютере, так и на планшете, так и телефоне) и текст написан точно про это же. Он поясняет эту пользу: ваши фотографии везде ( ноутбук, планшет и телефон). Ну и сам лендинг dropbox — пример отличного адаптивного дизайна landing page.

Рис.11 Dropbox пример ценности для человека

5. Короткие тексты

Длинные тексты не хочется читать, они выглядят устрашающе. Короткие читать легко, поэтому их читают. Когда делаете лендинг, обязательно делите тексты на короткие блоки. Например, в одной из страниц basecamp текст подан в виде диалога (рис.12). Человека спрашивает у basecamp, он ему отвечает. Опять же диалоги короткие, не больше 4х строк, их очень просто начать читать.

Рис.12 Basecamp пример подачи текстовой информации на сайте

6. Убеждающие триггеры

Дефицит. Есть ограниченное предложение и осталось всего лишь 13 часов, а дальше товара этого уже не будет. (рис.13)

Социальное доказательство (рис.14 ). Это публикации в именитых источниках, цитаты СМИ о вашей компании, выигрыши в в конкурсах и т.д. Также отзывы. Например, 1500 человек уже посетило сайт и ,во-вторых, сами отзывы людей. Также можно привести в пример (рис. 15), например, что существует куча брендов которые доверяют basescamp и вы тоже можете последовать их примеру.

Влияние авторитета. На лендинге с рис. 14 видны имена спортсменов, которые учились в этой школе. Фамилия Владимира Минеева — 4х кратного чемпиона мира по К1.

Правило взаимного обмена (подарок). На рис.13 мы видим, что плюшевая подушка достанется клиенту бесплатно

Контрастное воcприятие. Необходимо цену товара/услуги подавать с какой-то другой цифрой товара/ услуги. Например, рядом с ценой напишите “ нас уже заказало 5000 человек”. Они вроде как из разных контекстов, но они работают, то есть цифра 100 уже не кажется такой большой по сравнению с 5000.

Рис.13 Пример убеждающих триггеров

Рис. 14 Пример социального доказательства

Рис. 15 Пример социального доказательства

7. Сильный главный экран

80 % людей увидят главный экран вашего landing page, и лишь 20 % прокрутят страницу ниже. Это в лучшем случае, поэтому самую важную информацию расположите на главном экране лендинга. Помните, что большее количество людей видят именно ее. Все продающие штуки и фишки, всю самую важную информацию стоит расположить на главной странице (рис.16,17).

Рис.16 Пример социального доказательства

Рис. 17 Пример сильного главного экрана

4 сервиса для создания адаптивного дизайна landing page

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

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

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

Рис.19 Примеры сервисов конструкторов страниц и множество шаблонов

Во всех сервисах есть:

Бесплатный пробный период
Статистика
CRM
А/Б тестирование
Шаблоны
Хостинг
Адаптивный дизайн landing page

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

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

Примеры дизайна лендингов — 10 примеров необычного дизайна лендингов

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

Отличительные особенности лендингов

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

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

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

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

Подробнее о лендингах и их отличиях от остальных сайтов мы говорили в нашем блоге.

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

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

Плоский дизайн

Для начала рассмотрим, как стандартные решения можно представить современно и стильно. На примере представлен лендинг в стиле flat-дизайн — направления, вошедшего в тренды (более подробно о данном стиле мы писали в этой статье).

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

Минимализм

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

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

Большие изображения

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

Яркие элементы

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

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

Иллюстрации

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

При использовании иллюстраций в дизайне лендингов стоит учитывать:

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

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

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

Типографика

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

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

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

Композиция и структура

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

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

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

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

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

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

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

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

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

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

Анимации и другие спецэффекты

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

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

Что нужно учесть при проектировании анимации для лендингов:

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

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

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

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

Интерактивность

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

Студия дизайна IDBI также использовала данный прием при составлении конструктора мороженого.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А теперь давайте посмотрим на несколько красивых дизайнов!

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

1.Индокитай

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

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

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

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

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

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

2. Зола

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

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

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

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

3. Lujo

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

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

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

Потрясающие (и последовательные) визуальные эффекты : не только отличная фотография продукта, но и поддержка Z-шаблона дизайна целевой страницы, усиливая при этом посыл бренда. Слоган Луджо — «поставить жизнь на паузу», и все, что есть в визуальных эффектах на этой целевой странице, усиливает этот бренд — от шляпы от солнца, покоящейся на видеобоксе, до туфель на палубе и чая со льдом.Дизайн должен работать рука об руку с обменом сообщениями, чтобы текст и изображения объединялись для создания общего впечатления, которое имеет смысл. У Lujo это хорошо получается на этой целевой странице.
Очевидно USP : Прямо под фотографиями Lujo формулирует — с текстом и элементами дизайна — три уникальных аргумента: бесплатная доставка, пятилетняя гарантия и новозеландское мастерство. Нахождение способа тонко внедрить эти три идеи в дизайн означает, что посетителю, возможно, не придется продолжать изучение, прежде чем нажимать эту кнопку 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. (Что мы можем сказать? Наши клиенты действительно хороши в этом .) Взгляните на некоторые из приведенных ниже функций:

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

8 главных советов по созданию эффективной целевой страницы | компании SteelKiwi Inc.

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

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

Вот 5 текстовых элементов с наибольшей конверсией.

Заголовок

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

Подзаголовок

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

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

Источник: KidSmart, скоро появится приложение.

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

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

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

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

Источник: Мевенто, платформа скоро появится.

Преимущества

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

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

Источник: snaapy.com

Формы для привлечения потенциальных клиентов

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

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

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

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

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

Источник: ylt-trainer.com

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

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

Источник: Roman-mayer.ch, платформа скоро появится.

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

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

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

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

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

Вы можете выполнить A / B-тестирование для следующих объектов:

Заголовки
CTA
Изображения и графика
Кнопки (внешний вид, текст и расположение)
Сигналы доверия
Цитаты из прессы
Размещение элементов страницы (блоки)
Навигационные ссылки

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

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

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

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

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

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

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

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

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

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

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

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

Советы по дизайну посадочной страницы

1.Опишите ваше предложение и кампанию.

Мощный текст — ключ к отличной целевой странице.

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

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

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

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

В данном случае мы можем апеллировать к их чувству стиля и интересу к текущему тренду — винтажным футболкам.Хорошее вступительное предложение, которое также может сработать в рекламе, может быть таким:

«Поднимите свою крутость на ступеньку выше с нашими мягкими, подлинными винтажными футболками, теперь скидка 50%, когда вы собираете 5 или больше».

2. Перечислите преимущества и решения.

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

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

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

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

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

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

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

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

3. Создайте убедительный призыв к действию.

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

В идеале на каждой целевой странице должен быть только один призыв к действию, отмеченный большой кнопкой отправки. MarketingProfs процитировал исследование Unbounce, которое показало, что целевые страницы с одной ссылкой или призывом к действию имеют более высокий коэффициент конверсии — в среднем 13.5%. Это примерно на 2% больше, чем страниц с двумя-тремя ссылками или CTA.

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

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

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

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

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

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

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

Согласно WordStream, лучшие призывы к действию:

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

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

4. Сосредоточьтесь на отличном дизайне.

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

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

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

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

Ключевыми элементами дизайна целевой страницы являются:

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

Дополнительные изображения и видео (если используются)

Социальное доказательство раздел — отзывы или данные

Чтобы увидеть, что дает самый высокий коэффициент конверсии, A / B протестируйте все элементы дизайна на целевой странице, от дизайна до стиля и формулировки кнопки CTA.Инструменты, которые позволяют создавать и тестировать целевые страницы с аудиториями кампании, включают Unbounce, Hubspot и Leadpages.

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

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

5. Оптимизация для мобильных устройств

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

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

(Источник: think with Google)

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

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

12.Winc — претендовать на славу: простота.

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

— Барух Лабунски, эксперт по интернет-маркетингу и автор, генеральный директор Rank Secure

Что страница делает хорошо:

Доставляет свое ценностное предложение на недвусмысленных условиях с вращающимся слоганом: «Мы передаем» -подбор, ручная работа, ручная доставка в мир вина.”
Содержит призыв к действию (CTA), который отправляет вас в путешествие. После нажатия кнопки «Начать» вам будет предложено пройти тест, призванный определить ваш предпочтительный вкусовой профиль, что позволит Winc составить привлекательный индивидуальный выбор вин. Тот, кто пьет крепкий черный кофе, наверняка оценит крепкое красное вино. Это весело, это личное, работает.
С точки зрения дизайна, ничто не отвлекает — распространенная тема среди самых эффективных целевых страниц. Вы получаете одно простое утверждение, поясняющее изложение ценностного предложения, призыв к действию и, возможно, изображение продукта перед тем, как перейти вниз по странице.
Предлагается скидка в размере 20 долларов. По данным BigCommerce.com, такой рекламный маркетинг (то есть предложение скидки) может повысить коэффициент конверсии на 5,6% в пищевой и бакалейной промышленности.
Он использует изображения, которые просто и ясно показывают, что делает Winc, уменьшая трение, вызванное необходимостью читать текст (человеческий мозг обрабатывает изображения в 60 000 раз быстрее, чем текст).

По словам консультанта по визуальной коммуникации Майка Паркинсона:

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

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

Выводы по целевой странице Winc

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

11. CodeAcademy — прославление: социальное доказательство.

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

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

— Сэм Карр, менеджер по маркетингу PPC Protect

Что страница делает хорошо:

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

«Социальное доказательство» — один из 6 оригинальных принципов влияния Роберта Чалдини, которые он представил в своей книге 1984 года «Влияние: психология убеждения».

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

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

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

Выводы по целевой странице CodeAcademy

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

10.BlueApron — претензия на известность: психология цвета.

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

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

Компания Blue Apron, занимающаяся обслуживанием комплектов питания, добивается этого, вплетая повсюду синий цвет.”

Скотт Крамрин, основатель и генеральный директор Guava Family, Inc .

Чем хороша страница:

На ней есть социальное доказательство с «самыми популярными рецептами»

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

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

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

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

Согласно Kissmetrics , 85% покупателей считают цвет основной причиной покупки товара, а цвет повышает узнаваемость бренда на 80%. Люди также могут принимать подсознательные решения менее чем за 90 секунд, а цвет — отличный способ вызвать действие.

— Conversioner

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

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

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

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

Выводы по целевой странице Blue Apron

Рассмотрите возможность демонстрации ваших преимуществ на ярком изображении, а не на копировании.
Думайте о цветах вашего бренда как о эмоциональном сигнале — какие эмоции ваши целевые клиенты больше всего хотят испытывать?
A / B проверьте цвет вашей кнопки CTA. Апельсин? Красный? Синий? Узнайте, что лучше всего подходит для вас.

9. Netflix — прославление: конверсионная копия.

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

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

— Скотт Крамрин, основатель и генеральный директор Guava Family, Inc .

Что страница делает хорошо:

Она идет более традиционным путем и делает упор на сильное ценностное предложение и ярко-красную кнопку CTA, продающую БЕСПЛАТНУЮ сделку.
Он решает проблемы, связанные с новой подпиской, сразу же с помощью «Отмените в любое время до даты X, и с вас не будет взиматься плата». Вы не связаны обременительным контрактом; нет никакого риска, если вам это не нравится; и в течение первых 30 дней нет абсолютно никакого финансового риска.
Он чистый и простой, почти не отвлекает.

Выводы по целевой странице Netflix

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

8. Ahrefs.com — претендовать на известность: мастерство слогана.

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

— Стив Курниаван, контент-маркетинг и рост, Nine Peaks Media

Что страница делает хорошо:

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

Выводы по целевой странице Ahrefs

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

7. Страница Lyft «Двигайтесь вместе с Lyft» (целевая страница опроса) — прославьтесь: быстрая конверсия.

«Целевая страница« Drive with Lyft »проста и удобна для пользователя. Над сгибом находится сильный заголовок на плоском фиолетовом фоне, без каких-либо отвлекающих факторов, и всего три поля для заполнения.

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

— Лотем Хаюн, руководитель отдела роста в Pramp

Что страница делает хорошо:

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

Выводы по целевой странице Lyft

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

6. Хост-страница Airbnb — прославление: персонализация.

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

— Ким Смит, менеджер по контент-маркетингу в GoodFirms

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

— Лорен Крейн, создатель цифрового маркетингового контента в Health Labs

Что страница делает хорошо:

В центре заголовка содержится основное обещание; «Зарабатывай как хозяин Airbnb». Ваш следующий вопрос, наверное, «сколько денег»?
Он гениально дает ответ на следующий естественный вопрос в двух местах — в одном в верхнем углу слева от красного CTA «Начать работу». Этот «месячный потенциал» основан на потенциальном месячном доходе хостов в вашем регионе. город.Это еще до того, как вы заполнили форму. Airbnb уже знает, где вы живете. Жутко? Маленький. Эффективно? Очень.
Это дает читателю возможность получить дополнительную информацию перед вводом контактных данных в простой форме о местонахождении и типе аренды.
Он отвечает на вопросы и проблемы, которые могут возникнуть у потенциального хоста.
Содержит социальное доказательство в виде отзыва.
Оранжевый и синий цвета повсюду пробуждают действие и доверие.

Выводы по целевой странице Airbnb

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

5. Домашняя страница Shopify — претендовать на известность: не бойтесь.

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

— Лотем Хаюн, руководитель отдела роста Pramp

Что страница делает хорошо:

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

Выводы по целевой странице Shopify

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

4. Задачи по целевой странице »для« Выводы по целевой странице Stitchfix »

Что страница делает хорошо:

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

Целевая страница Задачи

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

3. Upwork — претендуйте на известность: выбирайте свое собственное приключение.

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

— Лорен Крейн, создатель цифрового маркетингового контента в Health Labs

Что страница делает хорошо:

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

Выводы по целевой странице Upwork

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

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

2. IWillTeachYouToBeRich (целевая страница викторины) — прославьтесь: сегментация.

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

— Стейси Каприо, основатель Accelerated Growth Marketing

Что страница делает хорошо:

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

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

IWillTeachYouToBeRich’s Landing Page Takeaways

Поместите ценностное предложение в заголовок. Тогда вы можете поиграть с более креативным заголовком.

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

1. Pupford — прославление: машина для построения списков.

«Наша целевая страница имеет постоянный коэффициент конверсии 50%, потому что она обеспечивает чрезвычайно высокий уровень ценности (30 дней бесплатного дрессировки собак) с очень низким входным барьером.

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

— Девин Стэгг, менеджер по маркетингу в Pupford

Что страница делает хорошо:

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

Pupford’s Landing PageTakeaways

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

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

В заключение

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

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

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

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

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

Целевая страница

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

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

Дизайн посадочной страницы от Данна Петти.

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

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

Контент — Основа великой высадки Страница

1.Броские и лаконичные заголовки

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

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

Броский и лаконичный заголовок на целевой странице Taster’s Club.

Эффективный заголовок целевой страницы:

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

2. Настойчивый призыв к действию

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

Lyft использует яркие призывы к действию.

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

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

3. Психологические аспекты

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

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

Использование социального доказательства на целевой странице Unbounce.

4. Использование людей на целевых страницах

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

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

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

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

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

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

Распространенные ошибки в дизайне посадочной страницы

1. Нет изображений или графика низкого качества

Картинка стоит тысячи слов.
— Пословица

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

2. Макеты страниц со слишком большим содержанием и сложностью

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

Сложный макет, перегруженный «шумом» — слишком много текста и информации.

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

A / B-тестирование целевой страницы — хороший способ собрать информацию, которая может быть применена для улучшения макета целевой страницы. Другой вариант — использовать основанные на фактах методы проектирования UX, такие как макеты паттернов F-образной формы и Z-образной формы.

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

Простой, но эффективный дизайн целевой страницы морды.

3. Несканируемая копия

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

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

Сводка

Целевая страница

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Наука за правильным преобразованием Mix

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

Для какого бизнеса вы создаете страницу? Это компания B2B, предлагающая сырье или услугу? Это компания B2C?
Что продает бизнес?
Какое отношение имеет UVP к тому, что продает бренд?
Это физический продукт? Если да, то какая часть продукта будет наиболее важной для демонстрации на главном изображении? Людям нужно знать, что они получают, иначе они не предоставят информацию о потенциальных клиентах.
Как они продают?
Следит ли за продажами? Через 24 часа? В течение часа? Обязательно сообщите об этом своим зрителям. Ясность — ключ к успеху.

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

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

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

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

Рассмотрев все эти вопросы, сегодня мы собираемся сосредоточиться на целевой странице двух собственных клиентов KlientBoost, CareChoice и EZBind. Мы поймем, что у них сработало и почему их страницы успешны.

Теперь поищем всех графических дизайнеров с классическим образованием.

Объявление дизайнера

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

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

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

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

Мы прерываем ваше обычное программирование, чтобы преподнести вам этот очень важный урок анатомии !

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

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

Дизайн целевой страницы состоит из семи основных частей, поэтому давайте разберем его:

Трафик

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

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

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

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

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

Выстрел героя

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

Преимущества и особенности

Здесь вы убеждаете своих посетителей, ПОЧЕМУ им следует совершать конверсию на вашей целевой странице, четкая копия является ключевым моментом.

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

Повысьте вероятность конверсии, выделив отзывы клиентов, которые выдвигают возражения.

Страница подтверждения

и что происходит после

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

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

Помните:

«Важно знать, что делать на целевой странице, чтобы сделать ее более здоровой, сильной и, что еще более важно, более высокой конверсией».

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

… А теперь вернемся к программированию регулярного расписания 🙂

Целевая страница

Разбивка CareChoice

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

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

Для начала я расскажу немного о CareChoice .CareChoice — это компания B2C, которая подбирает для вас или вашего любимого человека лучшее жилье с обслуживанием в районе Атланты, штат Джорджия.

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

Раздел героев

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

Вариант 1 изображения героя CareChoice

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

Угадайте, какой вариант, по вашему мнению, выиграл?

Вариант изображения героя CareChoice 2

И победил… Вариант 2. Но это интересно.

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

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

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

Один из наиболее важных аспектов раздела «Герой» — это заголовок.

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

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

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

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

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

Видите? Еще один пример сосредоточения разговора на них, а не на себе.

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

Если вы не можете, вероятно, вы выбрали не отличное изображение .

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

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

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

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

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

Когда мы изначально начали поиск отзывов клиентов, мы поняли, что в Facebook, Google и The Real Yellow Pages было опубликовано около 20 отзывов клиентов в каждом месте, которые дали оценку 5 звезд.

Разве это не здорово ?!

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

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

Добавление звезд визуально под ними добавляет еще один бонус.

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

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

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

Цитаты довольных клиентов также являются очень важной частью вашей страницы.

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

Конечно, от кого-то вроде тебя.

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

Давайте сосредоточимся на разделе отзывов дальше…

Раздел отзывов

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

Давайте взглянем на 4 вещи, которые вы можете найти в хороших цитатах:

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

Раздел отзывов CareChoice

Мы обсудили верхнюю половину страницы. Давайте перейдем к более подробным разделам, в которых объясняются услуги, предоставляемые CareChoice.

Здесь мы переходим к разделу «Что мы делаем».

Что мы делаем Раздел

Поскольку CareChoice — это услуга, добавление этого раздела важно для общения с потенциальными клиентами, что именно представляет собой эта услуга.Этот раздел дает пользователям уверенность в том, что вы делаете, и объясняет, ПОЧЕМУ вы им нужны.

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

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

Раздел услуг CareChoice

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

Раздел часто задаваемых вопросов

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

Люди могут ответить на следующие вопросы, в частности, для CareChoice:

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

Раздел часто задаваемых вопросов по CareChoice

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

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

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

Нижний колонтитул CareChoice

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

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

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

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

Разрушение целевой страницы EZBind

Еще один клиент, с которым мы работали, — EZBind. EZBind — это компания B2C, которая продает страхование подрядным строительным компаниям.

Раздел героев

Вот два снимка раздела героев EZBind:

EZBind вариант героя 1

EZBind вариант героя 2

Эти два варианта очень похожи.

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

Я расскажу вам о грядущем секрете… Мы на KlientBoost замечаем, что чем больше мы экспериментируем с кнопками CTA, тем лучше было использовать более расплывчатый CTA, например «Начать». Причина — это низкое обязательство CTA . Если вы можете заинтересовать своего зрителя настолько, что нажмите «Начать», тогда вы продаете его на шаге 2.

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

Отказ от ответственности при тестировании под кнопкой CTA

Мы создали небольшой тест и добавили заявление об отказе от ответственности под кнопкой CTA, в котором говорится: «Кредитная карта не требуется».

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

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

Результаты тестирования отказа от ответственности

Итак, имейте в виду, когда ваша страница работает хорошо, создавайте меньшие (дымовые) тесты. Никогда не знаешь, какой тест повысит конверсию.

Давайте перейдем к следующему разделу, чтобы узнать больше о том, как дать ответ на вопросы клиента «Почему?».

Раздел «Почему EZBind»

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

Раздел «Почему EZBind»

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

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

Теперь, когда мы обсудили раздел «Преимущества», давайте пройдемся по отзывам.

Раздел отзывов

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

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

Раздел отзывов

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

Если вы выберете последний вариант, не забудьте добавить на свою страницу этот smooth скрипт прокрутки .

Если нет, ваши клиенты могут почувствовать это:

Нижний колонтитул

Завершение макета целевой страницы

Итак, в заключение, вот несколько моментов, которые следует запомнить:

Несмотря на то, что на эстетически приятные страницы приятно смотреть, визуальная ясность важнее. Помните 5-секундный тест.
Копия — самая важная часть вашей страницы. Возможно, ваш заголовок в разделе о героях — — — самый важный. Убедитесь, что вы знаете, что UVP.
Отличные обзоры и социальные доказательства — большая поддержка делу, которое вы указали в разделе о героях. Убедитесь, что эти отзывы положительны, и покажите зрителям, почему вы лучше всего соответствуете их потребностям.
Разделы «Часто задаваемые вопросы» и «Преимущества» дадут вашим зрителям дополнительный толчок к конверсии, если они все еще не уверены. Убедитесь, что эти небольшие подзаголовки привлекают внимание и помогают в процессе принятия решений.

Ищете еще несколько отличных примеров лучших целевых страниц? Проверь их здесь .

Спасибо, что присоединились ко мне в этом путешествии по целевой странице.

До следующего раза.

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

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

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

1. Определите цель для своей целевой страницы

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

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

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

2. Спланируйте свой макет

Независимо от цели, хорошая целевая страница должна содержать следующие пять элементов:

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

Эта целевая страница Slack содержит все основные элементы: 1. Заголовок 2. Соответствующее изображение 3. Краткое описание 4. Форма для привлечения потенциальных клиентов 5. Призыв к действию

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

3. Сохраняйте лаконичность текста

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

Per Cision, исследование Microsoft, проведенное в 2018 году, показало, что средняя продолжительность концентрации внимания человека составляет всего восемь секунд. Вы должны сосредоточиться на том, чтобы простым и понятным языком заявить, как ваш бренд или предложение могут принести пользу пользователям.Затем, если хотите, вы можете уточнить ниже сгиба.

Кстати о складках…

4. Сделайте ставку на верхнюю часть страницы

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

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

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

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

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

5. Цените свои визуальные эффекты

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

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

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

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

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

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

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

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

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

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

7. Ограничьте отвлекающие факторы и возможности выхода

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

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

Когда дело доходит до ссылок, меньше значит больше, и Guideline это знает.

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

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

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

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

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

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

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

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

9.Обеспечьте конверсию с помощью убийственного призыва к действию

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

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

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

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

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

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

10. A / B-тестирование для максимальных возможностей конверсии

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

Хотя это напрямую не связано с A / B-тестированием, важно отметить другие оптимизации, которым следует уделять приоритетное внимание: оптимизация текста для поисковых систем и сокращение времени загрузки целевой страницы, особенно на мобильных устройствах.Даже малейшая задержка во времени загрузки может негативно повлиять на коэффициент конверсии. Чтобы оценить свою целевую страницу, воспользуйтесь удобным инструментом Google PageSpeed Insights.

Пора придерживаться цели (страница)

После того, как вы ознакомились с нашим контрольным списком, пора сесть и проанализировать результаты.

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

Я прошу вас напоследок немного помощи: краткий список наших любимых конструкторов целевых страниц.

Удачи и получайте конверсии!

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

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

Ниже приведены несколько основных правил создания отличной целевой страницы и тщательно отобранная подборка из 15 отличных примеров целевой страницы.

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

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

Первое впечатление имеет значение. Посетителю требуется около 50 миллисекунд , чтобы сформировать первое впечатление о вашем веб-сайте, и это впечатление будет во многом основываться на том, что они видят.Визуальный язык, который вы используете для общения с посетителями, имеет большое значение — страница с красивыми изображениями, четкой типографикой и красивой анимацией, скорее всего, произведет положительное впечатление.
Одна страница, одна цель . Важно иметь четкую цель. Дизайн вашей целевой страницы должен быть ориентирован на действия, которые вы хотите, чтобы ваши посетители выполняли. Вы хотите, чтобы они подписались на вашу услугу, оставили свой адрес электронной почты или что-то еще? Не просите пользователей делать несколько вещей; для максимальной эффективности сосредоточьтесь на одном-единственном действии.
Сильные аргументы. Работайте над содержимым веб-сайта на ранних этапах процесса проектирования, потому что текст и визуальные элементы на вашей странице будут определять ваше сообщение и визуальную иерархию. Убедитесь, что копия отвечает на все вопросы, которые могут возникнуть у посетителей при просмотре вашей страницы. Не забудьте поместить ключевые аргументы в верхней части страницы, потому что контент, который пользователи видят в верхней части экрана, напрямую влияет на взаимодействие с пользователем (если контент актуален и интересен, они охотнее прокручивают для получения дополнительной информации).
Простота сканирования макета. Пользователи не читают в Интернете, они сканируют, и очень важно разработать сканируемые макеты, которые помогут пользователям с первого взгляда найти то, что они ищут. Создайте четкую визуальную иерархию, которая намеренно направляет взгляд читателя по контенту, удаляя при этом все, что может отвлекать.
Яркие кнопки призыва к действию. Посетители должны иметь возможность сразу заметить основной призыв к действию, когда они попадают на страницу.Вы можете использовать тест размытия, чтобы проверить свой макет и увидеть, какой элемент привлекает наибольшее внимание, например, добавив размытие по Гауссу 5–10 пикселей в ваш дизайн в фоторедакторе. Взглянув на размытую версию целевой страницы, вы увидите, какие элементы выделяются. Если это кнопка с призывом к действию, то все в порядке.
Ярлыки с призывом к действию. Избегайте расплывчатых ярлыков, таких как «Подробнее», для кнопок с призывом к действию. Вместо этого используйте действенный язык, который побуждает пользователей к действию и очень ясно показывает, что вы от них хотите.Такие ярлыки, как «Купить сейчас» или «Получить мгновенную расценку», с большей вероятностью побудят пользователей что-то сделать.
Проверьте свой дизайн. Независимо от того, сколько времени вы тратите на разработку своей целевой страницы, очень важно протестировать ее с пользователями. Тестирование не должно быть сложным или длительным. Хороших результатов можно добиться с помощью пятисекундного теста. Сделайте снимок экрана своей целевой страницы, покажите его своим пользователям в течение пяти секунд и задайте им несколько простых вопросов, таких как «Какова цель этой страницы?» или «Какие основные элементы вы можете вспомнить?»

15 примеров целевых страниц с отличным дизайном

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

1.

Elysium Bulimba

Elysium — это жилой комплекс в Булимбе, Австралия, который предлагает роскошный и эксклюзивный образ жизни. В верхней части целевой страницы, «Создано в редакторе X», представлены изображения главного героя здания в сочетании с коротким и запоминающимся слоганом «Твой кусочек рая».

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

2.

Hanai World

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

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

3.

Сброс проекта

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

4.

Studio One

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

Studio One — это инструмент индивидуального маркетингового дизайна Sotheby’s, который позволяет агентам выбирать фирменные печатные и цифровые маркетинговые материалы для продвижения своих объявлений.Целевая страница, созданная на основе Editor X, представляет инструмент и его преимущества с помощью понятного привлекательного дизайна.

5.

First and Foremost

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

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

6.

Centogene Solutions

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

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

7.

Petastic

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

8.

Plink

Plink — это платформа для обработки запросов на оплату. Главный раздел их целевой страницы имеет синий градиентный фон и трехмерную анимацию, изображающую взлетающий космический корабль. Это наглядное изображение, которое точно отражает цель их клиентов по отправке запросов на оплату и быстрому получению оплаты. Утверждение «86% наших запросов на оплату оплачиваются в течение 12 часов» усиливает ощущение, что эта услуга надежна и хорошо работает, побуждая посетителей войти в продукт.

9.

Glowbar

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

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

10.

Easol

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

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

11.

Stelvio Grotesk

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

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

12.

Цепочка найма

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

13.

Wunder

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

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

14.

Маркус Миллер Консалтинг

Маркус Миллер — консультант по вопросам жизни. Эта целевая страница, созданная в Editor X, свободна от беспорядка и предлагает самую важную информацию заранее: «Раскройте свое истинное Я и стройте жизнь, которую хотите.