Курс "Создание Landing Page"
Анатомия лендинга : функциональные блоки
показали, как подтовиться козданга : как проанализиировать, как лендинга : как проанализировать конкурентов аудиторию, как напист, как наристь, как нарисовать прототи. как визуализировать как контт с помощью ф фуналинт с помощьфуналь разберем, как визуализировать блоков.
количество лендингов, выделили повторяющиеся элементы и сформулировали алгоритм, по которуту создается эффективная посадочная страница. Элементы, из которых состоит страница, мы называем функциональными блоками :
условно поделили их на 5 больших групп, согласно той функци, которую они выполняют и как коммуницируют : первы экран, рассказ о проекте, понятные выгоды, блоки доверия, целевое действие.
Формула конверсионого лендинга
Дизайн - это рассказ. Чтобы лендинг был конверсионый, рассказ должен быть понятным и убедительным.
Последовательность и оформление могут быть разными, но страница должна содержать хотя бы один элемент из каждой группы блоков - так получается комплексное повествование.
Первыйэкран
1
Может содержать категории блоков : о проекте, этапы, тарифы, целевая аудитория, галереяфотографий, видео
2
3
4
Может содержать категории блоков : преимущества, список тезисов,
сценарии использования и польза
Может содержать категории блоков : отзывы, гарантии и сертификаты, партнеры, историиуспеха, команда, часто задавамые вопросы
5
Может содержать категории блоков : форма регистраци или подписки, призыв к действию и мотивирующая кнопка, контактци или подписки, призыв контактци контакты
Lesystème d'information de l'Union européenne(UEI) a été mis en place. произвести нужное впечатление на человека, информировать о том, куда он попал, мотивировать остать и просколлить страницу вниз.

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

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

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

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

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

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

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

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

Les deux sont en train de se rencontrer. Les deux hommes sont en train de se battre pour la liberté d'expression. Ориентируйтесь на аудиторию - если она консервативная, добавьте. Новое поколение привыкло кскроллу, но кто-то может застопориться.

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

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

страницу, чаще всего сталкиватся с продуктом или услуго в продуктом или слугой в первый раз. Поэтому но сформулировать в одном предложении - что это такое ?
  • Ира Смирнова
    Директор по развитию клиентского опыта Tilda Publishing
    Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique, mais elles ne sont pas d'accord sur le fait qu'il s'agit d'un problème de santé publique. Я просматриваю и замечаю, что большинство либо вовсе игнорируют этот блок - все же и так понятно ! (вообще-то нет). Либо продать, используя впечатляющие выражения : "Решение для вашего бизнеса. Бросьте вызов, полагаясь на нашу экспертизу !". Выглядит красиво, смысла нет. اόогда увлечен продуктом, знаешь его вдоль и поперек, кажется, что простое объяснение звучит банально. Поверьте, для нового человека простые слова и факты - то, что нужно для понимания вашего продукта.
  • Ира Смирнова
    Директор по развитию клиентского опыта Tilda Publishing
    Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique, mais elles ne sont pas d'accord sur le fait qu'il s'agit d'un problème de santé publique. Я просматриваю и замечаю, что большинство либо вовсе игнорируют этот блок - все же и так понятно ! (вообще-то нет). Либо продать, используя впечатляющие выражения : "Решение для вашего бизнеса. Бросьте вызов, полагаясь на нашу экспертизу !". Выглядит красиво, смысла нет. اόогда увлечен продуктом, знаешь его вдоль и поперек, кажется, что простое объяснение звучит банально. Поверьте, для нового человека простые слова и факты - то, что нужно для понимания вашего продукта.
Примеры описаний проектов :
Преимущества
Преимущества - то, что делает продукт или услугу классной и уникальной.

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

Форма подачи такая же, как в преимуществах : заголовок, описание, картинка.
Найти подходящие блоки можно, в первую очередь, в категори "Преимущества"
Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique et de sécurité. Отличие в том, что в преимуществах вы говорите о свойствах продукта, ав выгодах и сценариях использования - о выгоде клиента.

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

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

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

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

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

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

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

заголовок, текст, фото, имя, фамилия, долца, долца, должносто, имя, фамилия, должность имаппания.
библиотеке блоков Тильды естьная категория "Отзывы".
полно фальшивых высказы, написанний, написанны, на4445↩ наказ, наказ. рекомендациям настороженое отношение. берителей индустри : бренда или этим, берите отзы у представителей индустри : бренда или человека, который известен. в ссылки на профиль в социальной сети человека, который оставил отзыв. Добавляйте к отзыву фотографию. То, что отзывы должны быть настоящими, даже не обсуждается.
  • Ира Смирнова
    Директор по развитию клиентского опыта Tilda Publishing
    людей, которые пользуются Тильдой или читают наши курсы. неловко отвлекать их от собственных дел. спрашивала, были очень отзывчивы и судовольствием давали обратную связь. Когда я прошу отзыв, я говорю где он будет размещен, какой объем текста мне нужен и задаю конкретный вопрос, например : почему вы решили остаться на Тильде.
  • Ира Смирнова
    Директор по развитию клиентского опыта Tilda Publishing
    людей, которые пользуются Тильдой или читают наши курсы. неловко отвлекать их от собственных дел. спрашивала, были очень отзывчивы и судовольствием давали обратную связь. Когда я прошу отзыв, я говорю где он будет размещен, какой объем текста мне нужен и задаю конкретный вопрос, например : почему вы решили остаться на Тильде.
Примеры отзывов :
быть и в део-формате. которые ди, делятся опытом использования, говорят, что это круто работат, заряжают и мотивируют.
Примеры видео-отзывов :
Партнеры или клиенты
клиентов или партнеров есть известные компании, покажите отдельным блоком их логотипы. Если с вами работают они, то с большей вероятностью доверятся и новые клиенты.
для размещения логотипов партнеров выделены в категорию "Партнеры".
Le système d'information de l'Union européenne (UEI) a été mis en place par la Commission européenne. динственное - эти компании должны быть знакомы людям. Упоминания никому не известных имен только замусоривают страницу.

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

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

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

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

галерее, показываться виде попапа при клике на кнопку, сочетаться с текстом изобреее, изображ с текстом изображениями.
Категория блоков "Видео" в библиотеке Тильды
Les deux sont en train de s'entendre sur un plan d'action.

удобно смотреть, позаботьтесь о сопроть - видео не всегда удобно смотреть, поэтому позаботь о сопровождени - обложка, описание, комментарий. которая, содержится в видео, не была потеряна.
Примеры видео :
Часто задаваемые вопросы
Les deux premiers mois de l'année ont été marqués par une baisse de l'activité de l'entreprise. Хороший ход - понять страхи сомния вашего клиента, переформулировать их вопрос и развернуто ответить.

Часто такие блоки оформляются как чат или интервью.
для того, чтобы оформить вопросы и ответы, находятся в категории "Текст".
Другое применение вопросов - способ структурировать информацию. про доставку, сплошной текст мо трансфо трансформировать вопроставать вопросцть в ответы. Понять нюансы будет проще.
Примеры вопросов и ответов :
Контакты
Les gens de l'Union européenne ont été invités à participer à la conférence de l'Union européenne sur les droits de l'homme.

Контакты могут включать : адрес, e-mail, телефон, карту, ссылки на социальные сети и фотографию.
Категория блоков "Контакты" в библиотеке Тильды.
карте иногда добавляют подробное описание (как добраться на машине и дойти пешком).
Примеры контактов :
Команда
Les services de l'immigration et de la protection des réfugiés ont été mis en place par le ministère de l'Intérieur. Даже если только по фотографии.

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки могут быть отдельным блоком или входить в меню, футер, всплывающие окна или в контакты сайта.
Категория блоков "Социальные сети" в библиотеке Тильды.
Строго говоря, ссылки на соцсети - это отвлечение от основной цели посадочной страницы (если конечно ваша цель не собрать подписчиков группы в фейсбуке). Но большое количество лайков (для лендинга - более 100 человек) - это фактор доверия. избирательны в том, чем они делятся в социальных сетях, и если у страницы много расшариваний, это повод обратить на е внимание.
Примеры кнопок социальных сетей :
состоять лендинги можете, из каких элементов может состоять лендинги можете определить, какие из них вам подходят. Не обязательно использовать их в том порядке, в каком они расположены в лекции. стран - это рассказ, сделайте всю страницу последовательным рассказом о вашем проекте.
Домашнеее задание
1
Изучите библиотеку блоков конструктора сайтов Tilda Publishing
2
Напишите список блоков, которые подходят для вашего лендинга.
3
Решите, какие элементы навигации вы будете использовать.
4
персонажей прототипу и отметьте, в каких местах лендинга стоит поставить блоки целевого действия.
Le gouvernement a décidé de mettre en place un programme d'aide à l'emploi pour les personnes handicapées. Поделитесь с друзьями !
Il n'y a pas d'autre choix que d'aller à l'école : Никита, Мбухов, Маша Белая, Ира Смирнова
Дизайн, иллюстрации и верстка : Юлия Засс

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