Как быстро и качественно сделать лендинг
Сайт-презентация про создание посадочных страниц для курса Директор по маркетингу в Нетологии
Евгений Лебедев
Более 8 лет работает в маркетинге. Отвечает за маркетинг одного из бизнес-юнитов Яндекса. Ранее директор по маркетингу Фоксфорда, крупнейшей онлайн-школы в России, и руководитель службы оптимизации рекламы в Яндексе, которая отвечала за рекламу прямых клиентов Яндекса, в том числе анализ сайтов и рекомендации по повышению конверсии. 2 премии Золотой сайт за foxford.ru.


Сегодня на занятии
Разберем практические вопросы создания лендингов, рассмотрим примеры, инструменты создания лендингов
15
Примеров лендингов
16
Инструментов для работы с лендингами
5
Блоков
Структура занятий
  1. Под какие задачи необходимы лендинги
  2. Как не надо делать лендинги
  3. Методология создания лендингов
  4. Не забудьте про SEO
  5. Полезные ссылки
Под какие задачи необходимы лендинги
Разбираем 15 лендингов
1. Под какую ЦА лендинг?

2. Какие элементы стоит отметить как референсы?

3. Какие элементы использованы неудачно?

Играем в ЛЕНДИНГ-БИНГО — https://goo.gl/chBF1B
Крупная компания mail.ru
У компании своя разработка и есть задача — сделать промо-страницу для почты mail.ru

https://security.mail.ru
Крупная компания Cбербанк
У компании есть своя разработка, но она не досталась сотрудникам отдела. Поэтому они вынуждены сделать лендинг на стороннем конструкторе.

http://youth.sberbank-talents.ru/12up
Средняя компания Фоксфорд
У нас есть своя разработка и мы были готовы потратить несколько месяцев ее работы для создания полностью новой главной страницы.

https://foxford.ru
Маленькая компания Коробочка
Нет своей разработки, но бизнес уже начал показывать результаты и можно вложить деньги в дизайн и разработку.

http://amkorobochka.ru
Спецпроект
Достаточно и 1 лендинга для выполнения целей проекта.

http://usadba-jazz.ru
Приложение
У страницы конкретная задача — довести пользователя до скачивания приложения.

https://health.yandex.ru
Поиск персонала
Много рассказываем почему у нас стоит работать.

http://it.skyeng.ru
Тестирование идеи
Быстрый запуск лендинга для получения данных о конверсиях.

https://international.foxford.ru
Любая страница сайта
Сайт — набор лендингов. Любой продукт на сайт должен быть представлен как лендинг.

https://netology.ru/programs/marketing-director
Лендинг под запрос
Адаптация заголовков, текстов, тегов под конкретный узкий поисковый запрос.

https://remontholodilnikov.moscow/chertanovo-sever...
Одноэкранный лендинг
В случае достаточно понятных продуктов или простого целевого действия достаточно одноэкранного лендинга.

https://landbot.io
Одноэкранный + длинный лендинг
Попытка и лид сразу собрать и аргументов накидать.

https://lingualeo.com
Креативный лендинг
Креативная подача простых вещей.

https://demilie.ru
Кликбейт лендинг
Нечестный способ любой ценой получить заявку.

http://mulliner-watch.com
Как не надо делать
Лендинг-шутка с основными клише при создании лендинга

http://roltrol.by
AIDA
1
Attention
2-3 секунды на донесение позиционирования
2
Interes
20-30 секунд на объяснение — как вы решаете проблему ЦА
3
Desire
Донесение УТП и проработка возражений
4
Action
Простой и понятный CTA
Пользователь должен
1
Узнать себя на лендинге
2
Понять как продукт решает его проблему
3
Какой результат он получит на выходе
4
Что для этого нужно сделать
Если вы только начинаете свой карьерный путь или выгорели на прежней работе и хотите получить новую креативную профессию, то макраме — прекрасная отправная точка, чтобы познакомиться с миром моды.

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

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

Обучение платное, но мы даем возможность сделать первые шаги бесплатно.
Методология создания лендингов
Методология
1
Проектирование
Создаем поблочное представление будущего лендинга.
2
Дизайн
Выбираем цветовую схему, готовим изображения, видео, иконки, интерактивные элементы
3
Разработка
Реализация всего функционала, интерактивных элементов.
4
Аналитика
Получение результатов по конверсии, формулирование гипотез и оптимизация конверсии
Проектирование лендингов
Проектирование
1
Макет
Поблочное (поэкранное) представление будущего лендинга
2
Референсы
Чем больше референсов на конкретные элементы, тем понятнее становится задача
Sketch, Figma, Balsamiq, Гугл.Документы, любой конструктор сайтов — подходящие инструменты для макетирования и прототипирования.

Правильный референс не «Хочу всё, как на этом сайте», а «Заголовки и расположение фотографий, как на данном референсе»

Дизайн лендингов
Выбор дизайнера
Штатный
Дорого и для достаточно больших компаний
Фрилансер
Качество — как повезет
Студия
Долго, дорого, не факт что хорошо
Биржи фрилансеров
Как выбрать фрилансера
1
Составляем список фрилансеров
Выбираем по специализации Landing, лучше pro аккаунты, только с примерами работ, лучше без отрицательных отзывов
2
Оцениваем портфолио
Посмотрите от 10 работ, выберите худшую. Устраивает?
3
Отправьте бриф
Попросите оценить сроки и стоимость. Попросите оценить сложность задачи
Взаимодействие с командой
1
ТЗ/бриф на дизайн
Подробное описание лендинга, который вы хотите получить на выходе
2
Референсы
Чем больше референсов на конкретные элементы, тем понятнее становится задача
3
Дизайн-спринт
Брейн-шторм по сбору идей. Кастдев ЦА. Юзертесты
4
Дизайн-ревью
Разбор всех узких моментов ТЗ с командой дизайнеров
5
Контроль версий
Варианты дизайна и комментарии
Дизайн-спринт — мероприятие, направленное на поиск и верификацию идей о создании интерфейсных решений
Дизайн-спринт
1
Формулируем задачу
Например, переработка главной страницы с целью увеличения количества заявок
2
Брейн-шторм и Кастдев
Команда из дизайнеров, продуктологов, маркетологов накидывает свои идеи реализации. Исследование ЦА для поиска паттернов поведения
3
Подготовка макетов
Дизайн готовит простые версии макетов
4
Юзер тестирования
Живым пользователям дают изучить макеты и попробовать оставить заявку. Количественные и качественные тесты
Дизайн-ревью — совместный с пользователями, дизайнерами и заказчиками разбор макетов для синхронизации видения страницы
Инструменты прототипирования
Balsamiq
Макетирование будущего лендинга

https://balsamiq.com/
Marvelapp
Прототипирование будущего лендинга

https://marvelapp.com/
Sketch
Дизайнерские макеты, которые можно сразу отдавать в разработку

https://www.sketchapp.com/
Figma
Дизайнерские макеты, которые можно сразу отдавать в разработку

https://www.figma.com/
Zeplin
Дизайнерские макеты, которые можно сразу отдавать в разработку

https://zeplin.io/
Инструменты тестирования
Fabuza
Юзабилити тесты. Сайты, макеты, баннеры, прототипы, мобильные и десктоп прложения, контент. Есть база респондентов + можно приглашать своих пользователей. Обучают проводить тесты.

http://fabuza.ru
Loop11
Юзабилити-тестирование сайтов, макетов, прототипов. Есть аналитика выполнения задач, clickstream и heatmaps. Возможность просмотреть видео конкретных тестеров. Поддерживает русский язык.

https://www.loop11.com
OptimalWorkshop
OptimalWorkshop: Questions. Онлайн опросы. Есть база респондентов + можно приглашать своих пользователей

OptimalWorkshop: TreeJack. Сервис для валидации информационной структуры сайта (иерархии) с помощью соответствующих заданий для респондентов (респонденты видят только текстовоую структуру сайта и должны добраться до нужной информации кликая на соответствующие пункты).

OptimalWorkshop: Optimal Sort. Сервис для валидации визуальной структуры сайта (категоризации) с помощью соответствующих заданий (респонденты видят только карточки с название контента, которые им нужно сгруппировать между собой). Есть база респондентов + можно приглашать своих пользователей.

OptimalWorkshop: Chalkmark. First click test, сервис для проверки первого впечатления на основе текущей структуры: респондент получает задание, для решения которого у него есть только один клик. Фиксируется правильная/неправильная попытка и время выполнения задачи.

OptimalWorkshop: Reframer. Сервис для коллективной фиксации и упорядочивания наблюдений/инсайтов за юзабити-тестами, фокус-группами и другими качественными исследованиями.

https://www.optimalworkshop.com
Опросы
SurveyMonkey, Typeform, SurveyGizmo, Google Form

Сервисы для проведения опросов. Отличаются дизайном, количеством типов вопросов, логикой отчетами. В платных версиях, как правило, возможности всех сервисов одинаковы.

- Google Form - бесплатно предоставляет неограниченное количество вопросов и разную логику вопросов в зависимости от ответа респондентов;
- SurveyMonkey - динозавр, на рынке как минимум лет 10. Внешний вид самого опроса немного "староват";
- Typeform - современный и красивый, бесплатная версия ограничена ~10 вопросами;
- SurveyGizmo поддерживает несколько языков, для проведения одного опроса на аудиториях разных стран.

Инвестиции в дизайн — это инвестиции в бренд
Сам себе дизайнер
Изображения
shutterstock.com или любой другой фотобанк.

Бесплатные изображения в unsplash.com – да, Google картинки — нет.
Цветовые схемы
Подбираем на сайте color.adobe.com.
Разработка лендингов
Способы разработки
Штатный
Дорого и для достаточно больших компаний
Фрилансер
Качество — как повезет
Студия
Долго, дорого, не факт что хорошо
Конструкторы
Быстро, дешево, но не гибко
Tilda
Сегодняшнее занятие сделано на Тильде.

https://tilda.cc/ru/
Wix
Много макетов, много интеграций, но стартап международный и поэтому стоит дорого.

https://www.wix.com/
uKit
Простой конструктор от известной в Рунете площадки форумов и сайтов Ucoz

https://ukit.com/ru
Landing page generator
Шаблоны в стиле БМ. Но при этом вполне рабочие.

https://lpgenerator.ru/
Webflow
Сложный конструктор скорее для профессиональных разработчиков, но при этом очень мощный.

https://webflow.com/
Readymag
Дизайнерский конструктор.

https://readymag.com/
Wordpress
Самый популярный в мире движок сайтов.

https://ru.wordpress.com/
БРИФ/ТЗ
Хороший бриф — хороший сайт.

Пример брифа/ТЗ — goo.gl/U2qV4n
Аналитика лендингов
Аналитика
1
Устанавливаем Google Tag Manager
Через него сможете внедрить множество целей и простых инструментов
2
Устанавливаем счетчики аналитики
И Метрику, и Аналитикс
3
Устанавливаем цели на лендинге
Каждое возможное действие пользователя — отдельная цель.

Тренируемся — http://alfabusinessweek.ru/
4
Задаем KPI по конверсиям
На каждый этап воронки свой KPI
5
Работаем над улучшением конверсии
Последовательное улучшение лендинга с использованием цифр
HADI-циклы
Гипотеза
Формулируем гипотезу, которую мы хотим проверить на лендинге
Действие
Оцениваем с помощью каких изменений мы сможем проверить ее и внедряем изменения
Данные
Прогоняем минимум 3000 трафика, что дает достоверность в 99% и собираем данные о конверсии
Выводы
Делаем выводы. Будьте готовы к тому, что 3 из 4 экспериментов будут неудачными.
АБ-тесты
Обязательно проверяем достоверность
Пример калькулятора — http://www.evanmiller.org/ab-testing/sample-size.html
Не забываем про SEO
SEO для лендингов
Используем семантическое ядро
Если вы не планируете останавливаться на одном единственном лендинге, а он станет лишь первым шагом к созданию полноценного сайта, то необходимо еще на этапе проектирования сайта задуматься о семантическом ядре. Подобрав семантическое ядро вы сможете представить структуру вашего будущего сайта, которая будет полностью соответствовать структуре запросов пользователей, а значит ее продвижение обречено на успех.

Главный принцип один кластер запросов = одна страница.
Но даже если вы сейчас и не думаете про полноценный сайт, то не забудь про теги.

<Title>, <Description>, <H1> — теги должны быть заполнены и соответствовать содержанию страницы. Рано или поздно ваш лендинг попадет в выдачу и пользователь должен понимать, что там его ждет. Кроме того, информация из этих тегов подтягивает в социальные сети при шаринге ссылки.

2 года назад мы сделали лагерь подготовки к олимпиаде МФТИ и не забыли про теги. Теперь 50% всех платящих пользователей приходит из поисковой выдачи.

https://mfti.foxford.ru/
Полезные ссылки
Где искать вдохновение
Я всегда начинаю готовить дизайн с посещения сайтов конкурентов и сайтов дизайн-студий. Всё уже придумано до меня, так зачем лишний раз изобретать велосипед?
Farrel Gulierm
Дизайнер в Pixels
Хочешь делать крутые сайты? Равняйся на лидеров. Лидеров можно найти в списке победителей наград в области сайтостроения. В России это —goldensite.ru, а в мире https://www.awwwards.com
Samuel Willson
Маркетолог в DD agency
Я люблю похвастаться тем, что делаю. И всегда загружаю свои топовые работы в агрегаторы дизайнов. Например, https://onepagelove.com, https://dribbble.com, https://topdesigninspiration.com
Sarah Lewin
Продуктолог в Pic Pen studio
Вдохновение это хорошо. Но его мало. Надо еще и матчасть знать. Можно почитать как лендинги делают в Рокетбанке или в больших агентствах.
Alex Larkins
Менеджер в SoSoul magazine
Играем в диджитал-агентство.


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

Задача команды — продать заказчику лендинг.
Лендинг для китайского смартфона за 16000 рублей

https://goo.gl/iukd7G
Команда 1
Лендинг для квартиры бизнес-класса в Марьиной Роще

https://goo.gl/4qZiom
Команда 2
Лендинг для приложения Яндекса


https://goo.gl/zKP2UQ
Команда 3
3 раунда в игре
1
Подготовка лендинга — 10 минут
Готовите макет лендинга или сам лендинг
2
Презентация заказчику — 2 минуты
Только 2 минуты у каждой группы, чтобы показать, что лендинг действительно решает задачи заказчика и его клиентов
3
Аукцион — 1 минута
Заказчик и его команда (1 представитель из каждой группы) оценивают стоимость лендинга в единицах от 1 до 10
4
Сбор обратной связи — 3 минуты
Группа агентства может задать вопросы заказчику
Спасибо за занятие
Не забудьте свой лендинг сравнить с оригиналом
Лендинг для китайского смартфона за 16000 рублей


http://www.mi.com/ru/mi-a1/
Группа 1
Лендинг для квартиры бизнес-класса в Марьиной Роще


http://jazzkvartal.ru
Группа 2
Лендинг для приложения Яндекса



https://yandex.ru/app
Группа 3