3
Делаем лендинг
Из анализа — в страницу, которая продаёт.
Когда продукт разобран (этап 1), а целевая аудитория разделена на сегменты (этап 2), можно приступать к самому лендингу.
Именно этот этап обычно и называют «сделать сайт», хотя на деле это уже третий шаг из четырёх.
Позвольте по традиции пояснить на своём примере — на лендинге, с которого вы сюда пришли.
Позвольте по традиции пояснить на своём примере — на лендинге, с которого вы сюда пришли.
Шаг 1. Техническое задание.
Сначала договариваемся, потом рисуем.
Мы не начинаем рисовать, пока с вами не согласовано техническое задание (ТЗ) — документ на 2–4 страницы. В нём закреплено:
— цель лендинга: какое одно действие должен совершить посетитель (оставить телефон, записаться, заказать звонок);
— сегменты и портреты из этапа 2: для кого мы пишем;
— оффер: что именно мы предлагаем и почему у нас;
— структура: какие блоки и в каком порядке;
— что нужно от вас: фотографии, сертификаты, отзывы, цены, контакты;
— сроки и точки согласования.
ТЗ экономит деньги вам и время нам: всё, что согласовано на бумаге, не придётся переделывать в дизайне.
Наш ответ. Цель нашей страницы — чтобы вы оставили заявку и мы договорились о встрече «в удобной для вас точке пространства-времени». Для кого — пять портретов с этапа 2, от начинающего предпринимателя Олега до директора по маркетингу Виктора Олеговича. Оффер — «хороший лендинг за неделю по честной цене».
— цель лендинга: какое одно действие должен совершить посетитель (оставить телефон, записаться, заказать звонок);
— сегменты и портреты из этапа 2: для кого мы пишем;
— оффер: что именно мы предлагаем и почему у нас;
— структура: какие блоки и в каком порядке;
— что нужно от вас: фотографии, сертификаты, отзывы, цены, контакты;
— сроки и точки согласования.
ТЗ экономит деньги вам и время нам: всё, что согласовано на бумаге, не придётся переделывать в дизайне.
Наш ответ. Цель нашей страницы — чтобы вы оставили заявку и мы договорились о встрече «в удобной для вас точке пространства-времени». Для кого — пять портретов с этапа 2, от начинающего предпринимателя Олега до директора по маркетингу Виктора Олеговича. Оффер — «хороший лендинг за неделю по честной цене».
Структура лендинга — это разговор с посетителем: на каждом экране он задаёт себе вопрос, а следующий блок на него отвечает.
Шаг 2. Концепция и структура.
Лендинг читают не подряд, а сверху вниз и с остановками.
Классика, от которой мы отталкиваемся:
1. Первый экран — кто вы, что предлагаете и что делать дальше. На решение у посетителя полторы секунды.
2. Проблема — узнаёт ли он в ней себя.
3. Решение — ваш продукт, его польза и отличия (этап 1).
4. Доказательства — кейсы, цифры, фото, отзывы, сертификаты.
5. Как это работает — этапы, сроки, что от него потребуется.
6. Цена — открыто, с расшифровкой.
7. Ответы на возражения — частые вопросы.
8. Призыв к действию — форма.
Для каждого сегмента порядок и акценты могут отличаться. Если вы подключили «Мультилэндинг», каждый сегмент увидит свою версию первого экрана и своих доказательств.
Наш ответ. Первый экран — «Хороший лендинг за неделю по честной цене!». Дальше — что такое лендинг и зачем он нужен, четыре этапа работы, цены и смета с расшифровкой каждой строки. Смету мы вынесли на страницу намеренно: честная цена должна быть видна, а не спрятана за кнопкой «узнать стоимость».
1. Первый экран — кто вы, что предлагаете и что делать дальше. На решение у посетителя полторы секунды.
2. Проблема — узнаёт ли он в ней себя.
3. Решение — ваш продукт, его польза и отличия (этап 1).
4. Доказательства — кейсы, цифры, фото, отзывы, сертификаты.
5. Как это работает — этапы, сроки, что от него потребуется.
6. Цена — открыто, с расшифровкой.
7. Ответы на возражения — частые вопросы.
8. Призыв к действию — форма.
Для каждого сегмента порядок и акценты могут отличаться. Если вы подключили «Мультилэндинг», каждый сегмент увидит свою версию первого экрана и своих доказательств.
Наш ответ. Первый экран — «Хороший лендинг за неделю по честной цене!». Дальше — что такое лендинг и зачем он нужен, четыре этапа работы, цены и смета с расшифровкой каждой строки. Смету мы вынесли на страницу намеренно: честная цена должна быть видна, а не спрятана за кнопкой «узнать стоимость».
Шаг 3. Продающий текст.
Сначала смысл, потом картинка.
Текст пишется до дизайна, а не после: дизайнер оформляет смысл, а не наоборот.
Требования к тексту у нас такие:
— язык целевой аудитории: слова, которыми клиенты сами описывают свою задачу (берём их из этапа 2 и из поисковых запросов);
— конкретика вместо прилагательных: «доставка за 6 недель», а не «быстрая доставка»;
— одна мысль — один абзац;
— ни одной фразы, которая есть у всех конкурентов: «индивидуальный подход» и «гарантию качества» глаз уже не видит.
А как писать текст, который хочется дочитать, мы рассказали отдельно — в статье «Как написать вкусный текст?» в нашей группе ВКонтакте.
Требования к тексту у нас такие:
— язык целевой аудитории: слова, которыми клиенты сами описывают свою задачу (берём их из этапа 2 и из поисковых запросов);
— конкретика вместо прилагательных: «доставка за 6 недель», а не «быстрая доставка»;
— одна мысль — один абзац;
— ни одной фразы, которая есть у всех конкурентов: «индивидуальный подход» и «гарантию качества» глаз уже не видит.
А как писать текст, который хочется дочитать, мы рассказали отдельно — в статье «Как написать вкусный текст?» в нашей группе ВКонтакте.
Хороший текст — тоже.
Шаг 4. Дизайн.
Красивый — это тот, после которого нажимают.
— Один экран — одна задача: пустое место не пропадает, а ведёт глаз.
— Свои фотографии вместо фотобанка: ваш цех, ваши руки, ваш продукт. Человек в каске с планшетом уже стоит на тысяче сайтов.
— Цвет отличает вас от конкурентов, а не повторяет их: если в отрасли все синие, вас запомнят по другому цвету.
— Сначала телефон, потом компьютер: больше половины посетителей приходят с мобильного.
— Свои фотографии вместо фотобанка: ваш цех, ваши руки, ваш продукт. Человек в каске с планшетом уже стоит на тысяче сайтов.
— Цвет отличает вас от конкурентов, а не повторяет их: если в отрасли все синие, вас запомнят по другому цвету.
— Сначала телефон, потом компьютер: больше половины посетителей приходят с мобильного.
Шаг 5. Вёрстка, формы и CRM.
Собираем страницу (по умолчанию на Tilda) и подключаем:
— формы и согласие на обработку персональных данных;
— онлайн-чат или сообщения ВКонтакте;
— кнопку звонка на мобильном;
— домен на ваше имя и SSL-сертификат.
Каждая заявка попадает в CRM (TildaCRM, AmoCRM или Битрикс24), а не в чей-то почтовый ящик. Так ни один лид не потеряется, а на этапе сопровождения у нас будут данные: сколько заявок пришло, откуда и сколько из них стали сделками.
— формы и согласие на обработку персональных данных;
— онлайн-чат или сообщения ВКонтакте;
— кнопку звонка на мобильном;
— домен на ваше имя и SSL-сертификат.
Каждая заявка попадает в CRM (TildaCRM, AmoCRM или Битрикс24), а не в чей-то почтовый ящик. Так ни один лид не потеряется, а на этапе сопровождения у нас будут данные: сколько заявок пришло, откуда и сколько из них стали сделками.
Срок и результат.
Около недели нашего времени после согласования ТЗ.
Сколько займёт сбор материалов, зависит от вас: чем быстрее вы пришлёте фотографии, цены и отзывы, тем быстрее мы закончим.
Результат этапа 3: готовый опубликованный лендинг, подключённая CRM, протестированные формы. Посетителей на нём пока нет — их приведёт этап 4.
Результат этапа 3: готовый опубликованный лендинг, подключённая CRM, протестированные формы. Посетителей на нём пока нет — их приведёт этап 4.