Оформление лендинг пейдж. Примеры продающего лендинга (landing page)

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

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

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

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

1. Сайт – Dogstudio.com

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

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

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

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

2. Сайт – Stuart.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16. Сайт – Maze.design

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

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

Анимация

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

17. Сайт – Gyrosco.pe

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

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

18. Сайт – Unbounce.com

Инфографика

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

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

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

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

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

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

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

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

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

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

21. Сайт – Sundaybreakfast.org

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

22. Сайт – Tweakr.io

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

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

23. Сайт – Majortom.com

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

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

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

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

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

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

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

Логотип

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

24. Сайт – Embacy.io

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

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

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

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

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

25. Сайт – DK-SPORT

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

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

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

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

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

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

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

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

26. Сайт – Airbase.com

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

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

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

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

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

27. Сайт – Dotphotonraw.com

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

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

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

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

28. Сайт – Absurd.design

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

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

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

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

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

29. Сайт – Boni corset

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

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

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

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

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

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

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

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

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

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

31. Сайт – Drift.com

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

32. Сайт – Couple.co

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

33. Сайт – Salesforce.com

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

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

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

34. Сайт – Йога

Аудио отзывы

Продающие сайты. Что это такое? Каждый второй скажет: “Конечно же, это лендинги!”. Они же одностраничники, они же лендинг пэйдж, они же продающие страницы.

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

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

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

Критерии оценки

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

К тому же, мы не знаем, сколько продаж компании совершают через подобные сайты. Им же нельзя позвонить и спросить: “А какая у Вас ?” или “Сколько Вы получаете заявок из ?”.

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

Поэтому я сделал проще. Стал искать и просматривать рейтинги и подборки лучших лендингов. И знаете что?

Рейтинг, конечно, субъективный, так как у нас нет показателей всех страниц, и мы физически не можем изучить все сайты интернета. Мы опираемся на свой опыт и те сайты, которые за 5 лет мы встречали на просторах всемирной паутины.

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

ТОП-10 одностраничных сайтов

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

1. Жилой комплекс “Парк Флора”

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

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

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

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

2. Мастерская “Dinero”

Это не сайт, а целый фильм об одном “персонаже” – деревянном кошельке. Если бы он стоил 1 000- 2 000 р., то сайт бы провалился, так как нет очевидных : оффер, дескрипшен, форма захвата и т.д.. Но в сегменте Luxurу всё работает иначе, и этот одностраничник тому подтверждение.

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

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

3. Вакансии “Альфа-Банка”

Этот красно-белый банк – наш партнёр. Мы являемся авторами их блога для клуба клиентов.

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

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

4. Спортивный корсет “Loni-corset”

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

Причём, все сайты у нас на высоте, можете убедиться в этом здесь —> . Но так как большая часть аудитории этой страницы мужчины, то мы решили показать сайт с девушками 🙂

Сайт отработал себя на 4+. Единственный блок, который нам не удалось добавить – это социальные доказательства существования компании-отправителя.

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

5. Допуск СРО “Гральник Лицензирование”

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

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

Конечно, им есть куда расти. У них плывёт вёрстка в некоторых блоках, а их, к слову, 15 штук. Также у них некорректно стоят переносы слов, и мало выделены главные элементы.

Но все это мелочи, ведь фундаментально всё сделано правильно и написано с точки зрения .

6. Проект “Большая сушка”

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

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

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

7.

Мы сами пользуемся системой взаимоотношений с клиентами Битрикс24. Но так как у нас тема не “ ”, то сайт системы Мегаплан превзошёл все ожидания.

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

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

Кстати! Если Вы хотите использовать в качестве своей CRM-системы, то советую не забыть промо-код “Megastart”. Так Вы получите скидку на первую покупку 10% и 14 дней бесплатного использования.

8. Банк для предпринимателей “Точка”

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

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

9. Оснащение тренажерных залов “Goodfit”

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

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

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

10. Торговый центр “МЕТРОПОЛИС”

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

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

Поэтому логично было сделать небольшой дескрипшен (описание в несколько слов о компании), чтобы посетитель сразу знал, куда попал и что его ждёт там.

Почему Только сайты рунета

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

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

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

Это сайт, состоящий из множества лендингов. Практически многостраничный сайт, но все-таки лендинг.

Но их landing page я специально не выложил здесь, потому что они другие. Пускай все говорят о том, что мы повторяем всё за западом, но в данном случае я считаю иначе.

Мы, русские, другие. У нас другой тип мышления, так как мы живём в другой стране. Например, у Американца почти нет опасений в голове, что компания возьмёт деньги и растворится. Так как у них всё защищено на десять рядов, что только один PayPal стоит.

У нас же, в России этот страх стоит в первых рядах. Поэтому у них на сайте мало убеждающих блоков доверять компании, а у нас их тьма.

Я могу приводить ещё десятки аргументов, что у нас с ними будут разные лучшие лендинги. Поэтому прошу простить, но их вариантов здесь не будет.

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

Коротко о главном

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

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

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

Используйте для этого , например, PlatformaLP , Tilda , Bloxy . А уже потом, ждём Вас к нам в гости на совместную разработку.

Мы с вами уже обсуждали, что такое 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. Ремонт ноутбуков

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

Показать всё содержание

“Напишу яркий продающий текст для лендинга. 3000 знаков за 500 рублей. Срок исполнения – 2 дня. Лендинг будет продавать!”

Как Вам такое предложение? Соблазнительно? Пожалуй, нужно заказывать.

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

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

Главное не так

Сейчас модно начинать разработку лендинга с создания – эскиза страницы, которой может быть даже интерактивным, что, конечно, очень удобно.

И это вроде правильно. Вот только не все понимают, что такое настоящий прототип.

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

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

Правда потом перед Вами встанут вопросы: “цепляющий заголовок” - это какой? “Эмоциональное продающее описание” - это как? “Заказ по специальной цене” – нам каждую неделю акцию проводить? Почему отзывов должно быть не меньше 10 штук и откуда их взять?

Любой разработчик уверенно ответит: расположение блоков примерное, мы можем оперативно всё поменять, это же прототип.

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

Чтобы понять суть концепции, спросите себя: “Что будет делать пользователь на Вашем лендинге?” Может быть, оценивать гармоничность расположения блоков на странице? Или неистово жать одну из двадцати кнопок “Заказать звонок”, которые понавешали на сайте разработчики по принципу “чтобы конвертило”?

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

Вывод :

Создание прототипа лендинга без одновременного наполнения его текстом – идея более чем сомнительная. Начинать нужно вместе или как минимум с контента.

Лендинги бывают разные

Причём не только синие или красные, но и предназначенные для разных задач (я о ступенях ). Поэтому и тексты для каждого случая свои.

1. Для холодных

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

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

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

Пример структуры для холодной аудитории :

1. Первый экран;
2. “Боль” аудитории;
3. Описание продукта;
4. Его выгоды;
5. Сценарий использования;
6. Детали о товаре;
7. Отличие от конкурентов;
8. Отзывы;
9. Стоимость;
10. О компании;
11. О производстве;
12. О команде;
13. Гарантии;
14. Блок “Вопрос-ответ”;
15. Общий итог;
16. Контакты.

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

2. Для тёплых

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

Здесь важно не затягивать с “предварительными ласками”, а переходить к делу сразу и чаще всего начинать именно с демонстрации преимуществ.

Причём важно не просто декларативно заявить: “Мы лучшее, что у Вас было!”, а доказать, что у Вас действительно лучшее предложение на рынке.

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

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

Пример структуры для теплой аудитории:

1. Первый экран;
2. Преимущества;
3. Каталог/Покупка;
4. Описание деталей;
5. Достижения и награды;
6. Процесс работы;
7. Коротко о компании;
8. Отзывы;
9. Ответы на вопросы;
10. Контакты.

Фактически, данный лендинг является укороченным вариантом лендинга для холодных клиентов.

3. Для горячих

Например, этот лендинг для “горячей” аудитории, которая уже понимает суть услуги. Этим людям нужно просто наглядно показать, что Вы предлагаете и сколько это стоит.

Цель лендинга в примере – “продать эмоцию”. Поэтому на первом блоке пользователя встречает быстрое и динамичное видео, из которого сразу понятно: электросамокат – это круто!

Текста на этом сайте минимум, но каждое слово по делу. Такой подход уже сам по себе настраивает на принятие решения. К тому же, если речь идёт о “горячей” аудитории, то и лендинг можно сделать короче, ведь потребность у пользователя уже сформирована.

Пример структуры для горячей аудитории :

1. Первый экран с кнопкой “покупки”;
2. Описание преимуществ;
3. Сравнение с конкурентами;
4. Примеры результата;
5. Процесс работы;
6. Контакты.

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

Виды текста

Как Вы догадываетесь, за 500 рублей Вам вряд ли напишут такую же душераздирающую историю про Петю. И все же, если найдёте такого бессеребренника, то не рассказывайте о нём никому и держите в чёрном теле, чтобы не возомнил о себе невесть что.

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

Кстати, чтобы написать хороший интригующий оффер есть несколько рабочих шаблонов.

2. Заголовки

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

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

– Интригующий заголовок

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

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

Важный момент: не путайте интригующие заголовки для лендингов с заголовками для постов в соцсетях, статейных сайтов или . Это разные вещи. Заголовки из серии “как я похудела на 20 кг за 10 дней” оставьте для мастеров кликбейта.

– Обобщающий заголовок

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

Ещё один классический ход – использование цифр. Причём это срабатывает и для подзаголовков и для заголовков. Например, сравните:

Заголовок с цифрой: “7 навыков высокоэффективных людей”;
Заголовок без цифры: “Навыки высокоэффективных людей”.

3. Подзаголовки

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

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

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

Только не увлекайтесь цифрами, ведь это всё-таки лендинг, а не статья в блоге “99+ восхитительных фотографий”. Важно, чтобы Ваше предложение (цена или время достижение цели с помощью Вашего продукта) было конкурентоспособным и реальным.

4. Буллиты

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

Так и для обычного списка, и для буллита (с некоторыми уточнениями) подходят следующие правила:

1. Согласовывайте между собой пункты буллита;
2. Стремитесь к одинаковому количеству слов;
3. Не используйте больше 5 элементов буллита;
4. Выделяйте под каждый элемент новую строку;
5. Акцентируйте внимание на преимуществах

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

– Заголовок буллита

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

– Описание буллита

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

5. Подводка к блоку

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

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

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

6. Информационный текст

Иногда на лендинге можно использовать просто текст. Без списков, красивостей, и анимации. Причём здесь важно только одно условие – текст должен быть хорош. Без всех этих индивидуальных подходов и гибких цен.

Я знаю, для некоторых владельцев бизнеса эти слова звучат словно магические маркетинговые заклинания. А кое-кто совершенно искренне недоумевает: “А что ещё написать? У всех же такие тексты?”. Но нет. Это так не работает, увы.

Поэтому, если Вам есть что рассказать о своём продукте, и Вы можете сделать это хорошо и “вкусно”, то рассказывайте. Даже если Вы продаёте что-то насквозь банальное, например, пластиковые окна.

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

7. Акценты

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

Важный момент: акценты в тексте можно использовать по-разному. Иногда, чтобы выделить главное, а иногда – чтобы читатель мог немного передохнуть. Например, если в тексте идёт длинное перечисление.

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

Типы текста

Теперь переходим к типам текста. Естественно, все затронуть не получится, но самые распространенные выделю. И помните, это не структура лендинга, и не все перечисленные типы могут входить в нее. Здесь многое зависит от конкретного формата и вида бизнеса.

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

1. Подводка = ценностное предложение

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

Кстати, иногда в описании структуры лендинга используют слово “подводка”, но это больше из журналисткой терминологии и обозначает оно своего рода краткий анонс статьи, отвечающий на вопросы: “кто?”, “что?”, “где?”, “когда?”

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

2. Наши преимущества

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

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

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

И помните, что преимущества рассказывают клиенту о выгоде, например, что жизнь его станет проще. Только не путайте их с фичами (о них расскажу далее).

3. Фичи

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

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

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

Если же у Вас нет фичи, то это значит, что пришло время её придумать! Даже в самом прозаичном бизнесе можно найти что-нибудь интересное и необычное.

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

4. Цифры и факты

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

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

5. Пошаговое руководство

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

Поэтому нарисуйте ему дорожную карту. Только описывайте действие максимально конкретно и используйте глаголы повелительного наклонения: “Оставьте заявку на обратный звонок”, “Пройдите тест” и т.д.

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