Дизайн landing page: Что такое лендинг пейдж? Структура и примеры лендингов

Заключение

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

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

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

18-06-2016

Примеры landing page с геометрическим дизайном

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

Дизайн landing page под новым углом

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

Эти геометрические формы используются для:

• навигации по сайту;
• акцента на важных блоках;
• нетривиальной подачи контента.

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

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

Пример лендинга для веб-разработчиков

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

Пример 1. Дизайн лендинга для веб-дизайнеров. Ключевой элемент дизайна здесь — ромб.

Пример лендинга в нише «дизайн интерьеров»

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

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

Пример лендинга в нише «рекламное агентство»

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

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

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

Пример 3. Лендинг в нише «рекламное агентство». Посмотрите, как сочетаются геометрические фигуры, всеми любимый бирюзовый цвет и рукотворные дудлики.

Пример лендинга в нише «мобильные приложения»

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

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

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

Пример лендинга в нише «интернет-магазин»

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

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

Пример лендинга-портфолио работ

Пчелы, мёд, пыльца… Как это связано с геометрическим дизайном, спросите вы? Очень просто! Ведь один из самых популярных элементов — это соты, или шестигранники. Отлично подходит, если нужно разнообразить подачу однообразного контента (например, в портфолио работ). За примером вам не придется далеко ходить:

Пример 6. Пример лендинга-портфолио. Форма шестигранника придает подборке фотографий свежий вид и помогает разнообразить его (часть фигур — это работы, часть — ссылки).

Пример лендинга с диагональными элементами

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

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

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

Заметили, в чем ошибка? Посмотрите на тонкий белый шрифт на черном фоне и на его мелкого брата-близнеца в пояснении к каталогу. Это минус сто к юзабилити: текст не читается и рябит в глазах.

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

Дизайн лендинга и геометрия: классика или уходящий тренд?

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

Как вы считаете, сколько еще геометрические формы будут оставаться в топе? Это классика или тенденция, которая скоро уступит место чему-то новому?

Жду ваши идеи в комментариях!

Дизайн landing page: предварительная оптимизация

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

Предварительно нужно провести тестирование и оптимизацию лендинга.

Оптимизация лендинга перед запуском

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

Прогнозирование поведения пользователя

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

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

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

Макет нашей landing page изначально выглядел так:

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

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

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

Прогнозирование зрительного пути

Ключ к оптимальному размещению

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

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

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

Направляем взгляд посетителя в нужное место

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

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

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

Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

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

Предыдущие уроки:

1. Создание дизайна Landing Page для студии разработки сайтов (Урок 1)
2. Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

Для создания дизайна нам понадобится сетка 960 Grid System, немного модифицированная и расширенная для Bootstrap на 1140 пикселей. Это 12-ти колоночная сетка для Adobe Photoshop, так как рисовать дизайн сайта мы будем именно в этой программе: Скачать сетку

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

Фон первого экрана

Итак, откроем нашу сетку в фотошопе и сразу обозначим первый экран Landing Page – нарисуем прямоугольник шириной в документ и высотой 640 пикс. Зададим ему цвет фона #663399:

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

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

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

Далее нарисуем верхнюю полосу меню – это прямоугольник черного цвета, высотой 60 пикс, непрозрачность слоя – 85%:

Логотип

Напишем шрифтом Echoes Slab логотип – MyStudio, размером 24 пикс, белым цветом. Оставив справа от сетки немного место для графического элемента логотипа.

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

Откроем его в Inkscape и векторизируем растр (Объект > Векторизировать растр):

У меня получился такой png патч, можете скачать его, минуя работу в Inkscape:

Экспортируем наш векторизированный бриллиант в png и вставим в наш макет в фотошопе.

Уменьшим до необходимых размеров и наложим красный цвет — #ff3838:

Можно бриллианту добавить красного внешнего свечения цветом #ff0000:

Заголовки

Наш несложный логотип готов, напишем заголовки у первого экрана, см. наш прототип из первого урока. Размер заголовка – 50 пикс, размер подзаголовка – 20 пикс. Цвет заголовка — #ffffff, цвет подзаголовка – возьмем пипеткой с фона и осветлим:

Отлично, но мы забыли меню и телефон из прототипа. Их мы напишем шрифтом Exo 2 Light, его также можно взять на сайте Fonts4Web.ru. Цвет – белый, подчеркивание активного пункта и пункта при наведении мышью сделам красным, взяв цвет из логотипа – простоя однопиксельный прямоугольник. Размер меню – 16 пикс. Меню делаем по сетке – 4, 5, 6, 7 ,8 и 9-я колонки:

И напишем телефон в последних трех колонках сетки, также белым цветом, шрифт Exo 2 Regular, размер 22 пикс. Под телефоном – более мелким шрифтом напишем «Заказать звонок»:

Далее по прототипу у нас слайдер с последними работами. Нарисуем по сетке 4 прямоугольника черного цвета с непрозрачностью 25%. Хоть в прототипе мы нарисовали 3, но в данной сетке можно разместить и 4:

Оставим по одной колонке сетки по краям для навигации по слайдеру.

Заполним элементы слайдера логотипами крутых компаний, я выбрал эти для примера:

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

Добавим навигацию слайдера. Для этого по крайним колонкам разместим стрелки. Их можно взять, например, из шрифта Ruslan Display. Размер стрелок 60 пикс, непрозрачность 25%.

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

Отлично. Можно, конечно еще поработать, сделать что-нибудь интересное, наложить какой-нибудь паттерн на фон шапки, но этого, думаю, будет достаточно.

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

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

Создание дизайна Landing Page для студии разработки сайтов (Урок 1)

Здравствуйте, веб-мастера и веб-мастерята.

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

На дворе 2014 год, скоро 2015, а веб технологии, в том числе и дизайн неумолимо развиваются. И на случай, если вы гость из будущего 2030 года, просьба не критиковать это устаревший Флэтовый стиль, в котором мы будем рисовать дизайн сайта.

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

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

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

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

Вася! Почему наш сайт получился как у всех?
Ну как, все так делают и пусть у нас такой-же будет.

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

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

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

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

После шапки с выдержками работ, мы сделаем экран…

Так, стоп. Если кто не в курсе, что такое экран Landing Page, объясню. Структура продающей страницы разделяется на экраны — это такие секции, которые, в среднем, занимают один экран монитора ноутбука или компа.

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

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

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

Итак, у нас получилось 4 экрана:

1. Шапка, выдержки из портфолио лучших работ;
2. Мы — профессионалы;
3. Как мы работаем;
4. Контакты.

Рисуем прототип

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

Прототип можно рисовать в любой программе для создания прототипов. Я же рисую или в фотошопе или в Inkskape. Landing Page — это одностраничный простой достаточно сайт, поэтому, нет смысла использовать платные профессиональные инструменты, типа Axure.

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

Что мы видим в прототипе.

• В верхней ленте шапки — логотип (нарисуем позже), меню и телефон с обратным звонком. Обратный звонок обязателен на любом сайте;
• Шапка — пишем красивый и простой заголовок. Смотрим 7 простых советов о том, как создать шапку для продающего сайта. Но форма обратной связи, в нашем примере будет находиться в разделе «Контакты»;
• Слайдер с самыми крутыми работами из основного портфолио;
• Наш опыт — текст + иллюстрация. Все иллюстрации и картинки в прототипах обозначаются фигурой, перечеркнутой крестом. Кроме того, в данной секции видим кнопку «Заказать сайт«. Такие кнопки должны быть в теле Landing Page, но злоупотреблять их количеством не стоит;
• Как мы работаем. Тут мы схематично показываем этапы работы. Вообще, в продающих страницах можно не бояться переборщить с инфорграфикой и схемами. Пользователи любят инфографику.
• Контакты. Тут все стандартно — в конце обязательно указываем контакты. Можно было запилить Яндекс.Карту, но как нибудь в другой раз.

На этом урок окончен. До встречи в следующих уроках. А в следующем уроке мы рассмотрим создание дизайна шапки нашего Landing Page.

Премиум уроки от WebDesign Master

Другие уроки по теме «Прототипирование»

Примеры landing page с красивым дизайном

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

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

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

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

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

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

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

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

Также смотрите:

Разработка landing page, создание лендинг пейдж под ключ

1

Анализ рынка, конкурентов и целевой аудитории

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

2

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

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

3

Создание концепции страницы и разработка оригинального дизайна

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

4

Верстка

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

5

Подключение системы управления контентом

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

6

Тестирование и запуск проекта

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

7

Анализ после создания страницы

Наконец, готовый лэндинг проходит этап А/Б тестирования и анализа проекта на основании данных систем аналитики Яндекс.Метрика и Google Analytics.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.Индокитай

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

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

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

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

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

2. Зола

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

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

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

3. Lujo

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

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

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

4. Panoply

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

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

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

5. Daily Harvest

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

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

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

6. Greats

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

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

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

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

7. Unbounce

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

Вот то, что, на наш взгляд, отлично выглядит:

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

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

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

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

9 советов по дизайну целевой страницы для повышения конверсии

Включите подробную информацию о продукте

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

Напишите убедительное описание продукта

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

Прямой

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

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

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

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

Оживите свой продукт с помощью изображений

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

Несколько изображений лучше, чем одно

В своем отчете по исследованию потребителей за 2018 год Salsify обнаружил, что 73% людей хотят видеть 3 или более изображений при рассмотрении покупки. К счастью, большинство мобильных устройств оснащены отличными камерами (а также встроенными инструментами редактирования), поэтому, даже если вы не являетесь профессионалом в области фотографии, легко сделать как можно больше красивых, высококачественных и привлекательных изображений для своего интернет-магазина. как вам нужно.

Показать под разными углами

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

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

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

Используйте образы образа жизни

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

Нужны еще несколько советов и идей, вдохновляющих на создание фотографии стиля жизни? Ознакомьтесь с этими полезными ресурсами от Shopify, Jungle Scout и Threadless.

6 выдающихся примеров целевых страниц

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

Целевые страницы иногда также называют страницей захвата лидов, статической страницей или целевой страницей.

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

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

Standard Classic: Стандартная целевая страница имеет форму над сгибом и четкое ценностное предложение.Они должны быть простыми для понимания и быстро и без проблем удовлетворять намерения посетителя.

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

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

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

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

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

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

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

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

Эта целевая страница от Wistia имеет довольно много элементов, которые попали в наш список.

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

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

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

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

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

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

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

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

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

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

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

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

На вынос

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Трафик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Помните:

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

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

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

Разбивка CareChoice

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В противном случае ваши клиенты могут чувствовать себя так:

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

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

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

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

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

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

20 простых советов по дизайну целевой страницы для увеличения конверсии

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

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

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

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

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

Зачем нужна посадочная страница

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

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

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

• Предложение лид-магнита в обмен на контактную информацию
• Продвижение определенного продукта или услуги
• Повышение шума о мероприятии или распродаже
• Регистрация на вебинар
• И многое другое

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

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

Базовые лендинги состоят из следующих элементов:

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

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

1. Придерживайтесь единой цели на своей целевой странице

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

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

Вот конкретный пример целевой страницы от Taboola:

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

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

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

2. Не отвлекайте внимание

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

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

Удалите с целевой страницы все внешние и внутренние ссылки, такие как меню навигации, ссылки нижнего колонтитула и т. Д.

После удаления всех ненужных ссылок останется только нажать кнопку CTA.

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

3. Рассмотрите возможность использования шаблона целевой страницы

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

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

SeedProd — лучший конструктор целевых страниц на рынке. Он поставляется с более чем 100 профессионально разработанными шаблонами целевых страниц.

Вы можете получить готовые дизайны на:

• Продажные страницы
• Страницы вебинаров
• Целевые страницы видео
• Скоро в продаже стр.
• Сжать страницы
• Спасибо страниц
• и более

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

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

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

4. Выбирайте правильные цвета

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

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

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

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

Взгляните на эту инфографику от CoSchedule:

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

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

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

Просто нажмите на понравившуюся цветовую схему, и SeedProd автоматически применит ее к вашей целевой странице.

5. Отзывчивое мышление

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

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

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

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

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

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

6. Привлекайте внимание убедительным заголовком

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

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

Вот пример отличного заголовка целевой страницы от Airbnb:

Это просто, по делу и говорит о пользе для посетителя.

Не нужно использовать метафорические заголовки или придумывать какую-то уникальную игру слов.

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

7. Напишите копию, к которой может относиться ваша аудитория

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

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

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

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

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

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

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

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

Но такой плагин, как SeedProd, поставляется с множеством готовых пар шрифтов.

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

9. Ценность предложения выше сгиба

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

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

Вот пример из Bluehost:

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

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

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

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

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

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

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

Например, ваша кнопка CTA может выглядеть так:

• Загрузить электронную книгу сейчас
• Получите скидку сегодня
• Получить «Название продукта» сейчас
• Попробовать «Product Name» бесплатно

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

11.Добавить видео для объяснения сложной информации

Добавление видео на целевую страницу — отличный способ повысить вовлеченность и увеличить количество конверсий.

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

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

66% потребителей в любом случае предпочитают просмотр видео чтению о продукте.

Вы можете легко добавить видео на свою целевую страницу с помощью SeedProd.

Просто перетащите блок целевой страницы видео на свою страницу. Затем в настройках можно добавить URL видео.

12. Интеграция с социальными сетями

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

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

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

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

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

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

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

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

Еще один способ добавить социальное доказательство на вашу целевую страницу — использовать TrustPulse.

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

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

Вот как они выглядят:

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

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

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

Это мощный способ повысить конверсию.

Хотите добавить на свой веб-сайт уведомления о социальном подтверждении? Зарегистрируйте свою бесплатную учетную запись TrustPulse сегодня!

14. Держите форму короткой

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

Вот почему важно, чтобы формы были краткими.

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

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

15. Используйте двухэтапный Optin

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

• Нажатие кнопки CTA
• Заполнение анкеты

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

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

Вот почему мы рекомендуем использовать двухэтапную технологию OptinMonster MonsterLinks ™.

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

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

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

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

16. Создайте срочность с помощью таймеров обратного отсчета

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

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

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

• Сейчас
• Сегодня
• Быстро
• Не ждите

Но еще более действенный способ повысить срочность — использовать таймер обратного отсчета на целевой странице.

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

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

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

17. Ответьте на вопросы с помощью раздела часто задаваемых вопросов

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

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

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

Вот как это делает Netflix:

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

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

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

18. Оптимизируйте свою страницу по скорости

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

Есть несколько способов увеличить скорость целевой страницы, в том числе:

Прочтите этот пост, чтобы узнать, как ускорить работу вашего сайта WordPress.

19. Проведите A / B-тестирование

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

Вы никогда не узнаете, насколько хорошо работает дизайн вашей целевой страницы, если не проведете A / B-тестирование.

A / B-тестирование — это когда вы сравниваете 2 разные версии веб-страницы друг с другом, чтобы определить, какая из них работает лучше.

Например, вы можете проверить, какая фраза кнопки CTA преобразует лучше:

A / B-тестирование — важный этап разработки целевой страницы. Даже самые незначительные изменения могут привести к большему количеству конверсий.

Итак, убедитесь, что вы A / B тестируете каждый элемент вашей целевой страницы.

Прочтите эту статью, чтобы узнать больше о примерах A / B-тестирования.

20. Добавьте выходное намерение для восстановления покинувших посетителей

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

Но не волнуйтесь.

К счастью, есть способ восстановить уходящих посетителей на вашу целевую страницу. Это касается кампаний Exit-Intent® от OptinMonster.

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

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

Фактически, InternetSuccesGids использовала эту тактику, чтобы конвертировать 24% посетителей и увеличить свой список рассылки более чем на 250%!

Вы можете увидеть аналогичные результаты, если добавите Exit-Intent® на свою целевую страницу.

Создайте кампанию Exit-Intent® сегодня!

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

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

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

Опубликовано Allison Hott

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

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

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

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

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

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

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

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

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

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

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

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

1. Визуальная простота

Визуальная простота отображается на главной странице Conversionlab.

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

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

2. Отличная целевая страница начинается с отличных медиа

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

Привлекательная фотография увеличивает количество конверсий на целевой странице Uber.

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

Исследования влияния видео на целевые страницы показывают, что видео оказывают большее влияние, чем неподвижные изображения, где «71% респондентов подтверждают, что видео конвертируется лучше, чем другой контент.”Видео помогают с SEO, поддерживают взаимодействие с пользователем и лучше объясняют посетителям продукт или услугу. Еще один фактор, благоприятствующий видео, заключается в том, что при правильном использовании они могут заменить многословную копию, которая потенциально может повредить конверсиям.

3. Важность цвета

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

Прекрасное использование цвета на целевой странице Мэйсоном Ярнеллом для Mixpanel.

Вот несколько советов, как эффективно использовать цвета:

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

Цвет, используемый на целевой странице Balkan Brothers.

5. Адаптивный дизайн целевой страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сводка

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

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

• • •

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

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

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

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

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

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

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

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

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

Не позволяйте этому случиться с вами.

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

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

VividBoard увеличил конверсию с 2% до 27% (рост на 1250%) с помощью простой целевой страницы, предназначенной для увеличения конверсии. Взгляните:

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

Как удовлетворить человека, которого почти не знаешь?

На самом деле это сложно сделать.

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

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

Представьте себе: у вашей аудитории болит голова, и вы пытаетесь дать им лекарство от боли в животе.

Они вас послушают? Разве ваше решение не отключит их?

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

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

Вот мой вам совет:

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

Помните, что кто-то, у кого есть проблема или проблема, будет искать решения, так или иначе.

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

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

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

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

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

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

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

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

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

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

• Действительно ли моя аудитория понимает, к чему я клоню, создавая дизайн целевой страницы?
• Ориентирован ли мой шаблон целевой страницы на что-то одно (например, получение 1000 подписчиков по электронной почте)?
• Действительно ли моей аудитории нужно более одного решения или одной кнопки CTA (возможно, нет)?

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

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

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

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

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

Что такое инструмент?

Вот простое определение с сайта Businessdictionary.com: «Элемент или орудие, используемое для определенной цели».

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

Использование неправильных инструментов отрицательно сказывается на ваших результатах.

Но все инструменты целевой страницы созданы одинаково, верно?

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

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

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

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

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

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

Поэтому постарайтесь выбрать правильный инструмент целевой страницы — и упростите работу.

Вы когда-нибудь задумывались, как мне удалось с нуля построить 5 успешных SaaS-компаний с многомиллионным доходом? Я написал об этом пост.

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

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

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

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

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

Вы слышали о термине «свинцовый магнит» ?

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

Ценный лид-магнит может быстро увеличить вашу генерацию лидов.

Например, этот маленький ребенок сгенерировал 28 507 потенциальных клиентов для DigitalMarketer за 45 дней.com.

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

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

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

Это способ завоевать доверие клиентов.

Бесплатные подарки всегда побуждали к действию. Люди любят бесплатные подарки.

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

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

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

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

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

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

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

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

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

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

Давайте сравним две разные целевые страницы. Имейте в виду, что они с одного и того же сайта.

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

Но после редизайна название было улучшено. Взгляните:

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

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

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

«Картинка стоит тысячи слов».

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

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

• Люди реагируют на визуальный контент быстрее, чем вы можете себе представить.
• 90% информации, передаваемой в мозг, является визуальной, а визуальные эффекты обрабатываются мозгом в 60 000 раз быстрее, чем текст.
• 80% людей запоминают то, что видят и делают.
  
• Посетители сайта проводят на 100% больше времени на страницах, содержащих интересные видео.

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

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

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

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

Вот скриншот оригинала и варианта вместе с результатом.

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

Джейсон прокомментировал результаты теста:

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

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

Вы хотите казаться им реальными, если хотите повысить коэффициент конверсии.

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

Именно это и сделали GetResponse на своей целевой странице.

Посмотрите:

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

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

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

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

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

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.