Как сделать лендинг самому — пошаговая инструкция. Создание и продвижение лендинга самостоятельно: пошаговая инструкция Создание landing pages

Если вам нужна информация только по сервисам с помощью которых можно сделать landing page, то переходите сразу к этапу 5 - выбор инструмента верстки . Если же вы хотите понять алгоритм создания лендинга от А до Я, то читайте статью полностью.

Как сделать Landing page - пошаговая инструкция из 9-ти этапов

Этап 1. Подготовка

Цель лендинга

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

1. Продажа товара / услуги (пример: продажа меда, продажа услуг по разработки логотипа, продажа онлайн курса) ;
2. Получение контакта (пример: подписка на рассылку, заявка на замер) ;
3. Информирование (пример: приглашение на бесплатное оффлайн мероприятие, промо страница магазина с акциями) .

Определяем целевую аудиторию и что для нее важно

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

Как определить ЦА?

• Проанализируйте тех клиентов, с которыми уже работали или работаете сейчас;
• Спросите у клиентов, что для них важно. Да, прям так, просто позвоните или напишите, заранее подготовьте список вопросов;
• Вспомните, а лучше записывайте вопросы, которые вам чаще всего задают по поводу вашего продукта;
• Почитайте тематические сайты/форумы, посмотрите что волнует ваших клиентов.

Смотрим конкурентов (бенчмаркинг)

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

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

Как я это делаю: создаю отдельную папку с названием «Идеи» и делаю скриншоты интересных блоков.

Этап 2. Пишем текст для лендинга

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

Хаос в голове перенесите на бумагу

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

Составляем блоки лендинга

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

Вот основной список блоков, который можно встретить на 90% лендингов:

1. Первый экран с УТП (уникальным торговым предложением)
2. Раскрытие продукта (Описание услуги или товара)
3. Информация об авторе / компании
4. Отзывы
5. Кейсы (Истории успеха)
6. Форма / призыв к действию
7. FAQ (Ответы на частые вопросы)
8. Контакты / подвал сайта

Какие еще могут быть блоки на сайте:

• Факты в цифрах
• Выгоды (преимущества)
• Видео
• Портфолио
• Для кого
• Этапы сотрудничества (или Как сделать заказ, Как оставить заявку)
• Тарифы и цены
• Партнеры
• Галерея
• Расписание
• Команда
• Сертификаты, дипломы, благодарственные письма
• Документы
• Таймер

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

1. Главное ставим в начале. Не нужно в начале сайта писать о себе, покажите сначала свой продукт.
2. Замените общие слова на факты. Не нужно убеждать посетителей в чем-либо, оставьте это право за ними. (Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным).
3. Проработайте особенно хорошо первый экран и УТП. После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет серфить дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт. (Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»).
4. УТП (Уникальное торговое предложение). Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. УТП вы можете составить по технологии 4U.
5. Чем короче тем лучше. Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки.
6. Больше заголовков. Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт он будет именно по ним.

Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.

Где искать копирайтера

1. Биржа копирайтинга ContentMonster.ru
2. Биржа копирайтинга Etxt.biz
3. Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях (Вк, Фейсбук, Инстаграм).

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

Этап 3. Составляем прототип

Перед этапом дизайна важно составить прототип, давайте расскажу почему. Причин несколько:

1. Без прототипа потратите больше времени, как ни странно:) На заре своей карьеры я после написания текста, сразу делал дизайн. Я думал что так я сэкономлю время, но на деле оказалось что все тянулось еще дольше, потому что это не удобно сразу придумывать элементы дизайна без каркаса.
2. Проблемы с заказчиком, если вы делаете лендинг на заказ. Такая ситуация была у всех. Вы утвердили текст и сразу начали делать дизайн, потратили кучу времени, отправляете его клиенту, а он говори что все не так и нужно переделывать, текст поменять местами и пр. Это куда сложнее сделать, когда уже дизайн готов, нежели когда у вас только прототип из текста и кружочков.

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

Пример из моего кейса прототипа и дизайна, сделанного по данному прототипу.

Пример прототипа

Пример дизайна по прототипу

На прототипе мы указываем:

• Расположение текста, выделяем заголовки;
• Где будет находится графика (картинки, иконки);
• Где будут кнопки;
• На каком блоке фон будет светлым, а на каком темным.

Сервисы для прототипирования:

• Photoshop. Я делаю в Фотошопе. После того как прототип утвердим с заказчиком, удобно здесь же по прототипу делать дизайн.
• Сервис Moqups . Специальный сервис с готовыми элементами, просто перетаскивайте и добавляйте свой текст.
• На бумаге. Можете от руки набросать прототип, если лендинг не сложный, не хотите сильно заморачиваться.

Я всегда начинаю прототип на бумаге, мне так удобнее. Потом уже переношу в Фотошоп.

Используйте сетку Bootstrap

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

Шаблон Photoshop с сеткой, который я использую в работе, вы можете .

Этап 4. Делаем дизайн

Ввсе элементы дизайна лендинга можно разбить на три части, это подбор:

1. Шрифта
2. Цвета
3. Графики (фото, иконки, картинки)

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

Как пример: На сайте по оказанию ритуальных услуг навряд ли будут уместны яркие цвета и девушка с лучезарной улыбкой с надписью крупными буквами АКЦИЯ!. Или же сайт про организацию праздников в серых, блеклых тонах, с черными кнопками и шрифтом с брусковыми засечками, после просмотра которого хочется впасть в депрессию, а не заказать праздник для ребенка. Примеры конечно утрированные, навряд ли вы их встретите в жизни (хотя не исключено), но суть я думаю вы уловили.

Давайте обсудим каждый элемент подробнее.

Шрифт

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

Отталкивайтесь от своей тематики и от того какую эмоцию вы хотите вызвать у посетителей.

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

• Roboto
• Open sans
• Pt sans

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

Например:

Заголовок - Roboto (Bold)
Текст - Roboto (Light)

Заголовок - Open sans (Bold)
Текст - Roboto (Light)

Заголовок - Pt sans (Regular)
Текст - Open sans (Light)

Где брать шрифты?

Есть бесплатные и платные шрифты. На первых этапах я вам советую использовать бесплатные шрифты от Google Fonts . Там есть хорошие варианты и те, что я описал выше, тоже есть.

Почему я советую именно Гугл шрифты?

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

Если вы делаете сайт для себя, подставите себя, если делаете для заказчика, подставите заказчика.

Цвет

Как правильно подобрать цветовую гамму для сайта?

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

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

Посмотрите интересное видео на эту тему

Вам их нужно подобрать также исходя из вашей тематики.

Примеры, какое настроение вызывает каждый цвет:

Материал про цвета взят отсюда .

Графика (фото, иконки, картинки)

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

Если честно я тоже грешил этим раньше, но сейчас прошу (молююю) заказчиков присылать максимум своих «живых» фото товаров, персонала, помещений и пр.

Правда, лучше сделать фото на телефон, пусть оно будет менее качественное, зато клиент будет понимать что вы не скрываетесь за маской картинки из интернета, вы показываете свое лицо, еще один пункт для доверия к вашей персоне.

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

Кто-то скажет «Илья, фото на стоках стоят как самолет!» - есть такое:) Для вас есть способ как скачивать картинки по доллару, про сервис . Ну а если вы делаете проект для крупной коммерческой компании, то лучше заложите эту сумму в бюджет и купите картинки на официальном фотостоке, опять же обезопасите себя.

• Сервис ShopDiz.pro - скачивание картинок со стоков по 0,5-1 доллару.
• Сервис ShutterStock - самый популярный сток с большим количеством фото, вектора, видео.

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

Как придумывать идеи дизайна для блоков? Здесь какого-то универсального правила нет. Главное убирайте все что вам кажется лишним, сокращайте текст, используйте графику в меру, не перегружайте. Смотрите примеры хороших лендингов, делайте себе пометки, делайте скриншоты блоков, которые вам нравятся, чтобы потом делать что-то похожее на своих проектах.

Этап 5. Выбираем инструмент для верстки

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

1. CMS WordPress + конструктор WPBakery или Elementor

Устанавливаете CMS WordPress, устанавливаете шаблон, конструктор WPBackery платный, но он идет бесплатно в наборе с 99% шаблонов, которые я . Есть и второй удобный конструктор, это Elementor , он бесплатный, но чтобы расширить его функционал, покупается Pro версия Elementor . Для меня оба конструктора удобны, какой-то один посоветовать не могу, у каждого свои плюсы. Посмотрите описание и варианты сайтов с обоими конструкторами и выберите подходящий.

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

Например на данном блоге я использую шаблон The7 , в наборе которого идет плагин WPBakery.

Подобрать домен вы можете на сервисе:

• Reg.ru - регистрация доменов
• Timeweb.com - если покупаете домен сразу с хостингом, то выгоднее купить тут

Регистрация домена у всех сервисов одинаковая:

1. Зарегистрируйте аккаунт на сервисе;
2. Подберите вариант домена, имя должно быть свободно;
3. Выберите зону (ru, com, рф и пр.);
4. Введите свои паспортные данные, если регистрируетесь как юр.лицо то данные компании;
5. Оплатите домен на год (или сразу на несколько лет);
6. Готово!

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

Этап 7. Верстаем лендинг

Когда дизайн готов и вы определились с методом верстки. Следующий шаг, все это дело заверстать.

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

1. - это мой курс, который я записывал на шаблоне The7 и конструкторе WPBakery;
2. Tilda.Education - уроки и вебинары по конструктору Tilda;
3. Канал WPlovers - парень записывает уроки по Elementor;
4. База знаний LPGenerator - ответы на частые вопросы по платформе LPGenerator.

Этап 8. Прикручиваем дополнительные инструменты

Онлайн чат

Онлайн чат повышает конверсию, проверено! Если что-то человеку не понятно и нужна консультация. не каждый будет звонить или писать в поддержку на почту, удобнее спросить и сразу получить ответ в онлайн чате. Подключить можете например Jivosite , я сам его использую, он мне «приводит» новых клиентов. Можете написать мне в чат «Привет!».

Обратный звонок

Метрика

Важно отслеживать показатели сайта, без цифр вы будете как слепой котенок. Важно понимать сколько человек посетило сайт, сколько оставили заявку, какие вообще показатели у сайта, можете даже посмотреть поведение посетителей, как они просматривают сайт. Установить можете Яндекс метрику и/или Google Analytics .

Ретаргетинг

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

CRM

ЦРМ отвечает за то, чтобы ни одна заявка с сайта не пропала, чтобы по каждой заявки вы понимали какое действие нужно сделать (перезвонить, отправить КП, встретиться, напомнить о себе через 14 дней и пр.). Это актуально если у вас поток клиентов, если же 2-3 в месяц, то думаю что CRM вам не нужна.

Наиболее популярные CRM это:

• AmoCRM (цена 499 — 1499 рублей/месяц)
• Битрикс24 (цена, от бесплатного тарифа до 11990 рублей/месяц)
• Таблица Гугл , Exel или ручка с листочком (если нужно совсем бюджетно)

Калькулятор

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

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

Сбор базы подписчиков

Ели вы решили собирать контакты клиентов в базу подписчиков, чтобы потом делать емейл или смс рассылку, то нужно использовать специальный сервис. Можете рассмотреть SendPulse , недавно я делал обзор на этот сервис, который можете . У СендПульс есть бесплатный тариф, с помощью которого вы можете протестировать сервис. Если не его, то есть и другие предложения на рынке, например MailerLite, UniSender, JustClick , GetResponse и пр.

Этап 9. Проверка

Итак! Все настроили, подключили, сайт уже в интернете, ура, молодцы. Теперь самое время его проверить. Что именно проверять?

Проверка текста

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

Проверка адаптивности

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

Проверка кнопок

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

Проверка форм заявки

Отправьте тестовую заявку, проверьте доставляемость письма. Если делали интеграцию с CRM, то проверьте чтобы заявка попадала в CRM.

Примеры лендингов

Вы можете посмотреть примеры лендингов, которые я разработал

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

ИТОГ

Если вы сделали все шаги, то поздравляю, лендинг пейдж готов к работе! Теперь нужно чтобы лендинг приносил вам клиентов, для этого нужно настраивать рекламу, но это уже история для другой статьи. Надеюсь что данная статья была вам полезна и вы смогли понять весь процесс разработки качественного лендинга под ключ. По любым вопросам вы можете писать в комментариях под этой записью. Также можете написать свои методы и фишечки при создании сайта, будет интересно почитать и узнать ваши наработки:)

Пишите в комментариях ваши мысли. До встречи в других статьях!

Лендинг, лединг, лейдинг, лендинг пейдж, одностраничный сайт, langing page, одностраничник, продающий сайт, посадочная страница.

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

Ну, раз нужен, то давайте решим вопрос с его созданием. Сделать лендинг самому? После этой статьи – не вопрос!

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

На всякий случай или этап 0

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

1. Получить новые заявки на товары/услуги;
2. Увеличить узнаваемость бренда;
3. Информировать о предоставлении товаров/услуг;
4. Предоставить консультацию по услугам;
5. Получить резюме от кандидатов;
6. Привлечь партнеров, дилеров, представителей;
7. Обеспечить доступ к сервису;
8. И прочее.

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

Важно. Перед созданием Вам нужно чётко определить цель Вашего лендинга. И запомните – цель должна быть одна.

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

ЭТАП 1 – Отдать или сделать самому

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

Что же делать… Что же делать

И выбираться будут они на основании Ваших денежных и временных ресурсов. Рассмотрим каждое из них с плюсами и минусами.

Конструктор

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

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

А всё это произошло потому, что он нашёл в интернете конструктор лендингов и узнал, что всё можно сделать самому, потратив на это буквально 5-6 часов, и заплатив при этом не больше 1 000 рублей в месяц.

Но мы то с Вами понимаем, что можно собрать и “машину” самостоятельно, но насколько она далеко поедет, насколько будет индивидуальный , насколько будет корректное техническое оснащение…

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

Плюсы :

• Дешево. Прям очень. 500-1000 рублей в месяц и Вы – счастливый владелец одностраничного сайта;
• Просто. Вам не нужно думать о верстке, адаптации под мобильные устройства, подключении смс-оповещений о новых заявках на Ваш телефон. Все это уже есть и сделано для Вашего удобства;
• Быстро. Сделать и настроить можно реально всё быстро. Причём, внести изменения тоже не составит труда;
• Техническая поддержка. У Вас есть вопрос? Вам ответят на него максимально быстро и подробно. Огромный плюс;
• Бесплатный тестовый период. Сейчас практически у всех конструкторов лендинг пейдж 14 дней бесплатного тестового периода. Регистрируетесь и…

Небольшая жизненная правда. “ 14 дней халявы! За это время заработаю денег с помощью лендинга на конструкторе и закажу красивый сайт в агентстве”, – думали они.

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

Минусы :

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

  Решили подглядеть у конкурентов? Отлично! Только откуда Вы знаете, что у конкурентов эффективный лендинг и показывает хорошие показатели?

• Дизайн. Если Вы работаете с конструктором первый раз, то на дизайн landing page по окончании работ “без слез не взглянешь”.

  Даже если это далеко не первый вариант. Крутого дизайна, такого, чтоб “Вау!”, не ждите.

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

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

Лично мы можем посоветовать этот landing page конструктор . Обычно мы отправляем к ним клиентов, которые только начинают или тестируют нишу.

Фрилансеры

Давайте сразу по делу и из опыта. Найти фрилансера, который в одиночку создаст продающий лендинг с нуля и “под ключ” – НЕВОЗМОЖНО. Ну правда.

Возможно найти отдельных специалистов: дизайнера, который создаст дизайн будущего сайта, или программиста, который его сверстает, но монстра, который КАЧЕСТВЕННО сможет сделать сайт от и до, не существует.

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

Поэтому идеальная схема работы с фрилансером, это когда Вы самостоятельно всё анализируете, собираете, готовите.

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

Плюсы :

• Время. Как плюс, так и минус. Выгода в том, что Вы снимаете с себя основную часть хлопот по реализации внешнего вида и технической составляющей.
• Качество. Главный плюс. Сто процентов они сделают лучше, чем сделаете это Вы своими руками с нуля.

  Как минимум, потому что у них есть опыт и знания, которых у Вас в их сфере, давайте честно, почти нет.

Минусы :

• Ответственность. Если сайт не будет работать, то никто кроме Вас не виноват. Так как Вы являетесь тем, кто ими управляет и говорит как нужно.

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

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

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

  И это минимум, который можно ожидать, когда хотите сделать лендинг пейдж недорого.

• Деньги. Вам придётся раскошелиться, так как хороший специалист без “связей” стоит не мало.

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

• Кидалы. Работа строится следующим образом: 50 на 50. Предоплата и потом оставшаяся оплата после завершения проекта.

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

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

А уже оставшуюся часть суммы переводите напрямую фрилансеру. В таком случае Вы переплатите 15%, но зато обезопасите себя.

Лайфхак. Если фрилансер собрался Вас кинуть, то от безопасной сделки он Вас будет отговаривать. Это будет Вам сигналом.

Этап 2 – кому и что?

Самый скучный (но самый нужный) блок в этой статье. Неважно каким путем Вы пойдете. Будете делать эффективный лендинг пейдж своими руками или отдадите в специализированное агентство. В любом случае Вам нужно знать 3 вещи:

1. Свою целевую аудиторию;
2. Лестницу Ханта;
3. Внутренности вашей компании.

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

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

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

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

Про определение целевой аудитории, или ещё глубже определение клиента, мы уже писали.

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

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

Лестница Ханта

Но что даст знание лестницы Ханта? Также как и аватар клиента, она даст саму структуру будущего лендинга.

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

Если очень коротко, то до момента принятия решения о покупке человек проходит 5 шагов/уровней осознанности:

1. Этап “Безразличие”. Проблемы не существует.
2. Этап “Осведомленность”. Проблема есть, но нет решения.
3. Этап “Сравнение”. Варианты решения проблемы сравниваются между собой.
4. Этап “Выбор”. Вариант решения выбран. Ищутся продукты.
5. Этап “Покупка”. Выбор между поставщиками продукта.

Как эта сложность может помочь Вам при создании лендинга? Давайте рассмотрим каждый этап и как нужно действовать:

1. Этап “Безразличие”. Вам нужно сначала создать проблему в голове человека. Показать, что если он этого не сделает/не купит, то все будет плохо.
2. Этап “Осведомленность”. Вам нужно в первых экранах показать, что существуют разные варианты решения его проблемы.
3. Этап “Сравнение”. Нужно донести, что Ваше решение лучше других, и для этого можно сделать сравнительную таблицу, предложение обзора продукта, результатов исследования, личную консультацию по подбору и т.д.
4. Этап “Выбор”. Вам нужно показать какое предложение подойдёт именно ему, точнее в каком в виде/комплектации. Для этого раскрываем больше выгод нашей продукции.
5. Этап “Покупка”. Вам нужно показать, в первую очередь, выгоду работы именно с Вашей компанией, а уже потом рассказывать о продукте и о том, что он самый лучший.

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

Упаковка

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

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

Так как правильные вопросы формируют правильные ответы, которые Вы берёте и упаковываете в свой сайт. Этот этап поможет Вам взять всё самое ценное в Вашей компании и показать это лицом.

Чтобы вы уловили суть, вот Вам пример из 10 вопросов, которые помогут лучше/глубже осмыслить свою компанию и свой продукт, и подать это “под чудесным соусом”:

1. Сформулируйте 3-5 “причины, почему объективно выгоднее покупать у Вас, а не у конкурентов”.
2. Какие особенности производства есть именно в Вашей компании?
3. Проводите ли Вы внутреннее обучение персонала?
4. Сравните продукт с аналогами. Укажите преимущества и недостатки.
5. Кто является лицом или лицами компании?
6. Какие бонусы Вы готовы выдавать клиентам при покупке на большие суммы?;
7. Распишите детально этапы работы с клиентом от первого обращения до выполнения работ.
8. Расскажите про финансовые условия работы (предоплата, рассрочка, отсрочка первых выплат, продуктные кредиты, скидки, продукт на реализацию, выкуп неликвида и т.д.).
9. Какие о компании или от компании существуют публикации? (экспертные комментарии, интервью, жюри в телешоу, авторские колонки, статьи).
10. Ваши клиенты-звёзды.

ЭТАП 3 – Прототип

Наконец-то мы добрались до самого интересного. Сейчас будем создавать Ваш будущий сайт.

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

Шаг 1. Структура прототипа

Прототип – это структура и последовательность блоков будущего лендинга, которую Вы легко построите из критериев выбора и возражений Вашей целевой аудитории.

Лучше всего сделать это следующим образом: берёте лист бумаги и накидываете последовательность блоков/смыслов. Выглядит это примерно так:

1. Шапка;
2. Выгоды компании;
3. Каталог;
4. Собственное производство;
5. Склад;
6. Команда;
7. и т.д.

Это мы с Вами прописываем блоки, но также должны не забывать про две классические структуры, по которым строится любой рекламный материал и landing page не исключение:

1. (товары/услуги);
2. PmPHSA (). Расшифровывается как Pain, more Pain, Hope, Solution, Action (боль, усиление боли, надежда, решение, призыв к действию).

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

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

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

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

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

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

Простите за откровенность, но мне чертовски приятно видеть людей, которые тоже работают по ночам (только делайте это не в ущерб здоровью). Я было стал думать, что трудоголики перевелись. Что касается результатов сотрудничества, то просто упомяну такой факт: в пиковые дни мы получали по 140 заявок в день, и нам пришлось нанять под канал интернет-маркетинга целый отдел продаж. Спасибо вам!

открыть отзыв Дмитрий Новожилов , D-color

Знаете ли вы, что такое e-mail-маркетинг? Я, к примеру, не знал до встречи с ребятами из компании Convert Monster. Я наивно полагал, что это – просто красивое слово. Полагал и одновременно слышал, что оно помогает эффективнее работать с базой клиентов. Полгода назад у нас появилась база клиентов. Она составлялась из ежедневных заявок на франшизу детских садов. Заявок было много, но конверсия оставалась на очень низком уровне. Я боролся с этим явлением – пытался самостоятельно отправлять письма по базе. Постоянно не хватало времени – чтобы качественно составить очередную рассылку, нужно было потратить половину рабочего дня. С каждой потраченной минутой необходимость сделать грамотную цепочку возникала все больше и больше. Но пока письма отправлялись раз в неделю или раз в 2 месяца. В работе не было системности. Чего-то не хватало. Мы долго не могли понять, чего именно. Ребята из Convert Monster быстро взялись за дело. Первые результаты не заставили себя ждать. После включения стартовой цепочки писем мы совершили несколько сделок по старой базе. Они перекрыли расходы на запуск e-mail-маркетинга. Через пару месяцев мы отмечаем увеличение конверсии в три раза. И это только начало. Сейчас мы работаем над тем, чтобы еще больше увеличить текущую конверсию. Например, еще в три раза. Посчитайте и вы: - сколько денег принесет поднятие конверсии в 2 раза? Это минимум! - сколько вы получите, если закроете минимальный процент клиентов из существующей базы? Вы еще сомневаетесь, стоит ли обращаться в Convert Monster?

открыть отзыв Сергей Дегтярев

Мы используем интернет-трафик для привлечения клиентов не так давно. Примерно полтора года. За это время сменили 2 провайдера, пока нам не порекомендовали Convert Monster. Условия сотрудничества у большинства контор, которые предоставляют подобные услуги, похожи: бюджет на месяц, составление рекламной кампании и – понеслось. Потом кампания себя изживает, начинается спад, как следствие – отсутствие клиентов. Потом ты просишь менеджеров изменить тактику, стратегию, заголовки, семантическое ядро – взываешь ко всем святым. А они (менеджеры, а не святые) ничего не делают. А может и делают, но результат отсутствует. Однажды это набивает оскомину, ты уходишь от этой конторы к другой, потом начинаешь искать следующую. Важно! До того, как ты приступаешь к поискам самой первой – пробуешь сам. Конечно же, твои результаты в этот момент лучше всех возможных, они просто НУЛЕВЫЕ! К Convert Monster мы пришли в отчаянии. Это был момент, когда Яндекс устроил подставу – убрал гарантию, на которой мы так классно сидели и которую доили, насколько это было возможно и НЕвозможно. Мы понимали, что счастье не привалит мгновенно, но ждали его. И действительно! Оно начало потихонечку стучаться к нам в двери – пошли заявки и продажи. Потом провал – лето, не сезон, работа в минус. Но ребята не сдавались, а мы не снижали бюджеты, потому что знаем, ЧЕМ это грозит. Никогда не снижайте бюджет и не уходите с той площадки, которая приносит Вам доход! Итоговый результат: более 6 миллионов выручки через Яндекс.Директ. Мы более чем довольны нашим сотрудничеством! Если у вас есть сомнения, работать с Convert Monster или нет, то обращайтесь! Мы подскажем, с кого начать. Тогда Ваш путь к ним будет более длинным, а итоговый выход на Convert Monster окажется Вашим "выдохом" и светом в конце туннеля. Все пути все равно приведут к ним. Если Вы их, конечно, ищете. Это вопрос времени. Только позиционируйте себя как контору, которая готова развиваться и масштабироваться. Иначе Вы будете им попросту не интересны.

открыть отзыв Изабелла Ритц , ООО "Ритц групп"

До того, как обратился к вам, я заказал Landing Page у одной компании, а настройку Яндекс Директ в другой. Обе компании известны на рынке, но каждый в нашей связке сайт + рекламная кампания не стремился помочь, а лишь критиковал другого исполнителя: программисты - директологов, директологи - программистов. В итоге по рекомендации мы обратились к вам и всего за 4 месяца увеличили число заявок в 4 раза (до 120 в месяц) и оборот с продаж онлайн до нескольких миллионов рублей.

открыть отзыв Владислав Шупеня , компания Кимберлит

Не каждый посетитель, попавший на ваш сайт, совершает целевое действие, потому что ему не хватило аргументов, стимулов или не привлек сайт. Толчком для нужных действий пользователя может стать правильный лендинг. Расскажем, какой лендинг будет работать на вас, а также дадим готовый to-do list для создания удачного лендинга.

Чем лендинг отличается от сайта?

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

Хорошим показателем конверсии для сайта считается 2-3 % от всех посетителей. Для лендинга эта цифра - 14-15 %. Такого результата помогают добиться кнопки с призывом к действию.

Принципы успешного лендинга

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

Принцип первого экрана или Above The Fold . Газеты продают сложенными вдвое, поэтому титульная страница делится на видимую и невидимую часть. Если заголовок или фотография на видимой части привлекают внимание, хочется купить газету и дочитать до конца.

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

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

Учет тепловой карты страницы . Важные смысловые блоки расставляют на виду так, чтобы пользователь находил нужные элементы на привычном месте. Есть несколько моделей поведения на сайте, актуальные из которых: Z-Pattern и Guttenberg Pattern

Z-Pattern на примере Фейсбука. Пользователи подсознательно знают, что кнопка действия находится в правом нижнем углу.

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

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

Call-to-action элементы . Призыв к действию - логическое завершение длинного пути, который переводит читателя на новый этап воронки продаж. На лендинге размещают кнопки подписки или покупки, ссылки на товар и формы для электронной почты. На принятие решения влияют форма и цвет кнопки, ограниченное предложение («Осталось три места на вебинаре») и место размещения.

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

Принцип A/B тестирования. Иногда оказывается, что если поменять текст на странице или переместить кнопку заказа на два сантиметра выше, то пользователи охотнее совершают целевое действие. Поэтому на лендингах используют разные гипотезы и тестируют их на отдельных группах посетителей. Нет универсального рецепта, нужно пробовать и менять структуру в зависимости от результатов.

Как создать лендинг?

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

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

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

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

To-do list для заказчика по созданию лендинга

Создание лендинга делится на следующие этапы:

• продумывание структуры лендинга — создание примерного плана, который станет основой ТЗ для дизайнера и копирайтера;
  • Закажите сбор и анализ конкурентов. Сравните себя с конкурентами и международными лидерами в вашей нише. Выпишите ваши конкурентные преимущества, а также “фишки”, которые можно позаимствовать у конкурентов.
  • Ответьте для себя на вопрос, что должен совершить пользователь после прочтения посещения лендинга? Это будет целью лендинга. Эту цель обязательно нужно обозначить перед исполнителями
• написание контента - текст, который будет «продавать» продукт. Основная рабочая схема написания текста “Боль клиента — Усиление боли — Идиллия — Решение — Предложение сделки”;
• дизайн - создание полного макета. Подробнее про дизайн мы написали чуть ниже;
• верстка - оформление сайта в соответствие с его функционалом и макетом дизайнера;
• программирование - реализация необходимого функционала сайта;
• настройка рекламы - запуск контекстной рекламы для генерации трафика на ваш лендинг.

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

При работе с дизайнером и верстальщиком нужно учесть следующие моменты:

1. Макет и прототип страницы - согласуйте основные блоки, структуру и путь читателя от элемента к элементу.
2. Логотип - если у компании еще нет логотипа, самое время добавить его на лендинге, чтобы сделать бренд узнаваемым.
3. Шапка для сайта - с информацией о продукте, логотипом и навигацией.
4. Иллюстрации - хороший дизайнер не будет наполнять страницу фотографиями с фотостока. Он отрисует иллюстрации самостоятельно или запросит у вас качественные изображения технологического процесса или продукта.
5. Кнопки с призывом к действию - дизайнер поможет определиться, какие CTA-элементы нужны на странице и где их расставить.
6. Форма обратной связи - это может быть номер телефона, кнопка «Перезвоните мне» или значок онлайн-чата в углу страницы.
7. Иконки - помогают читателю разделить блоки и визуально выделить важное.