ГлавнаяОбразецЛендинг пейдж образец

17 примеров лендинг пейдж с не/оптимизированными лид-формами. Лендинг пейдж образец


50 лендинг пейдж шаблонов на Wordpress

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

  1. встроенный конструктор страниц
  2. кроссбраузерность и адаптивную верстку, которые обеспечивают охват большей клиентской аудитории
  3. выверенный профессиональный дизайн
  4. бесплатные обновления в течение неограниченного периода

Содержание статьи:

50+ премиум лендинг пейдж шаблона на WordPress

Шаблон BeTheme

Популярный шаблон, главными свойствами которого являются «отзывчивость» дизайна, Retina совместимость и универсальность. На выбор пользователю представлены 2 визуальных конструктора — MuffinBuilder и Visual Composer, а также плагины для слайдеров Slider Revolution, Layer Slider.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

На BeTheme созданы следующие готовые шаблоны лендинг пейдж:

1. Суши

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

2. СПА-салон

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

3. Пиво

Landing page WordPress для локальной пивоварни. Страница оформлена в коричневых тонах с вкраплением зеленого. При скроллинге можно наблюдать впечатляющий parallax эффект.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

4. Портфолио художника/иллюстратора

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

5. Барбершоп

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

6. Аквапарк

Шаблон в ярких тонах желтого, белого и голубого для сайта аквапарка, платного пляжа, бассейна. На его страницах представлены раскрывающийся FAQ, галерея в стиле Masonry, интерактивная карта, панели с призывом к покупке.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

7. HR

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

8. Парфюм

Темплейт с «воздушным» дизайном в розовато-сиреневых тонах. Подойдет под сайт МЛМ компании или персональную страницу агента, занимающегося продвижением сетевой косметики Faberlic, Avon и похожих марок.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Шаблон TheGem

Универсальный темплейт под проекты, рассчитанные на высокую производительность. Тема поддерживает мультилингвальность и режим RTL. Демо-сайты на TheGem включают адаптивные шаблоны лендинг пейдж. В подарок к шаблону идут: конструктор Visual Composer и плагины, ответственные за адаптивные слайдеры — LayerSlider, NivoSlider, Revolution Slider.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

9. Креативное агентство

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Подборка — корпоративные сайты на wordpress. 21+ тема

10. Лэндинг продукта/товара

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

11. Сайт-визитка для приложения

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

12. Портфолио минимализм

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

13. Фотография

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

14. Мобильное приложение (App)

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

15. Тема юриспруденции

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

16. Наушники

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

17. Фитнес

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Подборка — 15 шаблонов сайта для фитнеса

18. Креативное портфолио

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

19. Премиум отель

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

20. Beauty салон

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

21. Роскошный СПА отель

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

22. Медицина

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Шаблон The7

Универсальная адаптивная WordPress тема, интегрированная с конструктором страниц Visual Composer и плагином Ultimate Addons. Среди ее демо сайтов можно найти и скачать шаблон лендинг пейдж, задача которой — привлечение клиентов и повышение конверсии веб-ресурса. В шаблон встроены премиальные плагины Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

23. Небольшой интернет-магазин

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

24. Продажа книг

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

25. Строительство

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

26. Психология

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

27. Тренинг, конференция

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

28. Интернет-магазин

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Шаблон Ronneby

Шаблон повышенной производительности, помимо набора плагинов и модулей оснащенный Панелью Безграничных Опций. В нем используются премиальные плагины Revolution Slider, Visual Composer. Активная поддержка темы, наличие видео и текстовых мануалов делают ее хорошим вариантом для тех, кто собирается купить шаблон лендинг пейдж в первый раз.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

29. Веб-студия

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

30. Ресторан

Наиболее эффектные составляющие демо — блок ресторанного меню с ценами и секция с видео, к заставке которого при скроллинге применяется parallax смещение.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

31. Креативное портфолио

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

32. Спортивный зал

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

33. One-page с эффектом 3D пролистывания

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

34. Мобильное приложение

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

35. Модельное агентство

Страница разделена на 2 части — текст и фото. При прокрутке контент меняется: левая часть поднимается, правая — опускается, при этом текстовый и фото контент чередуются.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Шаблон Bridge

Шаблон с высококлассной типографикой, входящий в топ творческих тем. Бесплатные плагины в составе темы: Visual Composer, Layer Slider, Timetable, Visual Composer. В Bridge включена обширная коллекция шорткодов — от базовых структурных блоков до интерактивной инфографики и продвинутых демонстрационных элементов, таких как вертикальные прогресс-бары.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

36. Автосалон

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

37. Коуч, психолог, тренер

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

38. Дантист, зубной кабинет

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

39. Животные

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

40. Церковь

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

41. Мебель минимализм

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

42. Личный сайт фотографа

Черно-белый сайт-портфолио. Основной контент главной страницы — горизонтальный слайдер во весь экран и навигационное меню.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

16+ шаблонов для сайта фотографа → Смотреть подборку

43. Бизнес, стартап

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

44. Йога

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

45. Кроссфит

Черно-белый лендинг с тематическими блоками «Направления тренировок», «Расписание занятий», «Тренерский состав».

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

46. Путешествия

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

Шаблоны для путешествий. 25+ шаблонов → Смотреть подборку

47. Часы

Лендинг для демонстрации элитных часов использует много фото и parallax фон. Цветовая схема страниц — белая с темно-серыми вставками.

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

48. Digital-агентство

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

49. Бизнес

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

50. Музыка

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

ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО

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

 

 

 

Скачайте чек-листпо cозданию сайтана WordPress

ЧТОБЫ ПОЛУЧИТЬ ЧЕК-ЛИСТ ВВЕДИТЕСВОЁ ИМЯ И ЕМЕЙЛ В ФОРМУ НИЖЕИ ПОДТВЕРДИТЕ ПОДПИСКУ НА ПОЧТЕ

ichigarev.ru

дизайн, примеры, структура и советы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

zwebra.com.ua

17 примеров лендинг пейдж с не/оптимизированными лид-формами

Можно долго рассуждать на тему, насколько важна лид-форма для любой лендинг пейдж, но вместо этого приведем один красноречивый пример: доходы Expedia увеличились на $ 12 000 000 после того, как команда маркетологов убрали одно избыточное поле из формы. Всего одно поле! Вот он — эффект бабочки.

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

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

В этом посте мы сперва поговорим об основах оптимизации лид-форм, а потом рассмотрим 17 конкретных примеров.

Что такое конверсия формы?

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

Основные правила оптимизации лид-формы:

1. Минимизируйте усилия посетителей. Чем меньше у формы полей, тем больше шансов, что ее заполнят. Оптимальное количество — от 3 до 5. Обязательных для заполнения — и того меньше. Если вы не готовы жертвовать точностью данных во имя конверсии, тогда разбейте процесс на несколько шагов (multistep).

2. Гарантируйте безопасность данных. Люди, как правило, с неохотой делятся контактными данными. Чтобы минимизировать их опасения, добавьте к форме какой-нибудь «антиспамовский» значок. Либо напишите что-нибудь вроде: мы не передаем данные клиентов третьим лицам.

3. Создайте манящую кнопку. Забудьте про слово «отправить». Лучшие надписи для кнопки — это призывы к действию. Например: «Скачай приложение», «Загрузи сейчас», «Зарегистрируйся», «Начни прямо сейчас»

4. Не используйте CAPTCHA совсем.

Напомним, CAPTCHA -это защита от роботов. Если она присутствует на вашей лендинг пейдж по умолчанию, то рекомендуем ее убрать — она раздражает. Некоторые применяют smart CAPTCHA, которая появляется лишь тогда, когда пользователь проявляет подозрительную активность: например, отправляет множество запросов с одного IP.

5. Размещайте форму «над или выше линии сгиба». Тепловые карты показали, что самое «лакомое» место на странице — правый верхний угол, поскольку первый взгляд посетителей устремляется именно туда. Разумеется, есть примеры, когда «переезд» лид-формы с «первого экрана» только увеличивал конверсию. Но все-таки традиционно ее до сих пор размещают «над сгибом». Есть сомнения? А/Б-тестирование в помощь, друзья.

6. Позаботьтесь об окружении. Ваша форма должна «дышать». Не стесняйте ее другими элементами, кроме направляющих к ней (стрелки, направление взгляда и т. д.). Рекомендуем вам провести блинк-тест (от англ. blink — мерцание): включить монитор перед человеком, который впервые видит ваш лендинг, на 6 секунд, а потом спросить, что он заметил. Если в списке замеченных элементов не оказалось лид-формы и CTA, значит, нужны доработки.

А теперь перейдем к разбору примеров.

Bizness Apps

Опрятная форма в классическом оформлении. Располагается «над сгибом», справа от промо видео. Мудро использованы обязательные поля — только email. Однако оформить форму можно было бы более модно. :)

Broadcast2World

Приятные цвета, бодрый призыв к действию, изящный указатель (стрелка). 5 баллов!

Text Link Ads

Эта форма призывает убить сразу двух зайцев: создать аккаунт (create an account) и запросить коммерческое предложение (request a proposal). Явный перебор, равно как и излишнее количество полей.

Две тесно соседствующие формы на одной целевой странице явно вводят в когнитивный диссонанс. Запомните: один лендинг — одно целевое действие.

ClickWorkforce

Это пример мудрого использования бокового пространства. Гарантийная печать и альтернативные способы связи внушают доверие. Также стоит отметить информативный заголовок и ссылку на политику конфиденциальности. К недостатками можно отнести набившее оскомину слово «отправить» (submit) и разбивку полей на две колонки — лучше использовать одну.

Oracle

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

W3Markup

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

SiteMover

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

Brain2020

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

Spredfast

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

Servint

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

U Test

Эта страница обладает достаточно мощным мотивирующим воздействием, чтобы посетитель заполнил все поля. В чем секрет? Отличный оффер (eBook) и список выгод.

Passive Club

Два главных правила всплывающих форм: четко обозначенная кнопка выхода («крестик») и веская причина оставить контактные данные. Passive Club прекрасно выполнил оба условия.

The Next Web

Можно ли разместить форму подписки на изображении? Да, посмотрите под слоган «Stay Smart». Хороший вариант ненавязчивой формы, которая выполняет свою работу и не уродует эстетический облик страницы.

DesignM

На этом примере кнопка с надписью «Submit» (отправить) вводит в заблуждение. Гораздо понятнее будет «Подписаться».

Web Traffic ROI

В этом примере к форме подключен счетчик загрузок. Удачное дополнение.

Big Idea Mastermind

Эту форму проще заполнить, чем игнорировать. Сочный дизайн, мощный призыв, стрелка-указатель — все это вместе создает взрывоопасную смесь, мотивирующую к конверсионному действию.

А теперь самое время присмотреться к своим формам. Какие советы возьмете на заметку? Отпишитесь в комментариях ниже.

Высоких вам конверсий!По материалам unbounce.com

09-12-2013

lpgenerator.ru

Создание идеального лендинг пейдж (на примере удачных сайтов)

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

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

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

Содержание:

  • Как найти сайты, у которых есть чему поучиться.
  • Анализ на примере трех вариантов.
  • Используем изученную информацию.

Найдите компании со схожими задачами

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

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

То есть, вместо прямолинейного подхода:

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

Попробуйте что-то вроде:

«Позволяет чувствовать себя комфортно в новых местах».

После таких радикальных изменений в мышлении вы перестанете прочесывать сайты магазинов «Товары для животных», а переместите свой взор на онлайн-площадку AirBnb по поиску и аренде жилья по всему миру.

Пример №2. Допустим, ваша компания пытается решить проблему отсутствия общего средства коммуникации между разработчиками, дизайнерами и бизнесом. Если рассматривать данную сферу, то лидирующими проектами с похожими стремлениями и целями будут:  Airtable, Intercom и Slack.

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

Новые тренды в дизайне landing page

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

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

Или, например, решение от Airtable: можно ли найти что-то более привлекательное, чем интерактивная база данных? — да, это дети, пользующиеся интерактивной БД.

Теперь взглянем на будущее:

Airtable  — февраль 2018

Intercom  — запус 5-го февраля 2018

 Slack  — август 2017

Обучение на примере удачных сайтов

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

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

1. Блок хедер

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

Основные наблюдения по хедеру:

  • Он весьма привлекательный и объемный.
  • Остается в самой верхней части экрана (кроме Intercom — там фиксированное меню при прокрутке).
  • 5–6 ссылок.
  • Есть элемент для призыва к действию (CTA). Лучший вариант у Intercom — кнопка CTA объединена с запросом на введение адреса электронной почты.

2. Заголовок и подзаголовок

Что сразу бросается в глаза:

  • Короткий заголовок: 3–5 слов.
  • Текст должен быть понятным, темного цвета и выделяться жирным шрифтом.
  • Подзаголовок содержит следующую информацию: кто мы, что мы умеем делать, в чем наши преимущества.

3. Главная иллюстрация

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

Airtable 

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

Intercom 

  • Стиль на любителя, но он хорошо демонстрирует ссылки на сообщения и открытые письма.

Slack 

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

4. Оптимизация CTA через запрос на регистрацию

Это хороший подход. Он показывает как просто создать аккаунт и ускоряет процесс взаимодействия с пользователем. Особенно интересная реализация у Intercom — в пространстве под вводом Email указаны дополнительные полезные опции. Если у вас имеется больше полей, обязательно почитайте советы как улучшить онлайн форму регистрации.

Некоторые особенности дизайна в нижней части страницы

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

Основные детали:

  • Вся информация представлена достаточно кратко.
  • Логотипы клиентов оформлены в спокойных серых тонах.
  • Повторение похожих полей призыва к действию (т.е. запроса на регистрацию).
  • Достаточно объемные футеры.

Суммируем все полученные полезные подсказки

В итоге получился следующий дизайн (разрабатывался для Reqfire.com):

Вот что удалось почерпнуть в качестве вдохновения при создании дизайна landing page из рассмотренных выше проектов:

  • Хедер можно делать похожий, но с более свободным пространством.
  • Для заголовка выбираем эффектный и солидный шрифт, например, Libre Baskerville.
  • Главное изображение: ознакомившись вариантом из Slack, было бы неплохо постараться создать иллюстрацию, демонстрирующую функции вашего приложения/сервиса, но без использования скриншота.
  • Бонус: вы также можете добавлять видео или простую анимацию.

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

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

design-mania.ru