Мы продолжаем серию выпусков о том, как создать лендинг пейдж.
Напомню, если вы пропустили:
А сегодня мы поговорим о том, что такое структура лендинг пейдж, я расскажу как нарисовать прототип landing page и немного затрону триггеры в лендинг пейдж.
Правила создания лендинг пейдж, как и в жизни есть несколько этапов:
Касательно схемы лендинг пейдж, советую почитать это: Каким должен быть лендинг по триггерам БМ. Сейчас я хочу поговорить о том, как создать landing page по триггерам, через прототип или как, называется сам процесс прототипирование сайта.
Что такое прототип сайта – это специальная блок схема (чаще всего чёрно белая) с визуальным отображением размещения элементов на лендинг пейдж. В прототипе вы увидите, все страницы, весь функционал, расположение контента на странице и т.д.
1. Экономия времени – изначально гораздо проще нарисовать всё в чёрно белом варианте и менять детали, чем менять в готовом дизайне, а ещё хуже в лендинге который уже завёрстан в интернет.
2. Безопасность заказчика – получая прототип на руки, Вы чётко видите как и где будет располагаться контент и если вам не понравится прототип, Вы сможете «докручивать» его бесконечно.
3. Поэтапность работы – Текст – прототип – дизайн – вёрстка. Именно такие этапы позволят создать Вам лендинг пейдж с высокой конверсией.
Прототип, можно нарисовать двумя способами: Первый нарисовать самому с помощью различных сервисов, таких как:
Второй вариант который нам подходит больше, это попросить студию, в которой вы заказываете лендинг пейдж сделать его.
Важно понимать!
• Так как вы уже образованный человек и сделали все возможные анализы, Ваша задача просто помочь, студии нарисовать его.
• Так же вы должны знать, что лендинг пейдж для товара, отличается от лендинга по продаже услуг, например лендинг пейдж турагентства и имиджевый лендинг пейдж для интернет магазина , может отличаться и строиться по другим принципам.
1. Прототип нужен для многих факторов (описал выше)
2. Идеальный вариант рисовать прототип, в спайке со студией, то есть они рисуют а вы помогаете.
3. Без прототипа, вполне можно создавать страницы приземления, скорее всего это будет прототип дизайнера или руководителя на листке А4.
Продолжаем рассказывать о «фишках» и лайфхаках для создания эффективных прототипов посадочных страниц.
До этого мы писали о том, в каких программах можно разрабатывать прототип и вкратце говорили о том, как проводятся предварительные этапы работы с прототипами.
В этом материале мы решили проработать практический гайд на основе нашего внутреннего алгоритма. У вас есть возможность оказаться за кулисами RetsCorp и узнать, что происходит в наших гримерках 🙂
Поехали!
Знакомьтесь, вот крутая программа для создания прототипов: Moqups.com.
Плюсы:
Минусы:
Мы пустились с места в карьер… Зачем вообще используется эта программа? Ответ простой: для создания прототипов.
Специалисты RetsCorp с уверенностью заявляют, что этап прототипирования — один из наиболее важных при создании лендинг пейдж.
Прототипом называют простой скетч, набросок будущего сайта, который отображает его структуру и текстовое наполнение. Частенько студии создают прототипы в обычных текстовых редакторах или рисуют от руки.
Вот пример прототипа нашей студии (первые три с половиной разворота)
Несколько предварительных выводов
Что Вас ждет в этой статье
Мы обсудим все подводные (и надводные тоже) камни в прототипировании лендинг пейдж.
Вы узнаете о:
Ну и в конце статьи Вас ждет приятный бонус 😉
Мы немножко сужаем зону обсуждения, поскольку «собаку съели» именно на посадочных страницах, но важно понимать, что этапы работы примерно одни и те же для любого сайта: от визитки до интернет-магазина.
1. Скетч, зарисовка
На этом этапе Вы творите. Возьмите листочек бумаги и ручку/карандаш и структурно набросайте будущую посадочную страницу.
НЕ нужно:
Цель этого этапа — запустить Ваш мозг.
2. Неподробный прототип
На волне вдохновения перейдите к конкретике. Проработайте логическую структуру лендинг пейдж и наполните ее элементарными смысловыми элементами.
На практике это выглядит как большие прямоугольники, рабочие заголовки и заметки. Например, мы выделяем на блок с преимуществами один разворот. Это отображается прямоугольником. Ставим рабочий заголовок «Компания в цифрах». Естественно, в итоге мы сделаем что-нибудь, вроде: «7 причин разработать landing page в RetsCorp», но на этапе неподробного прототипа мы просто схематически показываем, какое содержание должен нести тот или иной блок. Заметкой можно указать, что там будет. Например, 7 клипартов с заголовком и коротким описанием. На этом этапе не парьтесь над отрисовкой форм и кнопок — просто набросайте структуру и общие смыслы.
3. Подробный прототип
А вот и самое интересное. На этом этапе необходимо тщательно прописать все-все-все, что будет на сайте и, главное, создать эффективный продающий текст.
Важно понимать, что сразу после этого этапа прототип переходит к дизайнерам, и от того, насколько понятным и разумным он будет, зависит результат. От текстового наполнения и структуры во многом зависит качество посадочной страницы и драгоценные показатели конверсии.
Вот несколько примеров прототипов от RetsCorp
Продажа лекарственных трав и растений (первый разворот):
И еще один разворот с инфографикой:
1. Используйте разные призывы к действию
Не сработала первая кнопка — сработает пятая.
2. Открытые формы захвата лучше, чем закрытые
Открытая форма захвата в лендинг пейдж — это поля, в которые Вы сразу вводите данные. Двойных действий нет: пользователь вводит текст и нажимает на кнопку.
Лендинг по легальному трудоустройству за рубежом, открытая форма захвата:
Пример оттуда же, только с закрытой формой:
То есть, нужно сделать два действия: нажать на кнопку и заполнить форму.
Оба вида хороши, но 90% наших лендингов включают только открытые формы. Они более действенные.
3. Разработайте собственную систему коммуникаций и правок в прототипе
Например, у нас есть разные пометки для разных отделов.
После того, как исправления (если это были исправления) внесены, то их удаляет не тот, кто правил прототип, а тот, кто принимает работу.
Благодаря этой системе мы никогда не путаемся и всегда знаем, для кого какой комментарий создан. Это очень важно и ценно, особенно, когда команда большая.
4. Отрисовывайте все формы и попапы
Не ленитесь отрисовать и пронумеровать (!) каждый попап. У нас нумерация идет большими красными цифрами, а сами попапы отрисовываются в отдельной вкладке проекта.
5. Не «мельчите»
Ширина экрана в проекте moqups у нас составляет 1600 пикселей, а длина соответствует длине прототипа.
Также мы оставляем поле из одного квадратика с каждой стороны для заметок. Это практично.
6. Выделяйте кнопки
Мы всегда выделяем кнопки ярким цветом, чтобы их было хорошо видно.
7. Учитывайте функционал
В формах захвата мы выделяем обязательные поля красным цветом, чтобы на последующих этапах было легче работать и у исполнителей возникало меньше вопросов.
8. Создавайте Thank You Page
Это может быть одно предложение, а может быть целая страница с видео-благодарностью.
9. Следите, чтобы все элементы меню были подписаны
10. Называйте проект понятно и просто
Старайтесь давать проекту такое название, которое будет понятным для каждого, кто дальше будет с ним работать. Ну и старайтесь, чтобы имя проекта не было слишком уж неформальным и неподходящим для клиента.
Очень важно сделать прототип интуитивно понятным для любого, кто будет с ним работать. Мы понимаем, что нюансов много, и чтобы не держать все в голове, специалисты RetsCorp составили список, по которому наша команда сверяет каждый проект.
Хороший вопрос, ответ на который я до сих пор ищу. Правда, у нас есть свое решение.
С одной стороны, это должен делать интернет-маркетолог, но он не дизайнер и уж точно не программист, он может не заложить креативной концепции и лендинг пейдж получится «сухим». Более того, он не сможет создать грамотный текст.
Возможно, дизайнер? Да, довольно часто этим занимаются именно дизайнеры, особенно если это не landing page, а большой сайт, в котором нужно проектировать пользовательский интерфейс и т. д.
Но дизайнер — не копирайтер и уж точно не обязан быть маркетологом. Он может сделать красиво и креативно… но это не будет продавать.
Тогда копирайтер. Да, вы правы, во время прототипа создается продающий текст. Правда, и тут не обходится без «но»: мы крутимся по кругу: а как же дизайн и маркетинг?
Этим мог бы заниматься проджект-менеджер, но частенько эти люди далеки от написания продающих текстов и уж тем более, от дизайна и «программинга».
Пример прототипа: Продажа тренингов по карьерному росту (несколько разворотов):
Мы считаем, что прототип следует создавать тому, у кого это лучше всего получается. Например, у нас эту работу прекрасно выполняет копирайтер Полина. Да, у нее получилось не сразу, но сейчас она делает это лучше, чем многие «гуру-маркетосы».
Совсем неплохо, когда каждый член команды вносит свою лепту в проект. Таким образом, прототип обогащается и креативными, и функциональными, и продающими решениями.
Если Вы делаете прототип для своего бизнеса, то иногда и правда лучше сделать это не привлекая посторонних. Да, сайт будет «корявенький», но он будет для Вас, сделанный с любовью. Отдайте его копирайтеру на правки, ну а потом дизайнеру, чтобы создать «конфетку».
Напоследок
Я желаю Вам хороших прототипов, крутых целевых страниц сделанных по ним и больших продаж в бизнесе. Если Вы чувствуете, что не справитесь с этой задачей или Вы — предприниматель, и у Вас просто нет времени во всем этом разбираться, то мы с радостью ждем Ваш проект в маленькой дружной семье RetsCorp.
Оценок: 2 247 (средняя 5 из 5)
Как создать правильный прототип landing page {descr}