Креативний дизайн лендінг. Приклади лендингу, що продає (landing page)

Велика кількість лендингів у рунеті дуже одноманітні, а завжди необхідно створювати щось нове та незвичайне.

Нижче ми розглянемо ТОП-10 лендингів, які грамотно складені і які варто аналізувати, а потім застосовувати фішки на своїх лендингах.

Є певна структура landing page, що працює. Це можуть бути як довгі лендинги, так і поміщатися у 2 екрани.

Єдиної думки немає і не може бути. У кожному разі необхідно виходити із цільової аудиторії на сайті.

Отже, ось приклади 10 лендингів, що продають, які варто обов'язково вивчити:

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

Це більше компанії і продають елементи на сторінках добре опрацьовані, тому варто провести детальний аналіз цих пейдж, що продають лендинг.

Якщо хочете не просто зробити гарну картинку зі свого сайту, але щоб вона ще й працювала, тоді рекомендую вивчити. Воно може давати більше заявок із меншим бюджетом. Обов'язково вивчіть!

Приклади кращих Landing Page

1 Shopify

Дуже короткий лендінг пейдж, на якому пропонують скуштувати безкоштовно продукт протягом 14 днів.

Заголовок: короткий та ємний, складається з кількох слів.

Переваги: ​​представлені у вигляді 3-х пунктів, де присутні цифри (це дуже важливо, тому що привертає увагу і дає конкретні дані, без «води»)

Покрокова форма заявки:вони не показують одразу форму.

Перший крок – ви заповнюєте поле з email:

Другий крок — пропонують заповнити ще 2 поля з паролем та назвою свого інтернет-магазину:

Зверніть увагу на порядок заповнення. Вам не показують одразу всі поля, бо це знижує конверсію, а поступово показують ще поля, як у квізі.

Що ще є: наприкінці сторінки ще один заклик до дії:

2 Duolingo

Наступний наш піддослідний це сервіс з вивчення іноземних мов Duolingo.

Заголовок: дуже короткий заголовок, як і в попередньому прикладі.

Покрокова форма заявки:на першому також знаходиться 2 кнопки.

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

А зараз починається найцікавіше, коли ви натискаєте на кнопку «Почати»:

Ви потрапляєте на запитання, де потрібно вибрати мову.

Це питання є дуже природним і на нього легко відповісти, коли у вас є намір пройти вивчити іноземну мову.

Потім потрібно вибрати мету вивчення мови:

Залежно від цього вибудовуватиметься програма навчання для вас.

Наступне питання про те, скільки часу на день ви зможете приділяти вивченню:

Ще одне питання, де потрібно відповісти, є новачком або щось уже вчили:

Вам не показують форму, де потрібно відповісти на одній сторінці на 7-8 питань, а поступово залучаючи до процесу показують питання.

Що ще важливо, питання складені в логічному порядку і не виникає непорозуміння, відповісти дуже легко.

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

3 Airbnb

Як ви вже зрозуміли будь-яку інформацію на лендинг можна представити в дуже зручному покроковому вигляді.

Але не тільки продає інформацію, а й коли ви хочете розповісти і показати свій продукт.

Багато хто досі змушує на сторінках, що продають, читати велика кількістьтексту (і це не у вигляді сторителлінгу).

З цим прикладом від Airbnb ви побачите як можна лаконічно показати людині велику кількість інформації та провести невеликий навчальний курс.

Це одна з послуг Airbnb, де ви можете зробити для гостей щось більше, ніж просто екскурсію (вони назвали це «Враження»).

Щоб зареєструватися для участі у цій програмі, вам необхідно натиснути кнопку «Почати» і вас перенаправить на початок:

І лише потім пропонують зареєструватися та створити своє «Враження»:

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

4 Black Negative

Відмінною рисою даного сайту перед рештою є його нестандартна прокрутка. Як Ви могли помітити, вона горизонтальна. Також переміщення відбувається за допомогою перетягування контенту вліво. Але що ще більше вражає – це кількість ефектів у кожному блоках: , , а також вертикальне прокручування блоків. Відео на фоні трохи збиває, але все ж таки виконано все досить оригінально і незвичайно.

5 Super Top Secret

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

6 WE AIN'T PLASTIC

У процесі прокручування на сторінці з'являються (малюються) різні іконки та заголовки. Не усвідомлюючи, починаєш дивитися на процес малювання і чекати що ж там з'явиться в кінці, тим самим читаючи текст, який намалювався. Якщо Вам цікаво як створюється даний ефект і Ви хочете створити такий же ефект на своєму сайті або лендингу, тоді вивчіть дані статті: і .

7 ANTON & IRENE

8 BLITZ

9 The Boat

Якщо при прочитанні книги Вам важко уявити, що там відбувається, тоді даний сайт для Вас 🙂 . Тому що тут Ви можете відразу читати і бачити сюжет, тому що на тлі відбувається те, що написано текстом. Тобто в міру прокручування сторінки та читання тексту змінюється і тло сайту.

Цікавий задум. Хто знає, може, найближчим часом такі історії почнуть з'являтися у великих масштабах. Звичайно, є плюси і мінуси цього підходу, але те, що це креативно зроблено — немає претензій.

Бонусний лендінг

* An deiner Seite

Це не зовсім лендинг, що продає, але щоб вас трохи надихнути і направити думки в бік креативу цей кліп обов'язковий до перегляду!

Коли ви потрапите на цей сайт вам необхідно утримувати кнопку пробілу, щоб почати.

Тут розповідається 2 історії та вам необхідно зібрати всі елементи для того, щоб дізнатися правду 🙂 . Ви як детектив, де потрібно не просто бачити гарну картинку, а й розуміти, що ховається за нею.

Не розповідатиму більше нічого, переходьте і дивіться самі. Задумка чудова, обов'язково відпишіть у коментарях чи зійшлися ваші припущення на початку перегляду та наприкінці.

І так, щоб побачити різні кінцівки - доведеться переглянути це відео кілька разів 😉 .

Висновок

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

Геннадій Горбачов

Почну з найважливішого: Головна задачапродає лендинг пейдж - змусити відвідувача зробити корисну для власника дію. Тому на посадочній сторінці повинні враховуватися і поєднуватися такі важливі фактори:

1. інстинкти руху очей користувача при перегляді сторінки (F-патерн);
2. позитивне перше враження за допомогою, що впливає на підсвідомість, дизайн та креативність;
3. переконливий контент.

Однією фразою – багато в чому успішність лендінгу пейдж залежить від тригерів!

Тригери - це психологічні та хитрі прийоми, що мотивують до невідкладної дії. Саме вони вийшли на перший план для привернення уваги до товару чи послуги в епоху скептичного ставлення нового покоління до реклами.

Все більшій кількості людей викликають огиду шаблонні висловлювання і добрі фрази, на кшталт «Працюємо на результат» або «Супер ціна» відповідно. Навіть якщо ваш продукт сильно зацікавить потенційного клієнта, ненав'язування може відлякати його.

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

У статті підібрано 5 найкращих лендингів, що продають, російською мовою, які до мозку кісток викликають захоплення. Докладніше про кожного читайте нижче!

Приклади найкращих посадочних сторінок

Лендінг Morewishes.ru

Компанія «morewishes.ru» надає акваріуми-автомати для встановлення їх у торгових центрах у рамках співпраці з франшизи. При цьому підприємець отримує пасивний дохід і протягом року зможе віддати, взятий для своєї справи, кредит.

Грамотний лендинг пейдж компанії володіє високим потенціалом, що продає, з широкого ряду причин:

• Пояснено вигоди від бізнесу однозначними тригерами.

• Показано емоції, які приносить акваріум людям, у відеоролику.
• Використовується прийом недомовленості, який мотивує відвідувача залишити свої контактні дані в обмін на отримання індивідуального бізнес-плану.

• Дано гарантію повернення грошей.
• Використовується тригер "Зробимо за вас".

• Викликає почуття стадності «115 акваріумів вже приносять стабільний прибуток власникам» та причетності до благодійності «Внесіть свій внесок у захист навколишнього середовища».
• Створено крутий мальований дизайн і використовуються синій та жовтий кольори оформлення, що створюють спокійну, стабільну атмосферу та наповнюють відвідувачів оптимізмом та щастям.

Лендінг Скаженасушка.рф

Проект має вже понад 17 сезонів і популярний серед більшості жінок, на яких і націлений ґрунтовно продуманий лендинг. Інвестиції в рекламу та піар «Скаженого сушіння» обчислюються мільйонами, але раніше був успішно розроблений висококонверсійний сайт зі спектром креативних тригерів для прискореної окупності витрат. Розберемо по порядку.

• Застосовується гейміфікація – ігровий сценарій із завданнями для залучення користувачів, підвищення їхньої залученості до продукту за допомогою вимірюваних та досяжних завдань та цілей. Як нагороди в «Шаленій сушці» використовуються справжні гроші та матеріальні цінності, що багаторазово посилює ефект від тригера.
• Використовується інтрига зі зіставленням ціни, що вказує альтернативний спосібвитратити гроші замість того, щоб заплатити за участь у проекті.

• Показано результати учасників минулих сезонів у стилі «До/Після».

• Вказується масштаб події та історія.

• Ефектний мальований дизайн та помаранчевий колорит заповнює відвідувача енергією та веселощами.

Лендінг Moscowfreetour.ru

Компанія «МоскоуФріТур» організовує екскурсії по столиці Росії для будь-якої кількості людей незалежно від їхньої національної приналежності та соціального класу. Як і попередні кращі лендинги, зазначені у статті, сторінка «МоскоуФріТур» виділяється комплексом інструментів, що викликають у відвідувачів бурхливі емоції та конвертують їх у продажі. Читаємо.

• Посилання на рейтинг, рекомендації клієнтів, 5-зіркові відгуки та премії від Tripadvisor.

• Реалізовано анімаційну кнопку, яка привертає увагу відвідувача і спонукає до дії у вигляді заявки на екскурсію.
• Тригер безкоштовності – landing page обіцяє 2.5 години безкоштовного перегляду найголовніших місць Москви та відповідає на запитання «чому безкоштовно?», і це не важливо!

• Тригер довіри. Фотографії з усмішками туристів, які побували на екскурсії, та команди організатора зводять до мінімуму сумніви в обмані.
• Метод повторення. Якщо помітити, екран із формою «записатися на безкоштовну екскурсію» повторюється 3 рази та додатково фіксується до верхньої частини лендингу при скролінгу. Такий задум мінімізує час для пошуку форми в самий пік рішучості та дозрівання користувача — з меншою ймовірністю він не побачить, як залишити заявку, і піде з сайту.
• на високому рівніфункціонал та дизайн.
• Індивідуальність, що дозволяє задовольнити бажання клієнта у неповторності та ексклюзивності. Організатор екскурсій може врахувати будь-які побажання.

Лендінг з навчанняSMM

Курсон – освітня платформа з відео-курсами з HR, управління проектами, контент-маркетингом, SMM та іншими напрямками. Для її лендінг пейдж був розроблений контент із завданням набору слухачів навчального курсу із соціального медіа-маркетингу (SMM). Сайт повністю виправдав очікування творців та показав дуже високий коефіцієнт конверсії з відвідувачів у клієнти (12%). За рахунок чого?

• Переконливі заголовок та підзаголовок на першому екрані, що натякають на вигоду від курсу та легкість отримання знань.

• Гумористичний тригер, що змушує принаймні посміхнутися від фрази «…ви ризикуєте вирушити за динозаврами» і задає позитивну тональність. Після цього людиною краще сприймається інформація, вказана після жарту.

• Використовується професійний відео контент дієвий спосібпередачі інформації та атмосфери. При цьому у фразі "записалися вже 492 людини" закладено тригер стадності, що мотивує користувача не відокремлюватися від соціуму.

• Блискуча ідея, через яку цей лендинг потрапив у топ найкращих, — злиття трьох тригерів: зіставлення ціни запису на SMM курс з іншими навчальними заходами (червоні блоки), вигоди (зелений блок) і несподівана знижка, обмежена за часом. Дивіться, що вийшло!

• Тригер страху змушує потенційного клієнта, якщо не злякатися, то принаймні відчути дискомфорт від можливості упущення вигоди і змушує швидко і майже несвідомо слідувати за задуманою творцем схемою. До таких хитрощів відносяться таймери знижок (на скріншоті вище) і ось такий варіант:

Лендінг з вибухових продаж та маркетингу

Ілля Балахнін – відомий та харизматичний маркетолог, засновник агентства реклами Paper Planes, який любить у свої конференції включати гумор та цікаві зіставлення. Так ось для залучення слухачів програми «Вибуховий маркетинг та продаж» у місті Краснодар його команда здійснила дуже креативний задум. Був розроблений лендінг пейдж із неймовірним тригером.

• Тригер індивідуальності «Ми не будемо як усі» та переконливі вигоди для слухача.

• Елемент недомовленості з взаємною користю. Відвідувачу, який виконав цільову дію, надішлють чек-лист маркетингу для свого бізнесу, а Ілля Балахнін отримає контактні дані.

• І ось родзинка та привід, який спонукав включити лендінг пейдж Іллі Балахніна в ТОП 5 найкращих. Спостерігаємо! P.S. Коли сторінка вже мала закінчитися і перестати скролитися, настає найцікавіше – можна ще гортати, і це не глюк!

Ще перегортається…

Спускаємось ще нижче…

Висновок

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

Якщо вам сподобалася стаття, і ви потребуєте продовження відбору найвидатніших тригерів, що продають, знайдених в мережі Інтернет, пишіть в коментарях і розшаруйте цей матеріал. Аргументовані негативні відгуки також вітаються. Читайте наш блог – будьте в тренді інтернет-маркетингу та сайтобудування.

Продають сайти. Що це таке? Кожен другий скаже: "Звичайно ж, це лендінг!". Вони ж односторінники, вони ж лендінг пейдж, вони продають сторінки.

Переконувати Вас у протилежному не буду, адже у цих словах велика частка правди. Тому в цій статті ми розберемо якісь лендинги можна назвати кращими і чому.

Саме тому я почав шукати найкращі сайти, що продають. Де подивитися їхні приклади, рейтинги та як їх оцінити в принципі. Адже спочатку односторінковий сайт був придуманий для того, щоб збільшити продаж компанії.

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

Критерії оцінки сумнівні

За яким принципом оцінювати? Які брати за основу? Як скласти рейтинг ТОП-10 сайтів?

Де взяти сайти на конкурс? Все це ускладнює ситуацію у створенні справжнього та чесного рейтингу найкращих сайтів.

До того ж ми не знаємо скільки продажів компанії здійснюють через подібні сайти. Їм же не можна зателефонувати і запитати: "А яка у вас?" або “Скільки Ви отримуєте заявок із?”.

Я впевнений, ніхто не відповість на таке запитання, тому що або ніхто не рахує, або скаже, що це конфіденційна інформація.

Тож я зробив простіше. Став шукати та переглядати рейтинги та добірки найкращих лендингів. І знаєте, що?

Сайт довго завантажується, а це може дуже вплинути на показник відмов. Тобто люди будуть йти з нього швидше, ніж побачать пропозицію.

2. Майстерня "Dinero"

Це не сайт, це цілий фільм про один “персонаж” – дерев'яний гаманець. Якби він коштував 1000-2000 р., то сайт би провалився.

6. Проект "Велика сушка"

Більшість жінок (їхня цільова аудиторія) чули про проект “Скажене сушіння”. Їхня реклама до запуску заполонює весь інтернет. І це не дивно, коли мільйони інвестуються на трафік.

Але без хорошого сайту отримати десятки мільйонів виручки не вийде, тому їхній сайт також входить у наш ТОП.

Видно, що до створення підходили ґрунтовно, чого тільки одні тексти варті. Але тільки зробили вони одну велику помилку - не зробили кнопку призову в самому кінці.

А це впливає на відтік відвідувачів через те, що вони не бачать логічного закриття всієї історії.

7.

Ми самі користуємося системою взаємин із клієнтами Бітрікс24. Але так як у нас тема не , то сайт системи Мегаплан перевершив всі очікування.

Вони через нього донесли всі головні моменти своєї системи, після чого ти розумієш, що це найкраще для бізнесу.

З наших побажань щодо покращення – додати відео-огляд системи, тому що у всіх прямих конкурентів він є. І також зробити більш зрозумілі заклики, а саме, замінити заголовки (не кнопки) на “Почніть користуватися безкоштовно” або щось таке.

До речі!Якщо Ви хочете використовувати як свою CRM-систему, то раджу не забути промо-код “Megastart”. Так Ви отримаєте знижку на першу покупку 10% та 14 днів безкоштовного використання.

8. Банк для підприємців "Точка"

Ще один лендінг від банку. Він здобуває премію за свою оригінальність. Ця сторінка розсилається своїм друзям як реферальне посилання.

Для посилення ефекту ми додали б ще кілька блоків, які тиснуть на логіку. Оскільки зараз сайт більше спрямований на емоції. У деяких випадках це могло бути правильним рішенням, але оскільки ми маємо вибір банку, то одними емоціями тут не обійтися.

9. Оснащення тренажерних залів "Goodfit"

Цікавий перехід сайту з чорної гами до білої з блакитним. Але, крім цікавого дизайнерського рішення, в даному лендингу використовується чудова гра заголовків.

У цьому виконанні вони не підведенням до блоку, а самостійними елементами, прочитавши які, можна створити повну картину.

Для повного пакування не вистачає відео-презентації від імені генерального директора. Напевно, він у них у чудовій фізичній формі.

І також було б добре додати цифри до кейсів. Тобто, скільки коштує зал, який отримав клієнт. Але це не критично, а бажано.

10. Торговий центр "МЕТРОПОЛІС"

Безумовно, це найкращий лендінг пейдж торгового центру, який я коли-небудь бачив. Красиво підібрані кольори, донесено основні значення, відмінне юзабіліті. Це все відразу видно під час переходу на цей лендинг. Тому клацайте та вивчайте.

Хоча вставлю свої 5 копійок. Я, звичайно, розумію, що на цей сайт мають потрапляти люди, які знайомі із цим центром. Але також на нього потраплятимуть люди, які бачитимуть його вперше.

А отже логічно було зробити невеликий дескрипшен (опис у кілька слів про компанію), щоб відвідувач одразу знав куди потрапив і що на нього чекає там.

Тільки Росія!?

Так, у своєму огляді я головним чином сконцентрувався на найкращі односторінкові сайти рунета, хоча у світі є дуже багато гідних, добрих варіантів.

Причому, найголовніше (і воно ж найдивовижніше), лендінг пейдж у буржунеті використовує не лише малий бізнес, але навіть великий бізнес.

Наприклад, одна з найвідоміших служб таксі в світі Uber взяла як головний сайт наступний варіант - багатофункціональний лендинг пейдж або, як ще прийнято говорити, багатосторінковий лендинг.

Це сайт, що складається з безлічі лендінгів. Майже багатосторінковий сайт. Але все-таки лендінг.

Але, я спеціально не викладаю їхню landing page тут, тому що вони інші. Нехай усі говорять про те, що ми повторюємо все за заходом, але в цьому випадку я вважаю інакше.

Ми, росіяни, інші. Ми маємо інший тип мислення, оскільки ми живемо в іншій країні.

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

А в нас, у Росії, цей страх стоїть у перших рядах. Тому у них на сайті блоків, що мало переконують, довіряти компанії, а у нас їхня темрява.

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

Краще насолоджуйтесь нашими російськими рішеннями. Моделюйте наші тексти та блоки. А у зарубіжних сайтах просто беріть хороші ідеї для дизайну.

Коротко про головне

Тепер, коли Ви переглянули всіх претендентів, я не закликаю Вас наосліп на них орієнтуватися, але подивитися кращі landing page для прикладу безперечно варто.

Як мінімум у когось можна взяти ідею цікаво зробленої анімації. Або, наприклад, хтось із творців досконало знає свою і використовує це протягом усього лендингу. Загалом, вивчити, зробити висновки та запозичити варто.

І до речі, якщо Ви шукаєте ідеї для свого першого лендингу, можете спробувати створити його самостійно. Так Ви зрозумієте, що Вам потрібно і що це не так просто, як здається на перший погляд.

Використовуйте для цього , наприклад PlatformaLP , Tilda , Bloxy. А вже потім, ми чекаємо на Вас до нас у гості на спільну розробку.

Вікторія Кучинова

Головна проблема більшості сучасних лендингів – всі вони начебто зроблені під копірку. А де ж креатив, вогонь, де дизайнерські безумства?

У цій добірці я зібрала цікаві фішкита незвичайні ефекти. Частину з них зробили розробники та веб-дизайнери "Текстерри", частина знайшлася на просторах рунету. Не обійшлося і без прикладів огидного дизайну та відвертої шизи – наприкінці статті на вас чекає знайомство з хом'яком-вбивцею та Снігуронькою з відром.

Дивіться, надихайтеся, застосовуйте ідеї, що сподобалися на практиці, міксуйте їх зі своїми і не забувайте проводити A/Б-тестування – ось єдино правильний рецепт створення забійних посадкових сторінок.

І, головне, пам'ятати, що лендінг – це не самодостатній інструмент. Для конверсій, лідів та продажів потрібен якісний трафік. А видобути його складно без комплексного просування.

Розширена форма

Зазвичай, на односторінках використовують стандартну форму заявки з кількома полями. Найчастіше клієнту потрібно вказати контактні дані – ім'я-прізвище, пошту чи телефон. Але в деяких складних сферах краще розкрити тему. Ось як це зробили у «Текстеррі»: у формі лендінгу dellservers.ru клієнт може вибрати модуль, параметри, завдання сервера. Може скинути значення, якщо щось пішло не так.

Для чого це потрібно? Власник лендингу в будь-якому випадку отримає свої ліди – навіть якщо полів у формі лише два-три. Але клієнтові буде цікаво копнути глибше. Не просто замовити, а самостійно вибрати свій варіант.

Дві кнопки СТА

На лендингу планувальника завдань wunderlist.com/ua – одразу два заклики до дії, які посилюють один одного: «Створити безкоштовну обліковий запис» та «Завантажити Wunderlist». Користувачі клацають по обох посиланнях, конверсія зростає, а лендинг виконує свою роботу на відмінно.

Конкретні цифри (результати)

Це не нова, але, як і раніше, працююча фішка. Покажіть клієнтам, чого ви досягли, у цифрах: це зрозуміліше, ніж абстрактні фрази «ми найкращі», «у нас сотні виконаних проектів» тощо. Подивіться на лендинг smartprogress.do: відразу видно, скільки людей вже приєдналися до проекту, скільки цілей поставили, скільки досягнень виконали.

Персоналізація

Безликі шаблонні лендінги - бр-р, що може бути сумнішим! Пожвавіть свій односторінник, додайте вогню, зацікавте потенційного клієнта. Наприклад, на сторінці послуг «Текстери» зі створення сайтів розміщено фото співробітників, які безпосередньо цим займаються. Відвідувач заходить і бачить: ага, моїм ресурсом займатимуться не абстрактні розробники, а живі Святослав, Поліна, Артем та інші.

Зручна форма відповіді

На багатьох лендингах та сайтах поставити запитання можна лише через форму. А це означає, потрібно вказувати ім'я та прізвище, залишати телефон та електронну пошту. Іноді взагалі доводиться вводити капчі та коди – жах! Зрозуміло, що це робиться для того, щоб здобути ліди. Але є й інший варіант - як на лендінг "Церебро Таргет". Якщо ви зареєстровані у «ВКонтакті», нічого заповнювати не потрібно – бери та пиши. І клієнту зручно, і власнику добре – контакт залишено, можна працювати далі.

Відгуки клієнтів

Можна попросити клієнтів розповісти про свої враження та опублікувати отримані тексти на лендингу. Але проблема в тому, що відвідувач ніяк не перевірить - реальні це відгуки або фейкові. Краще піти далі та переконати відвідувачів у цьому. На лендингу huskypark.info, який розробляла «Текстерра», наводяться слова клієнтів із «Інстаграма» з посиланнями на їхні облікові записи. Все чесно – зайдіть та переконайтесь.

Демонстрація результатів

Тривимірна графіка та доповнена реальність

Лендінг створений для програми Qubi. Це гра для дітей 3+ років та дорослих. Суть гри проста. На першому етапі користувач за запропонованою схемою склеює справжній паперовий, картонний або дерев'яний кубик.

Потім він встановлює додаток, відкриває його на смартфоні і дивиться на кубик через камеру пристрою.

На екрані смартфона чи планшета кубик оживає. Користувач грає у тривимірний варіант "Змійки", "2048", "Лабіринту". У цьому керувати грою потрібно з допомогою реального кубика. Щоб керувати кубиком двома руками, потрібно використати спеціальну підставку для смартфона, яку можна зібрати самостійно.

Тривимірну модель кубика можна побачити на ілюстрації (GIF).

Що хотів клієнт

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

Що ми зробили

Ми реалізували тривимірність за допомогою 3D-трансформацій CSS3. Переходи між гранями кубика зроблені за допомогою чистого JavaScript з відстеження подій drag і touch. Завдяки незвичайним переходам між екранами користувача створюється відчуття об'ємності екрану. Це особливо яскраво виражено на робочій версії посадкової сторінки.

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

Лендінг повністю адаптивний.

Інтерактивний вибір кольорів фарбування інтер'єру та меблів

Незвичайність лендингу «ДСК.Color» полягає у можливості самостійно вибрати колір меблів та предметів інтер'єру за допомогою інтерактивної палітри.

Компанія «ДСК.Color» забарвлює будь-які поверхні в різні кольори. Можна замовити фарбування меблів, побутової техніки, велосипеди, музичні інструменти та інші предмети. Клієнт може вибрати будь-який колір.

Найпопулярніша послуга – фарбування меблів та предметів інтер'єру. На неї припадає близько 80% робіт клієнта.

Що хотів клієнт

Клієнт попросив зробити яскравий і незабутній лендинг «із закликом пофарбувати все навколо». Він мав ідеї зробити зображення меблів у форматі 3D, щоб відвідувач «міг покрутити і розглянути пофарбований предмет з різних боків».

Що ми зробили

Ми запропонували клієнту ідею: дати відвідувачеві можливість самостійно вибрати колір меблів та предметів інтер'єру.

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

Клієнтові ідея дуже сподобалася, тому ми зробили робочий прототип лендінгу. На ньому основна частина виглядала вже так.

Домовилися з клієнтом залишити можливість фарбування столу, стільців, дверей та кухонного гарнітуру. Це основні предмети, які фарбує компанія.

Після узгодження прототипу до роботи включилися дизайнер та верстальник. Перший намалював усі предмети у svg (це формат графіки). Другий зверстав і додав до областей svg палітру кольорів. Після цього реалізували модальне вікно. З його допомогою користувач може перевіряти ще раз кольори та предмети і відправити заявку на послугу.

Незвичайні та звичайні прелоадери

За допомогою прелоадера або спіннера можна зробити зручнішим і візуально привабливим будь-яку посадкову сторінку. У цьому розділі поговоримо про прелоадерів та подивимося на приклади цих елементів, створені фахівцями «Текстери».

Що таке прелоадер і які завдання він вирішує

Прелоадер або спіннер – це знак, який з'являється на екрані до завантаження сторінки. Ці елементи ви бачите щодня, коли користуєтесь Інтернетом. Нижче приклад прелоадера.

Прелоадер вирішує практичне завдання: повідомляє користувачеві, що сторінка завантажується, а також замінює візуально непривабливу картину завантаження. Це треба пояснити.

Через технічних особливостейроботи браузерів сторінки сайтів завантажуються нерівномірно. Під час завантаження верстка може "плисти". Якщо сторінка завантажується кілька секунд, а не частки секунди, користувач спостерігає непривабливу картину.

Прелоадери реалізуються за допомогою стандартних інструментів фронтенд-розробки: HTML, CSS, JavaScript та додаткових бібліотек та фреймворків, наприклад, jQuery, React.

Як ми покращуємо лендинги за допомогою прелоадерів

Ми створюємо унікальні прелоадери, зокрема анімовані. Ось кілька наших робіт.

• Qubi

Для лендінгу Qubi ми зробили прелоадер, який повторює меню навігації. Це дозволяє користувачеві зрозуміти принцип керування сторінкою до завантаження.

• Levellen

На сайті Levellen Interiors ми використовували прелоадер у вигляді логотипу компанії. Це додатковий елементбрендингу сайту.

На лендингу представлена ​​інформація про оренду приміщень у бізнес-центрі. Головний секретпосадкової сторінки знаходиться у розділі «Офіси». Тут користувач може переглянути наявність вільних офісів на кожному поверсі будівлі.

При наведенні курсору на вільний офіс з'являється кнопка «Докладніше».

Натискання кнопки направляє користувача на сторінку з інформацією про офіс та його фотографії. З цієї сторінки можна залишити заявку на оренду приміщення.

Особливості реалізації

Наш дизайнер намалював форми офісних приміщень, малюнки зроблені у форматі svg. Ці малюнки накладаються на плани поверхів. Коли адміністратор сайту в панелі управління зазначає, що офіс вільний, скрипт включає відображення малюнка на плані та можливість перейти на сторінку з інформацією та формою замовлення. Коли адміністратор зазначає, що офіс зайнятий, скрипт відключає зображення на плані.

Власне дизайн

У цьому прикладі немає складних технічних фішок та дизайнерських ефектів – весь лендинг вивозить гарна картинка: фон, кольори, апетитні фотографії астраханської ікри. Односторінок astrahancaviar.ru- Хороший приклад того, як завдяки дизайнеру продукт хочеться придбати. І негайно з'їсти!

Насамкінець про наболіле – кілька прикладів жахливих лендингів. Для розмаїття, фейспалму, безсилої агонії та всього такого. Не розписуватиму, що в них не так - пропоную вам самим вирішити ці завдання. Іта-а-ак...

Розробка дизайну лендінг пейджза принципом «хочу, як у нього» залишилася ще в 2014 році, коли ефективність сторінки, що продає, розкрилася по максимуму, а компанії зрозуміли, що за допомогою лендингу можна не тільки швидко продавати товар/послугу, а й розкривати себе з креативної точки зору. Сучасні landing page - це не тільки структура, що продає, але і відмінна можливість викликати у відвідувача WOW-ефект, захоплюватися ідеєю сторінки та її реалізацією.

Якщо ви не хочете морочитися, ви можете завантажити прототип «ідеального лендінг пейдж» і створити сторінку, виходячи з правил, написати заголовок, оффер, переваги та вигоди, вставити блок довіри та кнопку із закликом дії та засипати з думкою, що робота зроблена на « п'ятірку». Але якщо хочете перевершити очікування цільової аудиторії, та що вже таїти, і свої очікування теж, то скористайтеся прикладами лендингу, які ми вважали кращими.

всі 9 прикладів, зібраних з Інтернету, ми вважають крутими. Простота, що відповідає принципу лендингу, зручність та облік основних вимог, властивих цільовій сторінці, роблять приклади висококонверсійними, що продають Landing page.

Приклад продавця № 1

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

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

Суть блоку повинна полягати в отриманні консультації від професіонала, який знає все про продукт і готовий дати належну консультацію про товар залежно від умов експлуатації клієнта.

Складно уявити, як найпростіший блок лендингу можна зробити таким складним і незрозумілим. До того ж, тексти потрібно писати в стилі звернення до клієнта. Не "залишити заявку", а "залишіть заявку".

Приклад лендингу №2

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

Розпалюється інтерес критеріями.

Професійні та яскраві фото та відеоматеріали ще більше розпалюють інтерес до послуги.

"Дожимаємо" відвідувача рядом переваг і закриваємо потреби, викликаємо "бажання".

Логічний завершальний структура AIDA - блок "дія".

Приклад лендінг пейдж №3

Унікальна картинка, стильна вставка з УТП, навігаційне меню, яскравий дизайн першого блоку та заголовок у стилі призову у загальному поєднанні викликають бажання записатися на пробне тренування. Сприяє цьому та розміщена кнопка із закликом до дії. Бракує навігаційної стрілки, яка повинна показувати, що внизу також є Нова інформація. Наступний блок – переваги у вигляді критеріїв. Зроблені у вигляді іконок з коротким описом.

Відмінним рішенням стало розміщення блоку із закликом до дії зі знижковою пропозицією та обмеженням у часі. Фото викликає довіру відвідувача, мотивують, а також є незвичайним та стильним доповненням до дизайну.

Відмінний блок із мотивацією на перше заняття. Великий мінус – персонаж іншої національності.

Приклад лендингу демонструє стиль і лаконічність дизайну, але, водночас, мотивує читача до основної дії завдяки відсутності відволікаючих деталей та мінімізації кольорів.

Приклад сторінки лендінгу №4

Хороший landing page, розроблений нашою веб-студією, який може стати прикладом для наслідування та натхненням для інших розробників та клієнтів. Односторінок і розкриває проблему цільової аудиторії (у нашому випадку, це жінки з великим обсягом грудей), і одразу вирішує її шляхом якісного офферу.

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

Бонусом і для відвідувача, і для лендингу з погляду його лідогенерації є блок вигод та переваг, доповнений реальними фотографіями, які наочно демонструють результат.

Відмінний спосіб сказати про вигоди не лише на словах, а й візуально. Таким чином, вся інформація сприймається краще.

Як соціальні докази використовується два потужні маркетингові елементи. Відео, яке ще раз тисне на проблему та говорить про користь правильно підібраної білизни.

І фотографія директора компанії із його зверненням до клієнта.

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

Приклад посадкової сторінки № 5

Стильний приклад посадкової сторінки, орієнтованої на продаж послуги – проектування та будівництво елітних приватних будинків та котеджів. Лендінг розроблений за маркетинговою стратегією AIDA – класика, яка невпинно демонструє свою ефективність.

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

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

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

Приклад вдалого лендінгу №6

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

Цей landing page має особливість, якою рідко користуються інші розробники. Вона максимально розкриває питання ціни, пропонуючи користувачеві самостійно вибрати ціновий діапазон, розглянувши варіанти, які по кишені.

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

Загалом проект викликає довіру до компанії. А це головне, що має формувати односторінок, який пропонує послуги, у потенційного покупця. Адже саме з довіри до виконавця клієнт з потенційного стає реальним.

Приклад посадкової сторінки № 7

Ми вибрали цей приклад лендінг пейдж тому що він докорінно відрізняється від звичних традиційних односторінок.

Сайт присвячений послузі з доставки молока. Але він виконаний у жартівливій формі та орієнтований лише на малу групу цільової аудиторії.

Після прочитання сторителлінга, з якого і починається односторінок, стає зрозуміло, що він орієнтується на молодь, якою цікавий сленг.

Тут не спостерігається структури, що продає, і опрацювання проблем, як це видно в попередніх красивих прикладах лендингів. Однак посилання сайту зрозуміле і цікаве, тому сам лендос має місце бути.

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

Тут немає соціальних доказів, блоку довіри, блоків переваг та вигод. Натомість є рецепт котлеток:-)

Про ефективність цього лендінгу сказати важко. Очевидно лише те, що сторінка цікава, з чудовим дизайном та "шкільним" гумором. І незважаючи на те, що подібні проекти - рідкісне явище в галузі інтернет-маркетингу, вони гідні існування, оскільки обов'язково знайде свою аудиторію.

Приклад продавця landing page № 8

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

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

Блок вигод акцентує увагу на зручності співробітництва.

Блок вигод доповнюється блоком переваг компанії, що у комплексі створюють потужну мотивацію клієнта до дії.

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

Приклад landing page № 9

Цей лендинг пейдж, розроблений нашою веб-студією, з першого розвороту екрану утримує увагу відвідувача і мотивує його до дії. Цільова сторінка, присвячена продажу послуг проектування та будівництва, відкриває багато можливостей для клієнта. Підтвердженням цього є форма зворотнього зв'язку, що дозволяє відразу замовити індивідуальний проект або завантажити безкоштовний приклад проекту.

При виборі виконавця потенційному клієнтуважлива репутація та досвід компанії. Саме на цій інформації споживач формує вигоди для себе.

Окремий бонус для відвідувача – реальні фотографії проектів, створених компанією. Яскраві, красиві та привабливі фото стають плюсом довіри відвідувача.

Далі – блок "плюшок". Та плюшка, яку рідко пропонують конкуренти - можливість клієнту на власні очі подивитися на побудовані компанією будинки. Така послуга не зобов'язує відвідувача замовляти послугу. Але за допомогою форми зворотного зв'язку відвідувач стає лідом.

В результаті клієнту представляється сайт з оригінальним дизайном, продуманою структурою та концепцією, грамотним контентом, що комплексно впливає на конверсію сторінки, що призводить до високої ефективності.

Напутні слова

Сучасний користувач, витончений незліченною кількістю сторінок, що продаються, трапляються йому на очі, вже втомився від однотипності. Сьогодні в моду увійшла унікальність, чим цікавіше і незвичайніше лендинг, тим вища ймовірність того, що він приверне увагу користувача. До того ж, гарний та ексклюзивний дизайн – це завжди плюс: і відвідувача здивувати, і порадувати себе. А приємно здивований відвідувач як мінімум +10% до конверсії. Бажаємо оригінальних та смачних ідей! А якщо з цим виникли труднощі, ви можете замовити landing page в нашій веб-студії.

Підписуйтесь на блог та стежте за нашими оновленнями.