Landing page с формой заказа и товарами. Примеры активно продающих лендингов

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

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

Итак, вот подборка из 9 лендингов где стоит черпать вдохновение:

Подборка — лучшие интерактивные Landing Page

1 Fixed Group

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

2 Fubiz

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

3 Vimeo

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

4 Black Negative

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

5 Super Top Secret

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

6 WE AIN’T PLASTIC

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

7 ANTON & IRENE

8 BLITZ

Что привлекло меня данном сайте, так это эффекты при наведении. Хоть сайт и создан в современном стиле минимализма, но здесь очень красиво сочетаются 3D объекты: раскрывающиеся открытки, движение объектов на открытке. Также обратите внимание на

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

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

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

Пример лендинга: обувь Timberland.

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

Пример лендинга: детские электромобили

Ура! Есть видео с автомобилем в действии. Не ура – на видео маленькие корейцы. Но продаём-то не им 🙂
Что гораздо серьёзнее, гарантированное зависание для пап: чем белая машина отличается от чёрной. И стоят ли эти отличия 3200 рублей. Остальные недочёты подчеркнёт следующий лендинг.

Пример лендинга: радиоуправляемые модели

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

Секреты создания формы для лендинга

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

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

Требования к созданию идеальной формы заказа для landing page

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

1. Лаконичность. Веб-форма должна позволить оформить заказ, а не собирать о клиенте массу ненужной информации. То есть в ней не должно быть больше 3-5 строк, оформив пунктов больше, вы рискуете загрузить страницу не имеющими никакой значимости строками, что усложнит пользователю быстро оформить покупку.
2. Читаемость. Правильная landing page форма заявки должна быть видимой и легко читаемой. Не нужно перенасыщать страницу большим количеством граф. Оптимальный вариант, если пользователь будет постепенно переходить к заполнению следующей порции информации о себе. Ну и, конечно же, нужно продумать дизайн формы, чтобы она выглядела приятно для глаз.
3. Функция сохранения данных. Довольно часто интернет-соединение потребителей оставляет желать лучшего. Чтобы перебои в связи не привели к потере уже внесенных данных в графы, стоит подумать о функции автосохранения . Это поможет пользователю сэкономить время и после восстановления соединения, и не вводить свои данные еще раз.
4. Проверенные концепции. Лендинг пейдж форма - это не то место, где нужно быть оригинальным. Существуют принципы, которые проверены временем и приносят результат. Любая ошибка программиста или дизайнера может стоить тысяч потерянных покупателей.

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

Пример формы заказа для landing page

Где сделать landing page форму заявки?

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

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

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

Принцип работы

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

Говоря про основные преимущества конструктора веб-форм Formdesigner, можно отметить:

• Конструктор работает онлайн в режиме реального времени;
• Весь процесс создания веб-формы прозрачен и происходит у вас на глазах;
• Все данные из формы хранятся на сервере и доступны 24 часа в сутки;
• Возможность загрузки файлов и использования пользовательского СSS позволяет сделать уникальную веб-форму для лендинга.

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

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

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

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

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

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

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

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

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

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

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

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

Развлекательные сайты

Просто и со вкусом. Сразу ясна цель страницы — просмотр документального видео.

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

Этот сайт выше всех похвал. Блестяще продуманный дизайн и обилие интерактивных элементов никого не оставят равнодушным.

В дизайне этой страницы, посвященной франшизе о Гарри Поттере, использованы знакомые фанатам цвета, фразы и имена.

Эта страница не только выглядит красиво, она еще и очень функциональна: множество интерактивных элементов, интеграция с Google Maps, использование вкладок.

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

Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.

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

Визуальная составляющая этого сайта потрясающая. Яркие образы мгновенно захватывают внимание пользователей.

Jay-Z точно знает, как нужно развлекаться. На его сайте статьи, изображения и другой контент представлен в виде интерактивных плиток.

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

Лендинги-портфолио

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

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

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

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

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

Пример необычного плиточного дизайна.

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

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

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

Страница-портфолио отображает самое главное — примеры работ.

Розничная торговля

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

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

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

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

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

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

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

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

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

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

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

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

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