Салон красоты landing. Как должен выглядеть идеальный лендинг? (10 советов). Как мы улучшаем лендинги с помощью прелоадеров

Прилагательное “продающий” используется сейчас во всех маркетинговых инструментах.

И сфера веб-разработок не исключение, там мы тоже постоянно видим броские фразы в стиле “продающий сайт” или “продающий лендинг”.

Но если трезво оценивать идеологию создания качественного landing page, то мы увидим, что слово “продающее” это набор маркетинговых знаний в одну площадку.

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

Надоело врать

Часто мои коллеги, после очередного разговора с клиентом по услуге , говорят мне возмущённую фразу: “Никита, нам надоело спорить с ними. Может сделаем то, что они хотят?”.

Всё дело в том, что для простого обывателя хороший лендинг = много фишек. А если оригинальных решений на сайте нет, то автоматически сайт плохой и не продающий.

Всё! Накипело. Расставим все точки (говорю мечтательным голосом). Раз и навсегда определим что такое настоящий продающий одностраничный сайт, и как выглядит ерунда, которая имеет от этого только название.

Будет и интересно, и скучно, но точно полезно. Начнём с лаконичного описания данного термина.

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

Каждое слово выше несёт непомерное количество деталей, и это не фишки, о которых Вы так любите говорить.

Это глубокие идеи, которые принято при обучении пропускать мимо ушей из-за их серости и отсутствия “вау-эффекта”.

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

Подготовительная часть

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

Качественная продающая страница landing page – это проект, который не только создаётся по всем правилам, но и также к которому Вы правильно готовитесь.

Всё как при запуске ракеты: 50% успеха это правильное определение координат. Итак, каким должен быть продающий сайт.

1. Один продукт (цель)

Первое, что определяет продающий лендинг пейдж, это наличие одной и единственной цели. Почему нельзя две, три и больше?! Всё довольно просто.

Это то же самое, если Вы приедете покупать автомобиль в салон, а я Вам дополнительно к нему буду продавать дом на Рублевке.

И еще абонемент в фитнес-клуб и премиум-аккаунт на сайте знакомств (хотя с новой машиной, дорогим домом и подкаченным телом, последнее Вам может не пригодиться).

Вы можете сейчас возразить на тему того, что я утрирую и никто никогда не продаёт всё подряд на одном сайте.

Вы частично правы, только Вы видите всё замыленным взглядом. Для Вас все Ваши услуги или товары по-умолчанию нужны для Вашего клиента, а на самом деле, в 9 из 10 случаев (бывают исключения) человек приходит за чем-то одним.

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

В нем не было дополнительных страниц, а все услуги были размещены на главной (скрин ниже).

Мы руководствовались мыслью, что если человеку нужно , то он сам выберет то, что ему подходит. И это былая наша самая большая ошибка.

Ошибка

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

Так как всё равно, что купить кота в мешке. Никакой дополнительной информации, выгод и ответов на вопросы.

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

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

Поэтому когда Вы делаете сайт, чётко определитесь для какого продукта Вы это делаете. И также периодически меняйте слово “Продукт” на “Цель”.

Ведь одно дело сразу продавать в лоб, а другое дело – закрыть на первый (например, расчёт стоимости), а уже потом продавать. Смешивать цели тоже часто не стоит.

2. Целевая аудитория

По моим внутренним подсчётам это 200 упоминание на нашем блоге про целевую аудиторию.

Но сейчас мы разберём это на примере и начнём с того, что Вы должны знать Ваших клиентов.

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

Имея список потенциальных клиентов в голове (лучше на бумаге) Вам нужно определиться для кого именно Вы будете делать свой сайт.

Вполне возможно объединение нескольких аудиторий в одну. Но чтобы наверняка понять – возможно это или нет, Вам нужно определить их критерии выбора, потребности и страхи. Схема будет выглядеть примерно так.

Целевая аудитория

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

Для этого представьте, что Вы продаёте нано-тренажёр для похудения. Навскидку, у Вас потенциальные клиенты это все люди с лишним весом. Но у меня к Вам вопрос – они похожи в своих критериях выбора?

Надеюсь, что Вы ответили нет. Все люди разные, как и их критерии выбора. Один готов заплатить любые деньги, лишь бы гарантированно получить результат.

Другой купит только то, что не занимает много свободного времени. А третий вообще кроме низкой стоимости ничего не видит. Этот список можно продолжать и продолжать.

И даже в таких узких нишах, по типу строительства домов из бруса, тоже у всех разные критерии (для лучшего усвоения, посмотрите видео ниже).

3. Уровень осознанности

Эта тема уже более сложная для восприятия, особенно на слух. Поэтому Вам повезло, что Вы читаете, а не слушаете по телефону как наши менеджеры рассказывают про уровни осознанности.

Смысл заключается в том, что каждый человек при своём находится на разном уровне восприятия проблемы и решения.

В маркетинге данный странный подход называется “ ”. Но я не буду грузить Вас умными терминами, а просто покажу на примере как это работает.

И для этого сравните между собой три одинаковых и в то же время разных запроса в поисковую строку Яндекса или Гугла:

1. Из чего построить малоэтажный дом?
2. Кирпич или сруб в строительстве домов?
3. Строительство малоэтажных домов из кирпича

Все эти запросы относятся к малоэтажному строительству и все они в теории потенциальные клиенты для строительных фирм.

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

Для Вас при разработке это значит, что во всех случаях будет разная , тексты на нём и изображения.

Например, для второго типа запросов, Вы сначала показываете чем строительство дома из кирпича лучше, чем из сруба (если Вы делаете на основе кирпича), а уже только затем продаёте.

В третьем виде запросов, Вы без долгих объяснений в любви, сразу предлагаете своё решение и в большой мере делаете акцент на выгодах Вашей компании по сравнению с конкурентами.

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

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

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

На котором с помощью специальной серии вопросов вытягивается всё, что накопилось и всё, что напрямую влияет на принятие решения клиентом. После чего Все эти смыслы распределяются и создают скелет сайта.

Тоже не буду скрывать и скажу, что все агентства по-умолчанию проводят брифинг клиента.

Но, как обычно, раскрою еще один секрет, который делает сайт продающим. Брифинг проходит устно.

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

Такой брифинг занимает 1-2 часа. И раз вскрываю все карты, то приготовьтесь к тому, что если у Вас компания новая или в ней ничего нет, то “упаковщик смыслов” просто ничего не сможет взять и сайт получится точно НЕ продающим.

Конечно, Вы на выходе будете винить во всём сайт или подрядчика, но на самом деле, всё дело будет в отсутствии Ваших наработок, выгод и особенностей.

Важно. Маркетинговое агентство предлагает дополнительные выгоды и решения, но, как правило, все они глобально не меняют ситуацию.

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

Реализация

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

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

Лайфхак. Если Вы будете делать лендинг самостоятельно, то я рекомендую – PlatformaLP , Tilda , Bloxy .

1. Оффер

Как только человек попадает на сайт, он первым делом видит Ваш оффер. Простым языком, это Ваше предложение с основными выгодами.

Главный оффер может быть 4 уровней. Отличительную разницу сразу видно на примерах.

Первый уровень – когда Вы просто пишите “Аренда машин в Москве”.
Второй уровень звучит уже интереснее – “Аренда машин в Москве. Премиум-автопарк”.

Третий уровень для многих даётся очень сложно и базируется на результате – “Аренда премиум-машин в Москве. Единичные экземпляры привлекут тысячи глаз всего от 5000 рублей в день”.

Можно ли назвать это идеальным предложением? Конечно, нет. Я придумал его за 2 минуты для этой статьи.

Но суть Вы уловили и заметили насколько разным может заголовок на первом экране. Поэтому по-умолчанию стараемся достичь 3, а еще лучше 4 уровня оффера.

Хотя к своему удивлению, я видел шикарные результаты на офферах 1 и 2 уровня, но это скорее исключения или очень продуманная стратегия.

Чтобы создать своё предложение, Вам нужно очень хорошо разбираться в своём бизнесе и понимать клиентов.

Чтобы Вам упростить жизнь (мы именно для этого здесь находимся), рекомендую прочитать нашу статью на эту тему.

А лучше не просто читайте, а сразу создавайте и отписывайтесь о результатах в комментариях.

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

2.

Продающесть landing page также создаёт мастер по текстам (копирайтер). Он делает это на основе полученного от маркетолога прототипа, где отражены все выявленные смыслы на этапе упаковки.

Процесс этот трудоёмкий и является намного более важным, чем дизайн. Уверен, я Вас сейчас немного удивил.

Но это полная правда. Страшный сайт с хорошими текстом сделает своё дело. А плохие тексты на красивом дизайне потеряют клиента.

Хороший текст недооценён и это замечается во всех действиях клиента, который больше отдаёт внимание дизайну.

Но если Вы хотите получить качественный лендинг, Вам нужно очень внимательно подойти к заголовкам и текстам.

Скорее всего сделать это самому не получится, так как это целое искусство, которому нужно учиться, а потом набивать руку.

Помимо всего я дам Вам основные правила копирайтинга на сайтах, чтобы Вы могли хотя бы примерно определить насколько хорошая перед Вами работа.

Они не железобетонны, во всём есть исключения, но если нарушено сразу несколько пунктов, то стоит задуматься о качестве.

1. Не банальный заголовок. Если Вы видите заголовок “Почему выбирают нас?”, “О нас” или другой избитый вариант, который используется на десятках других сайтов, то бегите со всех ног.

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

2. Вы-подход. Чем больше на сайте заголовков и текстов, которые начинаются со слова “МЫ”, то тем хуже сайт.

   Клиенту куда важнее, чтобы говорили о нём и для него, а уже потом он читал о Вас любимых.

3. Простой язык. Если потребитель ничего не понимает в том, что написано на лендинге или встречает незнакомые слова.

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

4. По делу. На одностраничнике не должно быть текста ради текста, даже если он создаётся для SEO.

   Если можно с сайта убрать этот текст и ничего не изменится, то нужно резать и сокращать.

5. Конкретика. Так же избитые словосочетания из серии “Индивидуальный подход”, “Гибкая система скидок”, “Высокое качество” являются клеймом.

   Единственное, это допускается, когда раскрывающий текст даёт 100% конкретику, а эта фраза лишь является подводкой или заголовком.

Отдельным пунктом хочу вынести такой критерий как “Отработка возражений”. Он реализуется по всему сайту во всех элементах текста.

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

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

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

3. Дизайн

Красивый сайт не всегда равно продающий сайт. Это Вам нужно запомнить навсегда. В своём материале

КЛИЕНТ
Салон красоты Антураж – это парикмахерские и косметические услуги, макияж и наращивание ресниц, уход за телом, ногтевой сервис и многое другое.

ЗАДАЧА
Создать сайт и выполнить базовую SEO оптимизацию, которая сделает пользователей интернета клиентами салона красоты «Антураж».

ПЛАТФОРМА
Codelgniter - фреймворк на PHP.

СОЗДАНИЕ ЛЕНДИНГА ДЛЯ САЛОНА КРАСОТЫ

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

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

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

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

В футере сайта имеется кнопка “подняться наверх” с аудио-сопровождением.

Стильная и удобная административная панель управления даёт возможность быстро и удобно редактировать размеры и порядок фото (что немаловажно для данного сайта).

СРОКИ РАЗРАБОТКИ ЛЕНДИНГА
Создание сайта в течении 14 рабочих дней.

SEO ОПТИМИЗАЦИЯ ЛЕНДИНГА

Забегая вперед скажу, что выбранная нами стратегия продвижения принесла хорошие результаты и привела на сайт довольно много клиентов. Конечно не каждый одностраничный сайт повторит успех salon-anturage.by , а многие вообще считают seo оптимизацию одностраничных сайтов малоэффективной. Самое главное при выборе методов продвижения – это тщательно изучить конкурентов на интернет-рынке.

Работы по продвижению сайта:

• 1. В первую очередь мы провели тщательный анализ конкурентов. Внимание обращали на:
  • - Возраст сайтов конкурентов;
  • - Трафик;
  • - Количество проиндексированных страниц;
  • - Количество входящих ссылок и их качество;
  • - Ключевые запросы и их позиции в поиске;
  • - Социальные сети, подключенные к ресурсу (на каких социальных площадках продвигаются, количество подписчиков, среднее количество лайков, репостов и подписчиков, частота публикаций)
  На основе проведенного анализа была разработана стратегия продвижения сайта. Мы решили сделать базовую оптимизацию ресурса, подключить социальные сети и использовать крауд-маркетинг.
• 2. Собрали и согласовали с клиентом семантическое ядро сайта. Подбор запросов осуществлялся с помощью программы KeyCollector, поисковых подсказок и сайтов конкурентов.
• 3. Прописали мета-данные – title, description, h1-h6, alt. Эти теги очень важны для seo сайта, а их правильное заполнение положительно сказывается на ранжировании сайта в поиске.
• 4. Зарегистрировали в панелях веб-мастеров Google и Яндекс. Для увеличения скорости индексации landing page.
• 5. Подключили сервисы аналитики Google и Яндекс.
• 6. Использовали крауд-маркетинг. Рекламировались на тематических форумах.
• 7. Зарегистрировали в Яндекс каталоге и на других тематических и региональных площадках.
• 8. Создали и выполнили интеграцию социальных сетей: Facebook, Vkontakte, Instagram, Одноклассники.

Выводы и результаты оптимизации:

Лендинг салона красоты “Антураж” жители города Солигорск могут найти на топовых позициях, как в Яндексе, так и в Google.

Яндекс:

Google:

На сайте salon-anturage.by выполнены все требования поисковых систем, а также он предоставляет пользователям максимально полный ответ на их запрос по услуге в поиске. Упор делался на внутреннюю оптимизацию веб-сайта, работы с социальными сетями и форумами использовались в качестве вспомогательного инструмента. Через месяц после окончания работ, без покупки ссылок, а благодаря лишь работам по базовой оптимизации сайт занял топовые позиции в поиске, и рост трафика на сайте продолжается.

На графике мы видим рост числа посетителей за шесть месяцев.

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

Лендинг для салона красоты

Главной задачей любого одностраничника, в том числе и лендинга для салона красоты, является выполнение своей основной рекламной функции — привлечение клиентов, грамотная презентация товара/услуги и получение прибыли.

Салоны красоты оказывают целый комплекс разных мероприятий (услуги парикмахера, визажиста косметологические и SPA мероприятия и прочее). По-этому, в контексте Landing Page, важно не распыляться на все возможные оказываемые услуги, а сфокусироваться на какой то конкретной из всего перечня. В противном случае (если развернуто описывать все возможные услуги) мы собьем пользователя с толку и отпугнуть его, потеряв тем самым потенциального клиента.

Так же на своем лендинг пейдж салона красоты нужно больше акцентировать внимание читателя на всевозможных специальных предложениях и акциях, пример: «скидка наSPA процедуры по будням до 50%» и т.д.

Пример landing салона красоты

Landing page салона красоты должен иметь привлекательный и элегантный дизайн. Ведь в самой фразе «салон красоты» заложены воздушность, неповторимость и стремление к прекрасному. Как неопрятный, небрежный человек не может расположить к себе, так и одностраничник салона красоты не может позволить себе иметь неаккуратный, незавершенный и не симпатичный внешний облик. В противном случае – это будет просто злая ирония и непрофессионализм хозяев интернет-ресурса.

Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.

1. Заголовок с УТП

У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:

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

Размещается заголовок в верхней части лендинга, на уровне глаз пользователя. Большой, яркий, интригующий.

От заголовка зависит показатель отказов.

Вот примеры заголовков лучших лендингов нашей компании.

2. Дескриптор

Дескриптор также влияет на показатель отказов, хоть и меньше, чем заголовок. Обычно состоит из логотипа, названия компании, слогана или нескольких слов об услугах или товарах. Размещается вверху слева или в середине.

В том случае, если на посадочной странице есть заголовок с УТП, дескриптор делают скромным – лого плюс название.

Лучшие лендинги всегда содержат оригинальный дескриптор.

3. Блок с контактными данными

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

• реальный номер телефона;
• электронную почту;
• кнопку «Обратный звонок».

Обязательно используется призыв – просьба позвонить.

4. Привлекательное изображение

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

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

На скриншотах вы видите красивые лендинги с привлекательными изображениями.

5. Формы захвата

Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.

Форма захвата содержит графы для ввода имени и телефона. Призыв к действию описывает дополнительные выгоды (подарок, скидку, дополнительную услугу), которые побуждают посетителя к немедленной отправке данных.

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

Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.

6. Блок с выгодами для клиента

Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.

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

7. Отзывы клиентов

Блок с отзывами – ключевой в лендинге.

На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.

Каждый отзыв:

• содержит имя и реальное фото клиента;
• содержание с ключевыми подробностями, которые позитивно скажутся на конверсии лендинга.

Вот примеры блоков с отзывами на лучших лендингах нашей студии.

8. Тарифы или пакеты услуг

Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.

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

9. Примеры Лендинг Пейдж

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

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

Посмотрев примеры лендингов посетитель должен убедиться в качестве продукта или услуги.

10. Реальные контактные данные в футере

Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.

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

Также тут размещается заключительная форма захвата.

В идеальном лендинге присутствуют все вышеперечисленные элементы. Однако чтобы посадочная страница действительно была эффективной, все ее блоки нужно грамотно объединить в одну композицию. А так же добавить смыслы, благодаря которым посетители совершать конверсионные действия на нашем лендинг пейдж.

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

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

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

Смотрите, вдохновляйтесь, применяйте понравившиеся идеи на практике, миксуйте их со своими и не забывайте проводить 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 – хороший пример того, как благодаря дизайнеру продукт хочется приобрести. И немедленно съесть!

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