Что необходимо для создания лендинга

Как сделать лендинг самому. Пошаговая инструкция (2019)

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

Как сделать лендинг самому — подготовка контента

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПример лендинга

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

Этап 1. Сформулировать гипотезу

Если вы решили сделать лендинг, значит, у вас есть идея или представление о странице. Запишите их коротко по плану:

Этап 2. Изучить конкурентов

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

Как это сделать? Посмотрите, что предлагают в ответ на запросы поисковики Google или Яндекс.

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПоиск вариантов ключевых слов в Google Adwords

Затем введите в строку поиска подходящие ключевые слова и изучите страницы конкурентов:

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаРекламные объявления компаний по запросу «беседка для дачи»

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

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

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

Этап 3. Описать целевую аудиторию и выделить сегменты

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

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

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

Как изучить свою аудиторию и найти сегменты:

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

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

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

Этап 4. Написать текст лендинга

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

В его структуре используются несколько стандартных блоков. Сейчас расскажем об основных из них. Шапка лендинга, УТП или оффер, подзаголовок и призыв к действию — блоки первого экрана. Его видит посетитель, попадая на сайт.

Структура лендинга

Название блокаЗадачаЧто писать
Шапка лендингаОбъяснить посетителю, куда он попал.Логотип, название компании, чем занимается, контакты.
Уникальное торговое предложение или офферПередать одним предложением суть, главную выгоду для целевой аудитории, и почему это лучше, чем у конкурентов.Пример: Деревянные беседки для дачи — собираются за один день.
ПодзаголовокУсилить или уточнить оффер.Пример: Готовые беседки и под заказ.
Призыв к действиюПобудить посетителя купить или оставить контакты.Кнопка «Заказать».

Форма «Оставить заявку».

Описание услуги/свойства продуктаДать подробную информацию о продукте.Описание в формате «свойства-преимущества», фотографии продукта, скриншоты, видео, таблицы.
Сценарии использованияОписать ситуации, в которых будет полезен продукт или услуга.Например, деревянная беседка нужна, чтобы отдыхать с друзьями, укрыться летом от солнца, украсить дачу, обедать всей семьей на свежем воздухе.
Кто мы/О компании/Почему выгодно купить у насДоказать экспертность, объяснить, почему вам можно доверять.Опыт работы, сертификаты и дипломы, крупные клиенты.
Как это работает

Как купить/заказать

Объяснить, как человек получит желаемый результат.Например: «Вы скачиваете прайс, вам звонит наш менеджер и составляет смету. Вы одобряете смету и назначаете время доставки. Получаете складную беседку для дачи».
Сколько стоитПоказать цену или варианты цены.Цена со скидкой, тарифные планы, калькулятор, форма «рассчитать стоимость».
Ответы на частые вопросыСнять возражения, развеять страхи читателя.Как оплатить товар, можно ли вернуть или обменять.
Призыв к действиюЕще раз предложить купить товар или оставить заявку.Кнопка «Заказать».

Форма «Оставить заявку».

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

Этап 5. Подобрать картинки, видео, фотографии

Кроме текста для того, чтобы сделать продающий лендинг, вам понадобятся фотографии или иллюстрации — для первого экрана и демонстрации в основной части.

Фотографии товара можно попросить у поставщика или сфотографировать самому.

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

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

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

Как сделать лендинг — оформляем текст в конструкторе

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

Сделать лендинг бесплатно можно с помощью конструкторов:

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

Зарегистрироваться на сайте и ознакомиться с подсказками

После регистрации сервис сразу предложит вам создать сайт.

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаСправочные материалы на сайте Tilda

Создать сайт

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаСоздание сайта в конструкторе Tilda

Выбрать шаблон

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаВыбор шаблона на сайте Tilda

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаШаблон «Ремонтная компания» для создания страницы

Вставить свой текст и фотографии

На следующем этапе меняем текст-заглушку и фотографии на свои, прописываем текст на кнопках.

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаШаблон со своим текстом и фотографией

Опубликовать сайт

Когда все отредактировано, нажимаем «сохранить» и смотрим результат.

Если результат вас устраивает, ссылки работают, можно публиковать страницу в интернете и запускать рекламу.

На бесплатном тарифе адрес страницы будет иметь такой вид:

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаБесплатный адрес сайта на субдомене Tilda

Чтобы подключить домен и получить короткий адрес страницы, нужно перейти на платный тариф.

Как увеличить конверсию лендинга

На лендингах используются два подхода к продажам. Первый — сразу предложить купить товар или услугу. Он подходит для недорогих товаров и услуг или если клиент уже «прогретый», например, пришел с рассылки либо профиля в Instagram.

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

Email рассылки

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

Автоматические серии писем

Конвертировать посетителей лендинга в покупателей помогут такие виды автоматических рассылок:

Чтобы настроить авторассылки, нужно зайти в SendPulse и выбрать раздел «Авторассылки»:

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаСоздание автоматических рассылок в SendPulse

Web push уведомления

Еще один способ повысить конверсию лендинга — настроить web push уведомления. Когда посетитель находится на странице, в браузере появляется предложение подписаться на уведомления:

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПредложение подписаться на push уведомления

Если человек нажимает «разрешить уведомления», он в будущем будет получать сообщения в браузере или на рабочем столе компьютера.

Web push уведомления помогают решить несколько задач:

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

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

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

Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью рассылок и push уведомлений и превращать посетителей в покупателей!

Маркетолог и копирайтер. Люблю работать с инструментами, эффективность которых легко измерять. Поэтому люблю email рассылки:) Лучшими практиками делюсь с вами.

Источник

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

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

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

Хотите научиться зарабатывать в интернете? Написал большой гайд, где показал 41 метод заработка через интернет — статья по ссылке.

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

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

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

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

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

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

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

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

Смотрите также: Как создать онлайн-школу с нуля в 2021 году — подробный гайд (+ мой пример).

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

Шрифт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПример цвета

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаМагазин шаблонов WordPress — ThemeForest

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

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

Плюсы/минусы инструмента:

2. Конструктор Tilda

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

Плюсы/минусы инструмента:

3. Онлайн конструктор uKit

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

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

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

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

Плюсы/минусы инструмента:

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

4. Ручная верстка

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

Но все равно вот несколько сервисов по поиску исполнителей, где можете найти верстальщика:

Плюсы/минусы инструмента:

До недавнего времени еще популярная была программа Adobe Muse. Это программа от Adobe, которая скачивается на компьютер и работаете в ней как в Фотошопе. Самый жирный минус у данного метода в том, что разработчики программу больше не будут развивать, об этом сделали официальное заявление. Поддержку оказывают до 2020 года, но обновлений программы больше не будет. Поэтому если планируете использовать Музу, учитывайте этот момент.

Я верстаю только на WordPress или в Тильде, для меня это лучшие варианты.

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

Этап 6. Домен

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

Хотите узнать больше о том, что такое домен? Статья для вас Что такое хостинг и домен.

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

Онлайн чат

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПример чата на моем блоге

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

Метрика

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

Ретаргетинг

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

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

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

Калькулятор

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендингаПример создания калькулятора на сервисе uCalc

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

Что необходимо для создания лендинга. Смотреть фото Что необходимо для создания лендинга. Смотреть картинку Что необходимо для создания лендинга. Картинка про Что необходимо для создания лендинга. Фото Что необходимо для создания лендинга

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

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

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

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

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

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

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

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

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

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

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

Вы можете посмотреть примеры лендингов, которые я разработал в разделе сайта «КЕЙСЫ»

Если Вам нужно сделать лендинг на заказ, пишите в комментариях или оставляйте заявку на странице «КОНТАКТЫ»

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

Полезные ссылки:

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *