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

 

1. Shopify  Дизайн главной страницы

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

Shopify регистрация целевой страницы

 

2. Мuzzle  Дизайн главной страницы

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

Комментарии в Instagram получить больше

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

 Дизайн главной страницы 11

 

 

3. TransferWise  Дизайн главной страницы

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

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

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

Дизайн главной страницы TransferWise

 

4. Airbnb  Дизайн главной страницы

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

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

Дизайн главной страницы Airbnb

 

5. Teambit

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

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

Целевая страница Teambit с CTA

 

 

6. Wistia  Дизайн главной страницы

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

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

wisita-посадочная-страница

 

7. Webflow.  Дизайн главной страницы

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

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

Webflow.  Дизайн главной страницы

 

Дизайн главной страницы электоронных книг

8. Nauto  Дизайн главной страницы

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

Целевая страница книги Nauto

 

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

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

nauto-книгу-десантно-страница-СТА-1

 

9. Промышленный Сильный Маркетинг  Дизайн главной страницы

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

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

промышленный уровень маркетинг-десантно

 

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

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

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

 

 

10. Velaro Live Chat

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

Этот маленький символ PDF над изображением объекта помогает определить, в каком формате будет загружаться загрузка. Стрелка перед подзаголовком помогает еще больше обратить внимание на важную копию, которую посетители хотят прочитать. Как и IMPACT, у них также есть автоматически установленный флажок для подписки на новостную рассылку в их форме — который, если превратить его в дополнительный флажок, является отличным способом увеличить число подписчиков . Все эти мелкие, казалось бы, незначительные детали помогают составить солидный, восхитительный дизайн целевой страницы. Дизайн главной страницы

Velaro-посадочная-страница-пример

 

11. IMPACT Брендинг и дизайн/  Дизайн главной страницы

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

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

IMPACT Брендинг и дизайн/  Дизайн главной страницы

 

Целевые страницы, чтобы узнать больше

12. Unbounce

Неудивительно, что Unbounce находится в верхней части этого списка — они действительно написали книгу о создании высоко конвертирующих целевых страниц . Хотя на этой целевой странице есть много удивительных вещей, мне очень нравятся две: 1) использование окна чата вместо классической формы и 2) подробная — но хорошо упакованная — информация под формой / Дизайн главной страницы

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

 

13. Bills.com.  Дизайн главной страницы

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

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

 

Затем вы отвечаете еще на два вопроса, как на приведенном ниже:

 

И вот последняя форма целевой страницы, где вы заполняете свою информацию:

Дизайн главной страницы 33

 

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

14. Trulia  Дизайн главной страницы

Trulia сделала нечто очень похожее на Bills.com со своей целевой страницей. Он начинается с простой формы, запрашивающей «адрес» (который звучит менее жутко, чем «ваш адрес», хотя именно это они и имеют в виду). Под этим простым полем формы находится ярко-оранжевая кнопка, которая хорошо контрастирует с изображением героя за формой и подчеркивает, что оценка будет персонализирована для вашего дома.

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

Trulia-посадочная-страница

 

15. Landbot  Дизайн главной страницы

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

landbot Дизайн главной страницы

 

16. Webprofits

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

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

Они также позволяют вам понять, что на самом деле делает Webprofits На остальной части страницы представлена ​​подробная информация о том, что вы получите, когда передадите свою информацию. Кроме того, он включает в себя стратегические CTA, которые помогут вам вернуться наверх, чтобы заполнить форму, например «Let’s Talk».

Дизайн главной страницы 67

 

17. H.BLOOM

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

Помимо своей красоты, на странице есть несколько замечательных элементов конверсии: форма над головой, четкое и краткое описание того, что произойдет при заполнении формы, и даже ярко-оранжевая кнопка «Отправить». Единственное, что мы изменим? Копия на кнопке «Отправить» — это может быть более конкретным для предлагаемого предложения. Дизайн главной страницы

hbloom Дизайн главной страницы

 

18. Conversionlab

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

Когда вы нажимаете «Получить справку по целевым страницам», весь сайт перемещается, чтобы освободить место для формы. Вот как это выглядит, прежде чем нажать:

конверсионный лабораторном десантно-страница

 

И, когда вы нажимаете этот CTA, проверьте, как выглядит форма:

Дизайн главной страницы 121

 

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

Идеи/ Дизайн главной страницы

Хорошо оптимизированная главная страница может превратить  клиентов в потенциальных клиентов, собирая информацию, которая поможет вам лучше понимать, продвигать и радовать посетителей. Поскольку целевые страницы имеют решающее значение для конверсий, важно убедиться, что они хорошо спланированы, разработаны и выполнены .Вот несколько вещей, которые следует учитывать при создании целевых страниц:Привлекательная эстетика: может помочь только цвет вашей целевой страницы и чистый пользовательский интерфейс. Посетители захотят узнать больше о ваших продуктах и ​​увидеть доказательства ценности, которую вы предлагаете. Взгляните на №10 в нашем списке — Inbound Emotion — за отличный пример потрясающей веб-страницы.
Меньше значит больше: пусть предложение или изображения делают большую часть разговоров, но обязательно включите в них любые и все описательные заголовки и вспомогательный текст, чтобы сделать вашу целевую страницу понятной и убедительной. Это касается практически всех компонентов на странице: пробелы, простое копирование и более короткие формы.

Дизайн главной страницы

Держите посетитель на странице: При удалении главной навигации или любых отвлекающих обратных ссылок, это менее вероятно , будет каким -тем свинец трения поколения , которые могли бы привести посетителям отказаться от вашей страницы.
Обмен в социальных сетях. Простой способ привлечения посетителей к вашей целевой странице — это использование кнопок общего доступа всоциальных сетях, чтобы они могли распространять ваш контент среди своих подписчиков в социальных сетях. В конце концов, клиенты являются центром вашего маркетингового маховика.
A / B-тестирование: целевые страницы важны для правильной работы, и, поскольку психология потребителей иногда может удивлять, всегда лучше экспериментировать с различными версиями ваших страниц, чтобы увидеть, какая из них имеет самый высокий коэффициент конверсии (CVR). Проверьте позиционирование предложения, виды CTA или даже цветовую схему.
Call-To-Action: CTA , где мясо на целевой странице, или переломное , где перспектива стать контактами. CTA могут попросить посетителей подписаться, загрузить, заполнить форму, поделиться в социальных сетях и т. Д., Но в целом CTA необходимы для более активного вовлечения вашей аудитории в ваше предложение. Для генерации лидов CTA должны быть смелыми и привлекательными, но самое главное, они должны эффективно передавать ценность.

АЗБУКА