8 самых красивых лендингов транспортных компаний
Путь к конверсии посетителя лежит через его глаза, и дизайн лендинга — это визитная карточка любой компании. В качестве доказательства рассмотрим 8 удачных примеров посадочных страниц транспортных компаний.
1. PonyExpress. Свежо и зелено
Сочный дизайн, построенный на контрастах светлых и темных оттенков зеленого:
Слайдер на первом экране изобилует кнопками, а сам лендинг — ссылками. С одной стороны, это хорошо: дизайн лаконичный, удобный и выглядит креативно. Но есть и обратная сторона — сайт перегружен конверсионными элементами и точками захвата. СТА-кнопки в слайдере разные и все уводят со страницы.
Ниже — слишком много текста и просто огромная карта на целый экран, которую по умолчанию показывают в развернутом виде, а следовало бы наоборот:
Что такое лендинг пейдж? Руководство для начинающих
2. TTG. Правильные акценты
Данный лендинг — хороший пример минималистичного дизайна в стиле flat. Основная цветовая гамма классическая: белый, синий и контрастный красный. Макет создает ощущение легкости и пространства. Красным же выделены исключительно СТА-элементы, и это прекрасный ход.
Первый разворот в целом выглядит гармонично, хотя на нем, пожалуй, многовато точек захвата, а размещение фиолетовой кнопки с блогом директора ничем не оправдано, поскольку клик по ней уводит пользователя с лендинга, что негативно сказывается на конверсии.
Из дополнительных плюсов:
- грамотная последовательность размещения блоков,
- повторяющаяся форма захвата,
- приятная анимация на первом развороте,
- интерактивность при смене вариантов кузова,
- кликабельные благодарственные письма,
- плавающая кнопка перезвона.
Из замеченных минусов:
много неочевидных СТА, без призыва к действию
списку «Комплектация тарифов» не хватает кнопок «Заказать»
Насколько эффективен анимированный лендинг?
3. Coyote. Дизайн с характером
Стильный черно-белый дизайн с ядовито-зелеными акцентами, полностью соответствующий философии компании: «NO EXCUSES» («Никаких оправданий»).
Видеофон на первом развороте выглядит очень «вкусно», а призывы к действию равномерно распределены по всему лендингу и не противоречат друг другу. Ничего лишнего, все понятно, все на своих местах и выдержано в едином стиле: от персональной армии иконок до фирменных видеороликов для каждой страницы. Визуальное оформление сайта Coyote — это действительно высший пилотаж:
4. Boa. Дружелюбный дизайн
Жизнерадостный, позитивный, дружелюбный дизайн лендинга для компании с философией контактности, открытости и взаимного доверия:
В качестве «визитного» цвета был выбран яркий и насыщенный оранжевый. Большой видеофон для первого разворота и 2 кнопки: одна якорная, вторая целевая — она регулярно повторяется в процессе скроллинга.
Основной упор сделан на социальность, сторителлинг, кроме того, лендинг просто насыщен живыми улыбающимися лицами. Что интересно: при наведении на фото любого из сотрудников появляются кнопочки, ведущие к их профилям: на Facebook, Twitter, LinkedIn. Только вот беда: ни одна из них на самом деле не работает 🙂
Долой стоковые фото, или Оптимизация конверсии с помощью изображений реальных людей
Лендинги-близнецы Diana Inc. — яркие представители flat-дизайна, полностью копирующие внешность друг друга, за исключением цветовой палитры.
Строгий, лаконичный, но располагающий к себе визуальный стиль, приятные теплые тона, занимательная анимация при скроллинге — это хорошо. Переизбыток этой самой анимации, отсутствие каких-либо внятных СТА даже на первом развороте, большие текстовые массивы — это плохо. Сайты несут информационный характер и не работают как лендинги, хотя выглядят местами очень «вкусно».
6. Shyp. Краткость — сестра таланта
Короткий лендинг Shyp — царство разумного минимализма. Белый фон, ярко-зеленый акцент, направляющий взгляд справа-налево вниз по диагонали. Заголовок, подзаголовок, единственная СТА-кнопка, продублированная в конце, 3 шага — все самое необходимое на месте. Вообще ничто не отвлекает от целевого действия, при этом все понятно. Оригинально и просто.
Простота и минимализм в веб-дизайне
7. Hermes. 100% роскошь
Посетителю сразу дают понять — здесь обитель роскоши, комфорта и безопасности люкс-класса. Груз перевозится самый ценный — клиенты компании.
Сайт выполнен черно-белых тонах и выглядит сдержанно, стильно. Никаких форсированных продаж: одна открытая форма захвата в конце. Ярко-красные акценты, большое количество слайдеров, видеоотзывы, указание на респектабельность прямым тестом и полное отсутствие «дешевых» триггеров и СТА — таков сайт Hermes. Удобный, деловой, роскошный.
8. Farewell. Прощай, обыденность!
Лендинг компании, которая предоставляет веб-решения по логистике транспортным компаниям. Стильный, смелый, безумно яркий и сочный дизайн, фишкой которого можно назвать градиенты и необычные шрифтовые пары.
Видео на странице выглядит дорого и гармонично вписывается в визуальный стиль лендинга. Посадочная страница разработана на высоком профессиональном уровне, но ей откровенно не хватает призывов к действию. Например, СТА-кнопку не мешало повторить хотя бы в конце страницы.
10 ошибок на лендинге, которые наиболее часто делают новички
Вместо эпилога
Не жалейте ресурсов на дизайн! То, как именно что-либо преподносится, нередко оценивается выше того, что преподносится. Лендинг, вызывающий восторг у посетителя, который хочется прокручивать снова и снова — ценная инвестиция.
Нужен уникальный дизайн лендинга? Тогда заполните форму заказа или используйте наш конструктор, чтобы создать посадочную страницу самостоятельно.Высоких вам конверсий!
03-08-2016
9 примеров лендингов на образовательную тематику
Ученье — свет, а учиться лучше на практике и по живым наглядным примерам. В этом обзоре собраны лучшие зарубежные лендинги на образовательную тематику. Из них будет что почерпнуть и чему поучиться не только новичкам в интернет-маркетинге, но и бывалым специалистам. Многие из выбранных одностраничников являются призерами профильных интернет-изданий и рейтингов, посвященных веб-дизайну и разработке сайтов.
1. В коде только дамы
Лендинг ниже — иллюстрированный годовой доклад для канадского образовательного проекта «Ladies Learning Code».
Очень длинный одностраничник, совершенно нетипичный для западноевропейского и американского рынка. Выполнен с большой любовью, в трендовом стиле flat, с эффектами параллакс, большим количеством SVG-изображений, CSS-анимации, различной инфографики и интерактивных элементов.
Чем может похвастать этот сайт:
- хороший современный дизайн, сочный, с красивым ностальгическим шрифтом для заголовков;
- на первом развороте изображены все члены команды проекта в виде так называемых «paper dolls», реагирующих на движения мыши;
- навигация упрощена якорными ссылками в плавающей шапке сайта;
- главная целевая кнопка — плавающая, хорошо заметна при прокрутке;
- удачно подобранный и красиво оформленный иллюстративный материал;
- есть встроенная видеопрезентация;
- все отзывы с фото, настоящие и принадлежат реальным людям;
- размещены рабочие примеры кейсов — сайты 11-12 летних студенток;
- большое количество наглядной инфографики;
- кнопки для скачивания отдельных графиков и всего годового отчета целиком;
- простая открытая форма для подписки в конце сайта.
Отдельного внимания заслуживает большая интерактивная SVG-карта, показывающая рост проекта за последние 5 лет. Этот лендинг — прекрасный пример выбора, оформления и размещения элементов на странице.
Информационный обучающий лендинг о типографской терминологии. Если вы полный ноль в типографике — вам сюда:
Этот лендинг — удачный пример того, как можно закрыть объемный вопрос на одном экране. Сам заголовок сайта является анимированным интерактивным элементом, части которого открывают дополнительную информацию. Просто, наглядно и со вкусом.
Виртуозное использование плавной CSS-анимации и SVG-изображений. В правом верхнем углу есть ссылки для встраивания кода страницы в сторонний сайт и расшаривания в соцсетях.
3. Вклад в светлое будущее
Некоммерческий лендинг для греческой кампании #ForTheBright.
Хороший выбор иллюстративного материала и контрастных цветов. Посетителю очень легко выполнить целевое действие с помощью плавающей CTA-кнопки, меняющей цвета при прокрутке, чтобы оставаться хорошо заметной. Для первого разворота использован видеофон. Под заголовками расположилась кнопка с видео-презентацией, которая будет размещена повторно в середине страницы. Прокрутка — простая и удобная, предусмотрено компактное навигационное меню с кнопками соцсетей.
Многое сделано для того, чтобы сделать процесс вовлечения посетителей более приятным:
- Для более быстрого запуска видео использован плагин Magnific popup jQuery.
- Индикатор собранных пожертвований создан с помощью CSS3 — градиентный фон в пробирке показывает текущий прогресс.
- Нажатие на целевую кнопку запускает плавную анимацию появления закрытой длинной формы с выбором готовых вариантов действий.
В самом конце страницы — скромная благодарность за визит. Мелочь, а приятно.
Персональный одностраничник для Бенжамина Брукса — преподавателя игры на гитаре из Бристоля.
Чудесный простой лендинг на 3 экрана, продвигающий индивидуальные обучающие курсы, в студии или удаленно. Для визуального оформления были использованы работы профессионального художника и иллюстратора Эмили Холмс — вот почему сайт смотрится так оригинально. Возникает ощущение, что у него есть душа и свой «характер».
Настоящим испытанием стала реализация хорошей адаптивности и индексирования, учитывая малое количество текста и желание оставить оригинальный арт нетронутым. Посмотрите, как замечательно это удалось! С каким изяществом реагируют все элементы на изменение размеров окна браузера, и с какой плавностью откликается страница на действия пользователей.
Для продвижения подобных услуг здесь недостает видео, демонстрирующего игру мастера, успехи его учеников или других доказательств. Однако невозможно отрицать великолепность проделанной над лендингом работы.
Лендинг для продвижения консультационных услуг профессионального веб-дизайнера из Огайо Дэнниса Филда.
Простой и отзывчивый лендинг в нейтральной цветовой гамме, создающий определенное чувство по отношению к владельцу. «Моей целью было создать простой сайт, который ориентирован на одно. Чтобы помочь другим достичь своих целей», — пишет Дэннис. Хорошо заметная кнопка, ведущая к главному целевому действию, расположена на первом развороте, в шапке и в самом конце страницы.
Хороший выбор триггеров с доказательствами — детальные отзывы, примеры работ, упоминания в авторитетных изданиях, возможность скачать книгу. Чтобы получить книгу, придется оформить подписку, для этого же служит и большой контрастный попап.
Из минусов можно назвать большое количество текста и неинтерактивность портфолио.
6. Профессиональное рецензирование профилей Behance в Манчестере
Лендинг, промоутирующий уже прошедшее образовательное событие Behance совместно с Creative Spark «Сливки Манчестера».
Очень хорошо оптимизированный, моментально загружающийся лендинг с адаптивным дизайном. За счет крупных шрифтов, простых цветов и вертикального расположения элементов сайт очень удобен для просмотра на любом мобильном устройстве или ПК.
Сайт простой и интуитивно понятный в использовании. Для удобства просмотра
предусмотрены большие якорные стрелки внизу экранов и навигационные ссылки в шапке сайта. Отдельной «фишкой», так называемой «пасхалкой» страницы стала спрятанная на ней мини-игра в пинг-понг. Такие интерактивные элементы и геймификация всегда хорошо сказываются на конверсии.
Лендинг для компании, предлагающей набор персональных курсов по тренировке мозга.
Подбор изображений для большого слайдера на первом развороте подчеркивает всевозрастной охват услуг компании. Для дизайна в стиле flat использована богатая палитра сочных и мягких цветов, задающая странице слегка игривый и дружелюбный тон. На сайте очень много текста, но его количество оправдано, так как речь идет об инновациях. Над копирайтом проделана большая работа: тексты содержат много призывов к действию, причем они несут Вы-ориентированный характер. Это правильное позиционирование, подчеркивающее вместо «крутости» компании те выгоды и преимущества, которые клиент получит, если будет работать именно с ней.
В конце страницы размещены навигационные ссылки, новости и открытая контактная форма. Видео по каким-то причинам, увы, не работает. В правом нижнем углу предусмотрена плавающая якорная кнопка для быстрого возврата на первый экран.
8. Интерактивная 3D-карта мозга
Потрясающий интерактивный и информативный лендинг с анимированной загрузкой для продвижения 84 стратегий ускоренного обучения Open Colleges.
Беспрецедентного качества уникальный лендинг пейдж на полтора разворота. Позволяет прокручивать в горизонтальной плоскости 3D-модели коры головного мозга и лимбической системы. Здесь также есть схема устройства нейрона. Разноцветные активные точки захвата на моделях окрашивают в свой цвет их соответствующие части и открывают тонны интересной информации, упакованной в небольшие подразделы.
Вся огромная работа с инфографикой проделана с одной целью — получить ваш электронный адрес. Этому служит якорная целевая кнопка, ведущая к простой открытой форме в самом низу экрана. По бокам страницы расположены кнопки соцсетей и навигационные. Великолепный сайт!
Лендинг, анонсирующий выход нового образовательного приложения для Apple.
Стильный и лаконичный современный одностраничник. На первом развороте, кроме лого с дескриптором, заголовков и открытой формы захвата есть две ссылки: на блог и на закрытую форму для обратной связи.
Хорошо подобран иллюстративный материал, «живые» фото используются вместе с элементами flat-дизайна. В конце страницы повторяется простая открытая форма захвата с первого разворота. Ее увеличили в размерах, изменили призыв к действию в заголовке, добавили поле для ввода имени и чекбокс для желающих участвовать в бета-тестировании.
Выводы
В этой статье собраны 9 самых различных зарубежных лендингов на образовательную тематику, которые являются хорошими иллюстрациями удачных, действенных приемов и решений по взаимодействию с пользователем.
Для рунета более привычны коммерческие одностраничники, особенно по продаже услуг и курсов по вождению, изучению английского и т.д. На Западе же в этом сегменте больше представителей бесприбыльных и информационных лендингов. Они нацелены на виральность, ликвидацию недостатка знаний в какой-либо сфере и сбор контактных данных. Надеемся, вы почерпнули что-либо полезное для себя в каждом из них и вдохновились на создание своего креативного одностраничника!
Нужен уникальный дизайн лендинга? Тогда заполните форму заказа или используйте наш конструктор, чтобы создать посадочную страницу самостоятельно.
Высоких вам конверсий!
19-10-2016
8 лендингов психологов
Многие психологи испытывают трудности с продажей собственных услуг. Чаще всего это связано с незнанием, как выбрать нишу, неумением преподнести свое предложение так, чтобы оно выглядело привлекательно для потенциального клиента. Лендинг пейдж, разработанный с учетом правил интернет-маркетинга, может эффективно решить подобные проблемы.
Грамотная посадочная страница поможет:
- правильно позиционировать себя на рынке,
- создать пакет взаимодополняющих услуг,
- увеличить охват целевой аудитории,
- обеспечить постоянный приток новых клиентов,
- сделать консультирование достойным основным источником дохода.
Предлагаем вам актуальный обзор 8-ми примеров русскоязычных лендинг пейдж, созданных для продвижения в сфере профессиональных психологических услуг.
Неплохой классический лендинг пейдж для продажи услуг частного психолога:
Структура:
- Полноэкранный первый разворот с заголовком, контактами, фото, кратким текстом-презентацией и целевыми кнопками.
- Блок с преимуществами.
- Блок с выгодным оффером.
- Блок про организацию работы.
- Блок с дипломами и сертификатами.
- Блок с описанием скидок на услуги.
- Большая открытая форма захвата данных.
- Блок, посвященный отзывам клиентов.
Логика выбора именно этих блоков следующая:
- Первый экран с самой важной информацией — просто обязателен для любого лендинга. В данном случае он несколько перегружен текстом.
- Преимущества отвечают на вопрос: «Почему я должен обратиться именно к Вам?»
- Ценный оффер, сообщающий дополнительную выгоду потенциальному клиенту.
- Блок, закрывающей вопросы о том, как будут проходить консультации разного формата.
- Дипломы и сертификаты закрывают возражения, связанные с экспертностью психолога. В подобных нишах это важнейший фактор, влияющий на принятие клиентом решения обратиться именно к этому специалисту.
- Собственная система скидок добавляет выгодности основному предложению, правда здесь недостает конкретики в ценах и описаниях самих услуг.
- Открытая форма захвата позволяет получить контактные данные клиентов и обратную связь, не покидая страницу.
- Наконец, отзывы клиентов — обязательный элемент подобных лендингов, выполняющий функцию социального доказательства.
Заканчивается страница небольшим «подвалом» с целевой кнопкой (последний шанс «зацепить» потенциального покупателя) и контактными телефонами.
Данный лендинг имеет простенький дизайн, но хороший адаптивный макет. Несмотря на перегруженность текстом, недостаточно хорошо оформленные блоки с отзывами и услугами, сайт получился удобным для использования.
Хороший, простой лендинг для продвижения психологических курсов:
Длинный лендинг пейдж для продажи курсов по практической психологии. Весьма годный одностраничник с множеством сильных сторон:
- Простая и понятная структура, последовательно закрывающая вопросы и возражения.
- Удачные призывы к совершению целевого действия, хороший набор продающих триггеров.
- Высокая скорость загрузки за счет отсутствия «тяжёлых» визуальных эффектов и анимации.
- Яркие, жизнерадостные, сочные цвета, хорошо заметные целевые элементы, крупный удобочитаемый шрифт.
- Неплохой копирайтинг и ограниченное по времени УТП (уникальное торговое предложение).
- Убедительно смотрящиеся отзывы.
Чего недостает — так это более грамотного позиционирования в тексте, который больше говорил бы о личных выгодах для клиента, а не просто описывал курсы. Есть также мелкие огрехи в верстке, но в остальном — это отличный пример современного продающего лендинга.
Отличный современный лендинг для частного психолога:
Мультиязычный лендинг пейдж с отзывчивым, адаптивным макетом, сделанный по технологиям западных лендинг пейдж. Элементы дизайна копируют интерфейсы ОС для сенсорных экранов, а страница прекрасно приспосабливается к любым их размерам.
Используются трендовые визуальные эффекты: параллакс-скроллинг и видеофоны. Обратите внимание, как хорошо в конце страницы интегрирован функционал популярных соцсетей: Facebook и Instagram. Интересно смотрится и оригинальная спутниковая карта.
Минус данного лендинга — пользователя часто уводят со страницы. В остальном же это прекрасный пример высококонверсионной целевой страницы с современным дизайном.
Максимально простой и дружелюбный к пользователю лендинг линии доверия:
Лендинг пейдж для продвижения бесплатных психологических консультаций линии доверия. Редкий случай, когда блок отзывов не нуждается в щепетильном оформлении. А вот фотографий консультантов сильно не хватает. Это довольно серьезный недостаток, учитывая специфику данных услуг — куда проще довериться тому, чье лицо ты видишь. Визуальная часть без излишеств, но тут красивый дизайн не играет большой роли.
Необычно реализована целевая кнопка онлайн-консультации, которая открывает для оформления заявки не форму захвата, а чат в правом нижнем углу.
Из положительных моментов:
- простота, понятность, доступность;
- блог с собственными статьями;
- развернутые виджеты соцсетей.
Лендинг для московского профессионального центра психотерапии:
Приличный лендинг для психологического медцентра с богатым функционалом, разными предложениями в слайдере первого разворота и целевой формой для записи на тестирование прямо под ним.
Сразу бросается в глаза стильный дизайн. Есть небольшие ошибки в отображении содержимого на устройствах с малой диагональю экрана, некоторые неудобства с навигацией. Не совсем оправдано присутствие целой мини-галереи с изображениями граната, которая не имеет никакой практической пользы, смысловой нагрузки или ценности, кроме, разве что, эстетической.
Также не мешало бы продублировать целевые кнопки или разместить дополнительную форму захвата в самом конце страницы — для увеличения конверсии. В целом же пользование лендингом оставляет лишь приятные впечатления.
Персональный лендинг профессионального психолога Снежаны Замалиевой:
Блок с отзывами здесь заменен на рекомендации от видных иностранных ученых, что можно увидеть нечасто — хорошее конкурентное преимущество. Первый разворот также имеет нестандартные решения: обратите внимание на «двойной» логотип (страница продвигает как услуги владельца — частного психолога, так и его студию), а также на развернутый, подробный дескриптор под контактным телефоном. Для эффективного продвижения в сети присутствуют блок новостей и информационный блог.
Лендинг доступен на русском и английском языках.
Простенький, но по-своему интересный лендинг частного психолога:
Этот лендинг прост только с виду — достаточно присмотреться к тому, как мягко и изящно он приспосабливается к процессу скроллинга и манипуляциям с размерами окна, чтобы понять: перед нами качественный современный одностраничник, сделанный на хорошем техническом уровне. Однако лаконичным его не назовешь из-за большого количества текста. Так как визуальное оформление очень скромное, вся нагрузка легла именно на копирайтинг — а здесь он хоть и неплох, но не дотягивает до идеалов «продающего» текста.
Из интересных решений:
- двойная спутниковая карта, позволяющая переключаться между офисами;
- двойная форма захвата, с помощью которой можно или записаться на прием, или оставить свой вопрос.
Лендинг для услуг частного телесно-ориентированного психотерапевта и психолога:
Работы профессионального художника, выполненные в едином стиле, являются безусловным украшением этого персонального лендинга. Подобное увидишь нечасто, а ведь такой подход к дизайну сразу ставит сайт на голову выше более шаблонных и безликих конкурентов. Жаль только, что элементы интерфейса выполнены не совсем удачно — кнопки, к примеру, морально устарели и слегка портят первоначальное впечатление от дизайна.
Другой плюс этого лендинга — видеоролики, в том числе видео отзывы. Видеоконтент сейчас в тренде, он охотнее воспринимается, лучше запоминается и влияет на пользователей сильнее, чем картинки, звук или просто текст.
Лендинги для продвижения услуг психолога от LPgenerator
Как вы могли заметить по рассмотренным выше примерам, на лендингах в сфере профессиональной психологии большую роль играет грамотный текст и эмоциональный дизайн. Немаловажное значение имеет и экспертность того, кто предоставляет услуги — для этого на странице размещаются блоки с отзывами, рекомендациями, дипломы и награды, а также обращение или биография психолога, где раскрываются его образование и опыт.
Если вы работаете в данной нише, у вас есть отличная возможность сэкономить время и деньги на разработке лендинг пейдж, купив уже полностью готовый макет для профессиональных консультаций психолога:
Преимущества такого решения очевидны:
- За скромную плату вы получаете полностью готовый к работе инструмент, созданный профессионалами специально для повышения продаж именно в этой рыночной нише.
- Запустить лендинг и получать новых клиентов можно будет в самые сжатые сроки.
- Вы сможете легко и быстро адаптировать макет под нужды собственного бизнеса, а наши специалисты с радостью в этом помогут и проконсультируют.
Если же вы пока совсем стеснены в средствах, или просто хотите попробовать лендинги как инструмент интернет-маркетинга в принципе — рекомендуем попробовать наш шаблон лендинг пейдж для центра психологии:
После регистрации вы получаете 7-дневный тестовый период — настраивайте шаблон как пожелаете для своих целей и потребностей.
Также вы можете заказать у нас разработку уникального лендинг пейдж для услуг психолога. Созданный по индивидуальному дизайну, такой лендинг выгодно выделит вас среди конкурентов и надежно закрепит в выбранной нише.
Каждый должен заниматься тем, что умеет лучше всего: предоставьте написание продающих текстов профессиональному копирайтеру, исследование рынка, конкурентов и формирование УТП — опытным маркетологам, внешнее оформление страницы — дизайнеру с соответствующим образованием. А приток новых клиентов, которые будет приносить вам новый лендинг, позволит не отвлекаться от любимого дела.
Высоких вам конверсий!
17-03-2017
18 примеров лендинг пейдж с плоским дизайном
При продвижении оффера с помощью лендинг пейдж хороший дизайн играет немаловажную роль в создании первого положительного впечатления пользователя. В таких широко известных компаниях как Apple, например, эту особенность восприятия целевой аудитории отлично понимают, поэтому «яблочные» лендинги доведены до невероятного визуального совершенства.
Многие дизайнеры предпочитают использовать свежий тренд плоского дизайна с его простой, но выразительной эстетикой. Целевая страница, выдержанная в этом стиле, заведомо будет практически лишена отвлекающих факторов. Яркая палитра, присущая этому стилю «от рождения», позволяет рационально организовать пространство: строгая визуальная иерархия, отсутствие пустот и провалов, достигнутое за счет равномерной заливки однотонными яркими цветами, выверенная строгая типографика текстового контента, позволяющая пользователю на лету ловить маркетинговое послание.
В этом посте собраны некоторые удачные примеры лендингов, хорошо справляющихся со своими главными задачами — передача специфики продукта, привлечение внимания к бренду и конечно конверсия. Их всех объединяет плоский стиль дизайна.
Siteleaf
SaaS-решение по управлению контентом и работой с базами данных, хранящимися в «цифровом облаке».
Mixpanel
Mixpanel — SaaS платформа, предлагающая передовую аналитику для мобильных устройств и веб-сайтов. Сервис помогает клиентам отслеживать использование продукта, измерять коэффициент конверсии, строить воронки продаж и анализировать поведение пользователей на сайте.
Bee
Mac-клиент для FogBugz, позволяющий вести командную работу над проектом с помощью интуитивно понятного приложения с красивым дизайном. Клиент глубоко интегрирован с Mac OS X, так что вы можете получать уведомления от своих товарищей по команде и использовать QuickLook, чтобы просматривать тематические вложения. В дополнение к FogBugz, Bee также работает с простыми текстовыми файлами для заметок проекта и поддерживает синхронизацию задач с GitHub и JIRA.
LogoLagoon
LogoLagoon — дизайн-студия, разрабатывающая оригинальные логотипы, ориентированные на целевую аудиторию бренда. В работе специалисты студии ориентируются на минимализм и визуальную привлекательность.
На сайте можно скачать бесплатные логотипы. Здесь также можно купить готовые лого из специального магазина и, конечно, каждый имеет возможность заказать логотип по индивидуальному дизайну, разработанный специально под ваш бизнес.
Kin
SaaS-проект KIN предлагает простое, интуитивно понятное программное обеспечение для HR-отделов, сфокусированное на персонале, а не на количестве отчетов. Перед нами, к слову, очень редкий пример удачного использования фотографии в качестве фона целевой страницы.
Envato Marketplaces
Envato — это экосистема ресурсов, которая помогает проявлять творческий потенциал для фрилансеров и содержит множество шаблонных решений для предпринимателей. На многочисленных площадках вы можете купить иллюстрации, шаблоны сайтов, файлы проекта и практически любую online графику.
Foundation
Foundation — самый отзывчивый и продвинутый фронтэнд фрэймворк в мире, как заявляют разработчики. Платформа предназначена для профессиональных дизайнеров и команд девелоперов.
Pebble
Pebble — бренд «умных» часов. Устройство связывается с iPhone или c Android-смартфоном по специальному протоколу, загружает с него нужную информацию в реальном времени, преобразует ее и отображает на дисплее. В часы можно подгружать приложения для решения множества задач.
SurveyPlanet
Вам нужен простой, но мощный инструмент для онлайн-опросов? Присмотритесь к SurveyPlanet. Сервис предлагает огромный набор бесплатных инструментов для создания опросов, а также инструменты для обработки собранных статистических данных. Весь функционал интуитивно понятен и прост.
PressKing
PressKing является первой SaaS-платформой«все-в-одном» для взаимодействия со СМИ: создания собственного пресс-центра, распространения релизов и т. д. С PressKing связи с общественностью для стартапов и других предприятий становятся проще!
Treehouse
Treehouse — образовательный проект, обучающий веб-дизайну, разработке сайтов, тому, как начать свой online бизнес и многому другому.
Основатели проекта отмечают: «Наша миссия заключается в создании доступной обучающей технологии для людей во всем мире. Мы хотим помочь им воплотить свои мечты и изменить мир».
Clogout
Clogout — приложение для мобильных устройств, удобный планировщик времени и бизнес-задач, позволяющий вести командную работу над их решением.
Fostr
Очень интересный сервис, который позволяет делиться проектами, которые вы всегда хотели закончить. Девиз компании: «Поддерживайте друг друга, следуйте за творчеством и культивируйте его в себе».
Fostr — это сообщество, где люди поддерживают проекты друг друга, потому что они действительно хотят наблюдать за их ростом, повлиять на исход и быть частью истории успеха.
Mention
Мониторинговая SaaS-платформа, позволяющая отслеживать в режиме реального времени: частоту поисковых обращений к выбранному ключевому слову, просмотры ваших постов и твитов, реакцию целевой аудитории в социальной среде.
Woopra
Woopra — SaaS-решение для обслуживания и анализа клиентской базы, предлагающее решения для маркетинга, продаж, технического обслуживания и сбора статистики.
Платформа предназначена для того, чтобы помогать организациям оптимизировать весь жизненный цикл поддержки клиентов, предоставляя персонализированные поведенческие показатели для отдельных посетителей ресурса и клиентов, отслеживаемые в режиме реального времени.
DIY
DIY — это лучшая возможность овладения всевозможными профессиональными навыками практически в любой сфере жизнедеятельности человека.
Peak
Peak помогает настроить командную работу, отслеживать продуктивность каждого участника проекта, вести учет затраченного на решение определенной задачи рабочего времени, оптимизировать сложные процессы коллективного взаимодействия. И вот еще что — вы убедились, что настоящие фотографии живых участников проекта сметают стоковые картинки в мусорную кучу, где им самое место? 😉
Squidee
Squidee — SaaS-решение, позволяющее веб-дизайнерам и разработчикам демонстрировать клиентам в режиме реального времени результаты работы над заказанным проектом. Больше не нужно утомительной переписки и сотен снятых скриншотов — заказчик видит все своими глазами.
Заключение
Представленные примеры целевые страницы могут быть очень эффективными, поскольку минималистский дизайн сразу концентрирует внимание на главном. На плоских лендингах призывы к действию — «смотреть видео», «проверить демо», «подписаться на бесплатную пробную версию» и т. д. — легко увидеть с первого взгляда. Плоский дизайн позволяет эффектно передать специфику бренда. Еще одно преимущество — нет графических элементов, которые отвлекают от смысловой нагрузки. Плоский дизайн — это очень удачный, простой и чистый стиль, который стоит протестировать в качестве альтернативы более сложным конструкциям посадочных страниц.
Высоких вам конверсий!
По материалам onextrapixel.com
26-01-2014
Как создать идеальный лендинг пейдж с высокой конверсией?
Когда мы употребляем словосочетание «лендинг пейдж», как правило, речь идет о независимой от основного ресурса веб-странице с конкретной целью, обычно генерация лидов или другое целевое действие.
Как поднять конверсию более, чем на 1200%?
Компания VividBoard, производящая кастомизированные маркерные доски, после оптимизации целевой страницы, отметила повышение конверсии с 2% до 27%. Отличный результат для данной сферы бизнеса!
До того, как они добились увеличения конверсии на 1250%, их лендинг пейдж ничем не отличался от стандартной веб-страницы, без конкретной цели (со множеством ссылок) и низкой результативностью:
Исходная страница VividBoard содержала много ненужной информации
Как компании удалось в корне изменить ситуацию? Они разработали новую целевую страницу, руководствуясь следующими принципами:
1. Четко формулируйте задачу
Когда посетитель попадает на вашу страницу, у него должен быть только один вариант конверсионного действия. Задача посадочных страниц в лидогенерации — получить адрес электронной почты пользователя, предложить скачать электронную книгу и т. д.
Дизайн вашей страницы должен располагать пользователя к активному действию:
Цель страницы выше — получить email посетителя, и большая, яркая кнопка призыва к действию с кратким описанием способствуют этому
2. Используйте визуальные элементы
Это помогает направить взгляд в нужную вам сторону. Если цель лендинга — привести пользователя к конверсионному действию, все элементы должны подталкивать его к этому. Вы можете задействовать разные визуальные приемы, например, цвет, структуру или изображения. Человек должен пробежаться глазами по всем ключевым элементам и в итоге прийти к кнопке СТА:
Наши глаза непроизвольно следуют за взглядом девушки на картинке, прямо к элементу СТА
3. Будьте аккуратны с полями лид-формы
Многие маркетологи допускают ошибку, пытаясь получить от людей больше информации, чем те готовы предоставить. Среднестатистический пользователь откажется заполнять 10 различных полей лид-формы, чтобы получить обычную электронную книгу, и вы не должны заставлять его делать это. В конце концов, достаточно получить его имя и адрес электронной почты, чтобы посадочная страница работала.
Сфокусируйтесь на основной цели — все элементы вашей страницы должны соответствовать единой концепции
Твитнуть цитату
4. Не создавайте лендинг для себя
Лендинг пейдж должна быть направлена на удовлетворение потребностей вашей целевой аудитории: какую пользу получат посетители, скачав электронную книгу или подписавшись на ваши новости? Страницы, содержащие слишком много информации о вашей компании, менее привлекательны для потребителей.
Следование этим принципам позволило VividBoard значительно увеличить конверсию:
Так выглядит страница VividBoard после оптимизации
Структура хорошей лендинг пейдж
Теперь когда вы знаете основные принципы создания хорошей целевой страницы, можно перейти к правильной структуре. Какие элементы должен содержать ваш лендинг, а какие лучше исключить? Как правило, достаточно использовать следующие 6 элементов:
1. Заголовок и подзаголовки
2. Краткое (или подробное) описание оффера
3. Одна (или больше) картинка или видео
4. Отзывы, ваш логотип или знак качества
5. Лид-форма
6. Копка призыва к действию
На первый взгляд все просто, но есть вещи, о которых нужно забыть при разработке целевой страницы. Например, стоит отказаться от навигационных ссылок, используемых на основном сайте. Это позволит посетителям сконцентрироваться на конверсионном действии. Также стоит исключить не относящийся к делу текст, посторонние CTA-кнопки и все, что отвлекает от главной цели.
Удачные решения для настройки целевых страниц
Создание лендинга с нуля — непростое занятие, но существует множество общих моментов, которые могут помочь в процессе:
- Если пользователь перешел к вам по рекламной ссылке, удостоверьтесь, что заголовок страницы и текст объявления совпадают.
- Кнопка призыва к действию должна быть большой, заметной и располагаться в верхней части страницы.
- Если используете изображения людей или символы, например, линии и стрелки, убедитесь, что они направляют пользователя к кнопке призыва к действию.
- Сфокусируйтесь на основной цели — все элементы вашей страницы должны соответствовать единой концепции.
- Ваше сообщение должно быть лаконичным — опустите все лишнее: картинки, текст, цвета и так далее.
- Разместите на посадочной странице мнения клиентов. Лучше использовать реальные отзывы.
- Упростите восприятие вашего текста с помощью буллетов и подзаголовков.
- Укажите номер телефона, чтобы вызвать доверие и наладить дополнительный контакт с клиентами.
- Тестируйте различные версии, чтобы отследить, как незначительные изменения могут повлиять на конверсию и рейтинг кликабельности.
Успешные целевые страницы
Теперь, когда вы знаете, с чего начать создание идеальной лендинг пейдж, рассмотрим, как работают эти принципы на примере реальных кейсов.
Простой лендинг сервиса Vizicities с отличным заголовком:
«Мы возвращаем города к жизни с помощью интернета»
Желательно, чтобы ваше предложение было ориентировано на удовлетворение потребностей клиента, как бы отвечая на вопрос: «Почему это важно для меня?»:
«Измени мир в своем офисе»
Лаконичная форма обратной связи позволяет пользователю сосредоточиться на действии:
Простая, схематичная картинка передает суть предложения:
Как создать эффективный лендинг самостоятельно?
Вы готовы приступить к созданию собственного лендинг пейдж? Замечательно! Благодаря различным сервисам вы можете получить хорошие результаты, не прибегая к услугам дизайнеров, разработчиков и маркетологов. Следующие инструменты помогут создать успешную целевую страницу без лишних затрат:
1. Для создания короткого, но эффективного текста (на английском): Hemingway App.
2. Для поиска или создания ярких изображений: Pixabay, Canva, Flickr и др.
3. Для тестирования различных версий и аналитики: Optimizely, Kissmetrics и др.
И конечно же, вы можете воспользоваться сервисом LPgenerator, с помощью которого возможно запустить лендинг на основе готовых шаблонов буквально за один вечер.
Вот лишь несколько примеров лендингов, доступных в нашей галерее:
Лендинг для стартапа
Страница по продаже инфоуслуг
Лендинг для консалтингового агентства
Оцените результаты
Вы уже знаете, из каких этапов состоит разработка целевой страницы, но как определить, что ваш лендинг успешен? На какие показатели обратить внимание в первую очередь? Следующие критерии помогут оценить эффективность лендинг пейдж и понять, что можно улучшить:
1. Коэффициент конверсии (Conversion rate) — отражает количество посетителей, выполнивших желаемое действие: покупка, подписка на рассылку и т. д. Этот показатель наиболее важен, поскольку дает понять, достигается ли цель, ради которой была создана страница .
2. Показатель ухода (Form abandonment rate). Люди начинают заполнять лид-форму и бросают на полпути? Такие действия важно отслеживать, чтобы оптимизировать работу вашей целевой страницы, например, сократив количество вопросов в форме или пересмотрев текст предложения.
3. Показатель отказов (Bounce rate). Как много людей покинули ваш лендинг в первые же несколько секунд или просмотрев не более одной страницы сайта? Даже хорошие целевые страницы могут иметь 70-90% отказов (поскольку не включают навигационные ссылки). Ваша цель — сделать страницу релевантной для посетителей. Хороший способ заставить пользователя остаться — добавить дополнительный призыв к действию после клика на CTA-кнопку, например, с таким текстом: «Спасибо за регистрацию. Узнайте больше о нашем сервисе». .
4. Время, проведенное на странице (Time on page). Как много времени среднестатистический пользователь проводит на вашем лендинге? Эта информация поможет определить, насколько вероятно совершение целевого действия человеком, проведшим определенное количество времени на странице.
5. Источники трафика (Traffic source). Как люди попадают на вашу страницу? Они находят вас с помощью Google, по таргетированной рекламе в Facebook или Вконтакте или по прямой ссылке? Отслеживание источника трафика — это важный этап оптимизации. Например, если вы расходуете значительные средства, чтобы продвигать свою страницу в социальных сетях, а основным источником трафика является Google, то лучше перераспределить рекламный бюджет.
Еще один надежный способ проверить эффективность посадочных страниц — сплит-тестирование, предполагающее создание двух версий лендинга с одним ключевым отличием. Этот метод помогает понять, что именно нуждается в изменении: кнопка призыва к действию или форма обратной связи, а может быть, то и другое.
Заключение
Что дальше? Внимательно прочтите следующие шаги, и приступайте к созданию идеального лендинга с высокой конверсией:
- Четко определите цель. Какое действие от посетителя вы ожидаете получить? Каким будет ваше предложение?
- Определите целевую аудиторию (возраст, род деятельности и другие характеристики ваших потенциальных покупателей).
- Практикуйтесь. Ваша первая страница будет далека от идеала — совершенствуйте ее, используя принципы, описанные выше, и оптимизируя основные показатели.
Высоких вам конверсий!
По материалам: blog.kissmetrics.com, image source kenjet
06-01-2016