Как сделать лендинг самому: пошаговая инструкция

Шаг 1. Исследуйте целевую аудиторию

Кто приходит покупать ваш продукт? Типичные общие характеристики покупателя: люди от 18 до 50, которые живут в России. Но что это за люди? Например, вы продаёте картины. Кто обычно покупает картины? Женщины — домой, рестораторы — в свои заведения, бизнесмены — в офис. И вот уже вырисовываются некие характеры представителей целевой аудитории.

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

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

  1. Где живёт типичный представитель вашей ЦА из каждого сегмента? Какого он возраста, пола, есть ли у него супруг, дети?
  2. Этот человек ищет ваш продукт как что? Что он хочет найти?

Помните об одной важной маркетинговой формулировке: люди покупают не дрель, они покупают дырку в стене.

У каждого представителя ЦА ваш продукт может вызывать разные эмоции. Рассмотрим те же картины. Кто-то хочет украсить свой дом и ищет способ, как это сделать. Эта важная информационная деталь потом пригодится в создании сильного торгового предложения, которое и приведёт к высокой конверсии.

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

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

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

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

  1. Какова цель покупки? Зачем это клиенту? Что подтолкнуло его к покупке?
  2. Чего он боится при покупке этого продукта? Какие могут быть возражения? Почему он может возразить?

Самое банальное возражение — «Почему так дорого?». Найдите ещё возражения для своего продукта.

  1. К каким конкурентам он может пойти?
  2. Кто будет влиять на решение о покупке?

Все эти вопросы помогают найти боли клиента, понять, чего он боится.

Это сердцевина хорошего лендинга, это боль человека. Это дырка в стене, а не дрель.

Шаг 2. Сформируйте преимущества

У клиента есть проблема — вы предлагаете решение. Есть возражение на ваше решение — закрываете сразу, отвечаете на вопросы, объясняете.

На каждое его предложение, на каждое его возражение, на каждое его желание расписывайте, что может предложить ваш продукт. Как вы можете закрыть эту потребность? Так образуется список преимуществ. На основе этого списка создайте уникальное торговое предложение для каждого портрета ЦА. Преимущества могут повторяться. Выпишите ключевые. Это будет костяк вашего уникального торгового предложения.

Шаг 3. Сформируйте оффер

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

Что должен включать в себя оффер?

  • Название продукта

Если человек ищет дрель, вы говорите, что у вас есть такая-то дрель.

  • Ключевые преимущества

Опишите главную боль и преимущества вашего продукта перед другими, закрывающие эту боль. Чем хороша эта дрель? Почему она лучше других?

Рассмотрим GPS-часы для детей. Представитель нашей ЦА — мама. У мамы есть боль: она боится, что с ребёнком может что-то случиться, он может потеряться.

Используем эти боли и говорим: «Если вы боитесь потерять своего ребёнка, наденьте ему на руку GPS-часы, которые в любой момент укажут его местоположение». В этой части оффера мы давим на боль и предлагаем продукт.

Можно описать эту боль по-другому. Например, так: «По статистике, каждый день пропадает столько-то детей. Если вы не хотите, чтобы ваш ребёнок попал в этот список, наденьте на него GPS-часы».

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

Если вы продаёте цветы, у вашей ЦА будет как минимум два портрета: тех, кто захочет цветов, и тех, кто покупает цветы в подарок. Это два разных УТП. Первым важно знать, как ухаживать за цветами, вторым — чтобы было, может, подешевле.

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

  • УТП

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

Оффер, соединённый с преимуществами продукта, рождает уникальное торговое предложение.

Ориентируйтесь на то, какую пользу продукт принесёт клиенту. Это называется ВЫ-ориентированность.

  • Цифры и факты

Никаких «качественно и недорого»! Напишите, сколько стоит продукт, за какое время вы его изготовите или кто производитель, какая на него гарантия.

  • Сегментация

Укажите узкую географию, если вы работаете только в Иркутске или только в Сочи. Или, наоборот, скажите о том, что работаете со всем миром.

4. Кейсы, ассортимент, результаты

Пример сайта “IKRA”

Распишите кеисы, покажите ассортимент или расскажите о результатах, опираясь на ваши преимущества, УТП и потребность потребителя.

Помните про целостныи образ. К примеру, в результатах вы пишите, что сделали 10 вариантов логотипа, а в преимуществах пишите, что срок разработки занимает до 2 недель. Логичнее указать в первую очередь срок разработки, а потом упомянуть о количестве вариантов.

 – Загружаем лендинг на хостинг

Когда шаблон лендинга отредактирован, вам нужно выложить его в интернет. Для этого вы приобретаете домен и хостинг у любого провайдера (например у Reg.ru), и закачиваете вашу страницу на хостинг. Только переименуйте сначала папку “blue” во что-нибудь более подходящее. Например “services”. Тогда адрес вашего лендинга будет выглядеть так: yourdomain.ru/services/index.html

После загрузки вы можете сменить расширение html на php. Тогда ваш новый лендинг будет открываться просто по адресу: yourdomain/services/.

Основные шаги для создания лендинга

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

Mobirise — простая и удобная программа для создания лендингов

Mobirise — простая и удобная программа для создания лендингов

Mobirise – зарубежная оффлайн программа для разработки небольших адаптивных сайтов. Создание сайта осуществляется на локальном сервере в среде Windows, Linux или MacOS, а также мобильном Android приложении.

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

Функциональность

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

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

  • варианты оформления хедера и футера;
  • слайдеры и галереи различных форматов;
  • табы с кнопками;
  • формы подписки и обратной связи;
  • кнопки соцсетей;
  • блоки с отзывами и др.

Необходимые блоки перетаскиваются в нужное место в drag-n-drop редакторе.

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

Цены/стоимость

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

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

Минусы

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

Без дополнительных платных инструментов сложно избавиться от однотипности макетов, а бесплатного набора расширений недостаточно для создания эффективных бизнес-проектов. Приобретение пакета All-in-one-kit целесообразно только при потоковом создании сайтов.

#5 – Заменяем форму подписки

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

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

То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:

Удаляем форму подписки с лендинга

Теперь наш призыв к действию будет выглядеть так:

Итоговый призыв к действию на лендинге

– Затемняем фоновую картинку

Все вроде бы неплохо, но мне, например, кажется, что фон у нас слишком светлый, и белые буквы на нем теряются. Предлагаю наложить более темный фильтр на картинку. Для этого переходим в папку “assets -> css ->images” и меняем названия у двух файлов, которые там расположены.

Более светлый называем, например “overlay2.png”, а более темный – просто “overlay”.

Переименовать overlay на главном экране

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

Более темный overlay лендинга

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

uKit — лучший конструктор лендингов для малого бизнеса

uKit — лучший конструктор лендингов для малого бизнеса

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

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

Функциональность

Достаточный выбор готовых тематических шаблонов. Хотя всегда можно начать и с «чистого листа» (см. примеры сайтов на uKit). Типовое наполнение в шаблонах на русском языке, поэтому объём правок – минимальный. Если у вас уже есть страничка в соцсетях (Facebook или ВКонтакте), можно воспользоваться специальным инструментом по переносу контента.

Шаблоны uKit

В качестве системы аналитики можно использоваться встроенный сервис, а можно подключить свой вариант (например, Google Analytics или Яндекс.Метрика).

Созданные страницы автоматически адаптируются под экраны мобильных устройств, сертификаты SSL генерируются бесплатно. Есть интеграция с самыми востребованными инструментами: CRM-системы, SMS-рассылки, платёжные шлюзы и т.д.

Цены/стоимость

Бесплатных тарифов нет. Есть только тестовый период 14 дней для каждого нового сайта. Даже в минимальном тарифе уже будут включены SMS-уведомления с сайта и безлимитный хостинг. Но будет присутствовать неотключаемый копирайт платформы. Чтобы выключить его, придётся перейти как минимум на тариф «Базовый». Дальнейшее повышение тарифов особых преимуществ для лендингов не даёт. Старшие тарифы имеет смысл подключать, если вам нужны функционал онлайн-магазина, вставка своего HTML-кода или тонкая настройка цветовой палитры.

Минусы

В uKit очень небольшой перечень готовых интеграций с внешними сервисами. Предложенные могут кому-то не понравиться. Аналогичная ситуация с готовыми темами и цветовыми схемами. Нет механизма сплит-тестирования. Функционала онлайн-конструктора будет явно недостаточно для профессиональных разработчиков.

6. Клиенты и партнеры

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

Tilda — самый технологичный сервис для лендингов

Tilda — самый технологичный сервис для лендингов

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

Платформа предлагает простой и понятный онлайн-редактор и может похвастаться высокой скоростью загрузки страниц (очень полезно для SEO). Последняя достигается за счёт автоматического пережатия изображений и «ленивой» загрузки медиаконтента (по мере движения окна фокуса). Посмотрите на примеры сайтов на Тильде, чтобы самим убедиться в возможностях конструктора.

Функциональность

Именно технические возможности – сильная сторона сервиса. Помимо Lazy loading, Тильда может предложить: поддержку всех необходимых SEO-параметров (от индивидуальных тегов Alt для изображений до ЧПУ и ручного ввода мета-тегов, автоматическая генерация файла robots.txt и карты сайта, и т.д.). Если готовые блоки, доступные в редакторе, вам по какой-то причине не подходят, вы можете создать свой, полностью уникальный элемент (функционал «Нулевого блока» – Zero Block). Созданные страницы можно выгрузить в виде HTML-файлов и разместить на своём хостинге.

Шаблоны Tilda

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

Цены/стоимость

Бесплатный тарифный план Free не имеет ограничений по времени, но с ним у вас не получится привязать собственный домен (есть и другие существенные ограничения). Можно получить тестовый доступ к премиум-функциям, но только на 2 недели.

Тариф Personal  позволяет разместить только 1 сайт, выгрузить HTML нельзя. Максимум возможностей в тарифе «Business»  (есть вариации, отличающиеся количеством сайтов).

Готовые шаблоны – бесплатно. При оплате любого тарифа на 1 год – домен в подарок (тоже только на 1 год).

Минусы

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

Аналитика

Это не последняя версия вашего лендинга.

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

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

Обращаите внимание на процент отказов. Он показывает, какое количество посетителеи пробыли на саите менее 15 секунд. Это поможет оптимизировать рекламу и оценить ее релевантность аудитории.

Это общие советы, детальные инструкции посмотрите в интернете.

 – Редактируем текст на главном экране

Кликайте правой кнопкой мыши по файлу “index.html” и выбирайте “Открыть с помощью – Notepad++”.

Открываем шаблон программой Notepad++

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

Редактирование текста лендинга

И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.

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

:

Замена заголовка на главном экране

После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:

Главный экран с новым заголовком

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

Разрыв строки в шаблоне

Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа – прописываем наши конкретные предложения. Например: “Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН – от 5400р. ЕНВД без сотрудников – от 2100р.” Вставляем этот текст вот сюда:

Меняем подзаголовок на главном экране

Теперь меняем текст кнопок таким же образом. Пишем на белой “Заказать”, на прозрачной – “Подробнее”.

Замена кнопок на главном экране

В итоге у нас получается вот такой главный экран лендинга:

Готовый главный экран

Дизайн

Задача дизаина — прибавить удобства и функциональности.

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

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

то подберите что-то уникальное. Вам придется постараться, но оно того стоит.

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

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

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

Делаите графические акценты на нужнои информации. Не делаите акцентов (палочки, кружочки, что угодно), ради того, чтобы были. У каждого элемента есть функция. Если нет — элемент можно удалить.

Используите максимум 2 вида шрифтов. Один для заголовков и цитат, второи для основного текста.

Используите одинаковыи размер шрифтов для информации. У заголовков – один, у подзаголовков – второи, у основного текста – третии, у кнопок – четвертыи.

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

Используите изображения в формате JPEG или JPEG2000, а не в PNG. Так лендинг будет загружаться быстрее.

Текст должен хорошо читаться. Проверьте, соблюдается ли это правило везде.

Уделите внимание мобильнои версии саита. Проверьте, насколько еи удобно пользоваться.

Этап 6. Домен

Какой бы метод верстки вы не выбрали, в любом варианте нужен будет свой домен. Домен это имя сайта, например мой домен это ichigarev.ru, у вас будет свой.

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

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

Пример подбора шаблона на reg.ru

Пример подбора шаблона на reg.ru

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

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

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

Как создать лендинг в 2023. Пошаговая инструкция из 9 этапов разработки

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

 Пишем текст для лендинга

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

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

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

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

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

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

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

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

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

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

Советы по составлению текста

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

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

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

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

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

Как создать лендинг в 2023. Пошаговая инструкция из 9 этапов разработки

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Как создать лендинг в 2023. Пошаговая инструкция из 9 этапов разработки

Целевое действие

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

Не требуйте от пользователя заказать прямо сейчас, дайте ему что-то лёгкое, ценное, что принесёт ему пользу. Запрашивайте минимум данных. В 90 % случаев достаточно попросить только телефон или электронную почту, не нужно даже спрашивать имя. Это всего одно поле, а значит — одно действие. Для удобства клиента в поле, куда нужно вписать телефонный номер, добавьте маску телефона и автоматический подгон цифр по шаблону. Это задача для программиста.

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

Выбор платформы

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

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

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

WordPress

Самая популярная в мире CMS – WordPress также может быть использована для создания одностраничника. Конечно, придется разбавлять его плагинами и темами. Стандартного функционала вам явно не хватит. Но не пугайтесь, большая часть плагинов и шаблонов на ВордПресс бесплатные. Вы вполне сможете создать простой ленд без больших вложений. Придется заплатить лишь за хостинг и домен.

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

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

  • Elementor

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

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

  • Visual Composer

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

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

  • WPBakery Page Builder

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

В отличие от Композера WPB Page Builder не обладает бесплатной версией. Распространяется он сугубо через магазин Envato.

Лучше ли он, чем Visual Composer? Не знаю, я пользовался обоими продуктами и особой разницы не увидел. Правда, стоит отметить, что в WPB больше различных виджетов, они могут хорошо помочь при разработке лендинга. Однако в бесплатной версии Композера также много инструментов. Так что тут дело вкуса.

Но, выбирая между WPB Page Builder и Visual Composer, я бы выбрал первый, потому что, на мой взгляд, он более надежный и функциональный. Да, тут нет бесплатной версии, но зато есть премиум-поддержка, постоянные и регулярные обновления и уверенность в том, что плагин будет актуален еще долгое время.

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

Также вам будет легко обновлять информацию, ведь WordPress – это CMS (система управления контентом). Контакты, текст или картинки – все это можно поменять в считанные минуты.

Wix

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

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

Онлайн-конструктор Wix

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

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

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

Tilda

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

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

Другие платформы

В интернете можно найти и другие платформы.

Источники

  • https://azconsult.ru/sozdayom-rabotayushhij-lending-samostoyatelno/
  • https://vc.ru/marketing/186976-kak-sozdat-horoshiy-lending-samomu-shablon-instrukciya
  • https://novoseloff.tv/kak-sdelat-lending-samomu-poshagovaya-instruktsiya/
  • https://konstruktorysajtov.com/sozdanie-saitov/kak-sozdat-lending-samomu
  • https://ichigarev.ru/sozdanie-saita/kak-sozdat-lending.html
  • https://iklife.ru/sozdanie-sajta/kak-sdelat-lending-samostoyatelno-s-nulya
[свернуть]
Adblock
detector