Landing page примеры дизайна: лучшие примеры [и критический разбор]

Содержание

лучшие примеры [и критический разбор]

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

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

Что же делает дизайн посадочной страницы эффективным?

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

  • Изложение преимуществ должно быть ясным и кратким, чтобы посетители сразу же понимали назначение страницы. Именно по такому принципу построены лучшие продающие одностраничные сайты.
  • Страница должна выражать одну-единственную идею с одним главным призывом к действию (Call to action, СТА).
  • При создании макета посадочной страницы используйте приемы дизайна для выделения своего СТА (пустое пространство, цвет, контраст, направляющие сигналы).
  • При использовании форм для сбора данных старайтесь сбалансировать объем запрошенной информации и ценность предложения, получаемого взамен (отчет, «белая книга» и т.п.)
  • Используйте модальные диалоговые окна для выведения вспомогательной информации (условия, политика конфиденциальности, подробная информация о товаре) вместо перенаправления посетителей на другие страницы (что заставит их свернуть с намеченного вами пути конверсии).

Итак, приступаем к разбору примеров действительно хороших посадочных страниц для E-commerce, мобильных продуктов и услуг, финансовых продуктов и страхования, офлайн-услуг, B2B, спецпроектов, анонсов мероприятий, HR-лендингов и вирусных landing pages.

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

Содержание

E-commerce

Влюбиться в продукт по фото

Крутой баннер с рисованными продуктами

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

Крутая анимация первого экрана

Милые (как котики) тексты

Теплый ламповый сайт

Мобильные продукты и услуги

Отвечает на вопросы

Забавная графика

Регистрация в 2 строчки

Начать без регистрации

Проще некуда

Все самое главное в одном экране

Финансовые продукты и страхование

Просто о сложном продукте

Люди. Люди. Люди.

Продать страховку в два экрана

Офлайн-услуги

Call to Action с размахом

Продать любой ценой

Связь

Просто как в интернет-магазине

Экспериментальный минимализм

Спецпроекты

Красивое путешествие

Виральный контент для сложной тематики

Сайты B2B

Кнопка на каждом экране

Легкий дизайн посадочной страницы для сложного сервиса

Веселые картинки для B2B

Анонсы мероприятий и курсов

Точечная анимация и живые отзывы

Сначала история — потом продажи

Поиграли со шрифтами

Лендинг как авангардное искусство

Новый модный русский дизайн

HR-лендинги

Определение ЦА

Страница одного удачного элемента

Хайповые лендинги

Мемы и шуточки для своих

Шутки шутками — но не забываем про продукт

Образцово-показательный лендинг

Дочитали до конца? Круто!

Плюсы хороших лендингов

Минусы ну таких лендингов


E-commerce

Влюбиться в продукт по фото

kitchenceremony. com

Плюсы. В первую очередь — очень аппетитные картинки с налетом luxury. Большая привлекательная фотография на весь первый экран. Аккуратное и понятное меню над ней. Динамика при проскролле в следующем экране.

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

Рекомендуем почитать: «ТОП-35 ошибок юзабилити и дизайна сайта»

Крутой баннер с рисованными продуктами

ji-fruits.ru

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

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

Удачная иллюстрация процесса заказа — переписка в мессенджере:

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

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

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

chef.yandex

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

Уникальные авторские картинки — всегда хорошо:

Привлекательные фото готовых блюд и понятно организованное меню (выбор набора «Сбалансированное», «Домашнее» и т. д.).

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

Крутая анимация первого экрана

satellite-express.ru

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

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

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

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

Рекомендуем почитать: «На что обратить внимание при оптимизации главной страницы»

Милые (как котики) тексты

www.kotofabrika.com

Плюсы. Этот сайт выделяется отличным копирайтингом. И если он покажется излишне «ми-ми-ми», то стоит вспомнить, кто является ЦА производителя. А это хозяева котиков, которые покупают для них домики. Достаточно ми-ми-ми?

Нестандартно подписанный блок для связи с консультантом (а ведь на 99% сайтов они абсолютно шаблонные, хотя кастомизировать их совсем не сложно):

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

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

Теплый ламповый сайт

oknaludyam.ru

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

Во втором окне сразу видим кнопку «Рассчитать стоимость» (обратная связь).

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

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

Карта и Васька прекрасны

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

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

Мобильные продукты и услуги

Отвечает на вопросы

lite.youdrive.today

Плюсы. Видео в первом экране привлекает внимание и отлично «продает эмоцию»: электросамокат — это быстро, стильно, радостно, динамично.

Кнопки приложений для Android и iOS — сразу под видео:

Количество текста сведено к минимуму, вместо повествовательного стиля — короткие ответы по делу:

Что можно улучшить: поскольку это лендинг для приложения, имело бы смысл разместить ссылки на Google Play и AppStore на странице несколько раз, а не один.

Рекомендуем почитать: «40+ гайдов по работе в PromoPult: привлекаем клиентов без помощи агентств»

Забавная графика

molodost.bz/fact/

Плюсы. Основной плюс — интересный подход к визуализации пути к цели. Стильные анимированные иллюстрации с умеренной иронией.

И вот такой баннер на третьем экране:

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

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

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

Ну и маленькое примечание: стоит следить за скидками. Скидка с 12 900 до 12 990 — так себе бонус.

Рекомендуем почитать: «Чек-лист по оптимизации сайта: юзабилити и коммерческие факторы»

Регистрация в 2 строчки

lingualeo. com

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

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

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

Начать без регистрации

www.duolingo.com

Плюсы. Еще один сервис для изучения языков — но здесь первый экран еще круче!

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

Кстати, кнопка «Начать» есть не только в самом начале, но и внизу короткого лендинга.

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

Проще некуда

https://www.strava.com/

Плюсы.

100% прямолинейность и простота.

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

Все самое главное в одном экране

ru.bookmate.com

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

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

Можно улучшить: call to action (CTA, призыв к действию) остается в хедере сайта при прокрутке, но, возможно, стоит поэкспериментировать с его размерами и/или добавить кнопки подписки после отдельных блоков.

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

Финансовые продукты и страхование

Просто о сложном продукте

rocketbank.ru

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

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

Люди. Люди. Люди.

www.mtsbank.ru/malomu-biznesu

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

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

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

Можно улучшить: мало call-to-action элементов. Возможно, кнопку «Открыть счет» следовало бы разместить не только в верхнем баннере, но и в середине и конце лендинга и сделать ее более очевидной. Также не хватает формы обратной связи/онлайн консультанта или номера телефона в видимой части экрана (телефон можно найти только рядом с навигацией в футере сайта, и это общий колл-центр банка, без привязки к продукту).

Рекомендуем почитать: «Как установить бесплатный онлайн-консультант на сайт [инструкция PromoPult]»

Продать страховку в два экрана

www.tinkoffinsurance.ru/autoinsurance

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

И затем — схема из трех шагов:

Два экрана — три СТА (call to action) (Купить полис — Рассчитайте страховку — Позвоните мне). Все максимально лаконично, белый фон, черный шрифт, один цвет для расстановки акцентов, много воздуха, минимум слов, прямолинейный текст на кнопках.

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

Как настраивать контекст на профессиональном уровне — без агентства? В модуле контекстной рекламы PromoPult — автоматический подбор слов, автоматическая генерация объявлений, «умное» управление ставками. Готовые отраслевые решения. Статистика в реальном времени. Для профессионалов — множество точных настроек.

Офлайн-услуги

Call to Action с размахом

moscowfreetour.ru

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

Шапка сайта перемещается при проскролле, так что навигационная панель и номер телефона (!) всегда доступны.

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

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

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

Продать любой ценой

qlean.ru

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

Предложение «Рассчитать стоимость» и напоминание о скидке остается с вами при прокрутке:

Цены в блоке с расценками отображаются сразу с 30% скидкой:

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

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

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

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

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

Запускаете рекламу в системе PromoPult? Не уверены, что все делаете правильно? Хотите сделать лучше, но не знаете как? Обращайтесь за помощью к профессионалам системы. Ваш персональный менеджер в системе PromoPult.

Связь

Просто как в интернет-магазине

moskva. mts.ru/personal/mobilnaya-svyaz/mobilniy-internet/podklyuchit

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

Максимально просто и понятно оформлен блок допродажи:

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

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

Экспериментальный минимализм

www.yota.ru/#/promo

Плюсы. Очень необычный лендинг. Один экран, все что мы видим — 4 ссылки слева и большой голубой баннер справа из трех слайдов: «Реклама интернета для планшета» — «Реклама скидки 50% за привязку карты» — «Реклама Wi-Fi роутера для YOTA». Вот такой смелый минимализм и постмодернизм в действии.

Можно улучшить: не надо ничего улучшать. Идеальный экспериментальный лендинг.

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

Спецпроекты

Красивое путешествие

www.visit-rogaska-slatina.si/ru

Плюсы. Фишка сайта — красивое фоновое видео. Здесь живые фотографии и анимированные элементы.

Можно улучшить: стоит поработать над шрифтами и дизайном кнопок — они кажутся устаревшими.

Виральный контент для сложной тематики

changes.docplus.ru

Плюсы. Этот лендинг веселый, виральный, качественный как с визуальной, так и с текстовой стороны.

При этом с большинства карточек есть ссылка на основной сайт.

И в конце посадочной — промокод на услугу.

Можно улучшить: ничего. Только радоваться, восхищаться и делать вовлекающие лендинги для спецпроектов.

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

Съем позиций, кластеризация запросов, парсер Wordstat, сбор поисковых подсказок, сбор фраз ассоциаций, парсер мета-тегов и заголовков, анализ индексации страниц, чек-лист оптимизации видео, генератор из YML, парсер ИКС Яндекса (бесплатно).

Сайты B2B

Кнопка на каждом экране

megaplan.ru/megaplanstart

Плюсы. Сайт 100% заточен под продажи. В первом же экране — форма заявки. Затем кнопка с призывом к действию «Попробовать бесплатно» появляется после каждого блока (1 раз на каждый экран).

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

Очень хороший прием — блок «Зачем Мегаплан руководителю и сотруднику». В зависимости от того, кого вы выбираете, вы видите конкретный набор преимуществ, маркированный иконками.

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

Легкий дизайн посадочной страницы для сложного сервиса

www.cloudpayments.ru

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

Кнопка «Подключить» на первом же экране — большой плюс.

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

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

А еще с основного лендинга можно перейти на лендинг 18+… Но мы не можем гарантировать, что среди наших читателей нет 18–, поэтому просто покажем, как организован переход. Любопытно?

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

Веселые картинки для B2B

piratecode.ru

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

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

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

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

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

Анонсы мероприятий и курсов

Точечная анимация и живые отзывы

another-georgia.com

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

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

Отличный прием — тексты от первого лица:

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

Что можно улучшить: сейчас на посадочной странице слишком мало призывов к действию (call to action). Кнопка «Записаться» есть только в шапке сайта, при этом она не очень заметна. Стоило бы попробовать добавить более очевидные и крупные кнопки после отдельных блоков и повторить CTA несколько раз.

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

Сначала история — потом продажи

noboring-finance.ru/planerka

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

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

А далее — три истории вот в такой стилистике:

И только после блока классного сторителлинга посетитель видит описание курса

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

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

Поиграли со шрифтами

special.meduza.io/storm/2017/

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

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

Для юмора (и котов) тоже осталось немного места:

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

Что можно улучшить: не надо ничего улучшать. Надо учиться 🙂

Лендинг как авангардное искусство

kaskadproject.com

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

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

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

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

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

Рекомендуем почитать: «Как собирать email посетителей интернет-магазина с помощью pop-up виджетов [пошаговая инструкция]»

Новый модный русский дизайн

rubyrussia.club/ru

Плюсы. Дизайн верхнего баннера — на острие современных модных трендов, образец landing page «made in Russia» (привет единению советских авангардистов и Гоши Рубчинского):

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

Очень компактно — о каждом из спикеров:

И снова котики — да что ж такое…

(кстати, использование строчных букв в именах обращает на себя внимание).

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

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

HR-лендинги

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

Определение ЦА

hr.cpeople.ru

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

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

Конкретные вакансии расположены относительно далеко внизу, но к ним можно перейти сразу по кнопке «Хочу в команду!».

Что можно улучшить: флажок «работодатель года» можно попробовать сделать чуть заметнее (но что хорошо — он остается при проскролле страницы). И все-таки поэкспериментировать с дополнительными кнопками перехода к вакансиям.

Страница одного удачного элемента

job.alfabank.ru/moskva/#1520

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

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

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

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

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

  • крошечное окошко с видео.

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

  • Фирменная цветовая гамма (сочетание белого и красного) сама по себе прекрасна, но не тогда, когда на ярко-красном фоне размещен мелкий белый шрифт:
  • Очередной недочет в верстке — темный шрифт попадает на темный фон и становится практически нечитабельным:

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

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

Хайповые лендинги

Мемы и шуточки для своих

yasdelie.ru

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

Вся страница построена на картинках-мемах и немного упоротых текстах — невозможно оторваться:

Можно улучшить: ничего. Только расскажите нам, какая конверсия у этого лендинга и кто так тщательно охраняет конфиденциальность калининградского автора.

Шутки шутками — но не забываем про продукт

roltrol.by

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

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

Лендинг не выглядит совсем уж непродающим — регулярно появляются кнопки с призывом к действию «Заказать звонок» или «Перейти на сайт партнера».

Можно улучшить: можно спорить о том, кому какие шутки нравятся… но лендинг действительно хорош.

Образцово-показательный лендинг

24run.ru

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

Все блоки на своих местах, все строго по правилам: маркированные списки, кнопки CTA, иконки, описание процесса, преимущества, отзывы и т. д. И прекрасный ироничный копирайтинг.

Ответ на вопрос, кто за этим стоит — в конце лендинга.

Можно улучшить. Не можно.

Дочитали до конца? Круто!

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

Самое время подводить итоги. Какие плюсы и минусы нам встречались чаще всего?

Плюсы хороших лендингов

  1. Лаконичность в тексте и дизайне.
  2. Стильная анимация.
  3. Нестоковые фотографии.
  4. Оригинальные рисунки.
  5. Человеческий язык, уместный юмор.
  6. Понятные кнопки CTA, встречающиеся на странице несколько раз.
  7. Нестандартный подход к стандартной тематике без ущерба содержанию.
  8. Апелляция к эмоциям.
  9. Четко обозначенные преимущества, акции, скидки.
  10. Нешаблонные отзывы.
  11. Максимально простые формы регистрации.

Минусы ну таких лендингов

  1. Невнимание к мелочам (огрехи в верстке, отсутствие фавиконов, контраст шрифта и подложки и т. д.).
  2. Недостаточно CTA.
  3. Слишком большой объем информации, длинный лендинг.
  4. Неинтересные и некачественные видео.

11 примеров Landing Page с высокой конверсией

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

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

Что отличает Landing Page?

(Да-да, перейти к лендинговым страницам с высокой конверсией!)

Высококонверсионный Landing Page:

  • Сначала, мощное Hero-изображение. Высококонверсионный лэндинг – страница с которой не хочется уходить. Тематичная картинка, видео в главном экране: 1) Фокусирует внимание 2) Увлекает. Представьте продукт / сервис в контексте применения: как работает, насколько прост. Покажите преимущества и пользующихся ими людей.
  • Один призыв к действию, ориентированный на взаимодействие с клиентом. После мощного визуального воздействия на посетителя, вам нужно получить лид или конвертацию, верно? Сделайте CTA-посыл заметным (с точки зрения дизайна) и убедительным (с точки зрения копирайтинга). Упрощайте навигацию – только важные ссылки, чтобы не отвлекать посетителя до совершения конверсии.
  • Ценностное предложение – убеждайте заголовком и тематическим подзаголовком. Почему вообще надо следовать призыву к действию? Заголовком & подзаголовком аргументируйте веско и ясно. Укажите выгоду для потребителя и что выделяет вас из толпы.
  • Охарактеризуйте ваши особенности, заостряя внимание на преимуществах. Конечно, важно знать из чего продукт и что с ним делать. Только, осознающий полезность охотнее действует (нажмет CTA-кнопку или заполнит лид-форму). Выгодо-ориентированный оффер – лучшая мотивация к конверсии.
  • Включите отзывы или другие социальные доказательства. Люди скорее воспользуются предложением, увидев, как это сделали другие. Благодарственные слова, неподдельная заметка довольного клиента, партнерские логотипы или значки брендов укрепляют доверие потребителей. Это доступный способ оптимизации конверсии.

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

Примеры лендингов с высокой конверсией

У оптимизированных для высокой конверсии LP: посещаемость, как минимум 500 посетителей, а у некоторых – более 100,000. Коэффициент конвертации 30-60%. Влияют и внешние факторы, конверсия сильно зависит:

  • От индустрии
  • От качестве трафика

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

Со всеми оговорками и нюансами, 11 примеров высококонверсионных Landing Page от Unbounce заказчиков (экспертные советы от компаний, самостоятельно создавших свой лендинг).


1. Promo

Индустрия: Социальные медиа / Коэффициент конверсии 46.94%

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

Видео способно увеличить конверсию Landing Page на 80%. Стратегия оправдана, даже если обходится недешево – считает Promo. Вот почему на лендинге много видеоконтента – от хедера, до поясняющих Coub роликов в превью и видео, которым посетители смогут воспользоваться для своего маркетинга.

Главный контент-специалист Promo, отмечает:

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

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

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


2. edX

Индустрия: Образование / Коэффициент конверсии 52.68%

edX советует для высококонверсионного LP: упрощайте ценностное предложение, будьте предельно ясны и конкретны показывая выгодность.

Маркетологи edX максимально приближены к продукту & сервисам и могут запросто перегрузить вас информацией. Да, наше основное предложение это X. На лендинговых страничках мы урезали основные моменты посыла пользователям онлайновых курсов. Чтобы не увязнуть в деталях, простыми тезисами сообщаем, что их ожидает. Ясность и недвусмысленность заголовка с подзаголовком поддержана социальными доказательствами.

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


3. Later

Индустрия: Социальные медиа / Коэффициент конверсии 57.92%

Later совет для высококонверсионного LP: предоставьте удобные конверсионные пути до цели (никаких преград или ограничений!) и сбалансируйте побудительные факторы.

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

Интуитивный путь к конверсии – это «текстово-визуальный гид», подсказывающий маршрут потребителю. На это и сделали ставку в лидогенерирующей кампании Later. Руководитель коммуникационного дизайна Chin Tan, поясняет:

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

Cмотрите, как Later прокладывает «интуитивный» маршрут к конверсии, применяя единообразие.

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


4. The Listings Lab

Индустрия: Недвижимость

Высококонверсионный совет о Listings Lab: используйте простой «прямолинейный» дизайн и сконцентрируйтесь на оффере.

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

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

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

Этот лендинг «спокойным тоном» вселяет уверенность.


5. Twillory 

Индустрия: Одежда / Коэффициент конверсии 46.85%

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

Не надо объяснять, почему мобильные пользователи сейчас в приоритете. С 2017-го, мобайл трафик начал доминировать (50.3%), его доля постоянно растет (сейчас 52.2%). Компании тоже приспосабливаются к миру, в котором потребители часто используют свои телефоны:

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

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

На десктопе лендинг включает видео и GIF – элементы привлечения и увеличения конверсий., Урезанная версия дизайна (для мобильных) быстрее загружается и сохраняет визуальную привлекательность. Дополнительно, к конверсии стимулируют Pop-up окна.


6. TyresOnTheDrive

Индустрия: Автомобильная

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

Когда дело доходит до текстов Лендинг Пейдж, надо понимать: ясность ведет к конверсии. Посетитель хочет в секунды понять оффер, думая: «Ближе к делу, что именно мне предлагают? Зачем я с этим разбираюсь?». И, если что не так — отказ!

Такой заголовок сразу понятен и отражает суть делового предложения: «Экспертная установка шин у вас на дому или рабочем месте». Мы сразу видим ключевое отличие – не надо идти к механикам шиномонтажа, они работают с выездом к вам. Принятию решения способствуют быстрые «how-to», подгружаемые клиентские отзывы из онлайн-сообщества отзывов Trustpilot и фирменный логотип (коллаж из ключевых слов).

Результат? Конверсия зашкаливает.

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

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


7. ooba

Индустрия: Финансы / Коэффициент конверсии 35.57%

Ooba советует для высокой конверсии: применяйте описательные призывы Call-to-Action, говорящие посетителю что произойдет далее.

Каждому, кто попал на страничку лэндинга не терпится узнать, что тут предлагают? Это так, но как правило посетитель понимает каких действий от него ждут, а что будет потом – не совсем ясно. Главная страница ooba это отличный пример эффективности call to action.

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

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


8. ClaimCompass

Индустрия: Юриспруденция. право / Коэффициент конверсии 30.02%

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

Как так обычно говорят? Если не получается что-то сразу, не унываем и продолжаем в том же духе. (Стоп, возможно, это неверный подход. Не посоветуйте никому). Иначе считал Альберт Эйнштейн:

Это просто безумство: делать одно и то же раз за разом, при этом ожидая иного результата

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

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

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

«Вся Landing Page разработана так, чтобы нажимались три CTA-кнопки» – поясняет Alex. «Если предложение показалось привлекательным, дальше скроллить уже не надо. Если нет – секция ниже внесет ясности (изображениями, описаниями выгод и социальными подтверждениями). На посадочной страничке все должно приближать к клику по CTA-кнопке».


9. onX

Индустрия: GPS-навигация / Коэффициент конверсии 61.15%

onX совет для повышения конверсии: стимулируйте желание пользователей изучать / исследовать текстовым и визуальным контентом.

Можете не искать лучшего примера лендинг пейдж с конверсией на 50% выше, чем обычно бывает в спортивной тематике. В чем секрет успеха onX, отвечает менеджер по привлечению новых клиентов Райан Уотсон:

Наш лендинг показывает пользователям именно то, что они искали и хотели видеть, кликая по PPC рекламе Google Ads.

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

Райан отмечает пользу A/B тестов. Мы тестировали различные CTA-призывы и это дало отличный CTR. Лучшие практики никогда не навредят.


10. MyTutor

Индустрия: Образование / Коэффициент конверсии 55.29%

MyTutor раскрывает секрет высокой конверсии: делайте нужный оффер – выгодное предложение нужным людям и в нужное время.

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

Менеджер Gemma Pearson: «Запуская однодневные кампании мы тестировали landing page. Наш оффер – репетиторское подтягивание студентов до получения нужного бала». Еще, Gemma хочет реализовать на лендинге поучительный нагоняй для неуспевающих.

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

Вот как можно добиться отклика от этой аудитории.


11. FilterEasy

Индустрия: ремонт жилья / Коэффициент конверсии 34.52%

FilterEasy о лендинговой конверсии: Не всегда ясна причина успешности Landing Page, и это вполне естественно.

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

«Если честно, до сих пор выясняем тестами: чем особенна наша лендинговая страничка? Рианна поясняет: попытались повторить этот результат несколько раз. И безуспешно. Даже когда учли все моменты».

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

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

Разработка сайтов

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

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

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

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

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

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

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

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

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

Примеры лендинг пейдж для разных сфер бизнеса

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

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

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

Сайт Цветаны Сафроновой об одежде

Пример лендинга с высокой конверсией - Как стиль в одежде влияет на жизнь женщины.

Антигравийная пленка

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

Сайт карт водителя

Изготовление карт водителя на тахограф в Москве и области от 14 дней. Сайт создан в спокойных белых тонах

Сайт мужских костюмов

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

Сайт класса школы №91

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

Сайт компании Геом21

Данная компания занимается бурением скважин по всей Чувашской Республике. На сайте есть примеры работ и выполняемые услуги

Web сайт ARTIDES студия

Пример сайта студия коммерческого дизайна. Комплексные решения для успешного бизнес.

Smart Home системы

Благодаря современным технологиям управление жизнеобеспечением осуществляется в автоматическом режиме

Garant подоконники

Одностраничный сайт продажи и установки подоконников от мебельной компании GARANT

Сайт свадебной выездной регистрации

Пример продающего сайта выездной свадебной регистрации в Астрахани под ключ

Сайт продажи iphone аксессуаров

Пример современного сайта iphone аксессуаров с продажей по всей РФ.

Продажа интерактивных панелей

Подбор интерактивных панелей под любые задачи. Готовые решения для образования или бизнеса.

Контейнерные перевозки

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

Сайт чугунного завода в г. Чебоксары

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

Сайт санатория «Aрай Deluxe Thermal Resort»

Пример сайта одностраничника санатория Aрай Deluxe Thermal Resort в городе Сарыагаш.

Сайт продажи игровых ПК

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

Сайт продажи автокресел

У этой компании вы можете купить автокресла. Сайт выполнен в современном и минималистичном стиле

Сайт клуба MMA

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

Сайт SEO-специалиста

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

Услуги свадебной фотосъемки

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

Списание долгов юридических лиц и ИП

Компания БИЗНЕС Логик занимается списанием долгов с юридических лиц и индивидуальных предпринимателей

Стоматология Дент

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

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

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

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

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

Лендинг Пейдж Шаблоны | Landing Page Templates |TemplateMonster

Адаптивный дизайн

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

Bootstrap

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

Кроссбраузерность

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

Иконки шрифтов

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

PSD файлы включены

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

TM дополнения

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

Необходимая документация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Заголовок с УТП

У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:

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

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

От заголовка зависит показатель отказов.

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

2. Дескриптор

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

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

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

3. Блок с контактными данными

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

  • реальный номер телефона;
  • электронную почту;
  • кнопку «Обратный звонок».

Обязательно используется призыв – просьба позвонить.

4. Привлекательное изображение

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

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

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

5. Формы захвата

Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.

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

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

Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.

6. Блок с выгодами для клиента

Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.

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

7. Отзывы клиентов

Блок с отзывами – ключевой в лендинге.

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

Каждый отзыв:

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

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

8. Тарифы или пакеты услуг

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

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

9. Примеры Лендинг Пейдж

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

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

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

10. Реальные контактные данные в футере

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

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

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

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

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

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

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

1.

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

2.

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

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

3.

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

4.

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

5. AMBSN

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

6. RYDER

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

7.

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

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

8.

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

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

9.

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

10. ESQID

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

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

17.

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

18.

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

19.

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

20.

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

21.

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

22. RSVP

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

23. Ratio

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

24.

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

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

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

25. Rest.

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

Продающие сайты. Что это такое? Каждый второй скажет: “Конечно же, это лендинги!”. Они же одностраничники, они же лендинг пэйдж, они же продающие страницы.

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

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

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

Критерии оценки

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

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

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


Ага, размечтались!

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

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

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

ТОП-10 одностраничных сайтов

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

1. Жилой комплекс “Парк Флора”

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

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


Жилой комплекс “Парк Флора”

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

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

2. Мастерская “Dinero”

Это не сайт, а целый фильм об одном “персонаже” – деревянном кошельке. Если бы он стоил 1 000- 2 000 р., то сайт бы провалился, так как нет очевидных : оффер, дескрипшен, форма захвата и т.д.. Но в сегменте Luxurу всё работает иначе, и этот одностраничник тому подтверждение.

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

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


Мастерская “Dinero”
3. Вакансии “Альфа-Банка”

Этот красно-белый банк – наш партнёр. Мы являемся авторами их блога для клуба клиентов.

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


Вакансии “Альфа-Банка”

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

4. Спортивный корсет “Loni-corset”

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

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


Спортивный корсет “Loni-corset”

Сайт отработал себя на 4+. Единственный блок, который нам не удалось добавить – это социальные доказательства существования компании-отправителя.

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

5. Допуск СРО “Гральник Лицензирование”

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

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


Допуск СРО “Гральник Лицензирование”

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

Но все это мелочи, ведь фундаментально всё сделано правильно и написано с точки зрения .

6. Проект “Большая сушка”

Большинство женщин (их целевая аудитория) слышали о проекте “Бешеная сушка”. Их реклама к запуску заполоняет весь интернет. И это не удивительно, когда инвестируются миллионы на трафик.

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


Проект “Большая сушка”

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

7.

Мы сами пользуемся системой взаимоотношений с клиентами Битрикс24. Но так как у нас тема не “ ”, то сайт системы Мегаплан превзошёл все ожидания.

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



CRM “МегаПлан”

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

Кстати! Если Вы хотите использовать в качестве своей CRM-системы, то советую не забыть промо-код “Megastart”. Так Вы получите скидку на первую покупку 10% и 14 дней бесплатного использования.

8. Банк для предпринимателей “Точка”

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

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


Банк для предпринимателей “Точка”
9. Оснащение тренажерных залов “Goodfit”

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

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

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


Оснащение тренажерных залов “Goodfit”
10. Торговый центр “МЕТРОПОЛИС”

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

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

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


Торговый центр “МЕТРОПОЛИС”

Почему Только сайты рунета

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

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

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

Это сайт, состоящий из множества лендингов. Практически многостраничный сайт, но все-таки лендинг.

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

Мы, русские, другие. У нас другой тип мышления, так как мы живём в другой стране. Например, у Американца почти нет опасений в голове, что компания возьмёт деньги и растворится. Так как у них всё защищено на десять рядов, что только один PayPal стоит.

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

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

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

Коротко о главном

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

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

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

Используйте для этого , например, PlatformaLP , Tilda , Bloxy . А уже потом, ждём Вас к нам в гости на совместную разработку.

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

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

Дамы и господа! Знакомьтесь, самые крутые и лучшие продающие лендинги 2019-2020 по версии и популярного сайта behance.net.

Примеры лучших лендинг пейдж

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

Уникальное торговое предложение

Первый пример УТП лучшего лендинга 2020 года - фирма по продаже стульев.

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

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

Следующий пример лучшего, по нашему мнению, лендинга - посадочная страница фирмы по продаже меда

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

Следующий пример лучшего лендинга

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

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

Еще один пример крутого landing page

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

Хотите узнать больше о УТП? Читайте статью с рекомендациями по созданию УТП на сайте Импульс Дизайн.

Описание продукции

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

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

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

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

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

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

Лаконичность - лучший друг лендинга. И следующий пример лучшего лэндинга это подтверждает.

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

Выгоды и преимущества на одностраничнике

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

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

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

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

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

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

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

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

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

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

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

Усиливается желание благодаря небольшому блоку выгод

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

Блок доверия на посадочной странице

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

Вариант 1. Отзывы

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

Вариант 2. Видео

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

Вариант 3. Фотографии

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

На сладкое. Призыв к действию (СТА)

Первый лендос имеет "сочный" СТА, оформленный в едином стиле с сайтом. Желание сделать заказ усиливается скидкой.

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

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

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

Подведем итоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример необычного плиточного дизайна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Вдохновляющие примеры лендингов для вашего бизнеса

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

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

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

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

Дизайн

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

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

Контент

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

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

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

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

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

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

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

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

Продажа товаров

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

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

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

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

Пример красивого лендинга в сегменте B2Bе>

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

«Рокетбанк» создал лендинг с горизонтальной прокруткойе>

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

«Одностраничный сайт, пример от компании« Окна людям »е>

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

Стиль лендинга для аренды самокатов - движениее>

Конкурсы и специальные проекты

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

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

Лендинг для конкурса от компании Raffaelloе>

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

Пример хорошего лендинга от сервиса Airbnbе>

Регистрация на мероприятии

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

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

Лендинг Мир цифровых продаж и маркетинга сочетает видео, фото и тексте>

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

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

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

Ищите примеры крутых лендингов среди квестове>

Набор на обучение

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

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

Образовательный лендинг, пример от Khan Academyе>

Вирусный контент

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

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

S7 обыгрывает тему Дня космонавтикие>

Поиск сотрудников

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

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

Творческие люди ищут супергероев в командуе>

Творчество и юмор

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

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

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

Графический комикс анимировали с помощью лендингае>

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

Проект «СТОП-БЕГ» в шутку предлагает избавить от беговой зависимостие>

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

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

[Всего: 6 Средний: 4.7 / 5]

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

Разработка сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лендинг Пейдж Шаблоны | Шаблоны посадочных страниц | TemplateMonster

Адаптивный дизайн

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

Bootstrap

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

Кроссбраузерность

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

Иконки шрифтов

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

PSD файлы включены

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

TM дополнения

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

Необходимая документация

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

Примеры лендинг пейдж для разных сфер бизнеса

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

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

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

Сайт Цветаны Сафроновой об одежде

Пример лендинга с высокой конверсией - Как стиль в одежде влияет на жизнь женщины.

Антигравийная пленка

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

Сайт водителя карт

Изготовление карт водителя на тахограф в Москве и области от 14 дней.Сайт создан в спокойных белых тонах

.

Сайт мужских костюмов

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

Сайт класса школы №91

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

Сайт компании Геом21

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

Сайт ARTIDES студия

Пример сайта студия коммерческого дизайна.Комплексные решения для успешного бизнес.

Умный дом системы

Современная технология управления жизнеобеспечением осуществляется в автоматическом режиме

Гарант подоконники

Одностраничный сайт продажи и установки подоконников от мебельной компании GARANT

Сайт свадебной выездной регистрации

Пример продающего сайта выездной свадебной регистрации в Астрахани под ключ

Сайт продажи iphone аксессуаров

Пример современного сайта iphone аксессуаров с продажей по всей РФ.

Продажа интерактивных панелей

Подбор интерактивных панелей под любые задачи. Готовые решения для образования или бизнеса.

Контейнерные перевозки

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

Сайт чугунного завода в г. Москва, ул. Чебоксары

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

Сайт санатория «Aрай Deluxe Thermal Resort»

Пример сайта одностраничника санатория Aрай Deluxe Thermal Resort в городе Сарыагаш.

Сайт продажи игровых ПК

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

Сайт продажи автокресел

У этой компании вы купить автокресла.Сайт выполнен в современном и минималистичном стиле

Сайт клуба MMA

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

Сайт SEO-специалиста

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

Услуги свадебной фотосъемки

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

Списание долгов юридических лиц и ИП

Компания БИЗНЕС Логик занимается списанием долгов с юридических лиц и индивидуальных предпринимателей

Стоматология Дент

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

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

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

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

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

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

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

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

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

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

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

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


1.1 Текст - это всё


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

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

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


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

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

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

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


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

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

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

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


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

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


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

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

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

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


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

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


Дополню. Размещайте НАСТОЯЩИЕ отзывы. Представьте себе ситуацию, зашел потенциальный клиент на целевую страницу, ознакомился с условиями, готов уже был приобрести товар, но наткнулся на типовые, сахарные отзывы, да еще и в придачу, на фотографии, которые уже где-то видел - либо на такой-же на странице, либо в каком-либо фотобанке, или в результатах поисковой выдачи. После того как пользователь почувствует обман - вы потеряете его навсегда. Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят .

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

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

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


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

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


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


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

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

2.2 Тема к действию на первом примере


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

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

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


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

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

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


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

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


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

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

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


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

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

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

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

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


3.1 Текст Landing Page


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

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

Текст.

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

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

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

3.2 Дизайн


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Строительный лендинг: 15 примеров образца

Пример 1. Аренда машин дорожной разметки

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


Пример лендинга по аренде машин дорожной разметки

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


Обзор характеристик в видеоформате

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

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


Форма заявки

Пример 2. Продажа газона

Газон - товар для широкого круга потребителей. Упор на таком лендинге нужно делать на визуал и преимущества покупки. Вот как выглядит первый экран:


Пример лендинга компании по продаже газона

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


Неуместный для лендинга каталог товаров

И это еще один большой минус. На сайте не соблюдается правило «1 страница - 1 товар». Газон - товар универсальный, выбрать нужный сорт можно уже после оформления заявки. Здесь же кнопки «Купить» под каждой каждой товара ведут на одну и ту же форму. Эта ошибка может стать причиной низкой конверсии.

Пример 3. Продажа кровельных материалов и монтаж кровли

Аналогичная ошибка допущена и на этом лендинге.Вместо одного товара презентуются сразу восемь:


Многотоварность - не лучшее решение для лендинга

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

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


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

А вот часть с преимуществами компании:


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

Есть блок с примерами работ:


Вариант оформления блока с примерами выполненных работ

Ближе к футеру лендинга размещена форма заявки:


Интересно оформленная форма заявки

Пример 4.Продажа строительного угля

На этом лендинге хорошо читается первый экран с описанием товара и кнопкой «Оставить заявку»:


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

Ниже в довольно интересной форме представлены преимущества товара:


Нестандартное для ниши оформление товара

Такая подачает привлекает внимание пользователя.

В конце есть форма заявки и удобный прайс-лист:


Форма заявки и прайс-лист

Представление всех характеристик на одной странице, как правило, влияет на конверсию.

Пример 5. Ремонт квартир

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


Пример лендинга компании по ремонту квартир

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

Под экраном находится баннер с акцией:


Блок акций

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

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


Пример оформления преимущества компании по ремонту квартир

Пример 6. Продажа накопителей электроэнергии

.

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


Пример лендинга компании по продаже бесперебойников

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

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


Нестандартное оформление преимущества товара

Часто такой подход срабатывает лучше, чем обычный список преимуществ.

Низ страницы оформлен без функции: отзывы, видеообзор, информация о доставке и т.д.

Пример 7. Установка заборов

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


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

Ниже расположен блок с акциями:


Акции

В середине страницы - список товаров с описанием и ценами:


Список товаров

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


Форма заявки

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

Пример 8. Перевозка грузов

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

Главный экран фактически отсутствует. На верхней полосе есть только название услуги:


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

Ниже представлены виды услуг; для каждой - свое изображение:


Перечень услуг

Есть карта, на которой отмечен адрес компании, и еле заметная кнопка «Заказать звонок»:


Пример футера лендинга

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

Пример 9. Стяжка пола

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


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

Ниже находится информация по типам помещений и кнопка, ведущая на калькулятор:


Расчет стоимости

Далее представлена ​​развернутое описание действий специалистов:


Вариант оформления этапов работы строительной компании

В конце есть форма заявки:


Пример оформления заявки

Пример 10.Монтаж деревянных окон

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


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

Далее - слайдер с товарами:


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

Вход в систему в следующем блоке:


Не очень удачное оформление преимущества компании

В конце концов форма заявки:


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

Пример 11.Остекление веранд и террас

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


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

Ниже находится галерея со списком услуг:

.


Оформление списка услуг в виде портфолио

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


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

Пример 12. Остекление балконов

На главном экране располагаются заголовок, описание услуги и форма заявки:


Пример хорошо оформленного лендинга компании по остеклению балконов

Далее пользование компании и гарантии:


Преимущества компании по остеклению

Несколько следующих блоков убедить пользователя с менеджерами компании.Например, блок с портфолио:


Блок с портфолио

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


Список клиентов и форма заявки

Пример 13. Остекление и отделка балконов

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


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

Далее идет прайс-лист:


Прайс-лист

В середине лендинга - список преимуществ:

.


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

В конце действующей формы заявки и призыв кию:


Пример предложения к действию

Пример 14.Дизайн интерьеров

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


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

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


Некорректная форма заявки

Затем пользователь видит портфолио:


Портфолио


Портфолио

Потом снова появляется форма заявки с целевым:


Повторная форма заявки

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *