12 техник дизайна лендингов с примерами
Лендинг — это виртуальный магазин, необходимый для продвижения и продажи продукта или услуги. Должным образом оптимизированная посадочная страница способна принести вам значительную прибыль. Поэтому профессиональный лендинг с высокой конверсией так важен для вашего бизнеса и маркетинговой стратегии.
В сегодняшней статье вы найдете вдохновляющие примеры посадочных страниц и некоторых дизайнерских техник. Мы рассмотрим каждый пример подробно, укажем его сильные стороны и поговорим о том, что еще стоило бы протестировать, чтобы улучшить результаты.
1. TaskEasy: Убедительное главное изображение
Человеческий мозг обрабатывает картинки в 60 000 раз быстрее, чем текст. Правильные изображения на вашем лендинге способны завладеть вниманием посетителей и подтолкнуть их к конверсионному действию. Не рассказывайте — покажите!
Главное изображение (Hero image) помогает потенциальному покупателю почувствовать выгоды вашего оффера.
TaskEasy понимают это и используют отличное главное изображение на своей странице. Очутившись на ней, посетители сразу видят, как будет выглядеть их газон, если они наймут TaskEasy:
Что сделано хорошо:
- Кнопка CTA хорошо заметна, потому что этот цвет не используется больше нигде на странице (не считая вкладки «Связаться с нами» сбоку).
- Текст призыва к действию написан от первого лица («Узнать, сколько это будет мне стоить»), что вызывает у посетителей ощущение личной связи с оффером.
- Указатели (стрелка на кнопке CTA и стрелки, ведущие вниз страницы) подсказывают пользователям, что делать дальше.
- Иконки помогают привлечь внимание к возможностям и выгодам TaskEasy.
- Знаки доверия и социальное доказательство (иконки безопасности, награды и счетчик лайков в Facebook) вызывают ощущение комфорта и надежности.
- Скользящая форма связи позволяет легко связаться с сотрудниками компании и задать вопросы о ее услугах.
Что еще стоит протестировать:
- Логотип TaskEasy является ссылкой, которая может увести посетителей с лендинга.
- Призыв к действию для управляющих вверху страницы тоже уводит на еще одну лидогенерирующую страницу, которой нужна собственная кампания, совершенно отдельная от этой.
- Дополнительный текст объяснил бы потенциальным клиентам преимущества TaskEasy. Сейчас на этой странице нет никакого текста, и посетителям трудно понять, что представляет собой компания и что она предлагает.
- Навигация в футере предлагает посетителям слишком много возможностей уйти со страницы, не совершив конверсионного действия.
- Номер телефона должен быть доступен для звонка в один клик, чтобы посетителям было легче связаться с компанией, особенно когда она подталкивает их к звонку словами: «Хотите позвонить нам? Мы здесь».
2. Yodle: Маркированные списки
Большинство людей ленится читать длинные абзацы: проще быстро «просканировать» страницу на предмет нужной информации. Маркированные списки с использованием буллетов, стрелочек, иконок и т.д. позволяют посетителям быстро просмотреть страницу и найти то, что их интересует.
Yodle использует маркированный список, чтобы выделить преимущества своего ПО, а также отделяет его от остального текста пустым пространством:
Что сделано хорошо:
- Логотип Yodle не является ссылкой на их домашнюю страницу, поэтому пользователи понимают, чья это посадочная страница, но не кликнут по нему и не уйдут.
- Номер телефона доступен для звонка в один клик, так что посетителям легко связаться с компанией.
- Заголовок и подзаголовок («Больше клиентов. Меньше усилий. Доступное и всеохватывающее маркетинговое решение») сообщают пользователю, что представляет собой оффер и какую пользу он приносит.
- Текст, выделенный курсивом («Marketing Essentials — это инструменты, которые помогут вашей компании находить и удерживать клиентов»), притягивает взгляд.
- Форма привлекает внимание и подсказывает посетителям, что нужно сделать, чтобы запросить демо.
- Фраза «Персонализированное демо» вызывает у потенциального клиента ощущение, что оффер создан специально для него.
- Оранжевый CTA бросается в глаза и повышает шансы на то, что люди кликнут по нему.
- Стрелка на кнопке призыва к действию служит указателем и разжигает интерес к тому, что скрыто за формой.
- Знаки доверия (отзывы клиентов, логотипы компаний, награды) внушают доверие и убеждают посетителей поделиться личной информацией.
Что еще стоит протестировать:
- Текст призыва к действию («Запросить демо») не персонализирован и может не убедить пользователей клинкуть по кнопке. Если заменить его на что-нибудь вроде «Я хочу демо», конверсия наверняка вырастет.
- Фотографии клиентов рядом с отзывами сделали бы их еще более убедительными и внушили бы еще больше доверия.
- Футер с мелким шрифтом может перегружать посетителей и препятствовать конверсии.
3. Oracle: F-паттерн
Разрабатывая дизайн своей страницы, думайте о том, как посетители будут ее читать. Такой подход позволит вам разместить самую важную информацию на самом видном месте. Поскольку люди обычно читают сверху вниз и слева направо, стоит размещать информацию в форме буквы F.
Эту технику использует, например, лендинг Oracle. Каждый важный элемент расположен там, где посетители точно его увидят.
Сначала они посмотрят на изображение компьютера в верхнем левом углу. Потом они переведут взгляд вправо и увидят улыбающихся людей. Потом посетители двинутся вниз по левой стороне страницы и обратят внимание на заголовок и форму с единственным полем. Потом они снова двинутся вниз и просканируют абзац текста и маркированный список. Наконец, посетители увидят яркий красный CTA.
Что сделано хорошо:
- Улыбающиеся лица оживляют страницу, так что пользователи, скорее всего, почувствуют себя комфортнее.
- Маркированный список и жирный шрифт привлекают внимание к главным достоинствам оффера.
- Форма, состоящая из единственного поля, заполняется легко и быстро.
- Именно форма и кнопка призыва к действию привлекают больше всего внимания, так что посетители концентрируются на них и лучше конвертируются.
Что еще стоит протестировать:
- Изображение продукта могло быть и побольше: на этом экране сложно что-либо разглядеть.
- Заголовок («Подпишитесь сегодня, чтобы получить демо») недостаточно убедителен, потому что он не предоставляет посетителям никакой информации о преимуществах продукта.
- Текст призыва к действию («Продолжить») слаб, никак не связан с оффером и не вызывает желания кликнуть.
- На странице не хватает социального доказательства, которое придало бы офферу убедительности.
- Ссылки для навигации в футере могут отвлекать посетителей, уводить их со страницы и, следовательно, снижать конверсию.
Как и F-паттерн, Z-паттерн помогает посетителям ориентироваться на вашей странице и является еще одним хорошим вариантом расположения контента.
Вот пример от Business-Software.com.
Сначала посетители увидят заголовок в верхнем левом углу. Затем они посмотрят вправо и увидят красный штамп «Зарегистрироваться, чтобы скачать бесплатный отчет». Затем они по диагонали двинутся вниз и влево и обратят внимание на обложку отчета. Наконец, посетители снова посмотрят вправо и увидят самый важный элемент страницы — кнопку CTA.
Что сделано хорошо:
- Логотип в верхнем левом углу не является ссылкой, так что посетители не будут отвлекаться и уходить со страницы.
- Заголовок и подзаголовок («Отчет о десяти лучших инструментах автоматизации маркетинга. Список поставщиков и рекомендации, которые помогут вам найти лучший инструмент автоматизации маркетинга для вашей компании») сообщают, о чем этот отчет и какую пользу он принесет людям, скачавшим его.
- Лаконичный маркированный список позволяет посетителям быстро просканировать страницу и узнать главное.
- Слово «бесплатно» используется в двух местах: на красном штампе, окруженном белым пространством и привлекающем внимание, и в тексте, где оно расположено прямо над изображением и выделено жирным шрифтом.
- Превью отчета позволяет представить себе, как он выглядит.
- Желтая кнопка призыва к действию контрастирует с остальными элементами лендинга, и по ней наверняка кликнет больше пользователей.
Что еще стоит протестировать:
- Логотип компании в нижнем правом углу является ссылкой на ее сайт, так что посетители могут уйти с лендинга, не конвертируясь.
- Форма содержит 13 полей, и это очень много для данной стадии путешествия покупателя.
- Вокруг ключевых элементов (картинка и кнопка CTA) стоило бы сделать больше пустого пространства, чтобы привлечь к ним максимум внимания и подтолкнуть посетителей к конверсии.
- Стоило бы добавить социальное доказательство (например, отзывы или количество скачиваний), благодаря которому пользователи чувствовали бы себя комфортнее и были бы более заинтересованы в работе с Business-Software.com.
- Футер можно убрать. В этом тексте мелким шрифтом нет необходимости, и логотип уводит посетителей со страницы.
5. MarcomCentral: Пустое пространство
Еще один способ привлечь внимание посетителей к определенным элементам посадочной страницы — это пустое пространство. Если окружить им самые важные элементы лендинга, они будут выделяться.
Помимо этого, пустое пространство:
Пустое пространство окружает лидогенерирующую форму на странице MarcomCentral. Обратите внимание, что оно может быть любого цвета: главное, чтобы оно помогало отделить разные элементы лендинга друг от друга и контрастировало с их цветом.
Что сделано хорошо:
- Номер телефона доступен для звонка в один клик: это удобный способ связаться с отделом обслуживания клиентов.
- 50-секундное видео позволяет легко и быстро получить информацию, не читая длинных текстов.
- Слово «бесплатно» в названии формы и на первом CTA очень убедительно, ведь все любят подарки. Персонализированный текст сделал бы страницу еще эффективнее.
- Анкорные ссылки (оранжевая стрелка, появляющаяся при прокрутке, и CTA-кнопка внизу страницы) позволяют посетителю клинкуть по ним и сразу вернуться к форме, и ее легко найти в любой момент.
- Социальное доказательство (логотипы компаний-клиентов, награда и отзывы) внушают пользователям доверие. Фотографии клиентов сделали бы страницу еще лучше.
- Картинки в секции «Как это работает» позволяют потенциальным клиентам лучше понять и представить себе каждый описанный шаг.
Что еще стоит протестировать:
- Логотип компании является ссылкой, которая способна увести посетителей с лендинга еще до того, как они полностью ознакомятся с оффером.
- Заголовок («Пересмотрите свой подход к работе с маркетинговым контентом») следует изменить: даже будучи большим и заметным, он неубедителен, потому что не сообщает ни о каких выгодах.
- Оранжевая кнопка призыва к действию недостаточно выделяется, потому что оранжевый цвет уже использован на странице и не раз.
- Кнопки социальных сетей внизу страницы могут отвлекать посетителей и мешать им конвертироваться.
6. PRWeb: Анкорные ссылки
Анкорная ссылка или якорь — это ссылка на определенное поле той же самой страницы, на которой она находится. Такая ссылка позволяет посетителям перемещаться по вашей посадочной странице без скроллинга. Поскольку анкорные ссылки помогают пользователям попасть туда, куда им нужно, без усилий, они улучшают пользовательский опыт, что тоже повышает конверсию.
PRWeb использует два якоря — два призыва к действию «Начать сейчас!» ниже линии сгиба. Пройдя по одной из этих ссылок, пользователь возвращается к лидогенерационной форме, расположенной выше линии сгиба.
Что сделано хорошо:
- Заголовок («14 идей для продвижения вашего малого бизнеса») конкретен и написан во втором лице, что подталкивает посетителей прочитать оффер и в конце концов конвертироваться.
- Форма подписки выделяется и привлекает внимание, и ее заполнит больше пользователей.
- Галочка в поле для подписки не проставлена по умолчанию, так что потенциальные клиенты чувствуют, что принимают решение сами.
- Изображения и оформление текста в секциях «Как» и «Почему» привлекают внимание к самым важным деталям работы PRWeb и преимуществам компании.
Что еще стоит протестировать:
- Ссылки (логотип компании, кнопки социальных сетей, навигация в футере) могут уводить людей со страницы.
- Маркированные списки привлекут еще больше внимания, если сделать стрелки крупнее или увеличить отступы.
- Обложка руководства обрезана, и это выглядит как ошибка дизайнеров. Также обложка кликабельна, но картинка, открывающаяся по клику, не крупнее и по-прежнему обрезана.
- Форма из семи полей способна оттолкнуть посетителей, особенно если они все еще не уверены, что хотят работать с этой компанией.
- Все три CTA-кнопки недостаточно выделяются, потому что на странице и так полно элементов синего и красного цветов.
- Тексты призывов к действию слабы. Что-нибудь вроде «Я хочу руководство по маркетингу!» было бы более убедительно и повысило бы конверсию.
- Отзывы клиентов не оптимизированы. Нет ни фотографии автора отзыва, ни названия компании, в которой он работает, и сам отзыв не содержит никакой конкретной информации, которая подтолкнула бы потенциальных клиентов к обращению в PRWeb.
Объекты медиа (картинки, видео и GIF-анимация) на вашем лендинге помогают повысить конверсию, потому что они рассказывают о вашем товаре или услуге и в то же время делают вашу страницу эстетичнее. GIF’ы — это движущиеся изображения, объясняющие ваш оффер интерактивно. Используйте их вместо статичных скриншотов вашего приложения, чтобы наглядно продемонстрировать, как ваши потенциальные клиенты могут выполнять в нем различные действия.
Вот как это делает ActiveCampaign:
Что сделано хорошо:
- Заголовок и подзаголовок («Улучшите автоматизацию своего маркетинга. Присоединяйтесь к 150 000 маркетологов, использующих автоматизацию емейл-маркетинга») убедительны. Они написаны во втором лице, и подзаголовок хорошо подходит к заголовку.
- Надпись «Кредитная карта не требуется» внушает уверенность в том, что триальный период совершенно бесплатен и ни к чему не обязывает.
- Форма состоит из двух полей, так что посетители не поленятся ее заполнить.
- Отзывы клиентов оформлены удачно, хотя кнопка Twitter и может увести посетителей со страницы до того, как они конвертируются.
- Форма и CTA-кнопка постоянно остаются на виду, в какой бы части страницы ни находился посетитель, и шансы на конверсию повышаются.
Что еще стоит протестировать:
- Кнопка призыва к действию не выделяется. Ее цвет сливается с остальным синим на странице, и текст («Попробовать сейчас») тоже не впечатляет.
- Под CTA-кнопкой написано: «Нажимая «Создать»…», но на кнопке не написано «Создать».
- Навигационные ссылки в футере могут отвлечь посетителя от его основной задачи.
8. Bridgeline Digital: Визуальные подсказки
Визуальные подсказки играют огромную роль в дизайне посадочных страниц, потому что они создают визуальную иерархию, поддерживают вовлеченность посетителей и привлекают внимание к ключевым элементам. Три самых распространенных типа визуальных подсказок — это стрелки, направление взгляда и объекты, размещенные в нужных местах. Все они указывают на самые важные для конверсии элементы.
Стрелки используются на лендингах чаще всего, потому что они просты и понятны. Они могут быть анимированными или статичными и чаще всего указывают на лидогенерирующие формы и кнопки CTA, как, например, на странице Bridgeline Digital:
Что сделано хорошо:
- Статистические данные, подтверждающие эффективность автоматизации маркетинга, наверняка вызовут любопытство. К тому же, главное выделено жирным шрифтом («Уровень конверсии у компаний, использующих автоматизацию маркетинга, на 53% выше, чем у остальных»).
- Слово «бесплатно» употреблено в двух местах, так что пользователи поймут, что им не придется платить за эти материалы.
- Маркированный список позволяет посетителям легко понять содержание предлагаемых материалов.
- Оранжевая кнопка призыва к действию выделяется и хорошо сочетается с формой и стрелкой.
- Логотипы компаний-клиентов вызывают доверие, заставляя посетителей думать: «Если такие известные компании работают с Bridgeline Digital, то и я буду».
Что еще стоит протестировать:
- Логотип компании, являющийся ссылкой, и ссылки в футере уводят посетителей со страницы, наверняка повышая процент отказов.
- Если бы вокруг логотипа компании было больше пустого пространства, он лучше выделялся бы.
- Текст CTA-кнопки нужно доработать, потому что слова «Скачать материалы» неубедительны. Стоило бы сделать призыв к действию ориентированным на выгоды и написать его во втором лице.
9. Vistage: Направление взгляда
Мы склонны смотреть на то, на что смотрят все остальные, поэтому человеческий взгляд — это эффективный указатель направления. Например, если взгляд человека на фотографии направлен на заголовок, посетители тоже, скорее всего, обратят на него внимание. Эта техника очень полезна для того, чтобы заставить их смотреть на самые важные для вас элементы.
На странице Vistage женщина смотрит в сторону лид-формы:
Что сделано хорошо:
- На этой странице нет ссылок, на которые посетители могли бы отвлечься и уйти, не заполнив форму или не закрыв вкладку.
- Цветовой контраст служит визуальной подсказкой, привлекая внимание к самым важным элементам страницы: заголовок, женщина и CTA-кнопка. Поскольку все остальные элементы выдержаны в оттенках серого, эти три компонента бросаются в глаза.
- Политика конфиденциальности внушает доверие: посетители знают, что компания не станет распространять их личные данные.
Что еще стоит протестировать:
- Социальное доказательство, например отзывы клиентов или логотипы компаний, наверняка вызвало бы еще больше доверия.
- Минимум информации об оффере может мешать посетителям конвертироваться. Стоило бы добавить маркированный список его преимуществ.
10. Lyft: Объекты
Третий вид визуальных подсказок — это объекты, указывающие на определенные элементы вашего лендинга. Так внимание потенциальных клиентов сфокусируется на самом важном.
На странице Lyft автомобиль указывает на лидогенерационную форму и почти касается ее.
Что сделано хорошо:
- Форма, состоящая из единственного поля, убеждает посетителей поделиться данными.
- Галочка в поле для согласия с условиями предоставления услуг не проставлена по умолчанию, и посетители чувствуют, что контролируют ситуацию.
- Секция «Узнайте, сколько вы можете заработать» полезна, потому что позволяет посетителям ввести свои данные и кликнуть по CTA «Рассчитать», не уходя со страницы. А когда их еженедельный доход рассчитан, на кнопке появляется новая надпись: «Подать резюме сейчас», что тоже помогает конверсии.
- Секция «Что из себя представляет работа в Lyft» содержит пошаговое описание и прокручивается горизонтально, не загромождая страницу длинным текстом.
Что еще стоит протестировать:
- На странице несколько ссылок, на которые пользователи могут отвлечься и уйти со страницы, так и не совершив конверсионного действия.
- Заголовок и подзаголовок трудно прочитать из-за фонового изображения. Стоит переместить их туда, где они будут более читабельны.
- Текст призыва к действию настолько неопределен, насколько возможно. Слово «Дальше» ничего не говорит об оффере и не вызывает желания по нему кликнуть.
11. SendGrid: Визуальная иерархия
Каждый хороший лендинг подчиняется визуальной иерархии: контент располагается от более важного к менее важному. Элемент, который должен первым захватить внимание посетителя (обычно это заголовок), размещается вверху страницы, на вершине иерархии.
В создании визуальной иерархии играют роль многие характеристики, в том числе:
- размер
- цвет и контраст
- плотность и сходство
- пустое пространство
- текстура и стиль
SendGrid используют несколько компонентов из этого списка.
Что сделано хорошо:
- Самые важные части текста выделены жирным шрифтом или шрифтом большего размера, что создает отчетливую визуальную иерархию.
- Заголовок убеждает посетителей использовать SendGrid, упоминая три известные компании, которые тоже пользуются этим сервисом.
- Многочисленные CTA-кнопки, сочетающиеся друг с другом, дают потенциальным клиентам несколько возможностей конвертироваться в разных частях страницы.
- Главное изображение позволяет представить себе, как будет выглядеть присланный контент.
- Лаконичный маркированный список позволяет посетителям быстро найти ответы на свои вопросы.
- Отзывы и логотипы компаний-клиентов служат социальным доказательством, наверняка убеждая посетителей работать с SendGrid, поскольку другие уже добились успеха с помощью этого сервиса. Фотографии клиентов сделали бы эти отзывы еще эффективнее.
Что еще стоит протестировать:
- Было бы лучше, если бы женщина на фотографии смотрела вниз, на заголовок или кнопку призыва к действию: получилась бы визуальная подсказка, заставляющая посетителей тоже туда посмотреть.
- Кнопки CTA можно увеличить и протестировать разные их цвета, чтобы привлечь к ним больше внимания. На странице уже используется синий цвет, поэтому призывы к действию не бросаются в глаза так, как могли бы.
- Стоит увеличить пустое пространство вокруг некоторых элементов, особенно вокруг заголовка и CTA, чтобы они больше выделялись.
- Призыв к действию «Посмотреть тарифы и цены» следует удалить, потому что он уводит посетителей на другую страницу.
12. WalkMe: Заметный CTA
Оптимизированная, привлекающая внимание кнопка призыва к действию — это самый важный элемент вашего лендинга. Она должна быть самым ярким его элементом, чтобы у потенциальных клиентов не возникало сомнений, куда нужно нажать, чтобы принять ваше предложение.
WalkMe создали двухступенчатую страницу подписки с крупным CTA, который контрастирует с цветом фона и привлекает больше всего внимания.
Что сделано хорошо:
- Фоновое изображение — это реалистичное превью, позволяющее посетителям представить себе, как выглядит предлагаемая программа.
- Большая и яркая кнопка CTA действительно бросается в глаза, а при прокрутке она появляется в верхнем правом углу экрана.
- Двухступенчатая форма подписки выглядит лаконично и не устрашающе, потому что посетителям не придется вводить сразу все свои данные.
- Маркированный список позволяет легко узнать об оффере все необходимое, не читая длинных текстов.
- Социальное доказательство (отзывы клиентов и логотипы компаний) наверняка убедит посетителей воспользоваться этим сервисом.
Что еще стоит протестировать:
- Текст CTA следовало бы заменить на что-нибудь более персонализированное и ориентированное на выгоду клиента.
- Картинку ниже линии сгиба стоило бы заменить на GIF, чтобы предоставить пользователям более интерактивный опыт.
- Если добавить фотографии клиентов к отзывам, они станут убедительнее и эффективнее.
Вместо заключения
Лендинг — это неотъемлемая часть любой маркетинговой стратегии, потому что оптимизированная посадочная страница способна существенно увеличить ваши доходы. Опираясь на техники, описанные в этой статье, вы можете создать свой профессиональный лендинг с высокой конверсией.
А если вам нужна помощь при разработке дизайна или настройке шаблона, оставить заявку можно здесь >>>
Высоких вам конверсий!
По материалам: instapage.com.
28-09-2017
Лучшие примеры лендингов, идеальная посадочная страница Landing Page
Создайте посадочную страницу на 1C-UMI. Просто выберите доменное имя и введите ваш e-mail. Затем вы увидите примеры landing page для любого вида предпринимательства — адаптивные шаблоны дизайна. Преимущество адаптивных сайтов заключается в том, что они корректно отображаются и на мониторе компьютера, и на экране мобильного устройства. Лучшие лендинги, безусловно, создаются с адаптивным дизайном.
Расположение элементов в разных шаблонах 1C-UMI несколько отличается. Выберите шаблон, который в большей степени соответствует вашим бизнес-задачам, а также понравится по дизайну.
Пора редактировать сайт и заполнить его своим контентом. Идеальная посадочная страница, пример которой перед вами, содержит определенный набор блоков:
- Меню
Оптимизируйте навигацию на странице. - Карусель фото
Добавьте фотографии вашего товара или менеджеров компании. - Формы обратной связи
Дайте клиенту возможность оставить вам данные о себе. - Контентные блоки
Разместите актуальную информацию о ваших продуктах или услугах. - Счетчик
Используйте его, если хотите сделать акцент на времени, оставшемся до конца какой-либо акции или начала события. - Обратный звонок
Перезвоните клиенту, как только он пришлет вам свои имя и телефон через эту форму. - Блоки-категории
Опубликуйте расширенную информацию о вашей компании с небольшими фотографиями или иконками. - Отзывы
Выберите лучшие мнения клиентов о вашей работе и разместите их в этом блоке. - Карта
Напишите на странице точный адрес и прикрепите карту Google или «Яндекс», чтобы клиент не заблудился. - Социальные сети
Предоставьте пользователю возможность поделиться с друзьями вашим предложением в социальных сетях.
Посадочная страница — пример простоты и удобства как для клиента, так и для покупателя.
Лучшие образцы посадочной страницы представлены именно на нашем сервисе. Создайте лендинг на 1C-UMI и наслаждайтесь широкими возможностями для вашего бизнеса.
11 + 1 лендингов в сфере дизайна интерьеров и архитектуры
Профессиональный дизайн интерьеров и архитектура — дорогостоящая ниша с серьезными рисками для покупателя. Здесь красота и функциональность переплетаются особенно тесно. Лендинг, представляющий продукты в этой сфере, должен промоутировать их не просто стильно, но и очень убедительно, не оставляя сомнений во вкусе и профессионализме исполнителя. В этой статье собраны 12 лучших примеров таких одностраничников.
Неописуемой красоты лендинг пейдж для итальянской студии дизайна интерьеров «Le Stanze di Ann». Стильный уникальный дизайн дополнен плавной анимацией элементов и параллакс-прокруткой:
В центре идеи студии — гармония с природой. В центре интерьера — дерево в полный рост. В центре дизайна страницы — изображения очаровательной светловолосой девочки, фото которой стилизованы под домашние снимки. Они умело комбинируются с типографикой под ручное письмо и детскими рисунками. Нежные кремовые тона интерьера полностью перенесены в дизайн сайта. Все это создает необычайно светлую атмосферу тепла, комфортности и домашнего уюта.
В плавающей шапке — большой логотип, якорные кнопки и кнопки соцсетей. На первом развороте расположена видео-презентация, в которой играет и которую озвучивает та же девочка, что и на фотографиях. Ее снимки ритмично чередуются, разделяя собой блоки сайта.
Второй блок содержит слайдер с тремя преимуществами, на третьем — интерактивное панорамное фото интерьера на 360 градусов, которое можно развернуть на весь экран, вращать, приближать и удалять. Четвертый блок отведен под фотогалерею, пятый — под мини-каталог элементов дизайна и предметов мебели. На последнем размещена ссылка для скачивания полного каталога и большая открытая форма для обратной связи.
Лендинг идеален, его великолепный дизайн вызывает настоящий восторг. Он красив, продуман до мелочей, адаптивен и хорошо оптимизирован.
2. Австралия в авангарде «зеленого» строительства
Лендинг, созданный для демонстрации потенциала проекта Зеленого Строительства австралийской торговой комиссии.
Стильный современный лендинг, адаптированный для мобильных пользователей, в котором умело размещены качественные фотографии и большое количество текста. Прокрутка плавная с параллакс-эффектами, предусмотрены навигационные кнопки сбоку и якорные ссылки в шапке сайта, упрощающие скроллинг.
Весь первый разворот занимает анимированный слайдер на весь экран. Демонстрационное видео размещено в самом конце, в одном блоке с контактами, что является довольно нестандартным решением. Перед ним находится блок-слайдер с кейсами. Переключаться между ними нужно, кликая на миниатюры изображений — не мешало бы добавить в этот слайдер пару кнопок или стрелок для упрощения навигации. Текста на сайте очень, очень много, его бы следовало оформить компактнее.
3. Интерактивное путешествие в историю архитектуры Дели
Очень хорошо выполненный информационный одностраничник, демонстрирующий историю архитектуры Дели через серию больших изображений на интерактивной шкале времени.
Визуально насыщенный сайт с большим количеством интерактивных элементов и анимированной загрузкой. На первом развороте — крупный заголовок, буквы которого заполнены не цветом, а очень быстро сменяющимися фотографиями, стилизованными под сепию. Ниже подзаголовка размещен призыв начать просмотр страницы.
Каждый разворот — это полноэкранный слайд с архитектурной достопримечательностью Дели. Клик мышью открывает большую информационную панель с множеством дополнительной информации и автоматизированным слайдером с фотографиями. Самое интересное — маркер на спутниковой карте внизу будет менять свое расположение в зависимости от просматриваемого фото на слайдере. Очень интересная и оригинальная находка разработчика, которая наверняка окажется полезной для большинства туристов!
Интересно сделан интерактивный временной график внизу экрана. Некрупный и отчетливый, он реагирует на прогресс просмотра страницы и показывает миниатюры слайдов с подписями при наведении на соответствующий отрезок. Даже для курсора мыши предусмотрена своя иконка, если навести его на слайд. Лендинг адаптивный и хорошо оптимизирован. В самом конце — ссылки на другие сайты разработчика. Отличная работа.
Лендинг для голландской компании по профессиональному художественному патинированию мебели и интерьера.
Весь первый разворот занимает слайдер с тематическими изображениями. Здесь только лого с дескриптором и навигационные ссылки вверху. Дизайн логотипа создавался вместе с лендингом.
Так как лендинг представляет услуги команды профессионалов, его оформлению задан личностный и социальный тон. На фото — много улыбающихся лиц и демонстраций процесса и результатов работы. Много внимания направлено на членов команды, их мастерство и опыт как на главные гарантии качества услуг, а также на теплоту в отношениях с заказчиком, между собой и к любимому ремеслу.
Предпоследний блок посвящен воркшопам и содержит длинную кнопку к закрытой форме для записи. В самом конце — советы по подбору цвета и контакты.
5. Дизайнерские скульптуры Даниэля Шу
Лендинг, промоутирующий уникальные дубовые винные стеллажи и скульптуры ручной работы от немецкого дизайнера и художника Даниэля Шу.
Лаконичный и просторный дизайн со светлым фоном для скромного ассортимента изделий по нескромной цене. Весь ассортимент представлен на втором развороте и сопровождается кнопками к закрытым формам для оформления покупки.
Для оправдания завышенной цены должны приводиться весомые доказательства. На странице они поданы, как правило, в виде текста, что для конверсии не очень хорошо. Основные триггеры доказательств приведены лишь в конце сайта, перед контактами. Здесь сильно не хватает хорошей видео-презентации. Доказательства бы тоже не мешало дооформить.
В целом же сайт сделан со вкусом, приятен глазу, адаптивен и оптимизирован.
Лендинг для польского дизайнера интерьеров Моники Адамчик-Рокицкой.
Простой, но обстоятельный одностраничник с чистым дизайном. По словам разработчиков, они хотели сделать все максимально простым, даже код. На первом развороте — только логотип и дескриптор на фоне красивого слайда. Далее следует текстовое обращение Моники под ее портретом и примеры дизайна интерьеров.
Фото ее работ опрятные и свежие, а информация об услугах сведена к минимуму — достаточно просто принять решение о найме. В самом конце расположен блок с видами услуг и контакты. Лендинг адаптивный, хорошо оптимизирован, доступен на двух языках: польском и английском.
Лендинг для компании, занимающейся оборудованием и дизайном интерьеров для баров, кафе-мороженых, магазинов, частных учреждений в Италии и Германии.
Не выделяющийся особыми визуальными эффектами сайт, сделанный при этом грамотно и главное — со вкусом. Подобраны хорошие сочные изображения, изящные шрифты, информация оформлена и размещена наглядно и понятно. Основной акцент сделан на богатом практическом опыте компании и настоящей страсти к своему делу.
Особенно хорошо удалось реализовать предпоследний блок с портфолио. Он интерактивный, девять примеров работ поданы компактно и красиво. Сайт сделан профессионально и приятен глазу. Доступен на итальянском и немецком языках.
8. Эксклюзивные таунхаусы в Бруклине
Смелый минималистичный лендинг для продвижения недвижимости в Бруклине.
Уникальный однотонный дизайн в стиле flat, напоминающий сенсорный интерфейс Windows 8, современный и адаптивный. Сайт выполнен полностью в духе предприимчивого Запада, почти полностью ориентированного на мобильного пользователя. Большую часть страницы занимают стильные черно-белые фотографии продукта, которые при нажатии становятся цветными, увеличиваясь в размерах.
Ниже находятся интерактивные подробные планы помещений. В самом конце страницы — большая, четкая и простая в использовании открытая контактная форма. Сайт работает на пользовательской системе управления контентом (CMS), имеет несколько настраиваемых модулей на JavaScript и форму регистрации AJAX.
Стоит ли говорить о его конверсии — все помещения давным давно распроданы!
9. «Живые системы Z» — природа знакомится с городом
Лендинг на WordPress для специалистов по городскому вертикальному садовому дизайну.
Простой одностраничник без каких-либо визуальных и других эффектов, но с хорошим выбором изображений, чистым макетом и истинным духом филантропии. Разработчики, будучи ограниченными в средствах, хорошо сумели рассказать историю своего клиента. Они представили его идеи понятно и в выгодном свете, в конечном счете мотивируя посетителей к сотрудничеству. Здесь очень умело использованы межстрочный интервал и шрифт.
Последний разворот содержит скромную, едва выделяющуюся ссылку для подписки на рассылку и кнопку, которая должна вести на дополнительную статью, но, к сожалению, ведет на 404 страницу 🙁
Строгий минималистичный лендинг для бельгийских дизайнеров интерьеров.
Немного глючный в адаптивной версии, но утонченный дизайн с хорошим качеством изображений, содержания, организации и использования пробелов. Чистый, светлый, просторный макет. Чувствуется очень личный подход компании к организации пространства, функциональности и самой атмосфере жилых интерьеров.
Нет каких-либо эффектов, кроме плавной смены изображений. Хороший и изящный сайт.
Закончим обзор сравнением двух сайтов, рассказывающих о десятилетиях истории развития дизайна интерьеров. Скромные первые развороты на обоих лендингах содержат только заголовки и кнопки соцсетей. Оба сайта используют интерактивные точки захвата и имеют схожую концепцию, реализованную, тем не менее, по-разному в дизайне:
- Первый сайт рассказывает историю австралийских интерьеров с 40-х годов по 90-е. Оформлен с помощью коллажей и отличается анимированными элементами дизайна, но простенько реализованной прокруткой.
- Второй посвящен развитию дизайна интерьеров в целом с 50-х по 2010-й. Выполнен в трендовом стиле flat и имеет плавную прокрутку с анимированной сменой экранов, а также дополнительные навигационные кнопки.
Изображения-коллажи на лендинге «Interiors in Time» скомбинированы несколько небрежно, с одной стороны, но с другой это даже добавляет визуальному оформлению страницы некоторый ламповый шарм. Не все цвета кнопок, соответствующих десятилетиям, хорошо заметны на белом фоне. Радует анимация появления элементов и развернутая дополнительная информация, появляющаяся при нажатии на интерактивные точки захвата. Заканчивается страница… ничем, и это еще один минус.
Изображения интерьеров при прокрутке страницы «Interior Design by Decade» как-то странно «дребезжат», мелко подергиваясь при скроллинге, что портит впечатление от просмотра. Но сам процесс прокрутки реализован более интересно, удобно, информация подана лаконичнее, а дизайн сайта более стильный и современный. Здесь используется популярный плагин параллакс — Skrollr. Заканчивается страница так называемой открытой «Thank You Page» с ссылкой, которая позволяет представить содержимое сайта в виде инфографики на других ресурсах, и это еще один плюс.
А какой из этих двух сайтов вам понравился больше? Который, как вы считаете, имеет лучшую конверсию? Поделитесь своим мнением в комментариях!
Шаблоны по бизнес-нишам: дизайн интерьера
Выводы
Создавая лендинг в нише архитектуры и дизайна интерьеров важно не промахнуться с визуальной подачей материала. Не менее важно заверить потенциального клиента в преимуществах перед конкурентами и профессионализме компании — в этом вам поможет качественное, умело поданное портфолио с кейсами, примерами работ, грамотно подобранными слайдами. Знайте страхи своей целевой аудитории, умейте их использовать и давать на них достойные ответы.
Нужен уникальный дизайн лендинга? Тогда заполните форму заказа или используйте наш конструктор, чтобы создать посадочную страницу самостоятельно.
Высоких вам конверсий!
12-10-2016
Примеры landing page с геометрическим дизайном
Представьте себе ситуацию: клиент хочет заказать лендинг, обязательно flat-дизайн, но с какой-нибудь изюминкой. Да, задача не из легких… Как добавить в простой современный дизайн лендинга что-то новое и оставаться в тренде? Не надо изобретать велосипед: дизайнеры уже придумали готовое решение. Вам остается только взять пару приемчиков на вооружение.
Дизайн landing page под новым углом
Чтобы ввести новые формы в плоский дизайн, дизайнеры вспомнили школьные знания геометрии. Простым и самым удачным решением оказались многоугольники! Треугольники, ромбы, шестигранники, да и просто углы и диагонали пришли на смену порядком надоевшим фотографиям в кружочках.
Эти геометрические формы используются для:
- навигации по сайту;
- акцента на важных блоках;
- нетривиальной подачи контента.
Как вы увидите в примерах посадочных страниц, любой контент, поданный под необычным углом (во всех смыслах), воспринимается свежо и по-новому.
Клик на фото, чтобы посмотреть пример лендинга в оригинале.
Пример лендинга для веб-разработчиков
Этот сайт принадлежит двум коллегам, один — дизайнер, другой — разработчик (многообещающее сочетание!). Дизайн их сайта очень симметричный, ключевой элемент в нем — ромб. Парни отказались от скучных фотографий в кружочках и смотрите, какого эффекта они добились:
Пример 1. Дизайн лендинга для веб-дизайнеров. Ключевой элемент дизайна здесь — ромб.
Пример лендинга в нише «дизайн интерьеров»
Еще один пример «ромбастого» дизайна. Российская компания по озеленению интерьеров использует ромбы с фото в качестве иллюстраций, а с текстом и заливкой в качестве ссылок. Если перейдете непосредственно на сайт — увидите несколько примеров небольшой анимации с ромбом в главных ролях.
Пример 2. Дизайн лендинга в нише дизайн интерьеров и озеленение. Посмотрите, как удачно скомбинированы иллюстрации и ссылки в виде сгруппированных ромбов.
Пример лендинга в нише «рекламное агентство»
В дизайне следующей посадочной страницы углов становится еще больше — к вашим услугам товарищ пятиугольник! Все фигуры разного размера, с заливкой цветом и без, и дополнены забавными дудликами. Такой лендинг говорит целевой аудитории: «Если вы цените юмор и креативные решения, то добро пожаловать к нам».
Три самых главных элемента в этом дизайне: геометрические фигуры, бирюзовый цвет, отрисованные иллюстрации.
А если вы откроете этот сайт, то в качестве бонуса увидите ненавязчивую анимацию.
Пример 3. Лендинг в нише «рекламное агентство». Посмотрите, как сочетаются геометрические фигуры, всеми любимый бирюзовый цвет и рукотворные дудлики.
Пример лендинга в нише «мобильные приложения»
Следующий пример встречает пользователя огромной галочкой. V-элементы продумано «раскиданы» по всему лендингу. В сочетании с мягкими пастельными ретро-иллюстрациями они придают посадочной странице завершенный вид.
Такой лендинг убивает сразу двух зайцев. И вы знаете, что делать, когда хочется использовать и хипстерские картинки, и геометрию. Обратите внимание, как скупо и сдержанно отрисованы кнопки, за счет этого они и выделяются на фоне других составляющих.
Пример 4. Дизайн лендинга в нише «мобильные приложения». Этот пример — правильный ответ на вопрос, как сочетать ретро-иллюстрацию и геометрические формы.
Пример лендинга в нише «интернет-магазин»
Удачный пример посадочной страницы для интернет-магазина. Посмотрите, как удачно здесь сочетается графика логотипа и геометрические элементы в дизайне сайта. Плюс к этому, угол, направленный вниз, привлекает пользователя к основному призыву к действию — «стать дистрибьютором».
Пример 5. Пример лендинга в нише «интернет-магазин». Удачное сочетание графики на этикетке продукта и элементов веб-дизайна.
Пример лендинга-портфолио работ
Пчелы, мёд, пыльца… Как это связано с геометрическим дизайном, спросите вы? Очень просто! Ведь один из самых популярных элементов — это соты, или шестигранники. Отлично подходит, если нужно разнообразить подачу однообразного контента (например, в портфолио работ). За примером вам не придется далеко ходить:
Пример 6. Пример лендинга-портфолио. Форма шестигранника придает подборке фотографий свежий вид и помогает разнообразить его (часть фигур — это работы, часть — ссылки).
Пример лендинга с диагональными элементами
Геометрия не только освежает дизайн, но и создает иллюзию движения. Сравните статичные лендинги только с горизонтальными и вертикальными линиями и те, в которых есть диагональные элементы. Используя углы и диагонали, можно привлечь внимание пользователей к важной информации, направить взгляд, куда нужно вам.
Либо просто разнообразить подачу контента. Посмотрите пример. Вы увидите как оригинальную подачу портфолио, так и самую классическую дизайнерскую ошибку:
Пример 7. Пример лендинга с диагональными элементами. Они освежают дизайн и облегчают пользователю восприятие однообразного контента.
Заметили, в чем ошибка? Посмотрите на тонкий белый шрифт на черном фоне и на его мелкого брата-близнеца в пояснении к каталогу. Это минус сто к юзабилити: текст не читается и рябит в глазах.
Можно сделать простой вывод: какие бы трендовые элементы вы не использовали, следите за восприятием сайта в целом. Все элементы (шрифт, фон, геометрические формы, цвет, композиция, контент и т.д.) должны работать в комплексе.
Дизайн лендинга и геометрия: классика или уходящий тренд?
Геометрический веб-дизайн выглядит современно и стильно, хотя находится на пике популярности уже четвертый год. Причина понятна: простые, с детства привычные элементы, позволяют организовать контент, не перегружая посадочную страницу. И заострить внимание на важных деталях. Поэтому геометрия столь любима дизайнерами всего мира.
Как вы считаете, сколько еще геометрические формы будут оставаться в топе? Это классика или тенденция, которая скоро уступит место чему-то новому?
Жду ваши идеи в комментариях!
примеров лучших дизайнов посадочных страниц в 2019 году
Если вы запускаете веб-сайт, то знаете, как сложно убедить посетителя остаться на вашей странице и даже больше — убедить его купить! Дизайн вашей целевой страницы играет важную роль.
Как выбрать дизайн целевой страницы?
Созданные для превращения посетителей в потенциальных клиентов или клиентов, целевые страницы фокусируют внимание посетителей на вашем ценностном предложении, чтобы побудить их выполнить действие, которое вы ранее определили: покупка продукта, заполнение формы или участие в бесплатном испытание.
Но со всеми доступными предложениями и со всеми конкурентами, которые существуют на рынке, может быть трудно выделиться из толпы. Для этого вы должны создать поразительную, убедительную целевую страницу, адаптированную специально для вашего бизнеса.
Поскольку мы знаем, что может быть трудно найти вдохновение, прежде чем сесть за разработку своей будущей целевой страницы, мы выбрали для вас десять современных и эффективных целевых страниц, которые конвертируются в 2018 году.
Если у вас есть вопросы о целевых страницах и вы бы хотели Чтобы узнать больше, прежде чем начать, ознакомьтесь с нашими статьями о целевых страницах с лучшими практиками и конкретными примерами.
Примеры взяты с реальных сайтов; посмотреть на себя! Конечно, ни одна из этих целевых страниц не идеальна: совершенства не существует, и вы должны адаптировать свой дизайн к требованиям своих клиентов. Мы также рекомендуем вам A / B-тестирование целевых страниц.
10 примеров лучшего дизайна целевой страницы
LeadQuizzes
LeadQuizzes — компания, специализирующаяся на продаже «викторин», предназначенных для сбора «потенциальных клиентов». Мы сразу же замечаем (очень хорошо продуманный) пояснительный видеоролик об услуге, который отвечает на основные вопросы, такие как:
- Для чего это?
- Имеет ли это отношение ко мне?
- Что он мне предлагает?
Во-вторых, оранжевый призыв к действию выделяется на остальной части страницы и очень четко предлагает вам щелкнуть: «Попробуйте бесплатно» убеждает нас, что мы не будем платить немедленно и что существует бесплатная пробная версия.Узнайте больше об оптимизации призывов к действию.
Социальное доказательство очевидно и хорошо проработано: ссылки являются известными игроками рынка, а в тексте указано, что с помощью LeadQuizzes было сгенерировано более 3 миллионов лидов: это заставляет вас хотеть этого!
Остальная часть целевой страницы тоже не разочаровывает: она построена вокруг информирования посетителя о полезности продукта. Цель: использовать (большую) страницу, чтобы убедить посетителей в том, что сервис LeadQuizzes является мощным и используется крупными игроками в области цифровых технологий.
Социальное доказательство четко выделено на целевой странице LeadQuizzes. Он отвечает на конкретные и осязаемые вопросы, волнующие потенциальных покупателей:
- Сколько еще продаж я совершу?
- Сколько новых потенциальных клиентов я могу привлечь?
GrowthHackers
GrowthHackers — это компания, которая продает программное обеспечение для повышения производительности маркетинговых команд и координирует действия по развитию бизнеса и новые идеи от инновационных команд.
Как и в LeadQuizzes, оранжевый призыв к действию хорошо выделяется на фоне остальных цветов страницы и побуждает к действию. Нас также приглашают на «бесплатную пробную версию», чтобы успокоить большое количество посетителей, которые не захотят платить, пока не убедятся в полезности услуги.
Целевая страница продолжает навигацию в виде раскрывающегося меню, которое отвечает на основные вопросы, задаваемые потенциальными пользователями проекта GrowthHackers Project.
- «Почему я должен пользоваться услугой? «
- « Почему менеджеры любят программное обеспечение? «
- « Для кого эта услуга? «
Мы также замечаем, что есть пузырек« чата », чтобы задавать вопросы: полезная функция, когда мы не определились или у нас есть вопросы.
Что касается социального доказательства, оно выделяется двумя способами:
- Мы видим, что вокруг сервиса существует «сообщество».
- Мы видим, что многие люди пользуются услугами и активны в сообществе.
Однако можно критиковать, что цифры могут быть недостаточно видимыми.
ElegantThemes
ElegantThemes — это компания, специализирующаяся на продаже шаблонов или «тем» WordPress, а также продающая «конструктор» под названием Divi, который позволяет пользователям создавать страницы в WordPress визуально.По этой теме посмотрите наши примеры шаблонов целевых страниц для WordPress.
Мы сразу видим социальное доказательство: это первый выдвинутый элемент, который убеждает посетителя в популярности услуги: более 400 000 пользователей согласно сайту.
Затем мы замечаем, что ценностное предложение двоякое и что для этого случая были созданы два отдельных призыва к действию: один для поиска готовых шаблонов, а другой — для знакомства с плагинами бренда.
Еще один интересный элемент: в правом нижнем углу появляется всплывающая подсказка, готовая ответить на вопросы, которые может задать посетитель.
Модуль чата особенно интересен, поскольку он также позволяет пользователю отправлять вложения, смайлики и GIF-файлы, которые могут только усилить взаимодействие.
При просмотре целевой страницы посетителям предлагается возможность попробовать «живую» демонстрацию Divi Builder. Это важное и убедительное ценностное предложение, поскольку пользователи могут открывать для себя продукт напрямую, не платя и даже не регистрируясь.
Далее на целевой странице повторяется социальное доказательство, а в абзаце содержится элемент, призванный успокоить потенциальных покупателей: 30-дневный возврат.
Кроме того, красно-розовый призыв к действию контрастирует с синим фоном страницы, усиливая наше любопытство: нас визуально привлекает кнопка, расположенная в центре страницы.
Shopify
Shopify — это CMS, которая позволяет быстро и легко создавать сайты электронной коммерции без знания программирования.Они выделяются своими многочисленными ресурсами, доступными пользователям (руководства, видео, подкасты, форумы), а также дополнительными услугами, дополняющими их основной бизнес: магазин готовых «тем», библиотека бесплатных фотографий и т. Д.
На целевой странице сразу же выдвигается ценностное предложение: «платформа электронной коммерции, созданная для вас». Поэтому идея состоит в том, чтобы обратиться к большой, часто независимой аудитории, о чем свидетельствует фотоиллюстрация.
Особенностью этой целевой страницы является то, что призыв к действию содержит поле для адреса электронной почты.Это поле требуется для доступа к 14-дневной бесплатной пробной версии, предлагаемой чуть ниже, которая указывает, что для теста не требуется кредитная карта: это главный аргумент.
Остальная часть целевой страницы посвящена функциям сервиса Shopify.
С уникальными иллюстрациями и короткими абзацами компания представляет функции и преимущества Shopify, чтобы убедить посетителей воспользоваться бесплатным пробным периодом или приобрести ежемесячную подписку.
Главный аргумент в секторе CMS, широкое использование сервиса подчеркивается двумя элементами:
- Графическое представление количества пользователей и полученного дохода
- Отзывы реальных клиентов, чьи сайты находятся в сети.
Идея состоит в том, чтобы создать ощущение мимикрии в сознании посетителей: «Если 1 000 000 человек используют Shopify для создания реальных магазинов без программирования, я могу».
Salesforce
Salesforce не нуждается в представлении. Король CRM (управления взаимоотношениями с клиентами), американская компания имеет несколько особенно хорошо разработанных целевых страниц, на которые стоит обратить внимание.
Первое, что бросается в глаза, — это иллюстрации и цвета.Обзор решений Компьютер-Планшет-Мобильный представлен на фоне, внушающем спокойствие и умиротворение.
Отметим также, что в верхней левой части над сгибом есть два призыва к действию: один для демонстрации, а второй — для бесплатной пробной версии.
Salesforce также предлагает решение для крупных компаний, чей призыв к действию размещен справа от бесплатной пробной версии: отлично подходит для привлечения потенциальных клиентов из крупных компаний.
Когда посетитель нажимает на призыв к действию, он переходит с домашней страницы на целевую страницу, созданную специально для того, чтобы убедить как можно больше людей подписаться на бесплатную пробную версию.
Среди выделяющихся элементов мы можем выделить:
- Напоминание о ценностном предложении, «30-дневная бесплатная пробная версия»
- Горячая линия поддержки по телефону
- Заявление «Нет загрузки, нет программного обеспечения» заглавными буквами
- Социальное доказательство, включающее логотипы известных ссылок
- Простая регистрация в Google+, Facebook и LinkedIn
Нил Патель
Нил Патель — консультант по цифровому маркетингу с большой репутацией в США и во всем мире .Его сайт получает несколько миллионов посещений в месяц благодаря стратегии доступного контента и разнообразным ресурсам, созданным для посетителей: статьям в блогах, видеороликам на YouTube, практическим руководствам и т. Д. прямолинейный подход к вопросу.
Цветовая тема очень проста и играет на контрасте между оранжевым фоном и белым текстом. Идея: задавайте посетителям прямой, простой и короткий вопрос, чтобы максимально повысить заинтересованность.
Мы также замечаем, что на целевой странице есть поле (над сгибом), предназначенное для проведения анализа вашего сайта в реальном времени: это демонстрация силы, которая побуждает посетителя самостоятельно обнаружить, что можно улучшить самостоятельно. сайт.
Особенность сайта Нила Пателя заключается в том, что почти все страницы созданы как целевые, каждая с одной целью: привлечь максимальное количество посетителей.
Например, страница «Услуги» (показанная выше) показывает длинный набор текста, который служит подтверждением полномочий для посетителей.В нем объясняется, что Нил может сделать для вас, а также то, что он сделал (см. Ниже), и клиентов, с которыми он работал.
Подход всегда очень прямой и ориентирован на результат и выгоду.
Идея Нила состоит в том, чтобы доказать A + B, что у него есть навыки, которые помогут вам улучшить ваше SEO.
На той же странице «Услуги» призыв к действию идет в конце (и можно задаться вопросом, хорошая ли это идея?). Он состоит из нескольких этапов, которые приглашают посетителей ввести свою информацию, чтобы с ними связались позже.
UpWork
UpWork — всемирно известная платформа для фрилансеров. Это позволяет компаниям быстро находить квалифицированную рабочую силу для выполнения различных заданий и позволяет самозанятым лицам регистрироваться на платформе, чтобы предлагать свои услуги.
На домашней странице мы с самого начала видим, что графический дизайн ясен и что подчеркивается именно «профессиональный» аспект. Интересно, что выбранный слоган не для фрилансеров, а для компаний.
Тон прямой, эффективный и чистый; мы сразу понимаем ценностное предложение: эффективно отдавать субподрядную работу.
Призыв к действию находится слева над сгибом. Его зеленый цвет отличает его от остальной части целевой страницы и состоит из строки поиска, используемой для указания типа работы, которую посетители хотят передать на аутсорсинг. Если мы обратим внимание на детали, мы увидим, что фон — это на самом деле отзыв клиента, и мы сможем увидеть историю: она имеет большое влияние!
Остальная часть целевой страницы классическая: на ней подробно описаны различные услуги, предлагаемые фрилансерами, и показаны платные предложения для пользователей.
CodeCombat
CodeCombat — интересный пример. Это обучающая игра, которая позволяет детям (и взрослым) научиться программировать с помощью видеоигры. Идея проста: вы программируете на прогресс в игре.
Первый интересный момент целевой страницы CodeCombat заключается в том, что аудитория двоякая: она ориентирована как на учителей (которые хотят использовать ее в классе), так и на детей (которые открывают ее сами или из уст в уста).
Таким образом, целевая страница сосредоточена на обучении и простоте использования программы.Таким образом, мы видим два призыва к действию: один для учителей и один для детей / игроков.
Остальная часть целевой страницы представляет преимущества использования CodeCombat, а также снимки экрана, чтобы сделать услугу «ощутимой».
Достаточно традиционным образом, остальное подтверждает сильные стороны услуги и включает отзыв клиента, адаптированный к цели: отзыв директора школы.
Plated
Plated — это компания, специализирующаяся на доставке ингредиентов для рецептов: вы выбираете источники вдохновения для рецептов, а компания доставляет все ингредиенты, необходимые для приготовления блюда.
Первое, что бросается в глаза на целевой странице Plated, — это ее графический дизайн; цвета проработаны, и у компании есть настоящая визуальная идентичность. Хорошо выделяются фотографии блюд, удачно подобраны иллюстрации.
Слова подобраны тщательно и хорошо подходят для целевой аудитории «любителей еды»: мы проголодались, просто взглянув на сайт!
Призыв к действию ясен, хорошо помещен в верхней части страницы; его зеленый цвет четко отличает его от остальной части страницы.
Целевая страница Plated длинная: вам нужно долго пролистывать, чтобы дойти до конца. Однако каждый абзац домашней страницы рассматривается как аргумент или преимущество, чтобы убедить:
- Экономия времени
- Большой выбор
- Больше никаких покупок
- Качественные продукты
- Экономия денег
Мы также можем увидеть особенно привлекательный купон на мгновенную скидку в заголовке, цвет которого выделяется.
Предлагая скидку 50% на первый заказ, Plated побуждает нерешительных к действию, уменьшая финансовые обязательства.
Социальное доказательство выделено в конце целевой страницы. Хотя его можно было поставить выше, он остается заметным и актуальным.
Plated предлагает поддержку в чате, которую мы все чаще и чаще находим на целевых страницах.
Предлагая эту услугу, идея состоит в том, чтобы восполнить недостаток человеческого общения, который можно было бы найти в магазинах, и оказать помощь нерешительным посетителям.
Сильные стороны Plated успешно подчеркиваются с помощью простых успокаивающих изображений, которые передают простоту и безмятежность, чтобы показать, что Plated делает вашу жизнь проще.
MailChimp
MailChimp — чрезвычайно популярная компания, занимающаяся автоматизированным маркетингом и электронной почтой. Их услуги используются многими для создания кампаний по электронной почте, маркетинга и информационных бюллетеней для сайтов электронной коммерции.
Такая же прямая, как у Нила Пателя, эта целевая страница предельно ясна и прямолинейна: она откровенно обращается к посетителям, но остается расплывчатой: «Создайте свой бренд, продавайте больше.».
Это позволяет MailChimp обращаться к посетителям по всему миру, избегая исключения слишком большого числа пользователей с самого начала.
Ценностное предложение максимально простое: создавайте свой бренд, продавайте больше.
Этот простой и свободный подход преобладает в решениях «Программное обеспечение как услуга» (SaaS): цель состоит в том, чтобы напрямую поговорить с бизнес-лидерами любого размера и сразу перейти к делу.
Обратите внимание, что призыв к действию очень заметен: он расположен в центральной позиции над сгибом и предлагает бесплатную пробную версию (еще одну ?!).
Как и в Plated, остальная часть целевой страницы подробно описывает преимущества использования услуги. Это позволяет посетителям быстро «визуализировать» добавленную стоимость услуги и получить четкое представление о следующем вопросе: «Подходит ли эта услуга мне?».
Создавая длинную целевую страницу, вы позволяете вашим посетителям «прокручивать» столько, сколько они хотят: это позволяет им отвечать на максимальное количество вопросов, действуя как коммерческая брошюра, чтобы подчеркнуть вашу добавленную стоимость.
Используя снимки экрана, MailChimp позволяет посетителям легче проецировать себя.Идея состоит в том, чтобы помочь посетителям лучше понять сервис, просмотрев образец. Этот метод может быть адаптирован для видео или даже в форме живой демонстрации, как это делает ElegantThemes.
Мы отмечаем, что призыв к действию бесплатной пробной версии всегда доступен, где бы вы ни находились на странице, здесь в правом верхнем углу.
Попав в воронку конверсии, посетители попадают на страницу формы, необходимую для активации бесплатной пробной версии. Чтобы увеличить количество конверсий, форма регистрации MailChimp намеренно имеет следующий вид:
. Ограничивая количество полей до трех, MailChimp позволяет нерешительным посетителям сделать решительный шаг.Запрошенное обязательство сведено к минимуму: электронная почта, имя пользователя и пароль.
Если бы его нужно было улучшить, мы могли бы рассмотреть возможность добавления быстрой регистрации через Facebook или Google, которая способствовала бы еще большему количеству конверсий.
Вам понравилась эта статья? Если вы воодушевлены и хотите сделать решительный шаг, прочитайте нашу статью, посвященную шаблонам посадочных страниц Bootstrap. Это идеальный актив для успешной целевой страницы.
.Лучшие бесплатные HTML шаблоны посадочных страниц 2020
Целевые страницы — лучший способ создать идеальную рекламную страницу для вашего продукта или услуги. Шаблоны целевых страниц довольно популярны среди стартапов и индивидуальных предпринимателей, которые только начинают свою деятельность. Бесплатные шаблоны целевой HTML-страницы — это здорово, особенно если у вас мало бюджета и времени.
Ниже приведены несколько бесплатных HTML-шаблонов целевой страницы с удивительными функциями и бесшовным адаптивным HTML-кодом, которые вы можете скачать бесплатно.
MiriUI Free
MiriUI — это бесплатный комплект пользовательского интерфейса Bootstrap, доступный по лицензии MIT, который включает бесплатную целевую страницу и множество других элементов начальной загрузки, необходимых при создании веб-сайта.
Загрузить предварительный просмотр Get Pro
LeadUI Pro
Lead UI — это комплект Bootstrap UII с бесплатной целевой страницей и несколькими различными целевыми страницами в версии Pro. Целевые страницы Business, App и Saas, созданные в Bootstrap, доступны в LeadUI.
Купить сейчас Предварительный просмотр
Unplug UI
Unplug — это созданный нами комплект Bootstrap UI с целевой страницей и несколькими различными элементами. Целевые страницы Business, App и Saas, созданные в Bootstrap, доступны в LeadUI.
Купить сейчас Предварительный просмотр
FOI
На аккуратно оформленной целевой странице приложения FIO есть все необходимое для создания целевой страницы приложения с высокой конверсией.
- На основе Bootstrap
- Простота использования и настройки
- Расширенные функции включают
- Дом, Контакты, О нас и многое другое
- Идеально подходит для различных проектов
Дополнительная информация Предварительный просмотр
Hiro
Hiro отличный шаблон целевой страницы, который поможет вам создать отличные целевые страницы, которые повысят онлайн-конверсию.
- Чистый и простой дизайн
- Иконки социальных сетей включены
- Главная страница, О нас, Блог и другие страницы
- Можно легко настроить
- Создано с помощью Bootstrap
Дополнительная информация Предварительный просмотр
Marshmallow
Marshmallow это одностраничная целевая страница с минималистичным внешним видом и привлекательными функциями, что делает ее подходящей для любого бизнеса.
Особенности:
- Он полностью реагирует и оптимизирован для производительности.
- Великолепный одностраничный дизайн с привлекательной настройкой цвета.
- Простота использования с интуитивно понятным кодом.
- Имеется несколько доступных макетов.
- Он обеспечивает удобный для мобильных устройств дизайн.
- Полностью задокументировано.
Загрузить предварительную версию
Простая посадочная страница
Созданный на основе Bootstrap 4, Simple — это современный и уникальный шаблон целевой страницы с простым и элегантным дизайном.
- Аккуратный дизайн и удобный интерфейс
- Простота использования и настройки
- Чистый и понятный код
- Отличная документация
- Яркая цветовая схема
- Множество вариантов настройки
Скачать Предварительный просмотр
Landing
Landing — это бесплатный шаблон HTML5 на основе Bootstrap 4, который идеально подходит для мобильных и веб-приложений.Его простой и уникальный дизайн делает его единственным в своем роде.
Особенности:
- Имеет полностью адаптивный дизайн.
- Он основан на Bootstrap 4,
- Он имеет чистый и минималистичный дизайн.
- Липкая верхняя панель навигации для легкого доступа.
- Отдельная форма регистрации и потрясающие значки шрифтов.
- Мобильная версия с градиентным стилем.
Загрузить превью
Wow
Этот шаблон начальной загрузки HTML5 лучше всего подходит для продвижения продукта.Простой одностраничный дизайн выделяет ваш продукт и привлекает внимание посетителей.
Характеристики:
- Простота настройки.
- Он имеет полностью адаптивный дизайн, удобный для мобильных устройств.
- Он основан на Bootstrap 4 и HTML5.
- Чистый и элегантный дизайн.
- Отличные сочетания цветов и типографика.
- Удачная целевая страница продукта с твиттер-бутстрапом.
Загрузить предварительную версию
Nova
Nova — это шаблон Bootstrap на основе HTML5, который создает отличную целевую страницу для вашего проекта.Этот проект демонстрирует полностью адаптивный веб-сайт с набором функций.
Характеристики:
- Элегантный и чистый одностраничный дизайн.
- Поставляется в разных цветовых комбинациях.
- Простота настройки.
- Имеет множество анимированных кнопок.
- У него потрясающий дизайн заголовка героя.
- Поддерживает подписку по электронной почте.
Загрузить предварительный просмотр
Книга
Как следует из названия, книга — это целевой шаблон книги, предназначенный для продвижения книг.Этот шаблон на основе HTML обеспечивает цельный дизайн, поддерживающий все размеры экрана.
Функции:
- Этот шаблон полностью адаптивен и удобен для мобильных устройств.
- Имеет значки социальных сетей для продвижения.
- Имеет липкую навигацию и раскрывающееся меню.
- Он предлагает эффект наведения с заголовком во всю ширину.
- Полностью задокументировано с демонстрационными изображениями.
- Имеет слайдер карусель с отдельной страницей элементов.
Загрузить превью
Эксклюзивность
Этот HTML-шаблон имеет завораживающий дизайн, который хорошо подходит для привлечения аудитории.Созданный и оптимизированный для многоуровневых платформ, он просто необходим.
Особенности:
- Он имеет адаптивный макет с заголовком героя.
- If предлагает прикрепленную верхнюю навигацию с аккуратной типографикой.
- Он адаптируется к разным размерам экрана и интегрирован с Google Maps.
- Он имеет 11 различимых разделов с отдельным разделом для цен.
- Он предлагает большую площадь нижнего колонтитула.
- Чистый, прочный и удобный.
Загрузить предварительную версию
Lucy
Lucy — это бесплатный адаптивный шаблон администратора Bootstrap, созданный с помощью HTML5. Этот шаблон хорошо подходит в качестве целевой страницы вашего следующего приложения или игровой кампании.
Характеристики:
- Уникальный и чистый внешний вид.
- Полностью адаптивный дизайн, удобный для мобильных устройств.
- Доступна привлекательная анимация.
- Оптимизация для SEO и полная настройка.
- Он имеет липкий заголовок со стильным интерфейсом.
- Его кроссбраузерная совместимость упрощает использование.
Загрузить предварительный просмотр
Evelyn
Evelyn — красивый шаблон, основанный на HTML, с описанием функций и основных характеристик продукта. Эта целевая страница совместима со всеми устройствами и дает прекрасные результаты.
Особенности:
- Он имеет полностью адаптивный дизайн.
- Придает тени изображениям и текстам, чтобы сделать их презентабельными.
- Имеется отдельная таблица цен.
- Дает эффект длинной прокрутки.
- Красивый дизайн, совместимый со всеми размерами экранов.
Загрузить предварительную версию
Dazzle
Dazzle — это одностраничный HTML-шаблон, хорошо подходящий для приложений. Этот современный хорошо продуманный шаблон лучше всего подходит для описания демонстрации ваших мобильных приложений и услуг.
Особенности:
- Имеет фиксированную навигацию по заголовку.
- Адаптивный, хорошо проработанный шаблон.
- Он удобен для мобильных устройств и совместим со всеми размерами экранов.
- Дает эффект параллаксной прокрутки экрана.
- Восток для настройки.
- Его стильный внешний вид хорошо подходит для мобильных и веб-приложений.
Загрузить превью
Resto
Resto — это бесплатный одностраничный шаблон на основе HTML, который хорошо подходит для онлайн-ресторанов, чтобы оставить свой след. Этот шаблон дает онлайн-ресторанам платформу для демонстрации своих услуг.
Характеристики:
- Полностью адаптивный дизайн.
- Имеет эффект длинной прокрутки.
- Просторный дизайн для больших изображений.
- Таблица меню доступна.
- Контактная форма включена.
- Привлекательный внешний вид.
Загрузить превью
Justice
Justice — это одностраничный HTML-шаблон веб-сайта для юридических фирм. Он хорошо разработан для использования в юридическом бизнесе, но может быть адаптирован для других предприятий.
Характеристики:
- Дает эффект плавной прокрутки.
- Имеет фиксированный заголовок.
- Поставляется с большим вводным изображением.
- Доступно модальное всплывающее окно.
- Контактная форма доступна.
- Обеспечивает липкую навигацию.
Загрузить превью
Stage
Stage — это HTML-шаблон, созданный для проведения мероприятий и продажи билетов на них. Этот шаблон лучше всего подходит для небольших площадок и имеет несколько типов галочки.
Характеристики:
- Минималистичный и современный дизайн, подходящий для различных мероприятий.
- Он удобен для мобильных устройств и совместим с экранами разных размеров.
- Предлагает фиксированную навигацию.
- Он основан на платформе Bootstrap.
- Дополнительные разделы о месте проведения, карты и условия.
- Полностью настраиваемый.
Скачать превью
Также читайте: Превосходные шаблоны HTML для администраторов на 2019 год
Touche
Это одностраничный шаблон ресторана на основе HTML.Этот шаблон с фреймворком Bootstrap создан для продвижения вашего ресторана.
Характеристики:
- Полностью адаптивный дизайн.
- Пять разных разделов.
- Выдает эффект длинной прокрутки.
- Имеет липкий заголовок.
- Имеется контактная форма.
- Он предоставляет вам отличные варианты шрифтов.
Загрузить превью
Bulkapp
Bulkapp — бесплатный шаблон мобильного веб-сайта.Этот одностраничный шаблон хорошо подходит для продвижения вашего программного обеспечения в Интернете и мобильных приложений.
Характеристики:
- Полностью функциональный адаптивный дизайн.
- Retina готова со светлыми цветовыми сочетаниями.
- Имеет кроссбраузерность.
- Совместимость с маленькими и большими экранами.
- Отдельный раздел контактов и блога.
- Доступны скриншоты и разделы рекламного видео.
Загрузить превью
Standout
Standout — это бесплатный шаблон веб-сайта для почтового приложения.Его одностраничный дизайн выделяется среди других современным дизайном и удивительными функциями.
Характеристики:
- Он поставляется с бесшовным и элегантным внешним видом.
- Обладает адаптивным дизайном.
- Обеспечивает липкую навигацию.
- Отдельный раздел таблицы цен.
- Доступны кнопки с призывом к действию.
- Полнофункциональный раздел блога.
Скачать превью
Present
Этот шаблон, основанный на Bootstrap 4 и HTML5, является подходящей целевой страницей для всех типов бизнеса.Этот шаблон с плавной анимацией и дизайном подходит для всех видов онлайн-бизнеса.
Характеристики:
- На основе Bootstrap 4.
- Интуитивно понятный и плавный дизайн.
- Подходит для мобильных устройств и совместим со всеми экранами.
- Эффект бесшовной прокрутки.
- Доступны кнопки с призывом к действию.
- Доступен отдельный график цен.
Загрузить превью
Если вы ищете бесплатные HTML-шаблоны целевой страницы для вашего продукта, стартапа, блога или любых других целей, этот список наверняка будет вам полезен.Обязательно ознакомьтесь со всеми этими привлекательными шаблонами; вы можете выбрать идеальный для вас вариант!
Мы создаем массу бесплатных подарков для сообществ веб-разработчиков, ознакомимся с нашей коллекцией бесплатных целевых страниц, шаблонов для входа в систему, мастеров и многого другого!
Чтобы узнать больше о бесплатных страницах, целевых страницах, а также интерфейсных инструментах и шаблонах, посетите наш раздел бесплатных услуг
.
Добавить комментарий