Landing page услуги лучшие примеры. Примеры продающего лендинга (landing page). Кнопка с подсветкой

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

1. Nest Thermostat

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

2. Boy-Coy

Сайт дизайнерской студии, после которого вы вряд ли захотите даже искать предложения конкурентов. Четырехэкранный лендинг способен убедить обратиться именно к этим ребятам, даже если вы не прочитаете ни отзывов, ни списка компаний, с которыми сотрудничала студия. Скорее всего, вы просто пролистаете, любуясь эффектом параллакса и сами того не заметите, как начнете вносить свои данные в симпатичную форму обратной связи.
http://boy-coy.com

3. Водка «Валенки»

Еще один пример красивого landing page с эффектом параллакса. Сугубо имиджевая страница, не заставляющая немедленно совершить покупку, но создающая положительный образ у целевой аудитории. Заметьте, информация о качестве продукта представлена в достаточном объеме, но её можно и упустить, наблюдая за тем, как красиво плавают кубики льда. Тем не менее, нужный эффект уже достигнут. Этот сайт слишком красив, чтобы предлагать что-то некачественное – такой подсознательный вывод возникнет у каждого посетителя любого со вкусом сделанного сайта.
http://www.valenkivodka.com

4. Интернет-магазин плюшевых медведей

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

5. Smart Progress

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

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

1. Производство и монтаж деревянных окон

Как известно, лендинг не должен перегружать посетителя, а сразу давать ему то, за что можно зацепиться и оформлять заявку. Спорить не будем, но некоторые товары требуют тщательного выбора, и одним-двумя блоками тут не отделаешься. Лендинг данного производителя окон пошел по программе максимум и коснулся таких подробностей, о которых мы при выборе окон и не задумываемся. И хотя в паре блоков, как нам кажется, случился информационный перегруз, все равно эта страница является хорошим примером большого лендинга.
http://goodwin-nnov.ru/

2. Страхование КАСКО

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

http://простокаско.рф

3. Франшиза развлекательных аквариумов-автоматов

Хороший пример продающего лендинга, обеспечивающего высокую конверсию за счет того, что четко объясняет выгоды потенциальному клиенту, но и оставляет интригу, желание узнать подробности бизнес-плана, обещающего пассивный доход. Дизайнеру – наша отдельная похвала.
http://morewishes.ru

4. Ремонт ноутбуков

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

99 фишек с примерами

Фишки буду приводить сразу на примерах. Так будет понятнее и удобнее. Правда, если вдруг что-то не поймёте, то просто переходите на сайт указанный в заголовке. И всё смотрите своими глазами.

1. Сайт – Dogstudio.com

Dogstudio.com

Интерактивная смена цветов

Цветовой окрас 3D элементов и фона изменяется с прокручиванием колесика мыши.

Интерактивная смена цветов

Интерактивный 3D дизайн

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

Интерактивный 3D дизайн

2. Сайт – Stuart.com

Stuart.com

Фоновое видео

Для эффективного использования пространства landing page используется видео на фоне вместо изображения. Видео способно быстро поведать пользователю информацию о деятельности компании.

Фоновое видео

Бегущие контент-элементы

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

Бегущие контент-элементы

Несколько кнопок

Такая уловка, как две кнопки с целевым действием на одном экране, способна значительно повысить конверсию. В данном случае эта возможность реализована тремя кнопками “Get started”, “Get in touch” и “Request a delivery”.

Несколько кнопок

Расширенная форма

Палитра цветов

Анимационные линейки

Интересное решение – анимированные линейки для отображения размеров товара.

Анимационные линейки

Модифицирующийся экран

Все элементы экрана меняют свое положение, исчезают или появляются новые при прокручивании колесика мыши.

Модифицирующийся экран

15. Сайт – Оснащение фитнес клубов

Оснащение фитнес клубов

Кнопка с подсветкой

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

Кнопка с подсветкой

Рамка вокруг целевых слов

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

Рамка вокруг целевых слов

Интерактивная шкала

Элемент поможет разнообразить лендинг. В данном случае используется для выбора площади.

Интерактивная шкала

Переключатель опций

Реализован для выбора типа оборудования и включения дополнительных функций.

Переключатель опций

16. Сайт – Maze.design

Maze.design

Изометрический дизайн

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

Изометрический дизайн

Анимация

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

Анимация

17. Сайт – Gyrosco.pe

Gyrosco.pe

Интерактивная схема

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

Интерактивная схема

18. Сайт – Unbounce.com

Unbounce.com

Инфографика

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

Инфографика

Анимированные скрины

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

Анимированные скрины

19. Сайт – Гриль-зона

Гриль-зона

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

Элемент в форме речевого облака

Размытый и легкий фон

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

Размытый и легкий фон

20. Сайт – Лайк Кар

Лайк кар

Треугольные элементы

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

Треугольные элементы

21. Сайт – Sundaybreakfast.org

Sundaybreakfast.org

Рукописный шрифт

Рукописный шрифт

22. Сайт – Tweakr.io

Tweakr.io

Общее фото и описание команды – статичные элементы

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

Общее фото и описание команды – статичные элементы

23. Сайт – Majortom.com

Majortom.com

Проявляющиеся надписи

Надписи проявляются постепенно, сверху вниз: вначале рисуется контур, затем плавно заполняется цветом.

Проявляющиеся надписи

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

Вертикально ориентированные шрифты

Интерактивная анимационная кнопка

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

Интерактивная анимационная кнопка

Загружающийся круг

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

Загружающийся круг

Логотип

Отображаемый лого при загрузке сайта – эффективное использование этого времени.

Логотип

24. Сайт – Embacy.io

Embacy.io

Цветные плоские плашки

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

Цветные плоские плашки

Смена направления прокрутки

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

Смена направления прокрутки

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

Индикация количества просмотренных экранов

25. Сайт – DK-SPORT

DK-SPORT

Градиентное затемнение фото

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

Градиентное затемнение фото

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

Фото в миниатюре-превью для слайдера

Интерактивный выбор цвета

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

Интерактивный выбор цвета

Такой прием позволяет одновременно передавать информацию о компании (на фото), с другой – колорировать лендинг фирменными цветами.

Затенение цветом фонового изображения

Светло-серый фон на фото

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

Светло-серый фон на фото

26. Сайт – Airbase.com

Airbase.com

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

Иллюстрации в стиле инфографики

Акцентирование цветом

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

Акцентирование цветом

Бегущая строка из логотипов

Непрерывно бегущая горизонтальная строка (слева направо или наоборот) – необычное и не заезженное решение.

Бегущая строка из логотипов

27. Сайт – Dotphotonraw.com

Dotphotonraw.com

Белый шрифт на темном фоне

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

Белый шрифт на темном фоне

2D иллюстрации

Плоские иллюстрации (особенно в соединении с плоским дизайном сайта) смотрятся интересно и еще долго будут сохранять свою популярность.

2D иллюстрации

28. Сайт – Absurd.design

Absurd.design

Юмористические элементы

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

Юмористические элементы

Плавное появление контента

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

Плавное появление контента

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

Прозрачная плашка с кнопками меню

29. Сайт – Boni corset

Boni corset

Совмещение фото и схемы

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

Совмещение фото и схемы

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

Двухстороннее фото в стиле “было” и “стало”

Счетчик обратного отсчета

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

Счетчик обратного отсчета

30. Сайт – Edu.pixton.com

Edu.pixton.com

Яркие насыщенные цвета

Яркие цвета – один из трендов в веб-дизайне. Применяя данную фишку Вы точно выделитесь на фоне конкурентов.

Яркие насыщенные цвета

Плоский дизайн

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

Плоский дизайн

31. Сайт – Drift.com

Drift.com

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

Плитки-посты из социальных сетей

32. Сайт – Couple.co

Couple.co

При наведении курсора мыши на фото – всплывает ник клиента в Instagram. При клике на фото – происходит переход на страницу компании в Instagram.

Коллаж из фотографий от клиентов

33. Сайт – Salesforce.com

Salesforce.com

Плейлист из видео-отзывов

Видео-отзывы, организованные в плей-лист – неожиданное и редкое решение.

Плейлист из видео-отзывов

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

Видеоколлаж, как заставка плей-листа

34. Сайт – Йога

Йога

Аудио отзывы

Виктория Кучинова

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

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

Смотрите, вдохновляйтесь, применяйте понравившиеся идеи на практике, миксуйте их со своими и не забывайте проводить A/Б-тестирования – вот единственно правильный рецепт создания убойных посадочных страниц.

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

Расширенная форма

Обычно на одностраничниках используют стандартную форму заявки с несколькими полями. Чаще всего клиенту нужно указать контактные данные – имя-фамилию, почту или телефон. Но в некоторых сложных сферах лучше раскрыть тему подробнее. Вот как это сделали в «Текстерре»: в форме лендинга dellservers.ru клиент может выбрать модуль, параметры, задачи сервера. Может сбросить значения, если что-то пошло не так.

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

Две кнопки СТА

На лендинге планировщика задач wunderlist.com/ru – сразу два призыва к действию, которые усиливают друг друга: «Создать бесплатную учетную запись» и «Загрузить Wunderlist». Пользователи кликают по обеим ссылкам, конверсия растет, а лендинг выполняет свою работу на отлично.

Конкретные цифры (результаты)

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

Персонализация

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

Удобная форма ответа

На многих лендингах и сайтах задать вопрос можно только через форму. А это значит, нужно указывать имя и фамилию, оставлять телефон и электронную почту. Иногда вообще приходится вводить капчи и коды – ужас! Понятно, что это делается для того, чтобы получить лиды. Но есть и другой вариант – как на лендинге «Церебро Таргет». Если вы зарегистрированы во «ВКонтакте», ничего заполнять не нужно – бери и пиши. И клиенту удобно, и владельцу хорошо – контакт оставлен, можно работать дальше.

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

Можно попросить клиентов рассказать о своих впечатлениях и опубликовать полученные тексты на лендинге. Но загвоздка в том, что посетитель никак не проверит – реальные это отзывы или фейковые. Лучше пойти дальше и убедить посетителей в этом. На лендинге huskypark.info , который разрабатывала «Текстерра», приводятся слова клиентов из «Инстаграма» со ссылками на их аккаунты. Все честно – зайдите и убедитесь.

Демонстрация результатов

Трехмерная графика и дополненная реальность

Лендинг создан для приложения Qubi . Это игра для детей 3+ лет и взрослых. Суть игры проста. На первом шаге пользователь по предложенной схеме склеивает реальный бумажный, картонный или деревянный кубик.

Потом он устанавливает приложение, открывает его на смартфоне и «смотрит» на кубик через камеру устройства.

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

Трехмерную модель кубика можно увидеть на иллюстрации (gif).

Что хотел клиент

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

Что мы сделали

Мы реализовали трехмерность с помощью 3D-трансформаций CSS3. Переходы между гранями кубика сделаны с помощью чистого JavaScript с отслеживанием событий drag и touch. Благодаря необычным переходам между экранами у пользователя создается ощущение объемности экрана. Это особенно ярко выражено на рабочей версии посадочной страницы.

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

Лендинг полностью адаптивный.

Интерактивный выбор цветов окраски интерьера и мебели

Необычность лендинга «ДСК.Color» заключается в возможности самостоятельно выбрать цвет мебели и предметов интерьера с помощью интерактивной палитры.

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

Самая востребованная услуга – окраска мебели и предметов интерьера. На нее приходится около 80 % работ клиента.

Что хотел клиент

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

Что мы сделали

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

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

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

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

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

Необычные и обычные прелоадеры

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

Что такое прелоадер и какие задачи он решает

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

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

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

Прелоадеры реализуются с помощью стандартных инструментов фронтенд-разработки: HTML, CSS, JavaScript и дополнительных библиотек и фреймворков, например, jQuery, React.

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

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

• Qubi

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

• Levellen

На сайте Levellen Interiors мы использовали прелоадер в виде логотипа компании. Это дополнительный элемент брендинга сайта.

На лендинге представлена информация об аренде помещений в бизнес-центре. Главный секрет посадочной страницы находится в разделе «Офисы». Здесь пользователь может посмотреть наличие свободных офисов на каждом этаже здания.

При наведении курсора на свободный офис всплывает кнопка «Подробнее».

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

Особенности реализации

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

Собственно дизайн

В этом примере нет сложных технических фишек и дизайнерских эффектов – весь лендинг вывозит красивая картинка: фон, цвета, аппетитные фотографии астраханской икры. Одностраничник astrahancaviar.ru – хороший пример того, как благодаря дизайнеру продукт хочется приобрести. И немедленно съесть!

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

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