Как создать правильный прототип landing page

Как создать правильный прототип landing page

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

Напомню, если вы пропустили:

А сегодня мы поговорим о том, что такое структура лендинг пейдж, я расскажу как нарисовать прототип landing page и немного затрону триггеры в лендинг пейдж.

Landing page принципы создания

Правила создания лендинг пейдж, как и в жизни есть несколько этапов:

  1. Подготовка
  2. Сбор ресурсов и информации
  3. Продакшн
  4. Тестинг

Касательно схемы лендинг пейдж, советую почитать это: Каким должен быть лендинг по триггерам БМ. Сейчас я хочу поговорить о том, как создать landing page по триггерам, через прототип или как, называется сам процесс прототипирование сайта.

Что такое прототип сайта – это специальная блок схема (чаще всего чёрно белая) с визуальным отображением размещения элементов на лендинг пейдж. В прототипе вы увидите, все страницы, весь функционал, расположение контента на странице и т.д.

Зачем нужен прототип landing page

1. Экономия времени – изначально гораздо проще нарисовать всё в чёрно белом варианте и менять детали, чем менять в готовом дизайне, а ещё хуже в лендинге который уже завёрстан в интернет.
2. Безопасность заказчика – получая прототип на руки, Вы чётко видите как и где будет располагаться контент и если вам не понравится прототип, Вы сможете «докручивать» его бесконечно.
3. Поэтапность работы – Текст – прототип – дизайн – вёрстка. Именно такие этапы позволят создать Вам лендинг пейдж с высокой конверсией.

Как и в чём нарисовать прототип лендинг пейдж

Прототип, можно нарисовать двумя способами: Первый нарисовать самому с помощью различных сервисов, таких как:

  • Omnigraffle,
  • ConceptDrawPro,
  • Pidoco,
  • BalsamiqMockups,
  • moqups.com — эту программу очень рекомендую, сейчас сидим полностью на ней. Там к стати если зарегестрироваться есть возможность создавать два проекта бесплатно!

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

Важно понимать!
• Так как вы уже образованный человек и сделали все возможные анализы, Ваша задача просто помочь, студии нарисовать его.

• Так же вы должны знать, что лендинг пейдж для товара, отличается от лендинга по продаже услуг, например лендинг пейдж турагентства и имиджевый лендинг пейдж для интернет магазина , может отличаться и строиться по другим принципам.

Прототип landing page, выводы

1. Прототип нужен для многих факторов (описал выше)
2. Идеальный вариант рисовать прототип, в спайке со студией, то есть они рисуют а вы помогаете.
3. Без прототипа, вполне можно создавать страницы приземления, скорее всего это будет прототип дизайнера или руководителя на листке А4.

Прототип landing page: RetsCorp, moqups и несколько лайфхаков

Продолжаем рассказывать о «фишках» и лайфхаках для создания эффективных прототипов посадочных страниц.

До этого мы писали о том, в каких программах можно разрабатывать прототип и вкратце говорили о том, как проводятся предварительные этапы работы с прототипами.

В этом материале мы решили проработать практический гайд на основе нашего внутреннего алгоритма. У вас есть возможность оказаться за кулисами RetsCorp и узнать, что происходит в наших гримерках 🙂

Поехали!

Знакомьтесь, вот крутая программа для создания прототипов: Moqups.com.

Плюсы:

  • Условно бесплатная
  • Можно создать бесплатный проект
  • Удобный интерфейс
  • Простая в использовании
  • Можно импортировать картинки
  • Есть возможность создавать очень сложные по архитектуре сайты
  • Вы можете работать в проекте одновременно

Минусы:

  • Бесплатный аккаунт не дает возможности экспортировать проект
  • При покупке аккаунта Вы ограничены 10 активными проектами
  • Работая одновременно, иногда слетают изменения одного из пользователей
  • Нет history, позволяющей откатить проект до какого-то этапа (только revisions)
  • Мы не нашли приложения для таблетов

Зачем вообще нужен этот moqups?

Мы пустились с места в карьер… Зачем вообще используется эта программа? Ответ простой: для создания прототипов.

Специалисты RetsCorp с уверенностью заявляют, что этап прототипирования — один из наиболее важных при создании лендинг пейдж.

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

Вот пример прототипа нашей студии (первые три с половиной разворота)

пример прототипа

пример прототипа нашей студии

Несколько предварительных выводов

  1. Прототип нужен для создания «скелета» будущего сайта
  2. Лучше, чтобы прототип создавали профессионалы
  3. Прототип посадочной страницы — это помощь дизайнеру
  4. Также он отображает структуру, логику повествования
  5. Наглядность помогает клиенту понять, как примерно будет выглядеть сайт

Что Вас ждет в этой статье

Мы обсудим все подводные (и надводные тоже) камни в прототипировании лендинг пейдж.

Вы узнаете о:

  • Видах прототипов
  • Делегировании и ответственности в прототипировании
  • Технических нюансах создания структуры и концепции прототипа
  • О «фишках» и нашем опыте работы

Ну и в конце статьи Вас ждет приятный бонус 😉

Виды прототипов страниц захвата

Мы немножко сужаем зону обсуждения, поскольку «собаку съели» именно на посадочных страницах, но важно понимать, что этапы работы примерно одни и те же для любого сайта: от визитки до интернет-магазина.

Этапы разработки прототипа

1. Скетч, зарисовка

На этом этапе Вы творите. Возьмите листочек бумаги и ручку/карандаш и структурно набросайте будущую посадочную страницу.

  • Отрисуйте общие элементы
  • Проработайте идеи визуализаций
  • Подумайте над «фишками» и нестандартными элементами
  • Работайте на идеи и креатив

НЕ нужно:

  • Четкой прорисовки
  • Засиживаться больше 2-х часов
  • Заниматься каким-то очень уж творчеством (разрисовывать это цветными карандашами, нанимать дизайнера и так далее)

Цель этого этапа — запустить Ваш мозг.

2. Неподробный прототип

Неподробный прототип

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

На практике это выглядит как большие прямоугольники, рабочие заголовки и заметки. Например, мы выделяем на блок с преимуществами один разворот. Это отображается прямоугольником. Ставим рабочий заголовок «Компания в цифрах». Естественно, в итоге мы сделаем что-нибудь, вроде: «7 причин разработать landing page в RetsCorp», но на этапе неподробного прототипа мы просто схематически показываем, какое содержание должен нести тот или иной блок. Заметкой можно указать, что там будет. Например, 7 клипартов с заголовком и коротким описанием. На этом этапе не парьтесь над отрисовкой форм и кнопок — просто набросайте структуру и общие смыслы.

3. Подробный прототип

Подробный прототип

А вот и самое интересное. На этом этапе необходимо тщательно прописать все-все-все, что будет на сайте и, главное, создать эффективный продающий текст.

Подробный прототип

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

Вот несколько примеров прототипов от RetsCorp

Продажа лекарственных трав и растений (первый разворот):

Продажа лекарственных трав и растений

И еще один разворот с инфографикой:

разворот с инфографикой

Несколько правил создания landing page и прототипов к ним

1. Используйте разные призывы к действию
Не сработала первая кнопка — сработает пятая.

2. Открытые формы захвата лучше, чем закрытые
Открытая форма захвата в лендинг пейдж — это поля, в которые Вы сразу вводите данные. Двойных действий нет: пользователь вводит текст и нажимает на кнопку.

Лендинг по легальному трудоустройству за рубежом, открытая форма захвата:

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

Пример оттуда же, только с закрытой формой:

с закрытой формой

То есть, нужно сделать два действия: нажать на кнопку и заполнить форму.

Оба вида хороши, но 90% наших лендингов включают только открытые формы. Они более действенные.

3. Разработайте собственную систему коммуникаций и правок в прототипе
Например, у нас есть разные пометки для разных отделов.

  • Копирайтинговые (синий цвет)
  • Заметки по дизайну и функционалу (желтые)
  • Клиентские и другие пометки (зеленый)

    разные пометки для разных отделов

После того, как исправления (если это были исправления) внесены, то их удаляет не тот, кто правил прототип, а тот, кто принимает работу.

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

Отрисовывайте все формы и попапы

Не ленитесь отрисовать и пронумеровать (!) каждый попап. У нас нумерация идет большими красными цифрами, а сами попапы отрисовываются в отдельной вкладке проекта.
5. Не «мельчите»
Ширина экрана в проекте moqups у нас составляет 1600 пикселей, а длина соответствует длине прототипа.

Также мы оставляем поле из одного квадратика с каждой стороны для заметок. Это практично.
6. Выделяйте кнопки

Выделяйте кнопки

Мы всегда выделяем кнопки ярким цветом, чтобы их было хорошо видно.
7. Учитывайте функционал

Учитывайте функционал

В формах захвата мы выделяем обязательные поля красным цветом, чтобы на последующих этапах было легче работать и у исполнителей возникало меньше вопросов.
8. Создавайте Thank You Page

Создавайте Thank You Page

Это может быть одно предложение, а может быть целая страница с видео-благодарностью.
9. Следите, чтобы все элементы меню были подписаны

10. Называйте проект понятно и просто

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

Передача прототипа и его подготовка к дизайну

Очень важно сделать прототип интуитивно понятным для любого, кто будет с ним работать. Мы понимаем, что нюансов много, и чтобы не держать все в голове, специалисты RetsCorp составили список, по которому наша команда сверяет каждый проект.

Кто должен делать прототип landing page

Хороший вопрос, ответ на который я до сих пор ищу. Правда, у нас есть свое решение.

С одной стороны, это должен делать интернет-маркетолог, но он не дизайнер и уж точно не программист, он может не заложить креативной концепции и лендинг пейдж получится «сухим». Более того, он не сможет создать грамотный текст.

Возможно, дизайнер? Да, довольно часто этим занимаются именно дизайнеры, особенно если это не landing page, а большой сайт, в котором нужно проектировать пользовательский интерфейс и т. д.

Но дизайнер — не копирайтер и уж точно не обязан быть маркетологом. Он может сделать красиво и креативно… но это не будет продавать.

Тогда копирайтер. Да, вы правы, во время прототипа создается продающий текст. Правда, и тут не обходится без «но»: мы крутимся по кругу: а как же дизайн и маркетинг?

Этим мог бы заниматься проджект-менеджер, но частенько эти люди далеки от написания продающих текстов и уж тем более, от дизайна и «программинга».

Пример прототипа: Продажа тренингов по карьерному росту (несколько разворотов):

Продажа тренингов по карьерному росту

Продажа тренингов по карьерному росту 1

Продажа тренингов по карьерному росту 2

 

К чему мы пришли?

Мы считаем, что прототип следует создавать тому, у кого это лучше всего получается. Например, у нас эту работу прекрасно выполняет копирайтер Полина. Да, у нее получилось не сразу, но сейчас она делает это лучше, чем многие «гуру-маркетосы».

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

Если Вы делаете прототип для своего бизнеса, то иногда и правда лучше сделать это не привлекая посторонних. Да, сайт будет «корявенький», но он будет для Вас, сделанный с любовью. Отдайте его копирайтеру на правки, ну а потом дизайнеру, чтобы создать «конфетку».

Напоследок

Я желаю Вам хороших прототипов, крутых целевых страниц сделанных по ним и больших продаж в бизнесе. Если Вы чувствуете, что не справитесь с этой задачей или Вы — предприниматель, и у Вас просто нет времени во всем этом разбираться, то мы с радостью ждем Ваш проект в маленькой дружной семье RetsCorp.

Оценок: 2 247 (средняя 5 из 5)

Как создать правильный прототип landing page {descr}
Рекомендуем также