30 примеров современных товарных лендингов
Без сильного дизайна онлайн-бизнес не «выстрелит» — или, не раскроется на все 100%. Внешнему виду лендингов посвящена категория нашего блога — дизайн целевых страниц. Но сегодня мы рассмотрим удачные примеры дизайна именно товарных лендинг пейдж.
Обратите внимание на роль «главного изображения» или «hero image» в каждом примере — оно закладывает продающий потенциал лендинга.
Надеемся, эти кейсы вдохновят вас на собственные тесты.
Сайт магазина дизайнерской одежды и аксессуаров Hebe Boutique — пример гармоничного, продуманного дизайна. Главное изображение сразу привлекает внимание, а фотографии товаров отличаются качеством. Типографика тоже радует: толщина шрифта больше стандартной, что, вместе с качественными фото, дает добротный визуальный образ.
Этот сайт eCommerce оформлен в удачной гамме. Разработчики отказались от традиционного белого фона, что выделило ресурс из подобных. Как и в примере выше, Ticklers используют прекрасные фото. Большие, сменяющиеся изображения показывают, как сидит и смотрится одежда на живых людях в реальных условиях.
Интересный формат социального доказательства — протестируйте его на своих товарных лендингах.
После перехода сразу понятно, это — магазин женской одежды. Примечательно сочетание качественных женских фото с инфо-блоками о скидках, акциях, условиях доставки и прочему.
Интернет-магазин Ada Blackjack продает сумки и рюкзаки. Дизайн прост, в его основе — хорошие фото товаров. Такой макет не отвлекает от главного — товаров.
Читайте также: Как продвигать большой ассортимент товаров через лендинг?AMBSN — eCommerce-сайт по продаже одежды. Учитывая высокую конкуренцию, владельцы решили выделиться ярким оформлением — благо, стиль одежды позволяет это.
Другой способ выделиться — нестандартный дизайн. Пример — магазин одежды и товаров для дома RYDER, с весьма креативным макетом (см. меню на скриншоте). Стоит протестировать, как это влияет на конверсию landing page.
Считается, что на главной странице стоит указывать выгоды (бесплатная доставка, акции, распродажи и пр.) и размещать фото популярных товаров. Или просто товарную витрину, на крайний случай. Но глядя на сайт Morepork, кажется, что компания продает себя, а не свои товары.
Возможно, тактика оправдана — стоит протестировать ее, чтобы узнать убедиться в этом.
Dick Moby продают очки, и на лендинге бренда много сильных дизайн-ходов:
- абстрактные символы на заглавном баннере — создают непринужденную атмосферу, располагая к изучению ассортимента;
- качественные фотографии товаров;
- на фото с очками нет фона — ничего не отвлекает от продукта.
The Horse подкупает нестандартностью. Дизайн главной страницы построен на квадратных блоках. В первом — информация по доставке, в остальных — Instagram-фото продукта. Это интересно, потому что необычно.
Бренд продает накладные ресницы. Они же — в центре композиции, а благодаря укрупненным фото товара (и его упаковки), продукт привлекает внимание с первых секунд.
В дизайне Mahabis отражен важный аспект оффера — высокое качество. Пользователь может оценить мельчайшие детали — это внушает доверие и побуждает к покупке .
Читайте также: Методика выявления уникальных отличий товара или услуги среди конкурентовPoketo — пример грамотного расставления цветовых акцентов. Хотя на главной странице много ярких красок, в целом, дизайн не перенасыщен ими. Сайт скорее светлый, пастельный, а броские цветные пятна только собирают внимание.
Jackie Smith — очередной «яркий» сайт-eCommerce. Как и в примере выше, визуальный баланс выдержан хорошо. Насыщенными цветами выделены важные элементы — фото товаров и блоки с акциями. Все остальное — черно-белое.
Дизайн Grovemade перекидывает мост между домашней страницей и витриной — на сайте продаются деревянные подставки, канцелярия и аксессуары. Многое со скриншота ниже — продукты бренда. Расположение товара на фото тщательно продумано, а нестандартный — несколько округлый — шрифт дополняет художественную концепцию.
В онлайн-магазине обуви Muroexe товары удачно скомпонованы и представлены аккуратной сеткой. В дизайн много пустого пространства, что создает эффект легкости и улучшает пользовательский опыт.
На первом экране онлайн-магазина Greyrock — только фото. Там изображена мебель, которая собирается легко и без инструментов (реальное УТП). Девушка с книгой и надпись в заголовке дополняют композицию, как бы говоря: «Расслабься (Take it easy), закажи мебель, быстро собери ее и отдыхай».
Кстати, данный лендинг выполнен на очень простом макете. В галерее шаблонов LPgenerator вы можете найти множество похожих готовых страниц, а обширный функционал редактора позволит вам скорректировать выбранные макеты без специальных знаний:
Простота и красота керамики от Helbak удачно отразились на сайте бренда. Незамысловатые очертания товаров дополняет пустое пространство вокруг изображений.
Еще один интернет-магазин в стиле «Ничего лишнего». Хотя дизайн обходится без особых «фишек», впечатления незавершенности он не оставляет. Все к месту, от перечня товаров ничего не отвлекает.
Сайт с простым дизайном, без многочисленных фото продукта. При этом макет построен на «чистых» черных и белых оттенках, создающих выгодный контраст с фото ювелирных изделий.
Читайте также: 15 гениальных примеров главной страницы сайтаИнтернет-магазин THING IND. предлагает нестандартные товары для дома. Концепция отражена в оформлении лендингов. На сайте вместо черного выбран темно-синий шрифт (в том числе, для навигации). Дизайнеры создали непринужденную атмосферу, что нетипично для сферы eCommerce.
Soap Co. подают товар так, что он «продает себя сам». Нет никаких рекламных элементов — только фото и текст. Отличный пример минимализма в дизайне.
Насыщенный, стильный дизайн. Элементов много, но внимание не рассеивается. Заняты даже углы — в них размещена аббревиатура бренда.
Дизайн транслирует суть оффера: качественное кофейное оборудование. Под каждый товар отведен свой лендинг, с перечнем функций и выгод. Дизайн радует качественными фотографиями, продуманной цветовой гаммой, грамотной игрой с пустым пространством и типографикой.
Интернет-магазин Frank Body предлагает современные средства по уходу за кожей. Так как целевая аудитория — молодежь, то и дизайн сайта соответствующий. Эффект достигается монотипным шрифтом и пастельными тонами.
Кстати, отныне вам больше не нужно открывать сервис Google Fonts для получения сторонних шрифтов, ведь теперь шрифты подключаются прямо из редактора лендингов LPgenerator.
Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Rest. продает канцелярские принадлежности ручной работы. Дизайн-концепт транслирует солидность, упорядоченную жизнь состоятельных людей — это достигается хорошими фото продуктов и небольшими продающими текстами.
The Letter J продает типографские изделия: принты и чехлы для iPhone. Интересен подход к расположению фото: изображения размещены на фоне пересекающихся цветных листов бумаги. Интересный и необычный дизайн-прием.
Интернет-магазин 100% Pure оформлен не слишком вычурно. Однако, дизайн доказывает, что разработать хороший сайт и лендинг можно без лишнего креатива. Хорошего UX вполне достаточно.
Фото в этом примере не статичные, а динамичные — как в буквальном смысле (они анимированы), так и в переносном (ботинок словно стремится за предел сайта). Так бренд транслирует верный посыл — обувь All Birds для движения, активной жизни.
Читайте также: Оптимизация юзабилити главной страницы интернет-магазинаИнтернет-магазин Oi Polloi показывает. что минимализм — не синоним скучному дизайну. Крупные фото товаров на цветном фоне вместе с необычным шрифтом создают отличное впечатление.
P&Co — пример того, как показывать детали. Например, на товарных лендингах много фото разных ракурсов, и перечислено большинство характеристик продукта. Помните, что дьявол в деталях — как и секрет высоких продаж.
Читайте также: Лендинг vs Домашняя страница: что эффективнее?Вместо заключения
Оптимизация конверсии — это не разовая акция, а рутинная работа, подразумевающая постоянные тесты элементов, поиск гипотез, анализ данных и пр. И товарные лендинги здесь — не исключение.
Примеры выше показывают, что макета eCommerce-ресурса, гарантирующего высокую конверсию, не существует. Нужно экспериментировать и тестировать главные изображения, дизайн-макет и фото продуктов. Но главное — чтобы оформление несло «месседж» посетителю, транслировало преимущества товара и ценности бренда.
Надеемся, эти примеры вдохновят вас на собственные эксперименты — а реализовать даже самые смелые задумки вам поможет наш конструктор лендингов.
Высоких вам конверсий!
По материалам: oberlo.com
05-12-2016
lpgenerator.ru
Лендинги детских товаров
Дети очень эмоциональны, активны и любознательны — их легко заинтересовать какой-нибудь новинкой или увлечь вау-эффектом. И пусть окончательное решение о покупке принимать будут вовсе не они, нельзя отбрасывать влияние эффекта детского «Хочу!» на пап и мам. Как разработчики лендинг пейдж решают задачи по захвату детского и взрослого внимания, мотивируя на совершение покупки, предлагаем посмотреть на конкретных примерах.
Замечательный лендинг для детской деревянной игрушки-головоломки.
Лендинг, в котором прекрасно если не все, то многое: нейминг, логотип, сам продукт, первый разворот с видеофоном а-ля «товар лицом», оригинальное визуальное оформление. 3 триггера в левой части экрана содержат ссылки к ключевой информации, а кнопки в шапке сайта якорные. Прокрутка по экранная, анимированная; небольшой недостаток — нет индикаторов прогресса.
Лендинг мультиязычный, дружелюбный, все сделано просто и понятно. Отдельный плюсик в карму разработчики получают за то, что страница загружается по умолчанию с выключенным звуком, благодаря чему не раздражает пользователя. Самый большой минус — не предусмотрена возможность просмотра страницы с экранов мобильных устройств.
Лендинг для развивающей детской игрушки — бизиборда по системе Монтессори.
Отличный длинный лендинг на чистом адаптивном макете, с ярким и сочным визитным цветом. Хороший первый разворот, на котором есть все ключевые триггеры:
- логотип с дескриптором;
- навигационное меню с якорными кнопками;
- кнопка заказа обратного звонка возле контактного телефона;
- заголовок, который дает представление о назначении и пользе продукта, с конкретными цифрами;
- изображение самого продукта;
- кнопка с демонстрационным видео;
- открытая форма захвата с ценностным предложением;
- многочисленные призывы к действию.
И как необязательный элемент — кнопки популярных соцсетей в правой части экрана.
Хочется отметить профессиональный дизайн и то, сколько внимания на лендинге уделено описанию продукта и преимуществ, которые он дает потенциальным покупателям, причем как детям, так и родителям. Минус — длинный каталог, который следовало бы отправить «под кат», а не заставлять пользователей листать его целиком.
Очень простой лендинг пейдж от очередного производителя деревянных детских игрушек.
Мало чем примечательный лендинг с плавной прокруткой, разбитый на экраны. Он и не попал бы в наш обзор, не будь показательным примером слабого копирайтинга. Да, он замысловатый и местами даже креативный, но совершенно не продает — слишком абстрактен и не говорит с потенциальным клиентом на языке его личной выгоды.
Плохо также и то, что различная дополнительная информация, вроде контактов и доставки/оплаты, размещена на отдельных страницах — это еще больше снижает шанс выполнения целевого действия. А вот что здесь очень хорошо, так это прекрасный иллюстративный материал.
Последний лендинг для детских деревянных игрушек на сегодня (честное слово).
Нетипичный короткий одностраничник для продвижения и продаж детской деревянной машинки — героя одноименной серии мультфильмов. Отличный пример использования видеоконтента! Очень простой с виду, незамысловатый продукт так вкусно обыгран и подан, что его реально хочется приобрести.
Здесь есть и акции для детей, и благотворительная миссия проекта, и даже цена указана сразу. Все просто, бесхитростно, но при том продумано так, что здорово подкупает.
Лендинг по продаже оригинальных детских кроватей-машин.
Яркий и веселый дизайн лендинга для оригинального продукта, слегка оживленный анимацией. Позитивно смотрится галерея с фотографиями счастливых покупателей, удачно подан блок с сопроводительной продукцией.
Сюда бы еще нормальные шрифты и мобильную версию — было бы вообще замечательно. Профессиональным все-таки такой дизайн не назовешь. Большой плюс: разработчики предусмотрели видеоинструкцию по самостоятельной сборке кровати.
Качественный современный лендинг пейдж для бренда мягких детских игрушек.
А вот пример отличного профессионального дизайна, в котором продумана каждая мелочь. Посмотрите, как нюансы и детали художественной графики чудесно дополняют великолепные фотографии. Вы еще не держали продукт компании в руках, а сомнений в его качестве уже не остается.
Сразу за слайдером первого разворота следует блок с тремя коллекциями. После — очень краткий текст о компании и новости, после которых размещена уже более развернутая информация о бренде, сразу за полем для подписки. Самые внимательные найдут в новостях очень крутой пример продвижения видеоконтентом 😉 И конечно же, на лендинге хорошая работа со шрифтами.
Лендинг для инновационного проекта по торговле детскими товарами.
Короткий лендинг для относительно нового для России подхода к торговле детскими товарами. Первый разворот грешит отсутствием таких важных конверсионных элементов, как целевые кнопки или формы захвата, хоть и полон призывов к действиям и даже содержит упрощенную инструкцию «как это делается».
Сразу же за ней расположен новостной блок и поясняющий видеоконтент о проекте. В целом, есть претензии к логике размещения блоков, основным триггерам и мобильной версии страницы.
Лендинг пейдж авторского бренда детской обуви, дизайн которого вошел в ТОП-20 лендингов по версии OnePageLove в 2014 году.
Основополагающими качествами стали качество, комфорт и эстетичность. Последнее, видимо, и легло в основу визуального оформления данного Look-Book. Это очень хороший пример качественного, эстетичного использования параллакс-скроллинга, типографики и ненавязчивой анимации.
Обратите внимание, как плавно и мягко лендинг реагирует на ваши действия, как меняется цвет элементов, а также на превосходную оптимизацию. Даже музыкальный фон не раздражает. Этот лендинг способен удовлетворить самое взыскательное чувство прекрасного, но главное — не в ущерб продающей способности: целевая кнопка присутствует на каждом блоке и в самом конце страницы. Жаль, сам онлайн-магазин закрыт.
Лендинг шведских инновационных часов-телефона для детей.
Помнится, данный лендинг пейдж уже фигурировал в одном из наших обзоров, но так как с тех пор он претерпел значительный редизайн, то почему бы не вернуться к нему снова, раз уж он того стоит. Это отличный пример одностраничника с лаконичным трендовым flat-дизайном, первоклассным копирайтингом и грамотной продающей структурой.
Все по-шведски выверено, понятно, надежно и просто. Демонстрируется и сам продукт, и интерфейс мобильных приложений, кнопки для которых повторяются на странице несколько раз. Выдвижное навигационное меню также можно отнести к трендам веб-дизайна.
Макеты лендинг пейдж для продажи детских товаров от LPgenerator
На данный момент для детских товаров в нашем Магазине посадочных страниц отведена целая подкатегория. В ней вы найдете 4 полностью готовых к использованию макетов высококонверсионных лендинг пейдж:
1. Продажа слингов
2. Магазин детской одежды
3. Детские кроватки
4. Детские автокресла
Кроме этого, обратите внимание на шаблоны лендингов для детской одежды и обуви, а также услуг семейного центра психологии:
Это вполне рабочие решения для эффективного повышения продаж в нише детских товаров, созданные опытными профессионалами. Вы получаете современный инструмент, в котором все уже сделано за вас: продающий копирайтинг, эмоциональный дизайн, грамотная структура для закрытия возражений, конверсионные триггеры.
Все, что остается — это настроить макет или шаблон под нужды вашего бизнеса.
Высоких вам конверсий!
10-05-2017
lpgenerator.ru
54 примера потрясающего дизайна лендингов
В интернете второго шанса произвести впечатление на посетителя просто нет. Именно поэтому дизайн вашего лендинга чрезвычайно важен. Лендинг — это лицо вашей компании во всемирной паутине; если оно не понравится пользователю, он просто закроет страницу и забудет о вас. Чтобы этого не произошло, предлагаем изучить 54 самых лучших дизайна для лендинг-пейдж.
Электронная коммерция
Развлекательные сайты
Лендинги-портфолио
Розничная торговля
Интернет-проекты
Сфера услуг
Электронная коммерция
1. Luhse Tea
Дизайн этой страницы уникален, полностью пропитан индивидуальностью бренда и не похож на другие.
2. Fit For A Frame
Особенность этого дизайна в том, что все элементы на виду, но в тоже время очень аккуратно расположены. Также внимание привлекает простое, но красивое слайдшоу.
3. Shop Locket
Простой, но симпатичный дизайн. Плюс в том, что можно войти на сайт через Facebook, не тратя время на регистрацию.
4. White Lotus Aromatics
Отличный пример демонстрации продуктов компании. Каждый месяц компания обновляет список товаров, показываемых на странице.
5. Evel
Понять, что продается на сайте, — не проблема благодаря отлично структурированному контенту, красивым слайдам и крупному шрифту ценников.
6. Lega-lega
Наиболее успешные страницы, посвященные продаже товаров, обязательно содержат понятные и легкие для восприятия примеры продукции.
7. Urban Originals
Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.
8. Scotch & Soda
На странице удачно отображены разные разделы. Для более подробной информации достаточно кликнуть на понравившееся изображение.
9. Гироскутеры от LPgenerator
Дизайн не перегружен лишними элементами, сразу можно посмотреть все характеристики и цены товара.
Развлекательные сайты
10. Clouds over cuba
Просто и со вкусом. Сразу ясна цель страницы — просмотр документального видео.
11. Universeries
Дизайн страницы очень хорошо продуман, он завораживает и буквально гипнотизирует. Отличное сочетание цветов и форм.
12. Jacqui co
Этот сайт выше всех похвал. Блестяще продуманный дизайн и обилие интерактивных элементов никого не оставят равнодушным.
13. Pottermore
В дизайне этой страницы, посвященной франшизе о Гарри Поттере, использованы знакомые фанатам цвета, фразы и имена.
14. Heath Life
Эта страница не только выглядит красиво, она еще и очень функциональна: множество интерактивных элементов, интеграция с Google Maps, использование вкладок.
15. Uncrate
Uncrate и после редизайна не меняет своей традиции расположения всех разделов сайта в удобном верхнем навигационном меню.
16. The good man
Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.
17. Silktricky
Отличный пример «плиточного» дизайна, который позволяет стильно расположить большое количество блоков с контентом.
18. Magic Leap
Визуальная составляющая этого сайта потрясающая. Яркие образы мгновенно захватывают внимание пользователей.
19. Life and times
Jay-Z точно знает, как нужно развлекаться. На его сайте статьи, изображения и другой контент представлен в виде интерактивных плиток.
20. Yogalife от LPgenerator
В этом дизайне использованы природные оттенки, отлично сочетающиеся с главными вопросами, поднятыми на сайте.
Лендинги-портфолио
21. Hello monday
На этой странице главенствующая роль вновь отведена изображениям, которые буквально оживают при наведении мыши.
22. Jib
В этом примере очень интересное сочетание цветов. Более того, на странице у всех элементов использована одинаковая структура фонов, под дерево.
23. Ride for the brand
Здесь очень удачно использован «олдскульный» стиль, дизайн каждого элемента продуман до мелочей и уникален. Благодаря бесконечному скроллингу на этом сайте наслаждаться такой красотой можно долго.
24. Andy Patrick design
Понятный и продуманный дизайн помогает странице наиболее эффективно донести главную информацию до посетителей. Цветовая схема соответствует бренду и показывает стиль дизайнера в деле.
25. This is the brigade
Страница представляет собой превосходную презентацию. Каждый баннер посвящен отдельному проекту.
26. Built by buffalo
Пример необычного плиточного дизайна.
27. Galpin
На это странице главную роль играет типографика. Применение различных шрифтов помогает в передаче идей.
28. Made by Vadim
Дизайн лаконичен и краток. На странице мы можем увидеть все необходимое: и портфолио, и ссылки на другие разделы.
29. Art&code
Иконки и ничего лишнего. Хороший пример минималистичного дизайна.
30. Riley Cran
Страница-портфолио отображает самое главное — примеры работ.
Розничная торговля
31. Rei
На странице представлено множество фотографий пользователей, которые с помощью скролла и наведения можно легко листать.
32. Austin beerworks
Большие яркие фотографии товара компании так и вызывают желание выпить баночку холодного пива.
33. Jaquet droz
Ничто не отвлекает посетителя от созерцания прекраснейших часов.
34. Italio kitchen
Изюминка этого сайта — слайдшоу в верхней части страницы, на которой продемонстрированы аппетитные кулинарные шедевры.
35. TV safety
Шрифт и графика отлично сочетаются, создавая единое восприятие сайта. Пунктов меню всего три, и их невозможно не заметить.
36. Grey Goose
Элегантный стиль, качественные изображения, прекрасная презентация. От главных элементов ничего не отвлекает.
37. Toyota
Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.
38. Got Milk?
Несмотря на то, что эта страница по высоте вписывается в один экран, на ней присутствует много интересных интерактивных элементов и необычных деталей.
39. Buffalo Wild Wings
Дизайн страницы полностью отражает стиль бренда: цвета, шрифты, картинки сразу ассоциируются именно с этой компанией.
40. Подушки для беременных от LPgenerator
Дизайн выполнен в спокойных светлых тонах, такое цветовое решение идеально подходит предлагаемому продукту.
Интернет-проекты
41. Chrome Web Lab
На этой странице использованы потрясающие визуальные эффекты. Вы влюбитесь в многообразие цветов с первого взгляда!
42. Viddy
На этой странице интеграция с Facebook облегчает процесс регистрации и заметно увеличивает количество новых пользователей сервиса.
43. Prezi
Вставка видео на лендинг-пейдж — удачный способ показать ваш товар или услугу в деле.
44. Impress a penguin
Этот сайт похож на книгу, захватывающую ваше внимание необычным сюжетом и иллюстрациями.
45. СSS piffle
Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.
46. Fannabee
На этом лендинге при скроллинге используется параллакс-эффект, восхищающий посетителей.
47. Автоматизация ресторана от LPgenerator
Дизайн выдержан в цвете бренда, на главном баннере отлично выделяется CTA-кнопка, которую так и хочется нажать.
Сфера услуг
48. Captain Dash
Главный баннер в стиле постера для фильма определенно привлекает внимание. Даже если вы не знаете, чем занимается эта компания, вас заинтригует Капитан Дэш, изображенный на постере.
49. Woodwork
Необычная сетка этой страницы позволяет посетителям увидеть сразу много контента в удобном для восприятия виде.
50. Sagmeister walsh
Очень креативный дизайн выбрала для своего сайта эта компания. Нажимая на элементы окон с названиями, мы можем попасть в соответствующий раздел.
51. Madwell NYC
Качественный дизайн страницы говорит о том, что этой компании можно доверять.
52. Ryan Edy
Это страница профессионального фотографа, и ее дизайн помогает нам увидеть самое главное — фотографии. Даже меню спрятано в «гамбургер».
53. Oliver Rassel
Яркие элементы делают эту страницу очень привлекательной, вместе с тем они ненавязчивы и не отвлекают от главного контента.
54. Независимая оценка качества образования от LPgenerator
В этом дизайне от блока к блоку используется единый стиль фона — это создает целостность страницы и облегчает восприятие информации.
Заключение
Мы рассмотрели более 50 абсолютно разных дизайнов, но каждый из них по-своему хорош и грамотно выражает уникальное предложение компании. При разработке лендинг-пейдж очень важно, чтобы страница соответствовала вашему бренду и была интересна вашей целевой аудитории.
Высоких вам конверсий!
По материалам: hubspot.net
18-06-2016
lpgenerator.ru