Лендинг страницы. Рейтинг: «Лучший конструктор лендингов

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

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

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

B&O Play

Беспроводные наушники со встроенной тач-панелью - довольно футуристический девайс, мечта любого гика! Если представить хипстера образца 2050 года, то он будет в наушниках от B&O, Google Glass и верхом на робо-собаке от Boston Dynamics.

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

Brickfielder

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

Converse

Кастомизируйте! Создайте свои собственные кеды! Бренд “Converse” не только подхватил тренд к индивидуализации, но и грамотно его реализовал на своем сайте. Лендинг действительно фантастический, прост в использовании и позволяет настроить каждый элемент обуви. Посмотрите на наше чудовище: кастомные зеленые кеды с красными шнурками и фиолетовым язычком - после продолжительного зрительного контакта есть риск потери сознания, эпилептического припадка, расстройства желудка и выпадения волос.

Quechua

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

Bjorn Borg

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

Ikea

“A Good Day Starts Here” - интерактивное видео, которое презентует мебель и аксессуры для дома из каталога IKEA. Такой подход наглядно демонстрирует продукцию в условиях реальной жизни.

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

Bellroy

Пожалуй, это наш фаворит в этом обзоре. Лендинг Bellroy визуально демонстрирует продукт, создавая представление о том, как его "тонкий бумажник" поможет уменьшить занимаемое пространство в вашем кармане.

Geox

На физическом уровне товара - это просто куб, на котором можно сидеть. А вот на уровне эмоций, оказывается, товар от Sit on Everything приобретает совершенно иное восприятие. Загрузите 6-ть изображений для каждой из сторон этой геометрической фигуры, и ваша пятая точка будет приземляться каждый раз на новое изображение! Возможности для фантазии безграничны!

Без сильного дизайна онлайн-бизнес не «выстрелит» — или, не раскроется на все 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. продает канцелярские принадлежности ручной работы. Дизайн-концепт транслирует солидность, упорядоченную жизнь состоятельных людей — это достигается хорошими фото продуктов и небольшими продающими текстами.

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

Что такое лендинг

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

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

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

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

Красивый лендинг - важный инструмент интернет-маркетинга

Примеры самых красивых landing page

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

• Designed to move.org;
• Evr.st;
• Grooveshark.com;
• Hipstamatic.com;
• GiftRocket.com.

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

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

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

Гармоничные сочетания цветов, ясно описанные выгоды и удобное размещение на экране - признаки успешного лендинга

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

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

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

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

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

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

Заключение

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

Собрал коллекцию 14 отличных landing pages. Собирал не один день, но 17 марта 2017 года их все можно было посетить, кликнув по рекламному объявлению в поисковой выдаче Яндекса или Гугля. Как правило в спецразмещении.

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

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

1. Научное детское шоу

Лендинг для детского праздника

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

2 Обучающий праздник

Альтернативный landing page для праздника

Это по сути один и тот же бизнес. Может даже владелец один. Или один из бизнесов работает по франшизе. Лично я открыл бы свой кошелёк, чтобы достать банковскую пластиковую карточку на втором лендинге. Почему? А тут показали на видео больше деталей, поработали над возражениями (успокоили рептильную часть мозга, если применять терминологию нейромаркетинга) и показали цены. И знаменитости среди клиентов тоже имеются. Пусть и другие.

3 Landing по бурению скважин – гламурный

Гламурный лендинг по бурению скважин

Этот лендинг я не буду комментировать. Его надо рассматривать только в паре со следующим. Он попал в список для контраста.

4 Landing по бурению скважин — брутальный

Брутальный landing page по бурению

Вопрос на засыпку. Кому ты понесёшь свои денежки: виртуальной девушке со стаканом воды или куче реальных мужиков минимум с пятью буровыми на Уралах и ещё Камазом в придачу?

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

5 Landing page для кухонь на заказ

Landing page кухни на заказ

Дизайнеру за landing page твёрдая четвёрка. Маркетологу поставь оценку сам. Я отмечу только безыдейность скидки в 20% на первом экране. Кухня может стоить и 10 000 рублей, а может стоить дороже миллиона. Разные ценовые сегменты. Поэтому скидка 20% — это либо 2 000 рублей, либо больше 200 000 рублей. Я уже не говорю о том, что обычно это скидка к вчерашней наценке.

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

6 Пошив костюмов на заказ Санкт-Петербург

Landing page костюмов на заказ

Моя любимая посадочная страница в сегодняшней коллекции. Можно назвать её лендинг по-петербуржски. Нет ничего лишнего. По-азиатски кричащего. Окно-с в Европу 🙂 Единственный недостаток — оформление отзывов. Но спасает аккаунт в инстаграмм.

Да, они выиграли битву за мой кошелёк.

7 Пошив костюмов на заказ Швейцария

Landing page пошива костюмов из Швейцарии

Это проигравший лендинг в битве за мой кошелёк. Тем не менее, я его добавляю в этот обзор, чтобы показать тебе две фишки. Первая – как правильно делать отзывы.

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

Фишки чур не палить! 🙂

8 Ремонт и отделка квартир

Лендинг по ремонту и отделке квартир

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

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

9 экскурсии по Москве

Лэндинг экскурсий по Москве

Самый длинный landing page. Идея бизнеса мне понравилась. Сам лендинг комментировать сложно. Разве что Блока попросить:

Мильоны - вас. Нас - тьмы, и тьмы, и тьмы.
Попробуйте, сразитесь с нами!
Да, скифы - мы! Да, азиаты - мы,
С раскосыми и жадными очами!

Тяжёлое наследие Византийской империи.

10 Печеньки

Печеньки лояльности

Идея бизнеса — пять. Исполнение…

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

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

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

11 Служба доставки

Landing службы доставки

Весь лэндинг целиком, собственно как и бизнес, выглядит хорошо продуманным. Но с первым экраном полный… фулфилмент. Никогда, я ещё раз подчеркну, НИКОГДА не используй на лэндинге слов, которые являются терминами, известными лишь узкому кругу лиц.

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

Ну и сразу под кнопкой призыва к действию идёт грубая ошибка дизайнера. Из содержимого лэндинга следует, что возврат средств осуществляется без комиссии. Но из первого экрана можно сделать предположение, что возврат стоит 0,5%. Дизайнер просто поставил два не связанных предложения рядом. Слово Возврат написано же с большой буквы? Написано. А то что это читается как одно предложение – кого волнует?

И заметил ли ты кнопку запуска видео? Я её увидел только когда в 3-й или 4-й раз рассматривал скриншот.

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

12 Сход-развал усов и бороды

Барберячечная

Это услуга, смысл которой мне никогда не постичь. По совету Дмитрия Пучкова (aka Гоблин) много лет стригусь машинкой под ноль. Да и Хайзенберга из Breaking Bad из меня не выйдет. Разве что Джесси. Поэтому оценить продающие качества лендинга не возьмусь.

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

13 Бутерторт

Landing page бутерторта.

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

Продавать торты покилограммно, как свиньям на откорм – это хуже некуда. Я понимаю, что в кулинарном техникуме преподаватели так научили, потому что сами они работали или обучались ещё во времена СССР. Но голову-то надо включать!

Торты едят порциями. Порция примерно 200 грамм, значит в килограмме 5 порций, стоимость порции 220 рублей. Вот и чего бы не написать: от 220 рублей за порцию, минимальный размер торта на 10 порций?

Впрочем, это всё мелкие придирки – за свежесть подхода многое можно простить.

14 Идеальный landing page

Идеальный landing page

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

Он действительно очень и очень хорош!

Твитнуть

Плюсануть