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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сколько стоит дизайн Landing page

 

Определения

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

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

От чего зависит цена лендинга?

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

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

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

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

Стоимость создания одностраничного сайта

Landing page

• от 60 000 р.
• Сроки: от 60 дней

 

Этапы разработки лендинг пейдж

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

• Мы получаем заполненный Вами бриф.

• Составляем техническое задание (ТЗ) на разработку проекта (промосайта, визитки, лендинга или ресурса другого типа).

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

• На основе согласованных Вами прототипа и мудборда мы разрабатываем дизайн.

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

• Вы получаете готовый лендинг и вносите оплату.

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

Наши работы

 

Готовы заказать дизайн лендинга?

Если Вы хотите узнать ориентировочную цену своего проекта, условия и варианты оплаты, оставьте заявку, позвоните или лично обратитесь в наш офис в Москве!

Создание дизайна 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

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

Land Book — галерея красивых лендингов (Landing Page)

Лендинг, целевая страница или landing page — это веб-страница для привлечения пользователей для рекламы каких-то услуг, продажи товаров или сбора подписчиков. Лендинга имеет свой уникальный дизайн, который может кардинально отличаться от остального сайта. Некоторые проекты даже состоят из одного landing page. Соответствующие примеры доступны на сайте-галерее Land Book, о которой сегодня и пойдет речь. Плюс также раньше мы рассматривали похожий проект OnePageLove.

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

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

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

Stampready

Chooos

Intercom

Avocode

Montagebook

Macpaw Hider

Modnotebooks

Getgoldee

Lixpen

Pnghat

Getnarrative

Scratchwireless

Madewithfaded

Timelyapp

Liber

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

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

Дизайн лендинга — заказать эффективный дизайн Landing Page в Wezom по лучшей цене Украины

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

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

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

На разработку требуется всего 2 недели, а уже спустя 8 дней с момента запуска она начинает окупаться. Не верите? Проверьте сами, заказав дизайн Лендинг пейдж в IT компании Wezom!

Делаем на совесть

Wezom занимается своей работой больше 20 лет. Наш коллектив насчитывает свыше 100 человек, и каждый здесь находится на своём месте. Мы регулярно следим за всеми новинками в области дизайна и разработки, поэтому создаём сайты, которые действительно продают. Более 500 клиентов довольны работой веб-студии.

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

Внушаем доверие

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

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

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

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

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

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

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

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

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

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

Что определяет целевую страницу с высокой конверсией?

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

Согласно Hubspot, целевые страницы являются наименее популярным типом формы регистрации с самым высоким коэффициентом конверсии 23%.С другой стороны, всплывающие окна являются наиболее популярными, их коэффициент конверсии составляет 3%.

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

Основные элементы хорошей посадочной страницы

Сногсшибательный заголовок

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

Хороший заголовок будет:

• Привлечь внимание читателя
• Повышение узнаваемости бренда и предложения
• Краткое сообщение — желательно максимум 10 слов

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

Убедительные подзаголовки

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

Просто, ясно и лаконично

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

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

Способы связи

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

Способы связи:

• Электронный адрес
• A Физический адрес
• Форма обратной связи
• Телефонный номер

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

Гарантия

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

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

Ясный призыв к действию

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

Рекомендации по проектированию

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

Последние мысли

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

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

| 6500+ лучших бесплатных посадочных страниц 2021

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

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

Развивайте свой бизнес

Современная цифровая среда очень конкурентоспособна, и важно продвигать свой продукт или услугу с помощью эффективных инструментов. Nicepage предоставляет так называемые страницы «лидогенерации» или «захвата лидов», которые эффективно используют формы в качестве призыва к действию. Наши целевые страницы оптимизируют ваш контент для привлечения трафика, повысить узнаваемость бренда и увеличить количество потенциальных клиентов с помощью поиска, что побудит посетителей с готовностью нажимать кнопку CTA.С помощью кнопки CTA вы можете указать любой своего рода поощрительные действия, включая тематические исследования, консультации, вебинары и т. д., которые приведут к тому, куда двигаться дальше. Представленные на нашем сайте примеры целевых страниц очень гибкие и могут удовлетворить даже самых требовательных посетителей. Отличная посадка наших шаблонов будет позволить посетителям страницы использовать наши маркетинговые советы для навигации и быстрого поиска того, что им нужно. Существует множество разнообразных шаблонов, в которых есть отличные интеграция в систему Google Ads и механизм лидогенерации для интернет-маркетинга.Этот механизм помогает целевой аудитории людей, наиболее подходящих для вашего бизнес и, используя шаблоны электронной почты, будет генерировать потенциальных клиентов в поисковых системах, чтобы улучшить ваше социальное доказательство. Различные типы целевых страниц с высокой конверсией могут использоваться для разных целей, включая Facebook Instagram. Они очень эффективны для продвижения таких важные веб-сайты, такие как Facebook, Instagram, LinkedIn или Twitter, которые постепенно улучшат ваши показатели конверсии. Типы целевых страниц для сообщений в блогах: отлично подходит для интеграции на эти веб-сайты, особенно в сочетании с рекламой Facebook или Google.

Удобство для пользователя — это просто

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

Дизайн посадочных страниц

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

Страница захвата лида

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

Вас также может заинтересовать Дизайнер целевых страниц и Шаблоны посадочных страниц

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

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

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

• Компании, которые в среднем разрабатывают более 30 целевых страниц, генерируют в семь раз больше подписок и продаж, чем компании, использующие менее 10 страниц.
• Продвижение нескольких предложений на целевой странице может снизить коэффициент конверсии до 266%.
• 48% интернет-маркетологов разрабатывают новую целевую страницу для каждой маркетинговой кампании, которую они создают.
• Средний CR целевых страниц составляет 2,35% во всех отраслях.
• Читатели на 80% чаще совершают действия после прочтения целевой страницы, содержащей визуальный контент.

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

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

1. Информативная над складкой

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

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

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

• Изображение продукта
• Список преимуществ / решений
• Список функций
• Гарантия возврата денег
• Соответствующие отзывы

Вот отличный пример из SEMRush:

2. Коэффициент внимания

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

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

3.Поток и направление

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

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

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

4. Сделайте элементы яркими с помощью контраста

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

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

5. Выделение

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

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

6. Много свободного пространства

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

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

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

7. Окрестности

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

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

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

8. Группировка

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

Сгруппированные объекты упрощают интерпретацию для пользователей.Вот пример из Zoom:

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

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

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

Вот подходящий пример от Aweber, одного из ведущих автоответчиков электронного маркетинга.

10. Броские заголовки

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

Также убедитесь, что вы используете заглавные буквы в заглавных буквах для каждого слова, кроме соединительных слов, таких как «of, and, it, for, but, и т. Д.»

Вот пример заголовка от Hubspot:

На вынос

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

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

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

Специализируется в таких сферах, как маркетинг, бизнес, образование.Изабель часто участвует в программе Brill Assignments.

Найдите ее в Twitter @IsabellGaylord.

Гарантированное преобразование с помощью этих 9 элементов дизайна целевой страницы

Разница между домашней страницей и целевой страницей.

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

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

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

• Панель навигации / меню
• Много информации
• Множество ссылок и источников
• Не обязательно сильный CTA
• Органический трафик

Vintage agency

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

Они бывают двух структурных типов:

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

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

Итак, как создать целевую страницу? В UX studio мы используем следующие шаги:

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

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

1. Ценностное предложение (ясная и краткая копия)
2. Никаких отвлекающих факторов — нет меню навигации
3. Привлекающие средства массовой информации (фотоиллюстрация видео)
4. Четкий призыв к действию
5. Размещение над сгибом
6. Уплотненная форма
7. Четко определенная аудитория / цель
8. Знаки доверия
9. Тестирование

1.Ценностное предложение + четкая и краткая копия Dropbox

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

Ваша ценностная опора и копия — это самые большие факторы, влияющие на коэффициент конверсии.

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

2. Не отвлекаться Duolingo

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

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

3. Привлекающие СМИ (фото, иллюстрации, видео) Slack

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

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

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

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

4. Четкий призыв к действию UXfol.io

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

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

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

5. Размещение над сгибом

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

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

6. Уплотненная форма

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

7. Четко определенная аудитория / цель

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

8. Знаки доверия Trello

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

9. Тестирование Эдмунд Боуи

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

Итак, какие элементы вам следует протестировать?

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

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

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

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

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

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

Заключительные мысли

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

Unbounce

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

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

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

Продолжить обучение с UX studio

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

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

Пользователи уходят с вашего сайта, а коэффициент конверсии низкий? Аудит UX может помочь определить потоки юзабилити в вашем продукте и определить ключевые шаги для повышения его производительности. Узнайте больше о UX Expert Review от UX studio — >>

20 лучших примеров дизайна посадочных страниц для вдохновения в 2020 году (обновлено)

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

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

Что такое целевая страница и почему это так важно ?

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

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

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

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

Вот несколько факторов, влияющих на создание хорошей целевой страницы.

• Чистый и простой организованный дизайн

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

• Ясный и заслуживающий доверия CTA

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

• Визуально привлекательное изображение

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

• Четкие цели и целевые пользователи

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

• Уточненный и иерархический текст

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

Название: Используйте изящный и привлекательный текст для привлечения внимания пользователей.

Кузов: Основная информация; краткий, прямой и понятный

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

Нижний колонтитул: Предоставьте ссылки и информацию, такую ​​как бренды, контакты и ссылки на социальные сети, чтобы укрепить доверие и предоставить контекст.

• Тесно связанный дизайн бренда

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

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

В чем разница между целевой страницей и веб-сайтом?

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

Целевая страница: Простая структура и ничего не отвлекает

Страница веб-сайта: Стандартная страница веб-сайта содержит несколько модулей и функций, таких как навигационные ссылки, боковая панель, О компании, Информация о компании, Услуги , и Блог.

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

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

Целевая страница: Доступен ограниченный доступ, например, только интерактивный CTA

Страница веб-сайта: Все страницы доступны для щелчка и перехода с обратимым взаимодействием.

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

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

1.

Mailchimp

Основные моменты:

• Черное на белом
• Специальный логотип
• Четкое позиционирование пользователя

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

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

2. Целевая страница — Веб-сайт

Основные моменты:

• Банковская карта
• Четкие бизнес-процессы

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

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

3. Upwork

Основные моменты:

• Умный дизайн кнопки CTA
• Мотивационный копирайтинг

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

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

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

4. Captico — Animation

Основные моменты:

• CTA + анимация
• Плоский дизайн

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

5. Slack

Основные характеристики:

• Антропоморфный дизайн для совместной работы
• Цвет бренда
• Простая кнопка CTA

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

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

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

Кнопка CTA на странице использует короткое и понятное «Начать работу» в качестве руководства по действиям клиента.

6. Matchpool

Основные моменты:

• Плоский дизайн
• Минималистичный копирайтинг
• Привлекающий внимание цветной дизайн CTA

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

Резкий цветовой контраст кнопки CTA делает ее очень привлекательной. Что касается копии, то, как я уже упоминал выше, «Бесплатная» всегда привлекательна для пользователей.

7. Airbnb

Основные моменты:

• Простой графический фон
• Персонализированный дисплей
• Сарафанный маркетинг

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

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

8. Flickr

Основные моменты:

• Карусель изображений
• Большая и видимая кнопка CTA

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

Большой видимый дизайн кнопки CTA привлекает пользователей к сообществу Flickr.

9. Осенний заповедник

Основные моменты:

• Большое изображение иллюстрации
• Привлекающий внимание CTA
• Минималистский дизайн

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

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

10. GOTOEGYPT

Основные моменты:

• Уникальный дизайн фона
• Креативный дизайн бренда
• Удачное сочетание природы и фона веб-сайта

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

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

11. Wickret

Основные моменты:

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

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

12. CUBIX

Особенности:

• Простые визуальные элементы
• Четкая навигация

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

13. Все наготове

Основные моменты:

• 3D-иллюстрации
• Креативная идея презентации PPT
• Простой и понятный дизайн навигации

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

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

14. Климат и животные

Основные моменты:

• Чередование темного и белого фона веб-сайта
• Полужирный иерархический текст

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

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

15. Встречайте тигровый

Основные моменты:

• Красочные плоские элементы дизайна
• Энергичное взаимодействие
• Четкая целевая группа — молодые люди
• Яркая цветовая тема CTA

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

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

16. BinGo

Основные моменты:

• Дизайн веб-сайта с разделением экрана
• Визуальный контраст с использованием изображений и текста
• Отличные переходы

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

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

17. С уважением

Основные моменты:

• Плоский рисунок
• Сплошной цветной блок-фон
• Минималистичный дизайн

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

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

18. Аналитика электронной торговли

Основные характеристики:

• Модель карусели
• Анимация карусели
• Раздел аналитики адаптивной электронной коммерции

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

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

19. Станьте шеф-поваром со звездой Мишлен

Особенности:

• Сочные цвета
• Текстурированный дизайн иллюстраций
• Плавная анимация

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

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

20. Поле

Основные моменты:

• Темный фон веб-сайта
• Белый текст бренда
• Креативная и яркая кликабельная кнопка

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

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

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

• Кто является целевой группой сайта?

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

• Задайте цель конверсии.

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

• Точное предоставление информации об услугах / продуктах

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

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

Ни одна страница не идеальна на 100%. Не существует единого стандарта успеха. Чтобы создать хорошую целевую страницу, помните, что данные говорят громче, чем истории. Итак, лучше всего оптимизировать собранные данные — время пребывания посетителей, показатель отказов, коэффициент конверсии, что они читают, на что нажимают и т. Д. Изучите цвета. Сравните эффективность красной кнопки и зеленой кнопки.Что больше конвертирует — копия А или Б? Пусть говорят A / B-тестирование.

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

Unbounce — Самый известный инструмент для дизайна целевых страниц

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

Leadpages — Многоцелевые инструменты для дизайна целевой страницы

LeadPages предлагает множество функций, таких как макет веб-страницы, A / B-тестирование и SEO-оптимизация. Его самое большое преимущество — интеграция с другими инструментами. Например, LeadDigits поощряет пользователей подписываться, вводя свой адрес электронной почты с помощью SMS.

Заключение

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

.

20+ прекрасных посадочных страниц с иллюстрациями героев

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

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

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

Иллюстрация героя Веры Войшвило отражает атмосферу коворкинг-пространства.

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

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

Контрастная и художественная целевая страница с иллюстрацией от Unfold.

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

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

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

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

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

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

В концепции Landing page от Дмитрия Харченко использована модная иллюстрация героя, которая добавляет веселья и передает идею продукта.

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

Анимация целевой страницы от Studio VOR построена на основе цифровых произведений искусства.

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

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

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

Еще одна яркая и динамичная героическая иллюстрация для дизайна лендинга от Студии ВОР.

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

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

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

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

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

Об авторе: Марина Яланская, автор контента и исследователь дизайна, ответственный редактор блога Icons8.

5 принципов дизайна посадочных страниц

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

В частности, целевые страницы

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

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

Действительно ли целевые страницы работают, что хорошо? Резервное копирование, что такое целевая страница? Как они работают и чем отличаются от обычных веб-страниц?

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

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

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

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

Взгляните на эту целевую страницу Shopify. Заметили какие-то большие отличия от типичного веб-сайта?

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

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

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

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

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

5 принципов дизайна посадочной страницы

1. Сохраняйте простоту

Давайте взглянем на целевую страницу ниже для Чейза.

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

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

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

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

Когда дело доходит до целевых страниц, делайте это просто.

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

Хорошим примером того, как важно, чтобы ваша целевая страница оставалась простой, является старая целевая страница Trulia.Первое, что вы видите на этой странице, — это название компании, а затем вопрос: «Сколько стоит ваш дом?» Это подскажет вам, что такое Trulia: веб-сайт для покупки, аренды и продажи домов (хотя эта конкретная целевая страница специально предназначена для продавцов).

Одно поле и одна кнопка — все, что нужно.

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

2.Ограничьте количество призывов к действию

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

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

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

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

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

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

На странице есть несколько призывов к действию. Разница между тем, как на странице Khan Academy используются призывы к действию, по сравнению с другими, заключается в том, что они, по сути, ссылаются на то же, что и кнопки в верхней части страницы.Каждая кнопка, следующая за начальными тремя, означает «Учащиеся, начните здесь» и «Учителя, начните здесь».

— это кнопка , которая не относится к трем группам, но имеет прямую ссылку на текст над ней.

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

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

3. Визуальная иерархия

Что в первую очередь привлекает внимание, когда вы смотрите на целевую страницу Unbounce с ее (мета!) Курсом целевой страницы?

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

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

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

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

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

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

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

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

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

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

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

4. Сначала пользователь

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

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

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

Но дело не только в этом.

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

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

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

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

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

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

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

5. Привлекайте внимание

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

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

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

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