Содержание

30 примеров современных товарных лендингов

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

Обратите внимание на роль «главного изображения» или «hero image» в каждом примере — оно закладывает продающий потенциал лендинга.

Надеемся, эти кейсы вдохновят вас на собственные тесты.

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

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

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

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

Интернет-магазин Ada Blackjack продает сумки и рюкзаки. Дизайн прост, в его основе — хорошие фото товаров. Такой макет не отвлекает от главного — товаров.

Читайте также: Как продвигать большой ассортимент товаров через лендинг?

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

Другой способ выделиться — нестандартный дизайн. Пример — магазин одежды и товаров для дома RYDER, с весьма креативным макетом (см. меню на скриншоте). Стоит протестировать, как это влияет на конверсию landing page.

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

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

Dick Moby продают очки, и на лендинге бренда много сильных дизайн-ходов:

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

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

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

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

Читайте также: Методика выявления уникальных отличий товара или услуги среди конкурентов

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

Jackie Smith — очередной «яркий» сайт-eCommerce. Как и в примере выше, визуальный баланс выдержан хорошо. Насыщенными цветами выделены важные элементы — фото товаров и блоки с акциями. Все остальное — черно-белое. 

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

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

На первом экране онлайн-магазина Greyrock — только фото. Там изображена мебель, которая собирается легко и без инструментов (реальное УТП). Девушка с книгой и надпись в заголовке дополняют композицию, как бы говоря: «Расслабься (Take it easy), закажи мебель, быстро собери ее и отдыхай».

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

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

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

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

Читайте также: 15 гениальных примеров главной страницы сайта

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

Soap Co. подают товар так, что он «продает себя сам». Нет никаких рекламных элементов — только фото и текст. Отличный пример минимализма в дизайне.

Насыщенный, стильный дизайн. Элементов много, но внимание не рассеивается. Заняты даже углы — в них размещена аббревиатура бренда.

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

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

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

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

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

The Letter J продает типографские изделия: принты и чехлы для iPhone. Интересен подход к расположению фото: изображения размещены на фоне пересекающихся цветных листов бумаги. Интересный и необычный дизайн-прием. 

Интернет-магазин 100% Pure оформлен не слишком вычурно. Однако, дизайн доказывает, что разработать хороший сайт и лендинг можно без лишнего креатива. Хорошего UX вполне достаточно. 

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

Читайте также: Оптимизация юзабилити главной страницы интернет-магазина

Интернет-магазин Oi Polloi показывает. что минимализм — не синоним скучному дизайну. Крупные фото товаров на цветном фоне вместе с необычным шрифтом создают отличное впечатление. 

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

Читайте также: Лендинг vs Домашняя страница: что эффективнее?

Вместо заключения

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

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

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

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

По материалам: oberlo.com

05-12-2016

17 вдохновляющих примеров лендингов и советы по их оформлению

«Хорошие художники копируют. Великие — крадут»

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

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

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

1. Подбирайте слова

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

В чем особенность этого оффера?

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

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

И это работает.

2. Вызывайте доверие

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

Оффер компании, занимающейся автоматизацией создания и рассылки счетов, вызывает доверие у посетителей: «Утонченное решение для CFO (Chief Financial Officer, финансовый директор). Простое — для команды».

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

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

Блестяще!

3. Выделите ваше УТП

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

Фраза: «Приватная социальная сеть для студентов колледжа» — короткая, но с емким тезисом. Она не только объявляет сайт социальной сетью, но и раскрывает ключевое УТП, в котором потенциальные пользователи могут увидеть сразу несколько выгод: конфиденциальность, которая беспокоит многих владельцев аккаунтов Twitter и Facebook, желающих скрыть от любопытных глаз свою виртуальную жизнь, а также некоторую эксклюзивность. Слово «приватная» предполагает не только безопасность данных, но и наличие своеобразной «экосистемы» только для своих.

4. Добавьте интерактивные элементы

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

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

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

5. Пусть изображение говорит за себя

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

Например, Chatterbox Labs:

«Сегментация аудитории с помощью науки о данных*. Новый взгляд на оптимизацию рекламных кампаний»

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

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

*По мнению Harvard Business Review, наука о данных (data science) — самая «сексуальная» профессия XXI века.

6. Будьте проще

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

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

Лендинг содержит два CTA: «Начать — это бесплатно» и «Посмотреть видео»

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

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

7. Ближе к делу

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

Это ошибка. Ваша страница должна максимально полно раскрывать предложение, а посетители — понимать, куда они попали и почему им это может быть интересно. Причем понимание должно происходить мгновенно, например, как на лендинге AskNative.com:

«Ответы местных жителей на все ваши вопросы в путешествии»

Без лишней двусмысленности текст на посадочной странице сразу сообщает очень коротко и ясно, для чего предназначен сервис. Кстати, авторизация через Facebook — дополнительный умный ход (см. п. 6).

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

8. Вы не продаете вещи — вы улучшаете жизнь

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

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

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

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

9. Добавьте видео

Многие компании при создании лендингов откладывают съемку видео «на потом» из-за ее дороговизны. Тем не менее, видео может перенести бизнес на другой уровень.

Для примера рассмотрим главную страницу сайта и контекстное объявление ChickenSaloon.com — производителя курятников. К услугам посетителей пошаговая видео-инструкция по изготовлению собственного курятника:

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

10. Помогите сделать правильный выбор

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

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

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

11. Сделайте сильное заявление

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

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

12. Держите марку. Рискуйте

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

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

13. Спрашивайте

Еще один эффективный способ установить контакт с посетителями — начать первое знакомство с вопроса, как это делает Trulia:

«Хотите узнать, сколько стоит ваш дом?»

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

14. Обращайтесь к эмоциям

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

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

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

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

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

15. Говорите прямо

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

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

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

16. Внимание к общим проблемам

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

«Попрощайтесь с невыносимыми совещаниями»

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

17. Помните о цвете

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

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

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

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

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

По материалам wordstream.com 

01-10-2015

39 примеров оригинального дизайна лендингов

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

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

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

1. Beurre & Sel

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

2. Hackery, Maths & Design

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

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

3. The Drawing Room

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

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

4. We Love Noise

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

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

5. Ende

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

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

6. Edward Carvalho Monaghan

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

7. Huys

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

8. KathArt

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

9. Wacom

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

10. Amsterdam Dance Event

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

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

11. Cropp

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

12. Neue Yorke

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

13. Juliana Bicycles

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

14. Esquire

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

15. Institut Choiseul

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

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

16. Award

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

17. Harry’s

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

18. The King’s of Summer

Сайт, представленный на скриншоте ниже, создан компанией Tumblr с целью мотивировать людей посмотреть фильм The King’s of Summer. На страницах сайта можно увидеть множество фотографий, GIF-анимаций, а также сюжетные линии из кинофильма. Его структура далека от типичной, но пользователи получат огромное удовольствие, прокручивая страницу вниз. Заголовок сайта будто бы написан вручную, что создает ощущение, что перед нами альбом с любимыми фотографиями.

Необычное расположение блоков контента и анимация, постоянно возникающая перед глазами, удерживает внимание посетителей. Даже если вы еще не видели фильм The King’s of Summer, глядя на этот сайт, у вас сложится свое собственное мнение и впечатление о нем.

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

 

Твитнуть цитату

19. World Baking Day

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

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

20. Paper & Paint

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

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

21. Newsweek

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

22. Abby Putinski

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

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

23. Baumastisch

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

24. Norwich University of the Arts

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

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

25. Trask Industries

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

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

26. Adam Hartwig

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

27. Contad

На этом лендинге все обладает эффектом анимации: CSS, HTML, JavaScript и SVG. Это очень увлекательный интернет-ресурс. Яркие цвета привлекают внимание пользователей, а страницы наполнены замысловатыми иллюстрациями. Единственный минус — сайт разработан исключительно для стационарных компьютеров с мышками. Кроме того, анимация функционирует только в браузере Chrome.

28. Музей Национальной Академии (National Academy Museum)

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

29. Эндрю Маккарти (Andrew McCarthy)

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

30. Майкл Эдвардс (Mikael Edwards)

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

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

31. Designer’s Friend

Стоит зайти на страницу данного сайта, как перед вами предстает не совсем привычное зрелище. Вы ведь никак не ожидаете увидеть на странице HTML-код, не так ли? Все, что вам нужно знать о компании, содержится прямо в коде, где тэги играют роль заголовков. Специальное окошко с названием «Совет дня» (Tip of the Day) помогает пользователю ориентироваться на сайте:

32. Hatched

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

33. Institute for Emerging Issues

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

34. Into The Arctic

Внешний вид лендинга Into the Arctic завораживает пользователей с первого взгляда. На заднем плане страницы проигрывается видео, которое иллюстрирует цель создания ресурса. Панель навигации также выполнена в особой манере: как только вы наводите на нее курсор, то перед вами открывается дополнительная информация. Шрифты, использованные на сайте, очаровательны, а остроумные цитаты «цепляют» пользователей. В целом, дизайн сайта исполнен безупречно.

35. Джон Джейкоб (John Jacob)

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

36. Impress

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

37. Postable

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

38. Национальный Музей ЛГБТ (National LGBT Museum)

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

39. Лукас Никитчук (Lucas Nikitczuk)

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

Заключение

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

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

По материалам: smashingmagazine.com 

28-02-2016

Идеальная Landing Page — 10 обязательных составляющих. Проверьте свою!

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

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

Эта статья будет полезна тем, кто собирается делать лендинг, и тем, у кого есть лендинг, но он хочет улучшить его «продающесть». Время прочтения — 7 минут.

Идеальная продающая структура LP, какая она?

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

Но есть принципы, которые остаются неизменными.

Первый экран — УТП

Уникальное торговое предложение (УТП) — то, что вы хотите донести и закрепить в сознании клиента. То, чем вы отличаетесь от конкурентов. То, почему стоит купить у вас. То, ради чего вы создаете лендинг, в конце концов…

Нет УТП — значит нет “изюминки”. Значит, вы — такие как все. Значит и лендинг будет похож на сотни таких же безликих одностраничников с “Индивидуальным подходом” и “Гарантией качества”. А чтобы этого не произошло, внимательно и ответственно заполняйте бриф с наводящими вопросами (в самом начале разработки). Но это уже история другой статьи.

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

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

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

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

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

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

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

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

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

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

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

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

Минимализм

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

лендинг минимализм

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

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

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

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

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

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

лендинг яркие элементы

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

Иллюстрации

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

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

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

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

лендинг иллюстрации

Типографика

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

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

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

лендинг типографика

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

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

лендинг расположение элементов

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

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

Навигация

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

лендинг навигация

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

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

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

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

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

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

лендинг спецэффекты

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

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

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

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

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

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

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

лендинг интерактивность

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

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

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

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

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

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

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

Крутой креативный лендинг для крутого креативного бюро. 

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

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

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

Читайте также: 24 примера креативной рекламы

Мощный современный лендинг рекламного агентства.

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

В остальном же это очень хороший лендинг, красивый и отзывчивый, с удобной, интуитивно понятной навигацией и полноэкранным меню. Визуальные элементы в стиле flat упрощают визуальное восприятие страницы, а параллакс эффект и анимация делают просмотр еще приятнее. На сайте большие фото- и видеогалерея, простая открытая форма захвата в конце и на странице контактов, где можно найти личные данные СЕО и менеджеров агентства в Украине, США. Для продакшн видеостудии и модельного агентства созданы отдельные лендинг пейдж, как и для полнометражного фильма студии, сопровождаемого хэштегом #SELFIEPARTY для большей виральности.

Стильный лендинг пейдж продакшн студии.

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

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

Читайте также: Креативный скролл основаный на CSS анимации

Интересный лендинг рекламного агентства с прекрасно реализованным портфолио.

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

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

Лендинг для продвижения услуг контекстной рекламы «ручной работы».

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

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

Читайте также: Фоновое видео на вашем лендинге: польза или вред?

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

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

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

Интересный лендинг агентства, продвигающего сайты в интернете.

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

  • ненавязчивая анимированная реакция элементов на начало прокрутки;
  • встроена удобная, короткая ,открытая форма захвата данных с СТА;
  • есть ссылка на закачку презентации в PDF-формате;
  • наконец, самое необычное — встроенная прямо в шапку аудио презентация!

Последнего мы еще точно нигде не видели.

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

Лендинг интернет-агентства по созданию сайтов, их раскрутке и продвижению.

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

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

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

Шаблоны и готовые лендинги для продвижения рекламных услуг от LPgenerator

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

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

Вот лишь несколько примеров: 

Шаблон целиком >>>

Макет целиком >>>

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

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

18-01-2017

8 вдохновляющих примеров лендингов строительной тематики

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

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

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

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

Листаешь страницу и понимаешь — эти люди умеют работать на совесть.

Великолепный лендинг, демонстрирующий элитные апартаменты Австралии. 

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

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

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

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

Неплохо оптимизированная страница с адаптивным дизайном. Один из немногих хороших лендингов в этой отрасли. Интересный выбор цвета для первого разворота.

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

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

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

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

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

8 этапов работы также сопровождаются трехмерным изображением деревянного бруса. 

Сильные стороны этого лендинга:

  • перечисление выгод пользователя на каждом экране;
  • сообщение точного времени до звонка менеджера;
  • короткие открытые формы захвата;
  • наглядность.

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

Очень простой лендинг с оригинальной визуальной подачей — нескромной и стильной:

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

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

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

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

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

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

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

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

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

Лендинг по продаже домов из оцилиндрованного бревна и газобетонных блоков.

Большой недостаток этого лендинга — отсутствие внятного названия самой компании или стартапа. Есть лишь упоминания о Wisdom group и блоков YTONG на целой веренице логотипов первого экрана. Внимательно пролистав страницу, сложно понять, у кого же, все-таки, посетитель должен оформлять заказ и кто будет отвечать за его обслуживание?

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

  • Сколько стоит?
  • Из чего делается?
  • Как быстро?

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

Шаблоны по бизнес-нишам: строительство домов

Выводы

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

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

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

02-11-2016

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

landing page headlines Искусство Alphagetti любезно предоставлено каким-то литературным гением.

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

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

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

Это верный способ снизить коэффициент конверсии и испортить эффективность целевой страницы.

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

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

  1. Focus — Эффективный заголовок не будет расплывчатым. Это перейдет к делу. Избавьтесь от лишнего шума и делайте вещи простыми.
  2. Релевантность — Заголовок должен относиться к предложению на вашей целевой странице.
  3. Преимущества — Любой отличный заголовок сразу же расскажет посетителю, какую проблему может решить эта страница.

(Бонусный элемент) Срочность — Хотя это не обязательно для КАЖДОГО заголовка целевой страницы, добавление ощущения срочности («Действуйте сейчас!») Может серьезно повысить коэффициент конверсии.

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

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

Отличные заголовки целевых страниц

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

Benchmark

benchmark

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

Мне нравится этот заголовок, потому что он упрощает работу. Обратите внимание, как Benchmark не говорит, что они «лучшие» или что вы «добьетесь успеха»?

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

Одна вещь, которая могла бы сделать этот заголовок еще лучше, — это добавить некоторую срочность в 30-дневную пробную версию. Я мог бы протестировать что-то вроде « Место ограничено, начните бесплатную пробную версию ».

Intuit Quickbase

intuit quickbase

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

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

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

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

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

Magento

magento

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

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

Focus — Этот заголовок по-прежнему сосредоточен на одной теме? Это действительно так: как Magento может помочь вам расти и преуспевать в Интернете. Отлично сработано.

Релевантность — В самой первой строке говорится о предложении на этой целевой странице (бесплатная демонстрация).

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

Добавление некоторой срочности к этой странице с помощью « limited time trial » или « limited space », вероятно, было бы достойным испытанием, но я чувствую, что эта страница работает довольно хорошо как есть.

Заголовки целевой страницы, требующие небольшой работы

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

Jugem Cart

jugemcart

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

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

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

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

Extole

extole

«Реферальный маркетинг способствует привлечению клиентов»

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

Вот как бы я его реструктурировал:

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

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

Epicor

epicor

«Начать! Выберите подходящего розничного партнера по программному обеспечению для своего бизнеса! »

Ух, кому-то очень нравятся восклицательные знаки… и невнятная копия .

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

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

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

  • С чего я начинаю?
  • Почему я его запускаю?
  • Что делает Epicor «правильным… партнером» для моего бизнеса?

В этом заголовке нет ответов на эти вопросы.Давайте попробуем его реструктурировать:

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

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

Business-software.com

business-software

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

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

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

Но этот заголовок не имеет преимущества.

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

Вот пример:

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

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

В качестве дополнительного бонуса идея сокращения дорогостоящих ошибок фактически выступает в этом заголовке как срочность, заставляя посетителя задаться вопросом, могут ли они потерять деньги ПРЯМО СЕЙЧАС с их текущим процессом.

Заголовки целевой страницы, которые совершенно не улавливаются

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

Goldmine

goldmine

«Goldmine Premium Edition Demo»

Я часто вижу эту ошибку. Компании будут использовать название продукта или название раздачи в качестве заголовка.

Вот почему этот заголовок отстой. Если вы не знаете, что такое GoldMine Premium Edition, зачем вам демо-версия?

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

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

«Следите за каждым клиентом, использующим Goldmine CRM»

Релевантность — Теперь наш заголовок посвящен программному обеспечению CRM, но он все еще скучен и не по делу.Нам нужно убедиться, что демо где-то упоминается:

«Следите за каждым клиентом, использующим Goldmine CRM»
«Смотрите бесплатную демонстрацию прямо сейчас»

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

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

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

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

Highjump

highjump

« Учитывая EDI? Учтите эти преимущества! »

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

Focus — О чем эта страница? Речь идет о привлечении потенциальных клиентов для программного обеспечения EDI. Но что такое EDI? Это способ общения производителей и дистрибьюторов друг с другом. Давайте сосредоточимся на этом:

«Решения EDI, которые позволяют общаться между производителями и дистрибьюторами»

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

«Бесплатная загрузка : Узнайте, как решение EDI может помочь вашему бизнесу в общении с партнерами »

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

«Бесплатная загрузка: узнайте, как решение EDI может защитить ваши бизнес-коммуникации»

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

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

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

Вы следующий…

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

Оставайтесь сосредоточенными.

Оставайтесь актуальными.

Добавьте преимущества.

И как всегда, тестить как ад.

Увидимся в комментариях!

— Эрик Слоан

.

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

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

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

Больше данных о перспективах. Более квалифицированный приводит. Больше конверсий.

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

Почему?

Чтобы дать вам:

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

Что такое целевые страницы и для чего они служат?

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

  • Многочисленные ссылки
  • Информация о компании
  • Меню навигации
  • Позиционирование бренда

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

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

Это подводит нас к вопросу — какой цели служат целевые страницы?

Назначение лендинга

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

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

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

Хотите узнать, как создавать целевые страницы с высокой конверсией и быстрее развивать свой бизнес? Подпишитесь на наш бесплатный курс Essential Landing Page сегодня.

Два типа целевых страниц, которые необходимо знать (и использовать)

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

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

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

10 элементов успешного лендинга

Так что же делает оптимизированная посадка страница похожа?

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

1. Сосредоточен на одной цели

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

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

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

2. Точная цель

Целевые страницы с высокой конверсией ориентированы на лазер. Их:

  • Направлен на конкретную зрительская аудитория.
  • Сосредоточьтесь на конкретной боли точка.
  • Укажите только на один продукт / решение.

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

3. Простой дизайн

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

4. Убедительная копия

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

5. Броский заголовок

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

6. Очистить CTA

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

Сильный призыв к действию на целевой странице программы создания списков GetResponse

7. Ориентация на посетителя

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

FYI, персонализация ваших целевых страниц может повысить конверсию в 4 раза.

8. Безошибочный брендинг

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

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

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

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

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

10. Соответствующее фото

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

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

Без лишних слов, перейдем к нашему тогда перечислим?

8 примеров целевых страниц, которые вы можете украсть (конечно, этично)

Устали создавать целевые страницы, на которых вы едва дойдете до финишной черты маркетинга?

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

Давай перейдем к делу.

1. Netflix

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

Один из лучших аспектов Netflix Целевая страница минималистична, но содержит много информации. для читателя. Как?

  • Они хранят копию как минимум .С 12 простыми, но убедительными словами, целевая страница продает услугу и убеждает подписчиков, что у них есть нечего терять, подписавшись. Конечно, вы можете прокрутить страницу вниз, чтобы узнать больше информации, но большинство людей этого не делают. Этих 12 слов достаточно, чтобы их понять. доска.
  • Умное использование образов . Если есть одно развлечение Любители любителей, здесь есть большой выбор шоу и фильмов. Netflix отлично демонстрирует, что у них есть такая возможность, используя фоновое изображение, которое показывает популярные шоу, которых подписчики могут с нетерпением ждать потребляющий.
  • Неотразимый CTA . Хорошо продуманный и хорошо размещенный призыв к действию трудно устоять перед кнопкой на этом примере целевой страницы. Просто умоляет быть щелкнул.

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

2. Убер

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

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

Если говорить о копии целевой страницы, Uber’s отмечен наградами, поскольку обещает читателям 2 из самых важных вещей в жизни — доход и свободу. Что касается формы регистрации, она удобна для пользователя, поскольку в ней есть несколько полей, которые легко заполнять, что делает процесс простым и быстрым.

Другие важные выводы из этой площадки пример страницы включает:

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

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

3. CoSchedule

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

Вот где на помощь приходит CoSchedule.

Три важных момента, на которые следует обратить внимание эта целевая страница:

  • Гиперцелевой . Целевая аудитория CoSchedule ясна — это ошеломленные маркетологи, которые хотят объединить свои маркетинговые действия. И копия целевой страницы отлично справляется с их проблемами, делая продукт похожим на героя, которого они так долго ждали.
  • Заголовок . Отличный заголовок целевой страницы точно сообщает вам, чего ожидать от предложения, и вам сразу же захочется нажать на него. Именно этим и занимается продуманный заголовок CoSchedule.
  • Призыв к действию. заметили, как призыв к действию расширяет заголовок и, в конечном итоге, то, что предлагает Coschedule. Это отличный способ подкрепить то, что у них есть решение, которое ищет их аудитория.

Еще один примечательный элемент в этом Пример целевой страницы — это то, как CoSchedule привнес в целевая страница.

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

Это определенно целевая страница Стоит провести по нескольким причинам.

4. Работоспособный

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

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

Что касается простого и легкого заполнения форма регистрации, это еще одно свидетельство того, что команда Workable наверняка знает что они делают — и для кого они это делают.

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

  • Меньше значит больше .Благодаря минималистичному дизайну целевая страница больше рассказывает о философии Workable, упрощая вам жизнь.
  • Ориентироваться на выгоду . Большая часть текста на целевой странице указывает на преимущества, которые вы получаете от использования платформы.
  • Использовать вход в социальные сети . Заполните форму, щелкнув один из значков социальных сетей. Опять же, это облегчает задачу занятым людям.
  • Укрепляйте доверие с помощью отзывов . Включая тот факт, что 96% обозревателей GetApp рекомендуют Workable, читатели вдохновляются на то, чтобы поверить в платформу.

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

5. Trello

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

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

Прокрутка страницы вниз также откроет несколько другие сильные стороны:

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

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

6. Джейкоб Макмиллен

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

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

  • Одиночество
  • Борьба за попадание 6 цифры
  • Масштабирование бизнеса

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

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

7. GetResponse

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

GetResponse помогает маркетологам быть замеченными в напряженное время года, как это было в случае с Ultimate Marketing Bundle для Черной пятницы. Ниже представлена ​​целевая страница того же предложения:

Что заставляет эту целевую страницу работать?

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

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

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

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

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

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

8. Контент-марафон SEMrush

Content Marathon — это письменный курс, направленный на превращение любого в выдающегося писателя.Ведущий Стюарт Роджерс из Venture Beat и « Автор: SEMrush и Институт контент-маркетинга, это определенно одно письмо конечно инвестировать, если вы писатель.

А целевая страница?

Это определенно шедевр!

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

Эти справки:

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

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

Почему вам стоит инвестировать в этот курс?

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

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

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

Лучшие примеры посадочных страниц — ваш может быть следующим

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

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

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

Если вы хотите попробовать свои силы в создании идеальной целевой страницы для своей аудитории, запустите бесплатную пробную версию GetResponse сегодня:

.

10 примеров целевых страниц для общественного блага

landing pages that could be marketing more money

(Источник изображения)

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

Просто выполнив поиск в Google в течение нескольких минут, вы найдете множество целевых страниц некоммерческих организаций (НКО) и неправительственных организаций (НПО).

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

С оптимизированными целевыми страницами они могли.

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

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

1. Канадский Красный Крест

canadian-red-cross

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

Минимум отвлекающих факторов

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

Сильный заголовок требует большего внимания

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

Усильте ваш призыв к действию

Этот призыв к действию требует двух вещей: эмоций и контраста.

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

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

Пожертвовать сейчас
Дайте надежду нуждающимся канадцам

Основной текст может быть более конкретным

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

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

« канадских семей сейчас борются из-за [вставьте здесь соответствующую катастрофу] »

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

2. Благотворительность: Вода

charity-water

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

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

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

Дайте мне понять цель страницы.

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

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

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

Ем ли я пирожные?

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

Я понимаю, что «15 000 человек отказались от своих дней рождения», но как? Зачем? И при чем тут эта страница?

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

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

Объясните призыв к действию и устраните страхи

«Начните свою кампанию» — достойный призыв к действию, но я хотел бы увидеть какое-нибудь объяснение того, что я собираюсь совершить. Будет ли это сложно? Я собираюсь отправить кучу вещей своим друзьям и семье? Как долго это займет?

И самое главное: Могу ли я что-то изменить?

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

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

3. Sight Savers

sightsavers

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

Похвала главному изображению

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

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

Что означает этот заголовок?

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

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

Как насчет этого:

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

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

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

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

Пожертвовать 7 долларов
Пожертвовать 14 долларов
Пожертвовать 21 доллар
Пожертвовать _____

Вы только что устранили один лишний клик, мешающий конверсии.

4. УВКБ ООН

unhcr

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

Вставьте заголовок

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

Более 10 миллионов беженцев нуждаются в поддержке таких щедрых людей, как вы

Что с формой?

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

Да, и потеряйте окровавленную кнопку «Отправить». Отправить ничего не говорит, и его следует заменить сильным призывом к действию. Примерно так:

Отправить мой подарок
В поддержку беженцев

5. World Vision

worldvision

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

Утечки Утечки Утечки!

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

Заголовок прямой и подчеркнутый

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

Взаимодействие на странице

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

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

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

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

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

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

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

6. IFAW

IFAW

Щелкните для увеличения изображения

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

Заголовок не является заголовком

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

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

Животные, терпящие бедствие, нуждаются в вашей помощи
Сделайте пожертвование сегодня и спасите животных по всему миру от бедствия

Форма повсюду

Где форма? Это вверху страницы? Левый? Право?

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

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

7. Врачи без границ

doctors-without-borders

Щелкните для увеличения изображения

Где заголовок?

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

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

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

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

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

Где статистика?

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

8. Накормите детей

feed-the-children

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

Этот заголовок сбивает с толку

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

Вы можете помочь накормить голодающих детей в США и во всем мире — Пожертвуйте свой подарок ниже

Дайте мне больше статистики

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

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

Проверьте свои значки безопасности

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

9. Oxfam

oxfam

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

Ваши заголовки перевернуты

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

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

У вас отличная форма, но…

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

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

10. Покорите рак

ride-to-conquer-cancer

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

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

Расставьте приоритеты для вашей копии

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

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

Отправить что?

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

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

Пришлите мне дополнительную информацию о поездке

Amnesty International

amnestyinternational

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

Что означает заголовок?

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

Urgent Action Network необходимо использовать как заголовок или логотип вместо заголовка. Настоящий заголовок должен быть примерно таким:

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

И, возможно, подзаголовок вроде этого:

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

Эта форма беспорядочная

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

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

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

Подпишитесь на оповещения в реальном времени

Что дальше?

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

При написании этого поста возникает вопрос: почему при таком большом количестве талантливых цифровых маркетологов эти благотворительные организации не могут создавать отличные целевые страницы?

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

— Эрик Слоан


.

Landing Page Вдохновение: 19 примеров посадочных страниц для 2019

Это сообщение в блоге было обновлено для 2020 года.

«Хорошие художники копируют. Великие художники воруют ».

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

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

Прежде чем мы начнем …

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

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

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

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

Landing Page Вдохновение: Копирайтинг

Вы также можете посмотреть выпуск подкаста по этой теме! Подкаст Goal Talk, эпизод 13: Анатомия целевой страницы, приносящей прибыль.

1. Используйте вдохновляющую копию

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

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

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

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

Не хватает вдохновения? Скачайте бесплатно: 15 отличных идей для целевой страницы

2. Используйте свое уникальное торговое предложение

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

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

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

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

3.Помогите посетителям визуализировать лучшую жизнь

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

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

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

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

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

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

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

5. Сделайте смелое заявление

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

.

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

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

6. Знайте свой бренд и рискуйте

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

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

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

7. Задавайте вопросы

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

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

8. Обращение к эмоциям потенциальных клиентов

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

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

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

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

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

9. Говорите напрямую со своими посетителями

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

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

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

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

10. Развлекайтесь над общими проблемами

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

Приложение

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

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

11. Позвольте покупателям продавать за вас

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

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

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

Наконец, неплохо было бы разместить свой отзыв рядом с узнаваемыми логотипами других клиентов (см. Пример №12). Чем больше социальных доказательств, тем лучше.

Landing Page Вдохновение: дизайн и UX

12. Поместите сигналы доверия спереди и по центру

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

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

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

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

13. Добавить интерактивные элементы

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

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

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

14. Пусть говорят сами за себя изображения

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

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

Вместо того, чтобы объяснять словами, насколько сложной может быть сегментация аудитории или насколько разнообразной может быть сама аудитория, Chatterbox Labs использует знакомую сцену в своем визуальном образе — оживленную уличную сцену Нью-Йорка. Это подразумевает сложность аудитории, не прибегая к длинному тексту, который загромождал бы минимальную страницу.

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

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

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

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

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

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

16. Ближе к делу — быстро

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

Это ошибка.

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

Хотя на самом деле это домашняя страница AskNative.com, это не имеет значения — нет никакой двусмысленности в том, что вы можете ожидать от AskNative как услуги. Текст ясен, краток и точно объясняет, что предлагает AskNative, прежде чем предлагать пользователю зарегистрироваться через социальную интеграцию с Facebook (умный ход — см. № 15).

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

17. Включить видео

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

Посмотрите этот пример целевой страницы от производителя курятников ChickenSaloon.com (и рекламу, которая направляет пользователей на эту страницу). В нем есть короткий видеоролик из реалити-шоу «DIY Yardcore», в котором рассказывается об одном из его продуктов — Tavern coop:

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

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

18. Подумайте о цвете

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

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

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

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

19. Используйте дизайн F-Pattern

Еще в 2006 году Nielsen Norman Group использовала тепловые карты для изучения различных способов сканирования текстовых веб-страниц. Ключевым выводом было то, что люди часто делают это в форме буквы F.

Что говорят нам эти тепловые карты?

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

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

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

А чего еще вы здесь добиваетесь?

Захватывайте и конвертируйте больше потенциальных клиентов с помощью набора инструментов CRO

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

WordStream’s CRO Toolkit — это универсальный инструмент для оптимизации коэффициента конверсии. Благодаря интуитивно понятному интерфейсу перетаскивания и неограниченной функциональности A / B-тестирования, CRO Toolkit упрощает создание и оптимизацию всплывающих окон и целевых страниц, чем когда-либо прежде.

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

.
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *