Красивый landing page – 25 примеров крутого оформления лендинга

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

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

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

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

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

Stampready

Chooos

Intercom

Avocode

Montagebook

Macpaw Hider

Modnotebooks

Getgoldee

Lixpen

Pnghat

Getnarrative

Scratchwireless

Madewithfaded

Timelyapp

Liber

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

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

design-mania.ru

10 составляющих идеального Лендинг Пейдж с примерами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В зависимости от специфики рекламируемого товара или услуги, блок может содержать дополнительные контакты: skype, icq, viber.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

Смотрите также

smartlanding.ru

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

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

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

Дизайн landing page: от старого к новому

Лендинг пейдж умер. Да здравствует лендинг пейдж!

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

Старые одностраничники, кричащие нам: Купи! Сейчас! Срочно! и заставляющие нас нервно дергаться: «а успеем-то срочно?» отжили свое. И пусть.

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

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

Все мы по сути своей — жутко ленивые создания. Ладно-ладно, львиную часть времени занимает работа, а быстрый темп жизни не оставляет нам времени на разжевывание материала. Старое и важное правило дизайна гласит: «Не заставляйте меня думать». Это правило было придумано Стивом Кругом (гуру юзабилити, написавшим много бестселлеров на тему веб-дизайна) в 2000, и остается по-прежнему актуальным в 2017 году.

• Краткость — сестра таланта

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

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

• Список ваших преимуществ

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

Структура лендинга: что еще должно быть?

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

1. Интересный и цепляющий заголовок, часто содержащий УТП — ваше уникальное торговое предложение;
2. Форма для заказа товара или для отправки вашего электронного адреса;
3. Отзывы ваших клиентов (Мы советуем размещать правдивые отзывы в виде скриншотов из соц сетей или переписки, по которым вашим клиентам будет понятно, что перед глазами не подделка) ;
4. Блок: вопрос-ответ с информацией о товарах/услугах;
5. Контактная информация.

Чего быть не должно: 4 ошибки, которые убивают конверсию вашего сайта

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

Гоните в шею разработчика, если вам навязывают:

1. Безликий шаблон, стянутый с чужого ресурса

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

2. Дизайн не соответствует содержимому

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

3. Безобразные шрифты и бестолковый текст

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

А теперь о тексте. Не пишите простыни. Мы уже говорили о лаконичной подаче информации. Напоминаем еще раз: не перегружайте людей текстом. Большинство из нас легче воспринимает визуальную информацию.

4. Не используйте чужие фото в разделах «О компании» и прочее.

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

Landing page: дизайн, который работает на вас

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

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

Первый пример лендинг пейдж:

Графические блоки с интересной идеей подачи продукта

Бывает: взглянешь на то, как представлен продукт, — а оно не цепляет. Ну вот никак.

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

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

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

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

Второй пример лендинг пейдж:

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

Мы разработали сайт для NUMBER PLATE KEY RING —компании, специализирующейся на продаже брелков в Великобритании.

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

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

Хотите узнать стоимость такого дизайна? Цена дизайна лендинг пейдж зависит от поставленных задач, сложности проекта, количества привлеченных сотрудников и других факторов.

 

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

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

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

zwebra.com.ua