5 ознак хорошого лендинга

18

Від автора: лендінгем пейдж відіграє вирішальну роль при формуванні першого враження у відвідувачів вашого сайту. Враження може бути як позитивним, так і негативним. Саме тому важлива кожна деталь в прагненні зберегти інтерес користувачів.Нижче я описав 5 ознак хорошого лендинга, а також навів приклади. Всі приклади взяті з Envato Elements, сервісу, що надає безмежний доступ своїм передплатникам до величезної бібліотеці шаблонів, шрифти, аддонов і елементів дизайну. І все це за плату раз на місяць.

1. Ясний заклик до дії (CTA)

Єдина мета лендінгем пейдж – це схилити до дії. Дія може полягати в спробі зв’язатися з вами, скачуванні файлу або здійсненні покупки – простий, ясний заклик до дії або CTA допоможе підвищити конверсію.

Hype — HTML/CSS лендінгем пейдж з привабливими та читабельні CTA-елементами. Заклик до дії починається прямо в шапці сторінки і складається з заголовка, яскравих кнопок і красивого зображення. Як користувач, вам не потрібно замислюватися, про що сторінка – все відразу зрозуміло.

5 ознак хорошого лендинга

2. Поділ секцій з контентом

У кожній секції на лендінгем пейдж має бути свій простір. Крім відступів для візуального розділення можна використовувати фон і зображення. Такий підхід не перевантажує користувача інформацією і не відволікає його під час перегляду. Односторінкові сайти з великим успіхом використовують цей підхід і роблять чіткий поділ між секціями за допомогою якорів.

Шаблон PURE – чудовий приклад. У ньому використовується комбінація відступів, фонів і фотографій для виділення розділів. Ще один приємний штрих – навігаційні точки праворуч, за допомогою яких користувачі можуть за раз прокручувати цілі розділи. Це дійсно допомагає зосередитися тільки на контенті.

5 ознак хорошого лендинга

3. Чистий і стиснений текст

Чим простіше користувачам читати і аналізувати контент вашого лендинга, тим вище ваші шанси на успіх. Використовуйте читаються шрифти з нормальними відступами між літерами та адекватної висотою рядка. Бажано уникати довгих блоків тексту. Контент, який потрапляє в саму суть, набагато ефективніше і виглядає краще.

Advent – шаблон лендинга з потужним макетом. В шаблон входить добре виконаний шрифт (хоча в окремих розділах не завадило б додати більше контрасту, це можна легко поправити CSS) і стиснений контент. Подивіться демо сторінки, це те, що потрібно.

5 ознак хорошого лендинга

4. Використовуйте візуальну інформацію

Крім стислого і ясного тексту ваше повідомлення можна донести через зображення. Це можуть бути фотографії, діаграми, графіки або інфографіка. Такі візуальні елементи часто набагато краще передають зміст тексту.

Ex Watch – прекрасний приклад лендинга, використовує різні елементи для візуального інформування користувачів. У цьому шаблоні є діаграмні фотографії товарів, іконки, привертають увагу до конкретних функцій, а також приваблива анімація. На відміну від простого відображення інформації, такий шаблон візуально привабливий і розповідає цілу історію.

5 ознак хорошого лендинга

Як бонус, потрібно додати, що членам Envato Elements доступно безліч подібних візуальних елементів. Подивіться їх колекції інфографіки, іконок і векторних зображень. Вони можуть дуже стати в нагоді в створенні зовнішнього вигляду та повідомлення, яке ви хочете передати користувачам.

5. Приємні колірні схеми

Використання кольору – безумовно, справа смаку. Проте варто зауважити, що лендінгем з user-friendly квітами простіше використовувати і розуміти. Колірне розмежування в елементах навігації і висококонтрастні співвідношення – це простий спосіб поліпшити UX.

Подивіться на Landify, шаблон використовує виділяється колірну палітру. На сторінку приємно дивитися, а CTA-елементи чітко видно на шаблоні. В деякому відношенні, вид дуже простий, але саме це і робить лендінгем таким ефективним.

5 ознак хорошого лендинга

Ваше повідомлення доставлено!

Лендінгем пейдж можна використовувати в різних тематиках, однак деякі елементи повинні бути скрізь. Необхідно переконатися, що шаблон приємний оку, і йо
го легко використовувати. Лендінгем повинен розповідати користувачеві історію і вести його до дії. Представлені шаблони з сайту Envato Elements допоможуть вам у цьому.