Ми з вами вже обговорювали, що таке landing page, Що вони хороші і які базові принципи спираються. Але незважаючи на те, що існує ряд правил і прийомів, які забезпечать успішність вашого сайту, неправильно думати, що розробка лендингу - це шаблонна робота, а сторінку, що добре працює, можна зробити за 5 хвилин, тільки знай собі картинки підставляй і тексти змінюй. Звичайно, це творчий процес, і фантазія, підкріплена розумінням поведінки своєї цільової аудиторії, лише заохочується. Нижче ми представимо десятку прикладів небанальних лендингів, а також сторінок, які забезпечують високу конверсію.
1. Nest Thermostat
Дуже цікаво оформлений ленд присвячений продажу кімнатного термостату. Незважаючи на наявність різноманітних технічних даних та опису зручного функціоналу, лендинг зосереджений на візуальній складовій – кілька фотографій інтер'єру, а також геніальна за задумом та виконання анімація в середині сторінки викликають відчуття, що після покупки цього девайсу, у тебе в будинку стане не гірше, ніж на картинках в Інтернеті Таким чином, ленд продає не термостат, а затишок у будинку, що є кінцевою потребою клієнта.
2. Boy-Coy
Сайт дизайнерської студії, після якого ви навряд чи захочете шукати навіть пропозиції конкурентів. Чотирьохекранний лендинг здатний переконати звернутися саме до цих хлопців, навіть якщо ви не прочитаєте ні відгуків, ні списку компаній, з якими співпрацювала студія. Швидше за все, ви просто перегортаєте, милуючись ефектом паралаксу і самі того не помітите, як почнете вносити свої дані до симпатичної форми зворотного зв'язку. 
http://boy-coy.com
3. Горілка «Валянки»
Ще один приклад красивого landing page з ефектом паралаксу. Суто іміджева сторінка, яка змушує негайно зробити покупку, але створює позитивний образ у цільової аудиторії. Зауважте, інформація про якість продукту представлена в достатньому обсязі, але її можна й упустити, спостерігаючи за тим, як красиво плавають кубики льоду. Проте потрібний ефект вже досягнуто. Цей сайт дуже гарний, щоб пропонувати щось неякісне – такий підсвідомий висновок виникне у кожного відвідувача будь-якого зі смаком зробленого сайту. 
http://www.valenkivodka.com
4. Інтернет-магазин плюшевих ведмедів
По-справжньому цікаві лендинги здатні привернути увагу людей, далеких від цільової аудиторії. Переконайтеся на прикладі магазину, який продає величезних плюшевих ведмедів. Сайт буквально переповнений цікавими задумами і ніби веде з відвідувачем діалог, що зрештою, з високою ймовірністю, означає покупку. 
http://medvedy.com
5. Smart Progress
Красиві landing page популярного сервісу постановки та досягнення цілей. По-перше, зайдіть і подивіться, як це працює, по-друге, оцініть дизайн, який уособлює рух до поставленої мети. Разом з дуже грамотним наповненням блоків він дійсно мотивує зробити все, що заплановано, але відкладалося в довгу скриньку. 
https://smartprogress.do
Приклади лендингів, що продають, з високою конверсією
1. Виробництво та монтаж дерев'яних вікон
Як відомо, лендинг не повинен перевантажувати відвідувача, а одразу давати йому те, за що можна зачепитися та оформлювати заявку. Сперечатись не будемо, але деякі товари вимагають ретельного вибору, і одним-двома блоками тут не відбудешся. Лендінг даного виробника вікон пішов за програмою максимум і торкнувся таких подробиць, про які ми при виборі вікон і не замислюємося. І хоча в парі блоків, як нам здається, сталося інформаційне перевантаження, все одно ця сторінка є гарним прикладом великого лендінгу. 
http://goodwin-nnov.ru/
2. Страхування КАСКО
Ще один лендінг із високою конверсією. Принцип перетворення відвідувача на ліда тут використовується аналогічний попередньому прикладу – калькулятор. Пропонуємо оцінити, скільки параметрів можна внести для підбору поліса, і наскільки це зроблено. Те саме можна сказати і про решту наповнення ленду – гранично просто і зрозуміло, при цьому описані взагалі всі переваги, які хоче отримати автовласник, страхуючи свою машину.
http://простокаско.рф
3. Франшиза розважальних акваріумів-автоматів
Хороший приклад лендингу, що продає, що забезпечує високу конверсію за рахунок того, що чітко пояснює вигоди потенційному клієнту, але й залишає інтригу, бажання дізнатися подробиці бізнес-плану, що обіцяє пасивний дохід. Дизайнеру – наша окрема похвала. 
http://morewishes.ru
4. Ремонт ноутбуків
Хороший приклад лендингу, де відносно велика кількістьтексту (зокрема і займана ним площа головному екрані) не створює відвідувача ніяких труднощів, а навпаки виглядає органічно, і успішно розписує всі переваги ремонтної організації. Послуги з ремонту ноутбуків є терміновими, тому не варто потенційним клієнтам видавати інформації надмірно: достатньо кількох блоків, але опрацьованих максимально красиво та інформативно, що викликає довіру.
Вікторія Кучинова
Головна проблема більшості сучасних лендингів – всі вони начебто зроблені під копірку. А де ж креатив, вогонь, де дизайнерські безумства?
У цій добірці я зібрала цікаві фішки та незвичайні ефекти. Частину з них зробили розробники та веб-дизайнери "Текстерри", частина знайшлася на просторах рунету. Не обійшлося і без прикладів огидного дизайну та відвертої шизи – наприкінці статті на вас чекає знайомство з хом'яком-вбивцею та Снігуронькою з відром.
Дивіться, надихайтеся, застосовуйте ідеї, що сподобалися на практиці, міксуйте їх зі своїми і не забувайте проводити A/Б-тестування – ось єдино правильний рецепт створення забійних посадкових сторінок.
І, головне, пам'ятати, що лендінг – це не самодостатній інструмент. Для конверсій, лідів та продажів потрібен якісний трафік. А видобути його складно без комплексного просування.
Розширена форма
Зазвичай, на односторінках використовують стандартну форму заявки з кількома полями. Найчастіше клієнту потрібно вказати контактні дані – ім'я-прізвище, пошту чи телефон. Але в деяких складних сферах краще розкрити тему. Ось як це зробили у «Текстеррі»: у формі лендінгу dellservers.ru клієнт може вибрати модуль, параметри, завдання сервера. Може скинути значення, якщо щось пішло не так.
Для чого це потрібно? Власник лендингу в будь-якому випадку отримає свої ліди – навіть якщо полів у формі лише два-три. Але клієнтові буде цікаво копнути глибше. Не просто замовити, а самостійно вибрати свій варіант.
Дві кнопки СТА
На лендингу планувальника завдань wunderlist.com/ru – одразу два заклики до дії, які посилюють один одного: «Створити безкоштовну обліковий запис» та «Завантажити 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- Хороший приклад того, як завдяки дизайнеру продукт хочеться придбати. І негайно з'їсти!
Насамкінець про наболіле – кілька прикладів жахливих лендингів. Для розмаїття, фейспалму, безсилої агонії та всього такого. Не розписуватиму, що в них не так - пропоную вам самим вирішити ці завдання. Іта-а-ак...
Продають сайти. Що це таке? Кожен другий скаже: "Звичайно ж, це лендінг!". Вони ж односторінники, вони ж лендінг пейдж, вони продають сторінки.
Переконувати Вас у протилежному не буду, адже у цих словах велика частка правди. Тому в цій статті ми розберемо, які лендинги можна назвати найкращими та чому.
Колись я почав шукати найкращі сайти, що продають, де подивитися їх приклади, рейтинги і як їх оцінити в принципі. Адже спочатку односторінковий сайт був придуманий для того, щоб збільшити продаж компанії.
Останнім часом дуже багато змінилося. Пішли, які були актуальні раніше, сайти стали робити більш якісні, красиві, з великою кількістю анімації, картинок і різних фішок, що заманюють.
Критерії оцінки
За яким принципом оцінювати? Які брати за основу? Як скласти рейтинг ТОП-10 сайтів? Де взяти сайти на конкурс? Все це ускладнює ситуацію у створенні справжнього та чесного рейтингу найкращих сайтів.
До того ж ми не знаємо, скільки продажів компанії здійснюють через подібні сайти. Їм же не можна зателефонувати і запитати: "А яка у Вас?" або “Скільки Ви отримуєте заявок із?”.
Я впевнений, ніхто не відповість на таке запитання, тому що або ніхто не рахує, або скаже, що це конфіденційна інформація.
Ага, розмріялися! Тож я зробив простіше. Став шукати та переглядати рейтинги та добірки найкращих лендингів. І знаєте, що?
Рейтинг, звичайно, суб'єктивний, тому що ми не маємо показників усіх сторінок, і ми фізично не можемо вивчити всі сайти інтернету. Ми спираємося на свій досвід і ті сайти, які за 5 років зустрічали на просторах всесвітньої павутини.
НАС ВЖЕ БІЛЬШЕ 29 000 чол.
ВКЛЮЧАЙТЕСЯ
ТОП-10 односторінкових сайтів
Не сприймайте нумерацію як розподіл призових місць. Оскільки у всіх лендингів проглядаються різні завдання, а отже, порівнювати їх між собою не тільки не професійно, а й безглуздо. Тому просто насолоджуйтесь роботами.
1. Житловий комплекс "Парк Флора"
Сайт викликає цілковите захоплення. Відразу видно, що до нього приклали руку крутий дизайнер та топовий маркетолог. Дивишся і хочеться приїхати та подивитися все самому.
Причому на сайті повна відсутністьнемає форми для заповнення, тільки телефон. І це правильно в їхньому випадку, хоча для багатьох може здатися дивним.
Житловий комплекс "Парк Флора" Єдиний мінус ставимо верстальнику за погано оптимізовану анімацію та .
Сайт довго завантажується, а це може дуже вплинути на показник відмов. Люди не люблять чекати і йтимуть з нього швидше, ніж побачать пропозицію.
2. Майстерня "Dinero"
Це не сайт, а цілий фільм про один “персонаж” – дерев'яний гаманець. Якби він коштував 1 000-2 000 р., то сайт би провалився, тому що немає очевидних: оффер, дескрипшен, форма захоплення і т.д.. Але в сегменті Luxur все працює інакше, і цей односторінник тому підтвердження.
Головний мінус цього сайту - спроба, як кажуть, всидіти на двох стільцях, а саме на одній сторінці продати товар і в роздріб, і в опт.
Шукати дилерів потрібно на окремому сайті, тому що у роздрібного та у оптового покупця різні критерії вибору, а значить їм потрібно показувати різні зображення та вигоди в іншій послідовності.
Майстерня "Dinero" 3. Вакансії "Альфа-Банку"
Цей червоно-білий банк – наш партнер. Ми є авторами їхнього блогу для клубу клієнтів.
Але їх сайт тут не по "родинних зв'язках", вони і справді зробили гарне рішення щодо пошуку співробітників до себе в компанію. Причому зробили це цілком оригінально.
Вакансії "Альфа-Банку" Єдине, про що варто їм сказати (і ми скажемо), що потрібно не виводити клієнта з цього сайту, і зробити всю взаємодію всередині нього. Таким чином людина охоче залишатиме заявку за рахунок звичного розташування елементів і логічного ланцюжка дій.
4. Спортивний корсет "Loni-corset"
Цей сайт розроблений нами, і якось безглуздо робити рейтинг і не сказати, що ми вважаємо свої сайти класними.
Причому всі сайти у нас на висоті, можете переконатися в цьому тут -> . Але оскільки більшість аудиторії цієї сторінки чоловіка, то ми вирішили показати сайт з дівчатами 🙂
Спортивний корсет "Loni-corset" Сайт відпрацював себе на 4+. Єдиний блок, який нам не вдалося додати, – це соціальні докази існування компанії-відправника.
Замовник вирішив цю інформацію не показувати. Тому сміливо говоримо, що результат міг бути вищим, якби покупці бачили склад, команду, офіс та інші. Але що є, тобто.
5. Допуск СРО "Гральник Ліцензування"
На перший погляд цей сайт повинен викликати здивування, чому він у списку топових. У ньому нічого особливого: простий дизайн, звичайні блоки, типові тексти.
АЛЕ! Повірте, коли Ви будете цільовим клієнтом, то зрозумієте, що це відмінний сайт, який повністю створений для клієнта. І навіть простий зроблений не просто так настільки звичайним.
Допуск СРО "Гральник Ліцензування" Звісно, їм є куди зростати. У них пливе верстка у деяких блоках, а їх, до речі, 15 штук. Також у них некоректно стоять перенесення слів, і мало виділені основні елементи.
Але все це дрібниці, адже фундаментально все зроблено правильно і написано з погляду.
6. Проект "Велика сушка"
Більшість жінок (їхня цільова аудиторія) чули про проект “Скажене сушіння”. Їхня реклама до запуску заполонює весь інтернет. І це не дивно, коли мільйони інвестуються на трафік.
Але без хорошого сайту отримати десятки мільйонів виручки не вийде, тому їхній сайт також входить у наш ТОП.
Проект "Велика сушка" Видно, що до створення підходили ґрунтовно, чого тільки одні тексти варті. Але одну велику помилку вони все-таки зробили-не зробили кнопку призову в самому кінці. Це дуже впливає на відтік відвідувачів, оскільки вони не вбачають логічного закриття всієї історії.
7.
Ми самі користуємося системою взаємин із клієнтами Бітрікс24. Але так як у нас тема не , то сайт системи Мегаплан перевершив всі очікування.
Вони через нього донесли всі головні моменти своєї системи, після чого ти розумієш це найкраще, що є для бізнесу.
CRM "МегаПлан"
З наших побажань щодо покращення – додати відео-огляд системи, тому що у всіх прямих конкурентів він є. І також зробити більш зрозумілі заклики, а саме, замінити заголовки (не кнопки) на “Почніть користуватися безкоштовно” або щось таке.
До речі!Якщо Ви хочете використовувати як свою CRM-систему, то раджу не забути промо-код “Megastart”. Так Ви отримаєте знижку на першу покупку 10% та 14 днів безкоштовного використання.
8. Банк для підприємців "Точка"
Цей лендинг від банку здобуває премію за свою оригінальність. Ця сторінка розсилається своїм друзям як реферальне посилання.
Для посилення ефекту ми додали б ще кілька блоків, які тиснуть на логіку. Зараз сайт більше спрямований на емоції і в деяких випадках це могло бути правильним рішенням. Але у нас все ж таки вибір банку, і одними емоціями тут не обійтися.
Банк для підприємців "Точка" 9. Оснащення тренажерних залів "Goodfit"
Цікавий перехід сайту з чорної гами до білої з блакитним. Але крім оригінального дизайнерського рішення, у даному лендингу використовується чудова гра заголовків. Тут вони є не підведенням до блоку, а самостійними елементами, прочитавши які вже можна створити повну картину.
Для повного пакування не вистачає відео-презентації від імені генерального директора. Напевно, він у них у чудовій фізичній формі.
До цього було б добре додати цифри до кейсів. Тобто, скільки коштує зал, який отримав клієнт. Це не критично, а просто бажано, адже конкретика додає переконливості та просто зручна для відвідувачів.
Оснащення тренажерних залів "Goodfit" 10. Торговий центр "МЕТРОПОЛІС"
Безумовно, це найкрутіший лендінг пейдж торгового центру, який я коли-небудь бачив. Красиво підібрані кольори, донесено головне значення, відмінне юзабіліті-це все відразу видно при переході на цей лендинг. Тому, клацайте та вивчайте.
Але свої 5 копійок я все одно вставлю. Я, звичайно, розумію, що на цей сайт мають потрапляти люди, які знайомі із цим центром. Але, крім них, на нього потраплятимуть ті, хто бачить його вперше.
Тому логічно було зробити невеликий дескрипшен (опис у кілька слів про компанію), щоб відвідувач одразу знав, куди потрапив і що на нього чекає.
Торговий центр "МЕТРОПОЛІС" Чому Тільки сайти рунету
Так, у своєму огляді я головним чином сконцентрувався на найкращі односторінкові сайти рунету, хоча у світі є дуже багато гідних варіантів.
Причому, найголовніше (і воно ж найдивовижніше), лендінг пейдж у буржунеті використовує не лише малий, а й навіть великий знос.
Наприклад, одна з найвідоміших служб таксі в світі Uber взяла як головний сайт наступний варіант - багатофункціональний лендинг пейдж або, як ще прийнято говорити, багатосторінковий лендинг.
Це сайт, що складається з багатьох лендінгів. Майже багатосторінковий сайт, але все-таки лендінг.
Але їхню landing page я спеціально не виклав тут, бо вони інші. Нехай усі говорять про те, що ми повторюємо все за заходом, але в цьому випадку я вважаю інакше.
Ми, росіяни, інші. Ми маємо інший тип мислення, оскільки ми живемо в іншій країні. Наприклад, у Американця майже немає побоювань у голові, що компанія візьме гроші та розчиниться. Так як у них все захищено на десять рядів, що лише один PayPal стоїть.
А в нас, у Росії цей страх стоїть у перших рядах. Тому у них на сайті блоків, що мало переконують, довіряти компанії, а у нас їхня темрява.
Я можу наводити ще десятки аргументів, що у нас з ними будуть різні найкращі лендінги. Тому прошу пробачити, але їхніх варіантів тут не буде.
Краще насолоджуйтесь нашими російськими рішеннями, моделюйте наші тексти та блоки. А у зарубіжних сайтах просто беріть хороші ідеї для дизайну.
Коротко про головне
Тепер, коли Ви переглянули всіх претендентів, я не закликаю Вас наосліп на них орієнтуватися, але подивитися найкращі landing page для прикладу безперечно варто.
Як мінімум у когось можна взяти ідею цікаво зробленої анімації. Або, наприклад, хтось із творців досконало знає свою і використовує це протягом усього лендингу. Загалом, вивчити, зробити висновки та запозичити варто.
І до речі, якщо Ви шукаєте ідеї для свого першого лендингу, можете спробувати створити його самостійно. Так ви зрозумієте, що вам потрібно і що це не так просто, як здається на перший погляд.
Використовуйте для цього , наприклад PlatformaLP , Tilda , Bloxy. А вже потім, чекаємо на Вас до нас у гості на спільну розробку.
Особливість цього дизайну в тому, що всі елементи на увазі, але водночас дуже акуратно розташовані. Також увагу привертає просте, але гарне слайдшоу.
Простий, але симпатичний дизайн. Плюс у тому, що можна увійти на сайт через Facebook, не гаючи часу на реєстрацію.
Відмінний приклад демонстрації товарів компанії. Щомісяця компанія оновлює список товарів, що відображаються на сторінці.
Зрозуміти, що продається на сайті, — не проблема завдяки добре структурованому контенту, красивим слайдам і великому шрифту цінників.
Найбільш успішні сторінки, присвячені продажу товарів, обов'язково містять зрозумілі та легкі для сприйняття приклади продукції.
Фішка цього дизайну – простота. Просте меню та яскравий слайдер відмінно поєднуються.
На сторінці вдало відображаються різні розділи. Для більш детальної інформаціїдостатньо клікнути на зображення, що сподобалося.
Дизайн не перевантажений зайвими елементами, одразу можна подивитися всі характеристики та ціни товару.
Розважальні сайти
Просто і зі смаком. Відразу ясна мета сторінки - перегляд документального відео.
Дизайн сторінки дуже добре продуманий, він заворожує та буквально гіпнотизує. Відмінне поєднання кольорів та форм.
Цей сайт вище за всіх похвал. Блискуче продуманий дизайн і різноманітність інтерактивних елементів нікого не залишать байдужим.
У дизайні цієї сторінки, присвяченій франшизі про Гаррі Поттера, використані знайомі фанатам кольори, фрази та імена.
Ця сторінка не тільки виглядає красиво, вона ще й дуже функціональна: багато інтерактивних елементів, інтеграція з Google Maps, використання вкладок.
Uncrate і після редизайну не змінює своєї традиції розташування всіх розділів сайту у зручному верхньому навігаційному меню.
Цей сайт демонструє всю потужність графічного дизайну та веб-розробки. Краще зайти на нього і самостійно переконатись у цьому.
Відмінний приклад «плиткового» дизайну, який дозволяє стильно розташувати велику кількість блоків із контентом.
Візуальна складова цього сайту приголомшлива. Яскраві образи миттєво захоплюють увагу користувачів.
Jay-Z точно знає, як треба розважатися. На його сайті статті, зображення та інший контент представлено у вигляді інтерактивних плиток.
У цьому дизайні використані природні відтінки, які відмінно поєднуються з головними питаннями, піднятими на сайті.
Лендінг-портфоліо
На цій сторінці головну роль знову відведено зображенням, які буквально оживають при наведенні миші.
У цьому прикладі дуже цікаве поєднання кольорів. Більше того, на сторінці у всіх елементів використано однакову структуру фонів, під дерево.
Тут дуже вдало використаний «олдскульний» стиль, дизайн кожного елемента продуманий до дрібниць та унікальний. Завдяки нескінченному скролінгу на цьому сайті насолоджуватися такою красою можна довго.
Зрозумілий та продуманий дизайн допомагає сторінці найбільш ефективно донести головну інформаціювідвідувачів. Колірна схема відповідає бренду та показує стиль дизайнера у справі.
Сторінка є чудовою презентацією. Кожен банер присвячений окремому проекту.
Приклад незвичайного дизайну плитки.
На цій сторінці головну роль грає друкарня. Застосування різних шрифтів допомагає передачі ідей.
Дизайн лаконічний і короткий. На сторінці можна побачити все необхідне: і портфоліо, і посилання на інші розділи.
Іконки та нічого зайвого. Гарний приклад мінімалістичного дизайну.
Сторінка-портфоліо відображає найголовніше – приклади робіт.
Роздрібна торгівля
На сторінці представлено безліч фотографій користувачів, які за допомогою скролла та наведення можна легко перегортати.
Великі яскраві фотографії товару компанії і викликають бажання випити баночку холодного пива.
Ніщо не відволікає відвідувача від споглядання чудових годинників.
Родзинка цього сайту – слайдшоу у верхній частині сторінки, де продемонстровані апетитні кулінарні шедеври.
Шрифт та графіка відмінно поєднуються, створюючи єдине сприйняття сайту. Пунктів меню лише три, і їх неможливо не помітити.
Елегантний стиль, якісні зображення, чудова презентація. Від основних елементів нічого не відволікає.
Toyota зробила сайт у стилі Pinterest для любителів Camry. Тут можна знайти багато фотографій, статей, статистики.
Незважаючи на те, що ця сторінка по висоті вписується в один екран, на ній є багато цікавих інтерактивних елементів і незвичайних деталей.
Дизайн сторінки повністю відбиває стиль бренду: кольори, шрифти, картинки відразу асоціюються саме з цією компанією.
Дизайн виконаний у спокійних світлих тонах, таке колірне рішення ідеально підходить пропонованого продукту.
Цей сайт схожий на книгу, яка захоплює вашу увагу незвичайним сюжетом та ілюстраціями.
Плаваюча червона кнопка всередині екрану робить свою справу: на неї дуже хочеться натиснути.
На цьому лендинг при скролінгу використовується паралакс-ефект, що захоплює відвідувачів.
Дизайн витриманий у кольорі бренду, на головному банері чудово виділяється CTA-кнопка, яку так і хочеться натиснути.
Головний банер у стилі постера для фільму напевно привертає увагу. Навіть якщо ви не знаєте, чим займається ця компанія, вас зацікавить Капітан Деш, зображений на постері.
Незвичайна сітка цієї сторінки дозволяє відвідувачам побачити одразу багато контенту у зручному для сприйняття вигляді.
Дуже креативний дизайн обрала для сайту ця компанія. Натискаючи на елементи вікон із назвами, ми можемо потрапити у відповідний розділ.
Якісний дизайн сторінки говорить про те, що компанії можна довіряти.
Це сторінка професійного фотографа, і її дизайн допомагає нам побачити найголовніше фотографії. Навіть меню заховано у «гамбургер».
Яскраві елементи роблять цю сторінку дуже привабливою, натомість вони ненав'язливі і не відволікають від головного контенту.
У цьому дизайні від блоку до блоку використовується єдиний стиль фону – це створює цілісність сторінки та полегшує сприйняття інформації.
Висновок
Ми розглянули понад 50 абсолютно різних дизайнів, але кожен із них по-своєму гарний і грамотно висловлює унікальну пропозицію компанії. При розробці лендінг-пейдж дуже важливо, щоб сторінка відповідала вашому бренду і була цікавою для вашої цільової аудиторії.
Лендінг можна назвати будь-який односторінковий сайт, який містить заклик до дії. Як правило, посилання на такі сторінки містяться в рекламі, тому після переходу потенційного клієнта у вас буде всього кілька секунд, щоб переконати його купити, підключитися, зареєструватися, підписатися на розсилку, відвідати захід або щось зробити. Тому такі сайти складаються з 1 сторінки – контент не можна розмазувати на кілька сторінок. Мета – швидко зацікавити та зафіксувати виконання дії, тобто провести конверсію трафіку в результат. Тобто сторінка має знайти серед відвідувачів покупців.
Відмінність лендингів від інших типів сайтів у тому, що вони містять лише одну основну пропозицію (можуть бути подарунки, знижки, бонуси слідом, але основна мета сторінки завжди одна). Звідси випливає простий висновок: використання односторінника доречно тоді, коли оффер уміщається змістом одну кнопку заклику до дії. Пропозиція має бути простою і лінійною за своєю суттю. Найважливіше для лендінгу – трафік і та сама кнопка. Решта служить обрамленням. Одна сторінка дозволяє контролювати черговість одержання інформації, тому важливо вибудовувати ефективну послідовність секцій.
Приклади односторінкових лендінгів:
1. Будинок на бульварі – житловий комплекс
Vib-dom.ru – грамотний і красиво зібраний лендинг агентства нерухомості, націлений на збір заявок на придбання житла у новобудові. Примітно, що на сторінці немає кнопок на кшталт «зателефонувати» або «залишити заявку». Сторінка переконливо описує переваги житлового комплексу, видає купу посилань на цифрові копії дозвільних, звітних та інших типів документів, що підтверджують надійність перспектив житлового масиву та щедро ділиться контактною інформацією. Лендінг розрахований на те, що клієнт, ознайомившись із характеристиками проекту, сам передзвонить у відділ продажу або заїде на один із офісів компанії. Тобто заклик до навернення ненав'язливий, опис комплексу є природним приводом для зацікавленості.
Дизайн у сторінки чудовий. Приємна пастельна кольорова гама асоціюється із затишком і, до речі, приблизно відповідає кольоровій схемі обробки житлового комплексу, судячи з фото. Гармонійно вийшло, все в єдиному стилі. Фотографії підібрані чудові, вони дають вигідно позиціонують проект. Описи планувань квартир чіткі, зрозумілі. Докази для переваг обрані вагомі, текст лаконічний та якісний. Без води і твердих тверджень, кожна фраза несе корисну інформацію потенційному клієнту. Сторінка існує вже близько 2-х років – перед вами лендінг-довгожитель. Це пов'язано зі специфікою ніші – залучати клієнтів почали ще на початку забудови. Цікавий односторінок.
2. Viaresto - цифрове обладнання для кафе та ресторанів
Viaresto.ru - чудово оформлена сторінка компанії, яка займається постачанням, встановленням та обслуговуванням цифрового обладнання для відеоспостереження, звуку, роботи кас, Wi-Fi та іншого в різних громадських закладах. Гранична інформативність, ретельно підібрані аргументи переконання, грамотна текстова та структурна подача, відмінний графічний супровід описів - все це в сукупності справляє сильне враження. Незважаючи на велику кількість інформації та елементів, лендинг не відчувається перевантаженим, читати цікаво, бо все по справі та деталях подано.
Дизайн досить складний, використовується велика кількість колірних відтінків та графічних елементів. Не всі з них однорідні, проте сторінка сприймається цільною, має сюжет. У міру скролінгу змінюються смислові «локації», а разом із ними і підходи до оформлення. Структурно все логічно, чітко вибудувано та присмачено кількома анімаційними ефектами. Опис ключових фішок послуг, послідовність дій при співпраці, ціни, відгуки клієнтів, портфоліо клієнтів та партнерів плюс докладні контакти з формою для замовлення консультації як тригер призову до дії. Футер тезно резюмує вміст лендингу, якому вже, до речі, 4 роки – ще один якісний довгожитель.
3. Re: content – сторінка веб-студії
Recontent.ru – лендинг для збору заявок на створення сайтів. Використовує просту та ефективну структуру. Зважаючи на особливості ніші, розробник вирішив зацікавити клієнтів лише за рахунок демонстрації прикладів готових робіт. Цілком достатня аргументація – за цими прикладами все чудово видно, нічого пояснювати додатково не потрібно. Вся сторінка складається з секцій, які містять скріншоти сайтів з нехитрою анімацією збільшення при наведенні, коротким описом проекту та посилання на нього. Все це для різноманітності упаковано у різнокольорові блоки. Виглядає непогано, але не більше.
Дизайн адаптивний і, зважаючи на обрану структуру, вкрай простий. Шапка містить контакти, оригінальний логотип студії та тригер заклику до дії у вигляді брифу на замовлення сайту. На сторінці є ще один вид кнопки з посиланням на коротку форму замовлення зворотного зв'язку. Тобто отримуємо дві кнопки з різними формами, але майже однаковим змістом. Як єдиний аргумент переваги вказана адаптивність і наведені мініатюри мобільних версій готових сайтів. Нижче повторюється форма замовлення зворотного дзвінка та додаються докладні контактні дані. Нормальний лендинг, у якому майже все значеннєве навантаження переклали на приклади робіт. Натомість обійшлося без шаблонних переваг.
4. Друкарі - лендинг друкарні
Печатниковъ.рф - симпатично оформлена сторінка друкарні. Характерний логотип з відсиланням до старослов'янських першодрукарів, що натякає на автентичність ремесла та підвищує його значущість у наш цифровий час. Шапка виглядає атмосферно, хоча елементи в ній розташовані асиметрично. У мобільної версіїцього не видно. Є меню для швидкої навігації за секціями. До речі, цей лендинг багатосторінковий: іконки із зображеннями послуг містять посилання на сторінки з їхніми описами. Це не суперечить ідеї лендінгу, вони теж бувають багатосторінкові. Суть оффера зводиться до звернення до друкарні. На одній сторінці не можна викладати два десятки послуг - вона вийде надто довгою, не дочитають. Тому створення додаткових статичних сторінок тут цілком виправдане.
Дизайн сайту адаптивний, привабливий, хоч і простий структурно. Різноманітність подачі досягається рахунок використання безлічі унікальних іконок. Є перелік послуг, який сам собою зрозумілий за назвою найменувань. Особливу увагуприділено контактам у зоні футера - вони великі, виразно читаються, є карта проїзду. Також сторінка рекламує партнера – магазин канцтоварів. Швидше за все це одна контора. Виходить парна реклама – цілком вигідно. Жодних кнопок заклику до дії тут немає, їх роль виконують виразні блоки контактів у шапці та футері, що обрамляють перелік послуг, що надаються. Гарний лендінг.
5. Сторінка виробника кабін для перекладачів
Sinhro-kabina.ru – лендинг для збору заявок на покупку дуже специфічного обладнання – різних моделей кабін, призначених для синхронного перекладу. У тексті про компанію зазначено, що підприємство перше і єдине у своєму роді. Швидше за все, не брешуть, дуже вузькопрофільний товар. За зображенням у хедері можна зрозуміти, про що мова, хоча воно досить низької якості. Ймовірно, подібні фотографії важко здобути.
Структура сторінки вкрай проста: секції, що чергуються, з описом декількох моделей синхрокабін. Характеристики скрізь практично однакові, за ними важко зрозуміти відмінності між моделями, проте можна відзначити кілька корисних властивостей. Проте вони не є інформативними. Головне посилання сторінки в тому, що існує компанія, яка виробляє такий специфічний товар, має адресу, телефон, пошту і навіть профіль VK. Можна дзвонити та дізнаватися докладніше.
Підбиваємо підсумки
Лендінги ефективні при грамотному компонуванні секцій та якісній подачі пропозиції. Їх дизайн обов'язково має бути адаптивним, оскільки багато хто переходитиме на них із соцмереж зі смартфонів. Приємний дизайн бажаний, але не обов'язковий. Головне - інформативність та переконливість. Ну і кнопка, контакти, соціалки – потрібно, щоб людина одразу зрозуміла, де опинилась, і куди писати чи дзвонити при виникненні зацікавленості.
Лендінги не перетворюють відвідувачів на покупців, а шукають серед аудиторії тих, хто має схильність та ресурси для здійснення зазначеної на сторінці дії. Суть у тому, що лендинг містить одну готову пропозицію, за рахунок чого позбавляє мук вибору. Залишається лише переконати потенційного клієнта, що цей вибір є правильним. Чим детальніше сформулюєте аргументи на користь оффера і чим яскравіше покажете вигоди, тим краще.