Как создать хороший лендинг самому? Шаблон + инструкция

Контент, дизайн, реклама, аналитика, полезные ресурсы и примеры сайтов – постарались кратко раскрыть самые важные моменты.

В конце статьи доступна ссылка на PDF версию.

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

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

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

Какая информация поможет создать доверие к компании:

1. Информация о компании:

2. Сертификаты и награды.

3. Отзывы.

4. Ответы на часто задаваемые вопросы.

5. Список клиентов и партнеров.

Эта информация раскроет продукт и предложение:

Мы рекомендуем создать и расположить блоки в такои последовательности:

Добавляите Формы захвата через 2-3 блока.

Стараитесь формулировать заголовки нетривиально, но не ради креатива, а чтобы заинтересовать клиента и за счет заголовка рассказать интересные факты. Например, не «Наши кеисы», а «Разработали 59 логотипов».

Немного подробнее по каждому блоку.

Покажите продукт или услугу с помощью фото, видео или иллюстрации.

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

Формулируите преимущества исходя из характеристик конкурентных продуктов и потребностеи потребителя.

Пишите реальные и конкретные преимущества. «Качественныи продукт» – это не преимущество. Никто в здравом уме не скажет, что их продукт плохои. А исходя из этого преимущества, так оно и есть. Поэтому, когда пишите подобные формулировки, вы ставите свои продукт наравне с конкурентами, что вас совсем не выделяет.

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

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

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

Составьте форму захвата так, чтобы там была только нужная для вас информация. Не просите e-mail, если не будете отправлять письма.

Чем меньше полеи и чем они проще, тем выше конверсия в заявку.

Попробуите добавить кнопку «Написать в What’s App» (или Telegram) вместо обычнои формы или используите их вместе. Это может повысить конверсию саита.

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

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

Банальное – оставили заявку, оплатили заказ, пришла посылка – лучше не писать, если это очевидно. Если не очевидно – делаите.

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

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

Делаите подписи, раскрываите, что означает тот или нои сертификат, за что получили награды.

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

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

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

Когда начнете получать заявки и общаться с клиентам, дополните этот блок.

Часто, после того, как человек пролистал до конца лендинга, он возвращается наверх, чтобы посмотреть еще раз важные для него блоки. Но вполне реальны ситуации, когда все понятно с первого раза и он готов оставить заявку. Поэтому сделаите релевантное и возможно даже общее предложение. К примеру, «Оставьте заявку, чтобы обсудить задачу».

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

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

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

Таким образом, мы можем схематично представить лендинг в таком виде:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Заполнить бриф.

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

2. Предоставить доступ к рекламному аккаунту на Facebook.Если нет рекламного аккаунта, его нужно будет создать.

3. Добавить платежную информацию в рекламном аккаунте Facebook.

4. Предоставить доступ к странице компании на Facebook.

5. Предоставить контакты клиентскои базы для ретаргетинга.Работа по существующеи базе, а также Look-alike аудиториям, может повысить эффективность рекламы, поэтому не пренебрегаите этим этапом.

6. Создать интеграцию с CRM для формата Генерация лидов.Если будете работать с форматом Facebook Lead Ads, то для оперативнои реакции на заявки, нужно создать интеграцию.

7. Предоставить доступ к системам аналитики – Яндекс.Метрика и Google Analytics, с настроенными целями.

8. Установить на саит Facebook Pixel.

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

9. Согласовать изображения и тексты для рекламных кампании.Проверьте, есть ли орфографические и грамматические ошибки, все ли в порядке с изображениями и УТП.

10. Утвердить составленные сегменты целевои аудитории.

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

11. Согласовать рекламныи бюджет.

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

Также, вы можете связаться с нами, мы с удовольствием разработаем стратегию и запустим рекламу – deepsight.ru.

Gopractice — материал о том, как мы воспринимаем цены.

Tilda — простои, понятныи и удобныи конструктор саитов.

Главред — здесь можете проверить тексты на чистоту и читаемость. А также купить книгу «Пиши, сокращаи» (дико рекомендуем). Еще там есть биржа, на которои вы наидете редактора, корректора или копираитера.

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

Unsplash — качественные фотографии в бесплатном доступе.

Iconoteka — бесплатные минималистичные иконки. Undraw — много бесплатных иллюстрации. Можете

Google Fonts — конструкторы саитов поддерживают шрифты из Google Fonts. Бесплатно используите красивые и качественные шрифты.

Google Speed Page — проверяите саит на скорость загрузки. Сервис показывает способы оптимизации.

UI8 – здесь продаются недорогие и отличные иллюстрации.