лендинг примеры

Посадочные страницы служат одному – конвертируют посетителей в покупателей.

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

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

Современные примеры продающих лендингов

Muck Rack

лендинг страница пример

Слева: для пиарщиков и маркетологов — «найти журналистов» Справа: для журналистов и блогеров – «создать портфолио бесплатно»

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

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

MuleSoft

лэндинг страницы примеры

Заголовок: Книги о бизнесе, ставшие бестселлерами, превратились в 12-минутные анимационные ролики. Подзаголовок: Чего бы вы достигли, если бы тратили всего 1% рабочего времени каждый месяц на обучение и применение основных идей из лучших книг в мире бизнеса и личностного развития?

 

MuleSoft – один из лучших лендингов уходящего года.

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

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

Здесь только один простой призыв к действию – ярко-зеленая кнопка «загрузить».

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

Readitfor.me 

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

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

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

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

2.  У вас будет доступ к группе коллег, которые всегда поддержат вас на вашем пути.

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

4. Сделайте себе подарок —  работать на ваш бизнес, а не в вашем бизнесе.

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

Codecademy

 лучшие лендинг страницы

Лэндинг сервиса Codecademy – пример баланса простоты между дизайном и контентом.

 На картинке, расположенной выше линии сгиба,  изображен компьютер на экране которого HTML и мигающий курсор.  Форма сама по себе проста и для создания учетной записи требуется только адрес электронной почты, имя пользователя, пароль, и подтверждение того, что вы не робот. Более простой путь, использовать страницу в Facebook или Google плюс логин для более быстрого входа.  Для посетителей, которым необходимо больше информации перед тем, как решить создать учетную запись, ниже линии сгиба лендинга расположено видео, которое объясняет, чем вам может помочь кодинг в жизни. Опять же, это помогает сделать потенциально пугающий мир кодинга более доступным для новичковТе, кому необходимы более убедительные доводы, может продолжить прокрутку страницы и найти дополнительные примеры свидетельств и других форм социального доказательства, что эта страница – лучший обучающий лендинг из возможных.

P.S. В следующей статье — еще больше примеров лучших лендингов.