Дизайн головної сторінки (або домашньої сторінки) – це візуальне та структурне оформлення першої сторінки веб-сайту, яку відвідувачі бачать під час першого відвідування сайту. Головна сторінка відіграє ключову роль у створенні першого враження про сайт та допомагає відвідувачам знайти потрібну інформацію або навігувати далі по ресурсу.
1. Shopify Дизайн головної сторінки
Як і багато інших головних сторінок у цьому пості, пробна цільова сторінка Shopify робить його простим. Наприклад, заголовок, орієнтований на користувача, - це лише кілька слів, а сторінка спирається на прості маркери, а не на абзаци, для передачі деталей та переваг випробування. Є лише кілька полів, які потрібно заповнити, перш ніж почати. Все це полегшує завдання: продавати онлайн за допомогою свого інструменту.
2. Мuzzle Дизайн головної сторінки
Цільові сторінки допомагають користувачам вирішити, чи коштує ваш продукт чи послуга їх дорогоцінного часу та енергії. Що може бути краще, щоб чітко і прямо донести вашу ціннісну пропозицію, ніж зіставити відвідувачам із самою проблемою, яку вирішує ваш додаток?
Коментарі в Instagram отримати більше
Морда, Mac-додаток, який змушує мовчати екранні повідомлення, повністю охоплює це шоу, не сказавши менталітету на їх мінімальній цільовій сторінці. Відвідувачів цієї сторінки зустрічає швидкий вогонь незручних повідомлень у верхньому лівому кутку екрана. Анімація не тільки весела, а й переконливо передає корисність програми без довгих описів.
3. TransferWise Дизайн головної сторінки
TransferWise дозволяє відправляти та отримувати гроші в різних валютах, а його цільова сторінка, показана нижче, розділяє кожну окрему дію, тому вас не відволікають варіанти, які до вас не належать.
Якщо ви бажаєте надіслати гроші, ви можете заповнити форму для переказу. Щоб отримати гроші, просто перейдіть на середню вкладку і, щоб передплатити TransferWise, використовуючи свою дебетову карту, перейдіть на крайню праву вкладку.
Кожна вкладка на цій цільовій сторінці створює свій заклик до дії залежно від того, на що ви підписуєтеся — кожна з них у яскравій зеленій рамці, щоб виділити наступний крок після трьох можливих початкових точок.
4. Airbnb Дизайн головної сторінки
Щоб допомогти конвертувати відвідувачів у хости, Airbnb пропонує деяку привабливу персоналізацію: приблизний прогноз середнього заробітку в залежності від вашого розташування. Ви можете ввести додаткову інформацію про ваше потенційне розміщення в полях, щоб отримати ще більш індивідуальну оцінку.
Якщо ви вже відвідали сторінку, в якій вже переконалися, то чіткий заклик до дії в верхній частині сторінки дозволяє легко конвертувати на місці.
5. Teambit
химерне зазвичай не перше слово, яке спадає на думку, коли ви думаєте про програмне забезпечення для HR, але наочна цільова сторінка Teambit саме така. Проста форма з одним полем супроводжується чудовим офісом, повним персонажів тварин - всі вони дуже задоволені Teambit, якщо вам цікаво. Мультфільм тварин з'являється поряд з кожним інформаційним розділом цільової сторінки, змушуючи відвідувачів прокручуватися вниз, щоб дізнатися більше. Дизайн головної сторінки
цільова сторінка Teambit є чудовим доказом того, що вам не потрібно мати «кумедний» продукт чи послугу, щоб створити кумедну цільову сторінку.
6. Wistia Дизайн головної сторінки
Насамперед, це цільова сторінка Wistia для їхнього безкоштовного облікового запису Wistia. Відразу ж ви помітили форму з одним полем для створення облікового запису – синій фон з мінімальним малюнком чудово контрастує з яскраво-білим полем форми.
Довжина поля форми в поєднанні з помітним розміщенням усуває практично всі тертя при створенні облікового запису … але якщо у вас є сумніви, ви завжди можете прокрутити нижче, щоб прочитати відповіді на запитання, що часто задаються. Поділяючи ці дві частини яскравим контрастом кольору, Wistia значно спрощує процес конвертації.
7. Webflow. Дизайн головної сторінки
Webflow, інструмент дизайну для веб-розробників, упаковує багато інформації в GIF і три поля форми. Приємно було б мати всю реєстраційну форму в одному рядку — вона не тільки робить сторінку коротшою, а й заповнює кожне поле ліворуч, показує користувачам, наскільки вони близькі до натискання четвертої синьої кнопки та отримання почалося безкоштовно.
Анімований GIF під формою відображається в тому ж фреймі на веб-сайті, тому користувачі можуть бачити, як працює продукт, и зареєструватися без прокрутки або переходу на нову сторінку.
Дизайн головної сторінки електоронних книг
8. Nauto Дизайн головної сторінки
Науто, платформа даних для самостійного водіння автомобілів, допомагає зробити автономне керування більш безпечним для компаній, які керують автопарком. Звичайно, його клієнтам знадобиться вся інформація для продажу на цій платформі. У Nauto вона є в супер-простий електронної книгичия цільова сторінка дає вам коротку форму для контактів і статистику попереднього перегляду, щоб довести, чому цей ресурс так важливий.
Зелена кнопка «Завантажити зараз», можливо, навіть була навмисне (в кінці кінців, зелений означає «йти»).
Прокрутіть вниз, і ви побачите ще один CTA «Отримати електронну книгу», щоб нагадати користувачам, що на них чекає. Ви також побачите три різких статистичних даних про автомобільні аварії, щоб спонукати користувачів дізнатися більше. Перевірте це нижче.
9. Промисловий сильний маркетинг Дизайн головної сторінки
Ця цільова сторінка відразу ж приваблює мене чарівним, різким заголовком: "Не змушуй мене збільшувати". Це прямо говорить про загальний досвід, який відчуває більшість із нас, коли ми переглядаємо свої телефони або планшети — і це теж трохи нахабно.
Але це не єдине, що мене зацікавило цією цільовою сторінкою. Зверніть увагу, як стратегічно розташований червоний колір: він знаходиться вгорі та внизу форми, притягуючи вас ще ближче до події конверсії.
Крім того, цей дизайн мета для завантаження: він виглядає і відмінно працює на мобільних пристроях. Майте на увазі, що багато відвідувачів будуть отримувати доступ до ваших цільових сторінок на своїх смартфонах або планшетах, і якщо дизайн вашого сайту їм не підходить, вони можуть здатися та залишити вашу сторінку.
Фахівці Industrial Strength Marketing зробили поле шрифтів і форм досить великим, щоб відвідувачам не доводилося, наприклад, масштабувати, щоб читати та взаємодіяти з контентом.
10. Velaro Live Chat
Іноді найменші деталі мають найбільше значення. Наприклад, саме вони роблять цільову сторінку Velaro Live Chat приголомшливою.
Цей маленький символ PDF над зображенням об'єкта допомагає визначити, у якому форматі завантажуватиметься. Стрілка перед підзаголовком допомагає ще більше звернути увагу на важливу копію, яку гості хочуть прочитати. Як і IMPACT, у них також є автоматично встановлений прапорець для підписки на розсилку новин у їх формі — який, якщо перетворити його на додатковий прапорець, є відмінним способом збільшити кількість передплатників . Всі ці дрібні, начебто, незначні деталі допомагають скласти солідний, чудовий дизайн цільової сторінки. Дизайн головної сторінки
11. IMPACT Брендинг та дизайн / Дизайн головної сторінки
Головна сторінка ВПЛИВ Довгий час були джерелом натхнення для дизайнерів. Мені подобається простий макет сторінки, від великої копії заголовка та докладного зображення, до контуру, що оточує форму, до кольорів та шрифтів, які дуже приємні для очей.
Безкоштовний посібник IMPACT пропонує для завантаження тут, також не виділяє саме завантаження у синій кнопці, яка дозволяє вам відправити заповнену форму. Швидше, IMPACT запрошує вас "генерувати більше конверсій" - зосередивши увагу на тому, що ви можете отримати в результаті читання посібника.
Цільові сторінки, щоб дізнатися більше
12. Відмежуйся
Не дивно що Unbounce знаходиться у верхній частині цього списку - вони дійсно написали книгу про створення цільових сторінок, що високо конвертують. Хоча на цій цільовій сторінці є багато дивовижних речей, мені дуже подобаються дві: 1) використання вікна чату замість класичної форми та 2) докладна – але добре упакована – інформація під формою / Дизайн головної сторінки
Перший допомагає звернути увагу на ціль сторінки - для вас, щоб заповнити форму - таким чином, що це ненав'язливо і не схоже на рутинну роботу. Друга дає цій сторінці підвищення SEO (у пошукових систем буде більше контенту для сканування) та знімає занепокоєння з боку людей, яким потрібно дізнатися більше про частину контенту перед передачею їхньої інформації, не відволікаючи людей від вікна чату.
13. Bills.com. Дизайн головної сторінки
Часто люди думають, що цільові сторінки є статичні сторінки на вашому сайті. Але з правильними інструментами ви можете зробити їх інтерактивними та персоналізованими.
Візьміть приклад нижче з Bills.com. Щоб дізнатися, чи виграєте ви від їхньої консультації, дайте відповідь на три запитання, перш ніж вам покажуть форму. Це починається з цього:
Потім ви відповідаєте ще на два питання, як на наведеному нижче:
І ось остання форма цільової сторінки, де ви заповнюєте свою інформацію:
Я не впевнений, як працює алгоритм (або якщо він взагалі є), але, поки я його заповнював, у мене було деяке занепокоєння з приводу НЕ кваліфікації. Як тільки я дізнався, що я зробив, я був схвильований заповнити форму, яка, я впевнений, більшість людей, які мають борги і використовують цей інструмент. Зробивши цю пропозицію ексклюзивнішою, поки форма не з'явилася на цільовій сторінці, можу посперечатися, що Bills.com значно збільшив конверсію.
14. Trulia Дизайн головної сторінки
Trulia зробила щось схоже на Bills.com зі своєю цільовою сторінкою. Він починається з простої форми, що запитує «адресу» (яка звучить менш моторошно, ніж «ваша адреса», хоча саме це вони і мають на увазі). Під цим простим полем форми знаходиться яскраво-жовтогаряча кнопка, яка добре контрастує із зображенням героя за формою і підкреслює, що оцінка буде персоналізована для вашого будинку.
Звичайно, самої адреси не вистачить, щоби оцінити вартість будинку. Це просто позначає околиці будинку. Ось чому на наступній сторінці наводяться додаткові питання про саму власність, наприклад, про кількість ліжок та ванн. Нижче ви бачите копію «Скажіть нам, куди надіслати звіт» — із заявою про відмову від відповідальності, що, вводячи цю інформацію, ви погоджуєтесь зв'язатися з агентом з нерухомості. Це чудовий приклад того, як компанія цінує своїх відвідувачів із самого початку, одночасно визначаючи очікування відвідувачів щодо того, що станеться в результаті.
15. Landbot Дизайн головної сторінки
Ландбот, сервіс, який створює цільові сторінки на основі чат-ботів, розміщує свій власний продукт у центрі своєї цільової сторінки на основі чату. Відвідувачів зустрічає доброзичливий бот — у комплекті зі смайликами та GIF-файлами — який закликає їх надавати інформацію у діалоговому форматі, а не у традиційній формі.
16. Webprofits
Для невеликого контрасту ... як щодо довгих цільових сторінок? За допомогою всього лише кількох хитрощів ви можете зробити навіть найдовшу цільову сторінку короткою. Цільова сторінка Webprofits нижче показує, як це зробити. Дизайн головної сторінки
Праворуч вгорі є помітна кнопка CTA, щоб дізнатися більше – з гарним контрастом на тлі, щоб він виділявся, та стрілкою вниз, щоб заохотити прокручування. Не розміщуючи поля форми заздалегідь, вони допомагають зменшити тертя і надають відвідувачам можливість дізнатися більше, перш ніж їм буде запропоновано опцію перетворення.
Вони також дозволяють вам зрозуміти, що насправді робить Webprofits . На решті сторінки подано детальну інформацію про те, що ви отримаєте, коли передасте свою інформацію. Крім того, він включає стратегічні CTA, які допоможуть вам повернутися нагору, щоб заповнити форму, наприклад «Let's Talk».
17. H.BLOOM
Іноді потрібно просто зупинитися та помилуватися цільовою сторінкою за те, що вона гарна. При використанні фотографії з високою роздільною здатністю та великої кількості порожнього простору на цільову сторінку H.BLOOM приємно дивитися.
Крім своєї краси, на сторінці є кілька чудових елементів конверсії: форма над головою, чіткий та короткий опис того, що станеться при заповненні форми, і навіть яскраво-жовтогаряча кнопка «Надіслати». Єдине, що ми змінимо? Копія на кнопці «Надіслати» — це може бути більш конкретним для пропозиції. Дизайн головної сторінки
18. Conversionlab
Хоча я не став включати приклад посту з формою в пост про цільові сторінки, цей сайт особливий. Домашня сторінка - Це весь сайт - навігаційні посилання просто приведуть вас до наведеної нижче інформації. Дизайн головної сторінки
Коли ви натискаєте "Отримати довідку за цільовими сторінками", весь сайт переміщається, щоб звільнити місце для форми. Ось як це виглядає, перш ніж натиснути:
І, коли ви натискаєте цей CTA, перевірте, як виглядає форма:
Мені подобається, що вам не потрібно залишати сторінку, щоб заповнити форму, але форма не буде нав'язливою для випадкових відвідувачів сайту.
Ідеї / Дизайн головної сторінки
Добре оптимізована головна сторінка може перетворити клієнтів на потенційних клієнтів, збираючи інформацію, яка допоможе вам краще розуміти, просувати та радувати відвідувачів. Оскільки цільові сторінки мають вирішальне значення для конверсій, важливо переконатися, що вони добре сплановані, розроблені та виконані. Ось кілька речей, які слід враховувати під час створення цільових сторінок:Приваблива естетика: може допомогти тільки колір вашої цільової сторінки і чистий інтерфейс користувача. Відвідувачі захочуть дізнатися більше про ваші продукти та побачити докази цінності, яку ви пропонуєте. Погляньте на №10 у нашому списку — Inbound Emotion — за чудовий приклад чудової веб-сторінки.
Менше означає більше: нехай пропозиція чи зображення роблять більшу частину розмов, але обов'язково включіть у них будь-які і всі описові заголовки та допоміжний текст, щоб зробити вашу цільову сторінку зрозумілою та переконливою. Це стосується практично всіх компонентів на сторінці: пробіли, просте копіювання та більш короткі форми.
Дизайн головної сторінки
Тримайте відвідувач на сторінці: При видаленні головного меню або будь-яких відволікаючих зворотних посилань, це менш імовірно, буде яким-тим свинець тертя покоління, які могли б привести відвідувачам відмовитися від вашої сторінки.
Обмін у соціальних мережах. Простий спосіб залучення відвідувачів до вашої цільової сторінки - це використання кнопок загального доступу всоціальних мережахщоб вони могли розповсюджувати ваш контент серед своїх передплатників у соціальних мережах. Зрештою, клієнти є центром вашого маркетингового маховика.
A / B-тестування: цільові сторінки важливі для правильної роботи, і оскільки психологія споживачів іноді може дивувати, завжди краще експериментувати з різними версіями ваших сторінок, щоб побачити, яка з них має найвищий коефіцієнт конверсії (CVR). Перевірте позиціонування пропозиції, види CTA або навіть колірну схему.
Call-To-Action: CTA, де м'ясо на цільовій сторінці, або переломне, де перспектива стати контактами. CTA можуть попросити відвідувачів підписатися, завантажити, заповнити форму, поділитись у соціальних мережах і т. д., але загалом CTA необхідні більш активного залучення вашої аудиторії у вашу пропозицію. Для генерації лідів CTA мають бути сміливими та привабливими, але найголовніше, вони мають ефективно передавати цінність.
Залишити коментар