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


Сегодня на занятии
Разберем практические вопросы создания лендингов, рассмотрим примеры, инструменты создания лендингов
15
Примеров лендингов
16
Инструментов для работы с лендингами
6
созданных лендингов
Под какие задачи необходимы лендинги
Разбираем образовательные лендинги
1. Под какую ЦА лендинг?

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

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

Играем в ЛЕНДИНГ-БИНГО — https://docs.google.com/spreadsheets/d/1WLl_coxuQTxur7PRQi0SEMTsyJ-9JZxemSni1DUv2Tk/edit?usp=sharing
Крупная компания mail.ru
У компании своя разработка и есть задача — сделать образовательную страницу безопасность для почты mail.ru

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

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

https://foxford.ru
Офлайн-курсы
Бизнес уже начал показывать результаты и можно вложить деньги в дизайн и разработку.

http://videoforme.ru/course/webdesign
Частный курс
Конструктор — быстро и эффективно.

http://custdev.me
Платформа
У страницы конкретная задача — собрать пользователей на тестирование

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

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

https://netology.ru/programs/marketing-director
Одноэкранный + длинный лендинг
Попытка и лид сразу собрать и аргументов накидать.

https://lingualeo.com
Особенности лендингов образовательных продуктов
Инсайты и RTB
1
Экспертность
Что является RTB?
2
Программа
Как лучше всего показать программу?
3
УТП
Что уникального будет именно на вашем курсе?
4
Рекомендации
Как пользователи могут поверить им?
Проектирование лендингов
Проектирование
1
ТЗ/бриф на дизайн
Подробное описание лендинга, который вы хотите получить на выходе
2
Референсы
Чем больше референсов на конкретные элементы, тем понятнее становится задача
3
Дизайн-спринт
Брейн-шторм по сбору идей. Кастдев ЦА. Юзертесты
4
Дизайн-ревью
Разбор всех узких моментов ТЗ с командой дизайнеров
5
Контроль версий
Варианты дизайна и комментарии
Balsamiq, Гугл.Документы, любой конструктор сайтов — подходящие инструменты для макетирования и прототипирования.

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

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

Пример брифа/ТЗ — goo.gl/U2qV4n
Инструменты прототипирования
Balsamiq
Макетирование будущего лендинга

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

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

https://www.sketchapp.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/
Играем в диджитал-агентство.


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

Задача команды — продать заказчику лендинг.
3 раунда в игре
1
Подготовка лендинга — 5 минут
Готовите макет лендинга или сам лендинг
2
Презентация заказчику — 2 минуты
Только 2 минуты у каждой группы, чтобы показать, что лендинг действительно решает задачи заказчика и его клиентов
3
Аукцион — 1 минута
Заказчик и его команда (1 представитель из каждой группы) оценивают стоимость лендинга в единицах от 1 до 10
4
Сбор обратной связи — 1 минута
Группа агентства может задать вопросы заказчику и его команде
Группа 1 — школа английского
Лендинг для онлайн-школы английского языка для детей
Группа 2 — астрономический лагерь
Лендинг для образовательного лагеря астрономии, который проходит на Байкале летом
Группа 3 — создание лендингов
Лендинг для компании, которая занимается обучением создания лендингов
Группа 4 — платформа для корпоративного обучения
Лендинг для находящейся в разработке онлайн-платформе корпоративного обучения
Группа 5 — курс управления персоналам
Лендинг для курса управления персоналом для ТОП-менеджеров совместно с Forbes
Групппа 6 — офлайн школа программирования для детей
Школа программирования в среде Swift для детей в Волгограде.
Полезные ссылки
Где искать вдохновение
Я всегда начинаю готовить дизайн с посещения сайтов конкурентов и сайтов дизайн-студий. Всё уже придумано до меня, так зачем лишний раз изобретать велосипед?
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
Спасибо за занятие