Прототип лендинга что это
Прототип лендинга: что это такое, зачем он нужен и как его сделать
Прототип лендинга: что это такое, зачем он нужен и как его сделать
Итак, у вас возникла задача — разработать лендинг или сайт для продукта (товара, услуги, обучающего курса). Существует два способа решения вопроса:
Более крупные бизнесы, как правило, заказывают лендинги под ключ в агентствах. Микробизнесы обращаются к частным разработчикам или же ищут отдельных исполнителей.
В последнем случае вам и пригодится прототипист — копирайтер, который не просто пишет текст, а проектирует структуру landing page (или многостраничного сайта) и оформляет результат в виде прототипа — предварительного макета.
Как выглядит прототип: наглядные примеры
Посадочным страницам присуще строгое структурирование: разделение по смысловым блокам, списки, в том числе табличные, наглядное визуальное оформление.
Прототип как раз и показывает структуру лендинга, предварительную (варфрейм) или окончательную (мокап).
Оформить результат также можно по-разному: от простых пустых рамок до полностью иллюстрированного кликабельного прототипа.
Посмотрите примеры прототипов лендинг пейдж.
И в Акшуре (интерактивные, особенно хороши для многостраничных сайтов):
Выгоды от разработки прототипа:
— прототип, фактически, заменяет ТЗ для дизайнера
— дизайнеры не снижают конверсию, оформляя лендинг по собственном представлению
И лучше заказывать прототип вместе с текстом, а не отдельно, — у копирайтеров-прототипистов (например, в нашем Агентстве).
Почему так? Чтобы понять это, нужно представить всю схему работы.
Общая схема создания продающего лендинга
(В варианте сборки в конструкторе этапы по дизайну и верстке часто объединяются.)
Первая и самая грубая ошибка: НАЧИНАТЬ с дизайна
Это всё равно, что клеить обои до выравнивания стен.
Да, дизайнер может и сам набросать какую-то структуру лендинга, благо часто их рисует. Но это, как правило, не его компетенция: пироги возьмется печь сапожник. И самое главное, продажами в этом случае обычно не пахнет, ведь маркетинговый анализ не проводился.
Чтобы не переплачивать и не терять деньги, не отступайте от схемы и не перескакивайте через этапы.
В крупных лендинговых агентствах могут быть отдельные специалисты для первых этапов:
Копирайтер-прототипист — это 4 в 1: он и общается с клиентом, и анализирует, и проектирует лендинг, и пишет текст, оформляя как прототип. А иногда даже собирает лендинги в конструкторе.
Еще нас, прототипистов, называют «маркетологами для бедных», поскольку чаще всего у клиентов из микробизнеса нет на руках даже первичного маркетингового анализа (ведь и вы его не заказывали отдельно, не так ли?).
Соответственно, мы умеем на хорошем уровне решать все задачи из этапов 1-7.
Как сделать прототип: идем по этапам
Общая постановка задачи
Вы озвучиваете задачи лендинга, договариваетесь с нами об условиях и этапах работы.
На этом этапе мы как профессионалы дадим вам рекомендации, какая именно посадочная страница вам нужна (для онлайн-школ нужны совсем другие лендинги, чем для товаров и услуг). А то и отговорим от ее создания (иногда и в ущерб своему карману), если лендинг не будет решать ваши вопросы и окажется бесполезным.
Брифование
На этом этапе добывается нужная для работы первичная маркетинговая информация. И главный ее источник — именно вы (или ваши сотрудники).
В брифе содержатся вопросы (много вопросов) по продукту, компании, целевой аудитории и конкурентам. Вот пара скриншотов из нашего брифа, который считается эталонным среди копирайтеров, директологов и таргетологов.
Бриф может заполняться письменно (вы скачиваете и заполняете сами) либо устно — в беседе. То есть, процесс заполнения может затянуться на часы (будьте готовы к этому).
Неопытные клиенты часто думают, что им достаточно поставить задачу, а всё остальное сделают за них: «если я заполню бриф, то за что же я отдаю деньги?»
И если какую-то часть этой информации мы можем добыть сами (целевая аудитория, конкуренты), то на вопросы о продукте и компании должны отвечать именно представители заказчика. Иначе текст будет о чём угодно, но не о вашем продукте.
(Впрочем, будет здорово, если вы поделитесь и своим видением ЦА и конкурентов. Часто никто не знает их лучше вас, а мы в любом случае проведем свое расследование и проверим, насколько ваше понимание соответствует реальности.)
Но это только начало — мы от вас не отстанем ☺.
Сбор дополнительной информации
Вы уже немного ненавидите нас, а мы всё сыплем и сыплем дополнительными вопросами.
На этом этапе мы копаем информацию о целевой аудитории (проблемы-задачи-«боли», портрет, возражения и ожидания) и анализируем сайты, лендинги, продукты конкурентов, вытаскивая их характеристики.
И периодически уточняем: нет ли у вас такого, как у Иван Иваныча?
Маркетинговый анализ (МА)
Часто сбор информации и МА сплетаются в единый процесс: что-то уточняем, что-то дополняем и всё складываем в единую картинку.
У каждого копирайтера свой подход к анализу — кто-то использует интеллект-карты, другие варианты схем. У нас это 2 таблицы: сегменты целевой аудитории и анализ конкурентов (а также крутой бонус для заказчиков — ударный файл с фишками с лендингов конкурентов).
Из второй таблицы извлекаем данные для определения преимуществ и выгод продукта. Он станет основой маркетинговой «начинки» будущего текста.
Проектирование структуры лендинга
По результатам анализа создается структура лендинг пейдж. В нашем случае предварительная — иногда она корректируется в ходе текста. Из структуры понятны первый экран (ключевая часть посадочной), порядок и расположение блоков с черновыми подзаголовками.
Написание текста
Только теперь занимаемся непосредственно продающим текстом. Как видите, это часто даже не половина работы, а всего треть.
Черновую структуру заполняем, корректируя по ходу, и вычитываем.
Оформление прототипа
Приводим наработанный дизайн-макет лендинга к окончательному виду.
Нередко копирайтер всю работу выполняет сразу (например, в Moqups или Axure) — то есть, написание и оформление сливаются в один процесс. Мы же в Агентстве Трубадура базовый макет разрабатываем в Ворде, а уже затем переносим в нужный сервис.
Всё готово: прототип можно передавать в работу дизайнеру. Учтите, что для него, скорее всего вам придется заполнить свой, дополнительный бриф (да, опять ☺).
На каких этапах производятся согласования?
В нашем случае это:
Фактически, мы работаем в сотворчестве с вами в тех пунктах, что касаются выявления ключевых маркетинговых моментов (« смыслов » на сленге лендингистов.)
В проектировании лендинга вы можете отметить неточности в фактах и подборе нужных слов. Попытки указывать, что и как писать, какими фразами, то есть, водить рукой копирайтера, обычно приводят к развитию событий по двум сценариям:
— неопытный копирайтер может уступить, что негативно отобразится на продажах
— опытный (как мы) — пойдет на принцип и разорвет сотрудничество.
Кстати, учтите, что со сдачей прототипа работа не заканчивается. Мы проверим корректность дизайна и верстки и подготовим для вас еще один бонус — гипотезы для тестирования будущего лендинга. Потому что максимальная эффективность никогда не достигается с первой попытки.
Так как же выбрать копирайтера-прототиписта
Попросите примеры работ
Учтите, что далеко не все работы копирайтер сможет вам показать. Иногда действует подписка о неразглашении, а порой лендинг еще только разрабатывается (часто готовые прототипы ждут месяцами дизайна и верстки).
Часть примеров мы покажем вам ссылками, другие — скриншотами или документами. В нашем активе их уже не один десяток готовых прототипов
Уточните понимание именно вашей тематики
Далеко не факт, что мы продавали именно ваш продукт, но если мы уже погружались в тему, то это будет плюсом для всех (а счет тем, с которыми мы уже работали, доходит до сотни).
Впрочем, если опыта именно в вашей теме у нас еще нет, настоящему маркетологу-исследователю это не помеха.
Расспросите о принципах работы
Соответствуют ли они тому алгоритму, которые мы рассказали?
Что должно вас насторожить:
— нет брифа (для первого заказа он обязателен) — ни письменного, ни устного
— исполнитель задает мало вопросов (или не задает вообще) и молча сдает уже готовый текст
— не выполняется маркетинговый анализ ни в какой форме (что есть в брифе, то и пишет)
— (как результат прошлых трех пунктов) полученный текст — набор банальностей типа «индивидуального подхода» и «надежной компании» без особой конкретики
— автор не оформляет прототип даже в Ворде (это просто массив текста без четкого зонирования блоков)
С нами вы застрахованы от всего этого.
Прототип или лендинг под ключ?
Конечно, вам как заказчику удобнее заказать всё сразу. Именно поэтому мы можем сделать лендинг под ключ с дизайном и версткой в html или на WordPress либо со сборкой в конструкторе (PlatformaLP, Тильда).
Иногда разумно заказывать отдельно сам прототип (конечно же, с маркетинговым анализом и текстом):
— если вы — подрядчик по созданию лендингов (с такими мы работаем много и охотно)
— если бюджет поджимает и вы хотели бы начать с прототипа, а дизайн с версткой заказать в следующий заход
— если выбираете самое лучшее : лучший прототип с копирайтингом, лучший дизайн, лучшую верстку
В агентствах редко бывает всё на высшем уровне, потому что сами лендинговые агентства существуют в большинстве случаев не более 5 лет.
И это при том, что мы начали писать тексты для онлайн-школ еще в 2008 году — задолго до того как в Рунете появились термины «лендинг» и «прототип». Это называлось тогда просто «одностраничником» или salesletter.
Прототип лендинга: подведем итоги
А еще мы готовим копирайтеров-прототипистов на тренинге « Умные лендинги ».
Прототип сайта — как и для чего создавать!
92% страниц не продают, конверсия невысокая, отклики не приводят к продажам. Как показывает опыт, в большинстве случаев основная причина в посадочной странице – попросту хромает лендинг.
Для проектирования и создания сайта, увеличения конверсии предварительно разрабатывают прототип. Он представляет собой эскиз главной страницы и отражает структуру или визуальный сценарий для ресурса.
Прототип показывает финальный текстовый результат с определенной очередностью, структурой и с разбивкой по блокам. Это полуфабрикат, на основе которого создается дизайн лендинга, выделяются ключевые моменты как инструмент работы с посетителями страницы.
ЧТО ТАКОЕ И ЗАЧЕМ? ЦЕЛИ СОЗДАНИЯ ПРОТОТИПА LANDING PAGE.
Прототип – это скелет сайта, утвержденный и согласованный проект объединяет работу всей команды. Любые изменения проще внести в прототип, дизайн сайта при этом нарушен не будет.
Прототип разрабатывают на начальной стадии создания проекта веб-сайта, он предназначен для реализации следующих целей:
Объединение на одной странице данных по проекту и поэтапной разработки landing page.
Согласование на начальном этапе структуры продающегося ресурса, а также информационного контента.
Удобство в дальнейшей работе над лендингом дизайнеру. Все блоки и структура уже детально разработаны, ему останется только оформить интерфейс, выбрать цветовую гамму и добавить для усиления восприятия визуальные детали.
Иногда прототипы создают для того, чтобы протестировать нишу ЦА, а также идею.
Для разработки макета многостраничников, в том числе и интернет-магазинов, с большим количеством информации, которую трудно уместить на один лист. Структурированные блоки помогут визуально определить наполнение.
Существует несколько уровней создания прототипа сайта от простейшего до функционального с визуализацией в конструкторе.
Простейший прототип создается на бумаге с помощью ручки или карандаша. Такой вариант недостаточно детализирован и относится к эскизу разработчика. Это могут быть идеи, зарисовки или наброски от руки по размещению информационного материала и системе его расположения.
Заказчики сайта иногда делают предварительные наброски на бумаге в виде блоков внимания. Чаще всего это обычный проект, нарисованный шариковой ручкой и представляющий собой структурированные блоки.
При работе с прототипами встречается любительский вариант, который разрабатывают на биржах копирайтинга, например, WorkZilla. Часто ради экономии денежных средств его делают собственники сайтов. Такие работы продуманы гораздо лучше, чем простейшие, но детализации мало, не проведены маркетинговые исследования, неверно определена целевая аудитория.
Непрофессионализм проекта налицо: недостаточное количество текстового материала, кроме того, он выполнен неаккуратно. Это значит, блоки будет неудобно читать, нет акцента на важную информацию. В итоге клиент покинет сайт.
В самодостаточном прототипе четко обозначены ключевые моменты:
1) Страница структурирована.
2) Грамотно составлены тексты.
Дизайнер четко понимает задачу и самостоятельно принимает решение по размещению блоков.
Неплохой сервис для лендинга – Adobe Muse, у него есть инструменты для детальной проработки страниц. В библиотеке собраны не только привычные элементы в виде квадратов, можно выбрать и более гибкие формы.
Профессиональные разработчики добавляют на страничку тематические картинки, например, фотографии, скриншоты с других страниц, они оживляют сайт и помогают клиенту сделать окончательный выбор. Такой прототип называется «лоскутным» или «мудбоард».
Проект создания сайтов компаний или сервисных служб требует разработки детального прототипа. Здесь важно на каждом этапе согласовывать блоки и элементы, чтобы впоследствии не пришлось править проект.
В такой работе желательно присутствие дизайнера, который поможет проработать детали. После одобрения материала заказчиком придаст ему красивый вид с помощью цветового оформления, использования шрифтов, фотографий, картинок и схем.
Вариант разработки лэндинга зависит от мощности проекта, его финансирования, поставленных сроков и целей. Для обычного landing page без тщательной проработки хватит прототипа со средней детализацией.
Перед тем, как создать прототип сайта, следует ознакомиться с этапами работы, каждый из которых разбит на тематические блоки.
В него входит предварительная подготовка к проекту:
Разработчик должен понять принцип проекта, с какой целью будет создан прототип, его роль в цепочке взаимодействия заказчика с клиентом и окончательный результат.
На какую аудиторию ориентирован лендинг, детальное определение ЦА с разбивкой по сегментам.
Анализ конкурентов, в первую очередь прорабатывают сильные и слабые стороны аналогичных сайтов. Кроме того, следует проанализировать кросс-проекты.
На основе полученных данных, а также с учетом целей проекта определяют боли целевой аудитории, что для нее важно, а также прорабатывают структуру, УТП и заголовки блоков.
Исходя из анализа целевой аудитории и предварительных данных, планируют структуру landing page с разбивкой по блокам и сегментам. Дополнительно можно воспользоваться информацией из запросов в Вордстате.
Далее составляют эскиз проекта на бумаге, так намного проще новичкам. Опытные разработчики сразу переходят работать в программе.
На основе предварительно полученных данных необходимо написать продающие тексты, которые приведут клиента к покупке или направят на заполнение блока.
Этап исследования присутствует только при детальной разработке прототипа. Опросы проводятся вживую, по звонку или в письменном виде.
Необходимо не менее 20 участников, у которых уточняют, нравится ли им содержание текстов и УТП, а также как воспринимается специальное предложение или оффер.
На основе этапа исследования и обратной связи тексты дорабатывают, после этого прототип отправляют дизайнеру.
Этапы прототипирования сайта более сложные, на них уходит больше времени, придется соединять в одно целое несколько поведенческих сценариев клиентов. Поэтому, если вы планируете заниматься созданием прототипа самостоятельно – вам будет нелегко.
При создании продающейся структуры прототипа, особое внимание уделяют следующим моментам.
На основе анализа ЦА определяют боли клиентов, закрывают возражения, учитывают особенности, составляют структуру прототипа, а также пишут тексты. Стиль написания – информационный, важно проверять удобочитаемость по специальным сайтам, например, в glvrd.ru.
Важно использовать сильные заголовки и подзаголовки. Для прототипа достаточно написания по методу 4U, существуют также другие формулы и приемы акцентирования внимания клиента одним заголовком.
При написании текстов используют психологические приемы и уловки.
Необходимо при помощи сильного текста, читателя превратить в покупателя. Для этого используют разные приемы, например, AIDA, сторителлинг.
Создать прототип сайта можно с помощью разных инструментов, все они имеют свои сильные и слабые стороны. Желательно попробовать поработать на каждом и выбрать удобный.
В большинстве сервисов введены ограничения на бесплатное использование, их хватает на работу среднего уровня. Для более сложных проектов лучше заранее купить лицензию.
Рассмотрим распространенные варианты для создания.
С помощью простейших инструментов заказчику удобнее объяснить, что он хочет видеть в прототипе. А также их часто используют новички.
Подходят для новичков, а также для создания прототипов среднего уровня. Верстальщики и разработчики предпочитают использовать минималистичный сервис Wireframe, на котором можно быстро проработать основные блоки.
Конструктором пользуются профессионалы, он прекрасно подходит для разработки интернет-магазинов, а также крупных сайтов. Своеобразный интерфейс потребует предварительного изучения и навыков, после которых можно будет создавать самые сложные и уникальные прототипы.
Работать в простом и гибком конструкторе удобно, работы получаются красивые, а главное – аккуратные. В сервисе создают индивидуальные блоки, в отличие от большинства программ, в которых предлагают только шаблонные элементы. Основное достоинство инструмента: прототип сразу публикуется на домене, его можно показать клиенту.
Библиотека конструктора наполнена эмоциональными элементами: разными шрифтами, богатой оттеночной гаммой, можно менять цвет кнопок или создавать лоскутные прототипы.
Странички получаются аккуратными, интересный дизайн вызывает настоящий восторг у заказчиков. Инструменты, которые используют наиболее часто, сохраняют в библиотеке и при следующих разработках не тратят время на их создание.
Сервис предпочитают дизайнеры, они привыкли к его управлению, на нем размещают блоки для сайта, лендинга или интернет-магазина.
Предварительно детально прорисовывают элементы и оформляют их цветом, после чего подбирают фотографии или картинки. Чтобы не делать двойную работу, проще всего весь проект выполнять дизайнеру.
Программа отличается удобным сервисом, на ней не только оформляют прототипы, но и продумывают все идеи совместно с командой. На экране появляется большая доска, на которой можно рисовать, писать тексты, добавлять скриншоты или комментировать.
Программу используют при создании кликабельных страниц для мобильных приложений, кроме того, она подходит для разработки сайтов.
Создание прототипа требует аналитического подхода, маркетингового исследования, а также опыта в написании сильных текстов и заголовков. Кроме того, необходимо правильно и корректно его оформить.
Такую работу могут выполнить:
— Проектировщики с опытом прототипирования, должность может быть в штате крупных организаций или узкоспециализированных компаний, например, в IT сфере или в торговой сети. Они создают и проектируют сайт, разрабатывают структуру. Заниматься интерфейсом и оформлением будет дизайнер.
— UI/UX-специалист или дизайнер – профессионалы грамотно оформят интерфейс, продумают расположение кнопочек, использование админки, но лендинг полностью разработать не смогут.
— Проджект-менеджер, такой человек есть в штате многих веб-студий, часто ему поручают несложные проекты по разработке прототипов.
— Можно заказать прототип сайта у фрилансера – здесь одно из двух, если откликнулся такой специалист, он либо сделает работу хорошо, либо не выполнит.
— Копирайтеры напишут сильный текст, но многие не владеют специальными программами. Лендинг, оформленный в офисных программах, выглядит некрасиво.
— Профессиональный маркетолог – это идеальный вариант. Он знает все методы продвижения, сможет определить и проанализировать ЦА. Особенно сильной будет команда в связке с веб-райтером или заказчиком проекта.
— Web-дизайнер – может оформить только простые проекты.
— Владелец бизнеса – при наличии опыта и времени может создать проект.
Идеальное звено для прототипирования:
На практике часто бывает, что один участник команды выполняет сложные задачи, в таком случае состав меняется. Разрабатывать проект должен тот, у кого достаточно опыта и знаний, остальные участники только помогают в работе.
При разработке сложных работ понадобится привлечение профессионалов, это будет зависеть от поставленных задач. Нужно помнить, что в работе над проектом необходимо одновременно продумывать структуру, блоки, писать тексты и делать дизайн.
Принцип создания любительского прототипа – несложный, его под силу освоить практически любому. Чтобы научиться создавать лендинги с нуля, необходимо:
— Статью прочитать несколько раз.
— Поискать в интернете дополнительные материалы, а также посмотреть видео на Ютуб.
— Вникнуть в работу, обозначить цели и задачи, рассмотренные на этапе подготовки.
— Выбрать удобный сервис для создания прототипа.
— Аккуратно, вдумчиво и последовательно создать прототип в конструкторе.
Но при этом необходимо не забывать, что вам придется работать в нескольких нишах сразу: как минимум это:
маркетинговое исследование рынка;
копирайтинг (сильные продающие текстовые блоки);
Важно! Первый прототип естественно будет с большими недочетами. Чтобы набить руку, одного прототипа недостаточно, необходимо выполнить минимум 5-7 работ, для нормального результата.
Второй вариант – записаться на обучающие курсы, чаще всего, прототипирование включено в программу по работе с сайтами, но курсы не дешевые и занимают много времени.
Специалистов, занимающихся только созданием прототипов, очень мало, для многих это дополнительный доход, поэтому стоимость прототипирования зависит от профессионализма и опыта.
Проектирование прибыльных веб сайтов разнится в стоимости:
Обычный проект стоит от 10 000 рублей.
Многостраничник – 20 000 рублей.
Интернет-магазин – 30 000 рублей.
Проект повышенной сложности может стоить от 30 000 рублей.
Данные о стоимости актуальны на 2019 год.
На прототип выделяют до 30% от стоимости индивидуального проекта по созданию сайта. Например, для сайта стоимостью 100 00 рублей будет выделено 10 000 – 30 000 рублей.
Прототип – это основа проекта!
В сайте без прототипа отсутствуют маркетинговые исследования, не выделена ценность продукта, не определены выгоды клиента.
Сайт без прототипа похож на лоскутное одеяло, блоки не взаимосвязаны между собой, не заложена основная концепция, нет идейности.
Создавать прототип может как маркетолог, так и копирайтер или дизайнер, вам останется лишь выбрать кто вам сделает «конфетку».
Важно! Сайт без прототипа лишен логической последовательности и структуры. Клиент теряется на экране, он сразу не сможет понять, в чем выгода данного продукта конкретно для него. Даже если текст в одном из блоков настроен на определение выгоды, это не сработает.
В создании прототипов очень и очень много «подводных камней», и этими секретами специалисты делятся в редких случаях. Вам дадут азы, но самое главное оставят себе – зачем же профессионалам нужна лишняя конкуренция на рынке?
Но все же если вы твердо решили: создам прототип сам! Не забывайте: вы потратите уйму времени, сил, нервов и денежных средств, а по итогу все равно придется обращаться к специалисту.
Подумайте, может стоит сразу обратится к профессионалам? Обращайтесь, мы всегда поможем и сделаем все в лучшем виде, по доступной цене и за короткий промежуток времени.