Курс «Создание Landing Page»
Анатомия лендинга: функциональные блоки
В предыдущей главе мы показали, как подготовиться к созданию лендинга: как проанализировать конкурентов и аудиторию, как написать текст, как нарисовать прототип. В этой главе мы разберем, как визуализировать контент с помощью функциональных блоков.
Мы проанализировали большое количество лендингов, выделили повторяющиеся элементы и сформулировали алгоритм, по которому создается эффективная посадочная страница. Элементы, из которых состоит страница, мы называем функциональными блоками:
Так как блоков много, мы условно поделили их на 5 больших групп, согласно той функции, которую они выполняют и как коммуницируют: первый экран, рассказ о проекте, понятные выгоды, блоки доверия, целевое действие.
Формула конверсионного лендинга
Дизайн — это рассказ. Чтобы лендинг был конверсионный, рассказ должен быть понятным и убедительным.
Последовательность и оформление могут быть разными, но страница должна содержать хотя бы один элемент из каждой группы блоков — так получается комплексное повествование.
Первый экран
1
Может содержать категории блоков: о проекте, этапы, тарифы, целевая аудитория, галерея фотографий, видео
2
3
Может содержать категории блоков: преимущества, список тезисов,
сценарии использования и польза
Может содержать категории блоков: отзывы, гарантии и сертификаты, партнеры, истории успеха, команда, часто задаваемые вопросы
5
Может содержать категории блоков: форма регистрации или подписки, призыв к действию и мотивирующая кнопка, контакты
4
Первый экран. Его функция — произвести нужное впечатление на человека, информировать о том, куда он попал, мотивировать остаться и проскроллить страницу вниз.

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

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

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

Целевое действие. Бизнесу нужны клиенты, поэтому на лендинге должны быть блоки, которые будут генерировать лиды: формы заказа, подписки, обратной связи или телефон.
Функциональные блоки лендинга
Рассмотрим блоки подробнее.
Обложка
Главный экран сайта — первое впечатление от компании. У вас есть несколько секунд, чтобы убедить пользователя остаться на странице.

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

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

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

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

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

Меню. Также не обязательный элемент, но если он вам нужен для навигации, то выделите основные смысловые секции на странице, к которым нужен быстрый доступ.
Примеры обложек:
О проекте
Функция этого элемента — понятно и развернуто ответить на вопрос «что вы предлагаете?»

Это общее описание продукта или услуги. Оно может быть просто текстовым, либо текст плюс картинка. Логично располагать этот блок сразу после обложки, чтобы посетитель убедился, что он попал на нужную страницу, и тут ему помогут.
В библиотеке Тильды есть категория «О проекте», в которой собраны подходящие блоки.
Несмотря на то, что описание есть в обложке, необходимо его также выделить отдельным блоком. На обложке описание работает скорее на то, чтобы вовлечь пользователя эмоционально, впечатлить его. Здесь у описания информационная цель.

Человек, который попал на страницу, чаще всего сталкивается с продуктом или услугой в первый раз. Поэтому нужно сформулировать в одном предложении — что это такое?
Ира Смирнова
Директор по развитию клиентского опыта Tilda Publishing
Блок о проекте должен быть в первую очередь информативным. Я просматриваю очень много сайтов и замечаю, что большинство либо вовсе игнорируют этот блок — все же и так понятно! (вообще-то нет). Либо пытаются продать, используя впечатляющие выражения: «Решение для вашего бизнеса. Бросьте вызов, полагаясь на нашу экспертизу!». Выглядит красиво, смысла нет. Когда увлечен продуктом, знаешь его вдоль и поперек, кажется, что простое объяснение звучит банально. Поверьте, для нового человека простые слова и факты — то, что нужно для понимания вашего продукта.
Ира Смирнова
Директор по развитию клиентского опыта Tilda Publishing
Блок о проекте должен быть в первую очередь информативным. Я просматриваю очень много сайтов и замечаю, что большинство либо вовсе игнорируют этот блок — все же и так понятно! (вообще-то нет). Либо пытаются продать, используя впечатляющие выражения: «Решение для вашего бизнеса. Бросьте вызов, полагаясь на нашу экспертизу!». Выглядит красиво, смысла нет. Когда увлечен продуктом, знаешь его вдоль и поперек, кажется, что простое объяснение звучит банально. Поверьте, для нового человека простые слова и факты — то, что нужно для понимания вашего продукта.
Примеры описаний проектов:
Преимущества
Преимущества — то, что делает продукт или услугу классной и уникальной.

Как правило, преимущества описываются короткими текстами (одно-два предложения) и сопровождаются иконками, простыми иллюстрациями или фотографиями.
В Тильде блоки преимуществ выделены в отдельную категорию.
Изображение и заголовок должны зацепить внимание при быстром просмотре страницы, описание — расшифровать преимущество, если взгляд задержался.
Примеры преимуществ:
Никита Обухов
Основатель Tilda Publishing
Важно подумать над стилем иконок, потому что очень легко все испортить. Шаблонные иконки так примелькались, что на них невозможно сфокусироваться («интерфейсная слепота»). Стиль иконок должен сообщить человеку, что это не первый попавшийся клипарт. Важно все: как нарисованы, какая толщина, насколько они гармоничны и интересны. Не нужно ставить иконки ради иконок. Они должны быть особенными.
Никита Обухов
Основатель Tilda Publishing
Важно подумать над стилем иконок, потому что очень легко все испортить. Шаблонные иконки так примелькались, что на них невозможно сфокусироваться («интерфейсная слепота»). Стиль иконок должен сообщить человеку, что это не первый попавшийся клипарт. Важно все: как нарисованы, какая толщина, насколько они гармоничны и интересны. Не нужно ставить иконки ради иконок. Они должны быть особенными.
Сценарии использования и польза продукта
Сценарии показывают примеры использования продукта или говорят, когда пригодится услуга. Выгоды — то, что получит клиент в результате покупки.

Форма подачи такая же, как в преимуществах: заголовок, описание, картинка.
Найти подходящие блоки можно, в первую очередь, в категории «Преимущества»
Выгоды и преимущества похожи. Отличие в том, что в преимуществах вы говорите о свойствах продукта, а в выгодах и сценариях использования — о выгоде клиента.

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

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

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

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

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

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

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

Самый распространенный формат: заголовок, текст отзыва, фото, имя, фамилия, должность и компания.
В библиотеке блоков Тильды есть отдельная категория «Отзывы».
Проблема с отзывами в том, что в интернете полно фальшивых высказываний, написанных на заказ. Из-за этого к отзывам и рекомендациям настороженное отношение. Чтобы справиться с этим, берите отзывы у представителей индустрии: бренда или человека, который известен. Ставьте ссылки на профиль в социальной сети человека, который оставил отзыв. Добавляйте к отзыву фотографию. То, что отзывы должны быть настоящими, даже не обсуждается.
Ира Смирнова
Директор по развитию клиентского опыта Tilda Publishing
Я очень люблю спрашивать отзывы у людей, которые пользуются Тильдой или читают наши курсы. Сначала мне было немного неловко отвлекать их от собственных дел. Но все, кого я спрашивала, были очень отзывчивы и с удовольствием давали обратную связь. Когда я прошу отзыв, я говорю где он будет размещен, какой объем текста мне нужен и задаю конкретный вопрос, например: почему вы решили остаться на Тильде.
Ира Смирнова
Директор по развитию клиентского опыта Tilda Publishing
Я очень люблю спрашивать отзывы у людей, которые пользуются Тильдой или читают наши курсы. Сначала мне было немного неловко отвлекать их от собственных дел. Но все, кого я спрашивала, были очень отзывчивы и с удовольствием давали обратную связь. Когда я прошу отзыв, я говорю где он будет размещен, какой объем текста мне нужен и задаю конкретный вопрос, например: почему вы решили остаться на Тильде.
Примеры отзывов:
Отзывы могут быть и в видео-формате. Живые люди, которые делятся опытом использования, говорят, что это круто работает, заряжают и мотивируют.
Примеры видео-отзывов:
Партнеры или клиенты
Если среди ваших клиентов или партнеров есть известные компании, покажите отдельным блоком их логотипы. Если с вами работают они, то с большей вероятностью доверятся и новые клиенты.
Блоки для размещения логотипов партнеров выделены в категорию «Партнеры».
Логотипы клиентов или партнеров впечатляют. Единственное — эти компании должны быть знакомы людям. Упоминания никому не известных имен только замусоривают страницу.

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

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

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

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

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

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

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

Контакты могут включать: адрес, e-mail, телефон, карту, ссылки на социальные сети и фотографию.
Категория блоков «Контакты» в библиотеке Тильды.
К карте иногда добавляют подробное описание (как добраться на машине и дойти пешком).
Примеры контактов:
Команда
Люди доверяют тем, кого знают. Даже если только по фотографии.

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

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

Оптимально использовать три-четыре числительных с кратким описанием каждого.
Блоки для того, чтобы показать цифры, можно найти в категории «Преимущества».
Цифры должны рассказывать о бизнесе и быть наглядными. Не каждая цифра очевидна для постороннего. «В компании работает 6 000 сотрудников» — в целом, этот показатель понятен и говорит о том, что компания крупная. «В прошлом году было продано 3000 подарочных наборов» — тут не ясно: это много или мало, это успех или компания на грани разорения?
Примеры фактов в цифрах:
Список тезисов
Блок можно назвать разновидностью «преимуществ» или «выгод», но он отличается по форме. Если выгоды и преимущества — это три-четыре позиции с иконками или фото, то тезисы — это именно список: 5 причин заказать нашу кавер-группу, почему наш рюкзак будет незаменим в походе, работа с нами — это… и т. д.
Примеры тезисов:
Гарантии и сертификаты
Профессиональные сертификаты или благодарственные письма работают на доверие. А в некоторых сферах — образование, юриспруденция, медицина, вовсе необходимы.

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

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

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

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

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

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

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

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

Другой вариант помочь посетителю сориентироваться — добавить боковую навигацию с точками. Она меньше отвлекает внимание, но позволяет быстро перейти к нужному разделу.
Категория «Меню» в библиотеке Тильды.
Проблема меню в том, что оно часто бывает перегружено и отвлекает внимание от содержания вместо того, чтобы помогать. Чтобы этого не происходило, следует размещать в меню не более 5−7 и использовать короткие слова. У меню вспомогательная функция, главное — содержание.
Примеры меню:
Навигация также может быть в виде плитки и ссылки, когда вы сначала показываете список, а дальше подробно объясняете каждую позицию. Например, если вы делаете лендинг вакансий, то покажите сначала все вакансии вместе со ссылками на каждую (пусть вакансии находятся ниже на этой же странице), а потом расскажите о каждой подробно.
Примеры навигации с помощью плитки:
Кнопки социальных сетей
Есть два вида кнопок: ссылки на профайлы в социальных сетях и кнопки шаринга.

Кнопки могут быть отдельным блоком или входить в меню, футер, всплывающие окна или в контакты сайта.
Категория блоков «Социальные сети» в библиотеке Тильды.
Строго говоря, ссылки на соцсети — это отвлечение от основной цели посадочной страницы (если конечно ваша цель не собрать подписчиков группы в фейсбуке). Но большое количество лайков (для лендинга — более 100 человек) — это фактор доверия. Большинство людей избирательны в том, чем они делятся в социальных сетях, и если у страницы много расшариваний, это повод обратить на нее внимание.
Примеры кнопок социальных сетей:
Теперь вы знаете, из каких элементов может состоять лендинг и можете определить, какие из них вам подходят. Не обязательно использовать их в том порядке, в каком они расположены в лекции. Дизайн — это рассказ, сделайте всю страницу последовательным рассказом о вашем проекте.
Домашнее задание
1
Изучите библиотеку блоков конструктора сайтов Tilda Publishing
2
Напишите список блоков, которые подходят для вашего лендинга.
3
Решите, какие элементы навигации вы будете использовать.
4
Проведите ваших персонажей по прототипу и отметьте, в каких местах лендинга стоит поставить блоки целевого действия.
Понравилась глава? Поделитесь с друзьями!
Текст: Никита Обухов, Маша Белая, Ира Смирнова
Дизайн, иллюстрации и верстка: Юлия Засс

Читайте другие лекции курса:
Создайте лендинг для вашего бизнеса
С Tilda Publishing сделать лендинг пейдж просто, быстро и бесплатно