Как создать прототип landing page. Часть №3

прототип landing page

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

Напомню, если вы пропустили:
Из чего состоит создание landing page? Введение
Анализ рынка и конкурентов при создании лендинг пейдж. Часть №1
Как анализировать Ц.А при создании landing page. Часть№2

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

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

Правила создания лендинг пейдж, как и в жизни есть несколько этапов:
1. Подготовка
2. Сбор ресурсов и информации
3. Продакшн
4. Тестинг

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

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

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

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

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

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

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

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

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

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

Вот пример одного из прототипов, лендинга по ритуальным услугам:

прототип landing page

Это не лучший вариант, но суть понятна. Так же важно понимать, что структура и дизайн может претерпеть значительные изменения уже в завершённом проекте, поэтому не стоит очаровываться или наоборот расстраиваться, если вы получили отвратительный прототип.

 

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

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

фото

 

Создание прототипа в лендинг пейдж

Видео на эту тему:

 

 

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

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

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

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

Поехали!

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

Moqups.com

Плюсы:

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

Минусы:

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

Кстати, вот видеообзор того, как работать с этой програмкой:

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

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

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

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

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


2

2.5


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

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

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

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

Вы узнаете о:

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

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



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

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

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

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

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

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

НЕ нужно:

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

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

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


3


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

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

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


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

5_вместо скрина с пеллетами


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

Вот несколько примеров прототипов от Uni Сonsulting

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


6

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

7


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

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

Не сработала первая кнопка — сработает пятая.

  • 2. Открытые формы захвата лучше, чем закрытые

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

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


12


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

13


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

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

  • 3. Разработайте собственную систему коммуникаций и правок в прототипе

Например, у нас есть разные пометки для разных отделов.16

14

 

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

 

15


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

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

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


17


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

5. Не «мельчите»

Ширина экрана в проекте moqups у нас составляет 1600 пикселей, а длина соответствует длине прототипа.

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

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

18

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

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


19


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

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

20

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

9. Следите, чтобы все элементы меню были подписаны

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

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

Специально для Вас команда Uni Consulting разработала чеклист для проверки своего прототипа на маркетинг, «начинку» и смысловое наполнение. Скачайте его и проверьте свой сайт.

Чеклист для проверки прототипа К статье

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

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

Держите еще один внутренний чеклист нашей компании:

Чеклист_для_создания_и_оформления_прототипа_статья 

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

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

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

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

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

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

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

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


8

9
11

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

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

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

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

Напоследок

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

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

Автор: Станислав Цыс

Оцените статью:
Не интересноБаянСреднячокБравоИдеально (голосов 55, средний: 4,29 из 5)
Загрузка...