что такое прототип лендинга
Прототип лендинга: что это такое, зачем он нужен и как его сделать
Прототип лендинга: что это такое, зачем он нужен и как его сделать
Итак, у вас возникла задача — разработать лендинг или сайт для продукта (товара, услуги, обучающего курса). Существует два способа решения вопроса:
Более крупные бизнесы, как правило, заказывают лендинги под ключ в агентствах. Микробизнесы обращаются к частным разработчикам или же ищут отдельных исполнителей.
В последнем случае вам и пригодится прототипист — копирайтер, который не просто пишет текст, а проектирует структуру landing page (или многостраничного сайта) и оформляет результат в виде прототипа — предварительного макета.
Как выглядит прототип: наглядные примеры
Посадочным страницам присуще строгое структурирование: разделение по смысловым блокам, списки, в том числе табличные, наглядное визуальное оформление.
Прототип как раз и показывает структуру лендинга, предварительную (варфрейм) или окончательную (мокап).
Оформить результат также можно по-разному: от простых пустых рамок до полностью иллюстрированного кликабельного прототипа.
Посмотрите примеры прототипов лендинг пейдж.
И в Акшуре (интерактивные, особенно хороши для многостраничных сайтов):
Выгоды от разработки прототипа:
— прототип, фактически, заменяет ТЗ для дизайнера
— дизайнеры не снижают конверсию, оформляя лендинг по собственном представлению
И лучше заказывать прототип вместе с текстом, а не отдельно, — у копирайтеров-прототипистов (например, в нашем Агентстве).
Почему так? Чтобы понять это, нужно представить всю схему работы.
Общая схема создания продающего лендинга
(В варианте сборки в конструкторе этапы по дизайну и верстке часто объединяются.)
Первая и самая грубая ошибка: НАЧИНАТЬ с дизайна
Это всё равно, что клеить обои до выравнивания стен.
Да, дизайнер может и сам набросать какую-то структуру лендинга, благо часто их рисует. Но это, как правило, не его компетенция: пироги возьмется печь сапожник. И самое главное, продажами в этом случае обычно не пахнет, ведь маркетинговый анализ не проводился.
Чтобы не переплачивать и не терять деньги, не отступайте от схемы и не перескакивайте через этапы.
В крупных лендинговых агентствах могут быть отдельные специалисты для первых этапов:
Копирайтер-прототипист — это 4 в 1: он и общается с клиентом, и анализирует, и проектирует лендинг, и пишет текст, оформляя как прототип. А иногда даже собирает лендинги в конструкторе.
Еще нас, прототипистов, называют «маркетологами для бедных», поскольку чаще всего у клиентов из микробизнеса нет на руках даже первичного маркетингового анализа (ведь и вы его не заказывали отдельно, не так ли?).
Соответственно, мы умеем на хорошем уровне решать все задачи из этапов 1-7.
Как сделать прототип: идем по этапам
Общая постановка задачи
Вы озвучиваете задачи лендинга, договариваетесь с нами об условиях и этапах работы.
На этом этапе мы как профессионалы дадим вам рекомендации, какая именно посадочная страница вам нужна (для онлайн-школ нужны совсем другие лендинги, чем для товаров и услуг). А то и отговорим от ее создания (иногда и в ущерб своему карману), если лендинг не будет решать ваши вопросы и окажется бесполезным.
Брифование
На этом этапе добывается нужная для работы первичная маркетинговая информация. И главный ее источник — именно вы (или ваши сотрудники).
В брифе содержатся вопросы (много вопросов) по продукту, компании, целевой аудитории и конкурентам. Вот пара скриншотов из нашего брифа, который считается эталонным среди копирайтеров, директологов и таргетологов.
Бриф может заполняться письменно (вы скачиваете и заполняете сами) либо устно — в беседе. То есть, процесс заполнения может затянуться на часы (будьте готовы к этому).
Неопытные клиенты часто думают, что им достаточно поставить задачу, а всё остальное сделают за них: «если я заполню бриф, то за что же я отдаю деньги?»
И если какую-то часть этой информации мы можем добыть сами (целевая аудитория, конкуренты), то на вопросы о продукте и компании должны отвечать именно представители заказчика. Иначе текст будет о чём угодно, но не о вашем продукте.
(Впрочем, будет здорово, если вы поделитесь и своим видением ЦА и конкурентов. Часто никто не знает их лучше вас, а мы в любом случае проведем свое расследование и проверим, насколько ваше понимание соответствует реальности.)
Но это только начало — мы от вас не отстанем ☺.
Сбор дополнительной информации
Вы уже немного ненавидите нас, а мы всё сыплем и сыплем дополнительными вопросами.
На этом этапе мы копаем информацию о целевой аудитории (проблемы-задачи-«боли», портрет, возражения и ожидания) и анализируем сайты, лендинги, продукты конкурентов, вытаскивая их характеристики.
И периодически уточняем: нет ли у вас такого, как у Иван Иваныча?
Маркетинговый анализ (МА)
Часто сбор информации и МА сплетаются в единый процесс: что-то уточняем, что-то дополняем и всё складываем в единую картинку.
У каждого копирайтера свой подход к анализу — кто-то использует интеллект-карты, другие варианты схем. У нас это 2 таблицы: сегменты целевой аудитории и анализ конкурентов (а также крутой бонус для заказчиков — ударный файл с фишками с лендингов конкурентов).
Из второй таблицы извлекаем данные для определения преимуществ и выгод продукта. Он станет основой маркетинговой «начинки» будущего текста.
Проектирование структуры лендинга
По результатам анализа создается структура лендинг пейдж. В нашем случае предварительная — иногда она корректируется в ходе текста. Из структуры понятны первый экран (ключевая часть посадочной), порядок и расположение блоков с черновыми подзаголовками.
Написание текста
Только теперь занимаемся непосредственно продающим текстом. Как видите, это часто даже не половина работы, а всего треть.
Черновую структуру заполняем, корректируя по ходу, и вычитываем.
Оформление прототипа
Приводим наработанный дизайн-макет лендинга к окончательному виду.
Нередко копирайтер всю работу выполняет сразу (например, в Moqups или Axure) — то есть, написание и оформление сливаются в один процесс. Мы же в Агентстве Трубадура базовый макет разрабатываем в Ворде, а уже затем переносим в нужный сервис.
Всё готово: прототип можно передавать в работу дизайнеру. Учтите, что для него, скорее всего вам придется заполнить свой, дополнительный бриф (да, опять ☺).
На каких этапах производятся согласования?
В нашем случае это:
Фактически, мы работаем в сотворчестве с вами в тех пунктах, что касаются выявления ключевых маркетинговых моментов (« смыслов » на сленге лендингистов.)
В проектировании лендинга вы можете отметить неточности в фактах и подборе нужных слов. Попытки указывать, что и как писать, какими фразами, то есть, водить рукой копирайтера, обычно приводят к развитию событий по двум сценариям:
— неопытный копирайтер может уступить, что негативно отобразится на продажах
— опытный (как мы) — пойдет на принцип и разорвет сотрудничество.
Кстати, учтите, что со сдачей прототипа работа не заканчивается. Мы проверим корректность дизайна и верстки и подготовим для вас еще один бонус — гипотезы для тестирования будущего лендинга. Потому что максимальная эффективность никогда не достигается с первой попытки.
Так как же выбрать копирайтера-прототиписта
Попросите примеры работ
Учтите, что далеко не все работы копирайтер сможет вам показать. Иногда действует подписка о неразглашении, а порой лендинг еще только разрабатывается (часто готовые прототипы ждут месяцами дизайна и верстки).
Часть примеров мы покажем вам ссылками, другие — скриншотами или документами. В нашем активе их уже не один десяток готовых прототипов
Уточните понимание именно вашей тематики
Далеко не факт, что мы продавали именно ваш продукт, но если мы уже погружались в тему, то это будет плюсом для всех (а счет тем, с которыми мы уже работали, доходит до сотни).
Впрочем, если опыта именно в вашей теме у нас еще нет, настоящему маркетологу-исследователю это не помеха.
Расспросите о принципах работы
Соответствуют ли они тому алгоритму, которые мы рассказали?
Что должно вас насторожить:
— нет брифа (для первого заказа он обязателен) — ни письменного, ни устного
— исполнитель задает мало вопросов (или не задает вообще) и молча сдает уже готовый текст
— не выполняется маркетинговый анализ ни в какой форме (что есть в брифе, то и пишет)
— (как результат прошлых трех пунктов) полученный текст — набор банальностей типа «индивидуального подхода» и «надежной компании» без особой конкретики
— автор не оформляет прототип даже в Ворде (это просто массив текста без четкого зонирования блоков)
С нами вы застрахованы от всего этого.
Прототип или лендинг под ключ?
Конечно, вам как заказчику удобнее заказать всё сразу. Именно поэтому мы можем сделать лендинг под ключ с дизайном и версткой в html или на WordPress либо со сборкой в конструкторе (PlatformaLP, Тильда).
Иногда разумно заказывать отдельно сам прототип (конечно же, с маркетинговым анализом и текстом):
— если вы — подрядчик по созданию лендингов (с такими мы работаем много и охотно)
— если бюджет поджимает и вы хотели бы начать с прототипа, а дизайн с версткой заказать в следующий заход
— если выбираете самое лучшее : лучший прототип с копирайтингом, лучший дизайн, лучшую верстку
В агентствах редко бывает всё на высшем уровне, потому что сами лендинговые агентства существуют в большинстве случаев не более 5 лет.
И это при том, что мы начали писать тексты для онлайн-школ еще в 2008 году — задолго до того как в Рунете появились термины «лендинг» и «прототип». Это называлось тогда просто «одностраничником» или salesletter.
Прототип лендинга: подведем итоги
А еще мы готовим копирайтеров-прототипистов на тренинге « Умные лендинги ».
Как создать прототип лендинга?
Представьте себе лицо прораба, которому вы даете задание построить дом без проектной документации? Именно таким прорабом чувствует себя и дизайнер, к которому вы придёте заказывать landing page без прототипа.
Прототип посадочной страницы — это наглядный эскиз смыслового слоя лендинга. Если раньше идеи о бизнесе беспорядочно жили у вас в голове, то на этапе прототипирования сайта вы, наконец, можете собрать их в единую схему лендинга. Вопрос лишь в том, как это правильно сделать?
Лендинг без прототипа?
Кто может создать прототип лендинга
Для того, чтобы создать прототип лендинга, не нужно быть художником. Не думайте о красоте на этом этапе, как раз это и будет задачей для дизайнера. Ваша же задача – сделать наброски: где будет картинка, где текст, а где кнопка, призывающая к действию. Здесь вам могут помочь лишь владение информацией о собственном бизнесе и знание маркетинговых фишек. Т.е. создать прототип посадочной страницы вы вполне можете и самостоятельно. А если маркетинговых знаний не хватает, то сделать это более профессионально вам поможет маркетолог или студия веб-дизайна где есть таковой.
Какую программу использовать для создания прототипа сайта
Прототип landing page можно составить и карандашом на бумаге, и в обычном Word-овском документе. Он может выглядеть приблизительно так:
Фрагмент прототипа landing page для дизайн-студии IconDesignLAB.com, созданный в Google Docs
Если создавать макет лендинга на более профессиональном уровне, можно воспользоваться одной из специальных программ для создания прототипа сайта. Например:
Некоторые из этих сервисов для создания прототипа сайта имеют демо и работают онлайн. Созданные таким образом схемы посадочных страниц называются мокапами (mockup, или mock-up, что с английского означает — макет). При их создании могут использоваться шаблоны лендингов, готовые элементы, различные инструменты, которые упрощают работу над прототипом. Выглядит процесс создания мокапа приблизительно так:
Процесс создания мокапа в Balsamiq
Но главное не то, где вы создадите прототип, а каким вы его создадите.
Что должно быть в прототипе посадочной страницы
Классический прототип лендинга не может существовать без 4 базовых элементов, о которых мы вам расскажем далее. Именно с них и начинайте.
4 основные элемента прототипа1. Заголовок и подзаголовки
Делайте заголовок и подзаголовки достаточно большими и так, чтобы они максимально кратко и конкретно доносили основную мысль вашего бизнеса.Простое упражнение на проверку: Уберите все, кроме заголовков. Если после этого понятно, о чем сайт и что от потребителя хотят, — заголовки сделаны правильно.2. Идеи изображений
Используйте изображения, которые максимально точно передают идею о том, чем вы занимаетесь или что производите. Вам не нужно искать, а тем более создавать сами изображения. Но продумать и описать, что именно будет изображено на картинке — ваша работа. Упражнение на проверку: Переведите сайт на китайский язык в Google Translate. Если после этой манипуляции понятно, о чем сайт, по его картинкам — изображения подобраны правильно.3. Текстовые блоки
Выделите основные мысли, о чем будет текст. Это все сильные стороны вашего бизнеса. Разбейте все, что вы хотите сказать на блоки. Так их будет легче располагать на посадочной странице.Помните, что в виде списка информацию воспринимать гораздо проще.4. Форма захвата
По сути это как раз то, для чего вы и создаете свой лендинг. Здесь должны быть поля для заполнения и кнопка. Делайте минимум полей, народ нынче ленивый пошел, устанут заполнять — и закроют вкладку. Кнопка должна быть контрастной и объяснять, что будет происходить после ее нажатия. И напоследок, помните главное правило прототипирования: мысли, которые важнее остальных, должны быть ярче, располагаться выше и занимать больше места. Мы перечислили основные элементы, без которых ваш лендинг не будет качественным. А как усилить его эффективность, мы расскажем вам в статье о конверсионном слое лендинга.
Подытожим:
Как видите, прототип лендинга – это не так уж сложно. Что и как эффективнее на нем расположить, вам может подсказать маркетолог. Как написать продающий текст – копирайтер. Как оформить все красиво – дизайнер. Вы даже можете нанять команду специалистов или заказать landing page в веб-студии. Но как бы вы не хотели, для создания качественного лендинга ваше участие в прототипировании неизбежно. Ведь только у вас есть самое необходимое — знания о сильных сторонах вашего бизнеса.
Как сделать прототип лендинга
Нельзя просто взять и сверстать сайт сразу?!
Как определить ценности продукта
99% внимания – на первый экран
Заголовок и подзаголовок
Кнопка CTA (целевого действия)
Что показать после первого экрана
Что надо знать про дизайн, даже если вы не дизайнер
Где и как хранить пароли от аккаунтов так, чтобы их не украли Статья
Google Analytics 4: инструкция по применению Статья
Рекламная подписка на Яндекс: что это такое и как работает Статья
Как написать качественную статью: пошаговый план создания статьи, примеры и советы экспертов Статья
Создание видео для социальных сетей в конструкторе Supa: обзор, аналоги, советы начинающим Статья
3 способа скачать видео из TikTok без водяного знака Статья
Автоматизация маркетинга: самостоятельное тестирование новых гипотез — примеры Albato Статья
Создание видео для социальных сетей в конструкторе Supa: обзор, аналоги, советы начинающим Статья
Виды посадочных для лидогенерации и анализ результатов: обзор от Конторы Статья
Создание прототипа лендинга: виды, сервисы и частые ошибки
Создание прототипа лендинга — один из ключевых этапов работы над визуальной составляющей будущей страницы. Прототип позволяет взглянуть на сайт еще до начала его разработки и помогает донести идеи заказчика до дизайнера. В этой статье мы детально разберем процесс прототипирования.
Что такое прототип
Прототип — это упрощенный макет посадочной страницы, на котором схематично изображены все функциональные элементы будущего лендинга. Это своего рода фундамент проекта, благодаря которому становится возможным построение эффективной системы взаимодействия пользователя с интерфейсом.
Образец прототипа лендинга
Для чего нужен прототип
Перед началом строительства дома специалисты разрабатывают план, в соответствии с которым строение будет иметь определенный вид, планировку, разводки системы водоснабжения и многое другое. Без плана строительство обречено на провал. Так и с созданием лендинга. Любую сложную систему сначала следует упростить, представить схематично, сделать перерасчеты, внести необходимые корректировки и только после этого приступать непосредственно к созданию.
Прототип нужен для того, чтобы:
Далее разберем основные виды прототипов.
Какие прототипы бывают
Первый вид — интерактивные прототипы. Они позволяют взаимодействовать с элементами. В большинстве случаев предпочтителен именно этот вариант.
Интерактивный прототип лендинга
Второй тип — статический. Это просто изображение, на котором показано расположение элементов будущего сайта.
Статический прототип лендинга
Кроме того, прототипы классифицируют по иным характеристикам: нарисованный от руки или созданный в специальной программе, с глубокой детализацией или показывающий лишь основную информацию о расположении блоков.
Как создать прототип лендинга
Назначение любого продающего лендинга — привлечение пользователя для совершения целевого действия (покупки товара или заказа услуг). Чтобы этого добиться, нужно уделить особое внимание каждому этапу создания страницы, в том числе и построению прототипа. Обратите внимание на основные правила, которым мы рекомендуем следовать.
Анализ конкурентов
Он нужен для понимания специфики тематики и формирования более точного представления о концепции будущей страницы. Изучив десяток сайтов конкурентов, вы наверняка поймете, как должен выглядеть новый сайт.
Проектирование
Почти любой лендинг состоит из хедера, основной части и футера.
Первый экран — самая важная часть одностраничника. Именно она мотивирует пользователя остаться или уйти с сайта. При проектировании первого экрана важно правильно разместить блоки с УТП (уникальным торговым предложением), формой заказа, контактными данными, а также логотип, кнопку меню и т.д.
Ниже первого экрана обычно располагаются блоки со следующей информацией: конкурентные преимущества компании, основные виды товаров/услуг, цены, отзывы, условия сотрудничества.
На футере, как правило, находятся кнопка для связи, контактная информация, повторный блок навигации, карта и информация о политике конфиденциальности.
Основная задача на этапе проектирования — сделать так, чтобы посетитель сайта интуитивно понимал, где искать необходимую информацию и какая кнопка за что отвечает. К примеру, каждому понятно, что иконка лупы означает возможность поиска по сайту, а кнопки «Заказать» или «Купить» обязательно ведут на форму заказа.
Программы и сервисы для прототипирования
Создать прототип лендинга можно в любом графическом редакторе — Adobe Photoshop, Adobe Illustrator, Paint или даже в MS Word и Google Docs. Однако используя их, вы рискуете столкнуться с массой неудобств и потерять время. Поэтому для прототипирования мы рекомендуем использовать специальные сервисы. О некоторых из них расскажем ниже.
Axure RP
Это программой пользуются профессионалы. Выпускается она под операционные системы Windows и macOS. Бесплатный период пользования составляет 30 дней.
В Axure RP можно создавать сложные интерактивные макеты. Интерфейс программы приятен.
Если вы планируете заниматься прототипированием сайтов на постоянной основе, данный софт однозначно заслуживает вашего внимания.
Программа Axure RP
Создание прототипа лендинга в Axure RP
Draftium
В отличие от программы Axure RP, Draftium — это онлайн-сервис, что облегчает доступ к проектам с разных устройств. Разработчики этой платформы подготовили ряд качественных шаблонов под разные цели: в бесплатной версии их 50, в платной ($99 в год) — более 300.
Функционала Draftium хватает для создания проектов разного уровня сложности, а простота интерфейса и встроенные пресеты позволяют быстро нарисовать хороший прототип даже новичку.
Онлайн-сервис Draftium
Создание прототипа лендинга в Draftium
Marvel
Этот сервис отличается от упомянутых выше, поскольку наибольшее внимание здесь уделяется графической составляющей макета. В результате получаются качественные интерактивные макеты лендингов, крупных сайтов и мобильных приложений.
В процессе использования Marvel пригодятся навыки дизайнера, поэтому мы вряд ли можем рекомендовать этот сервис новичкам.
Сервис Marvel
ESK.ONE
Это российский онлайн-сервис с дружественным интерфейсом. Здесь нужно зарегистрироваться, после чего вы сможете делать проекты, создавать прототипы, расшаривать их дизайнеру и другим членам команды.
На ESK.ONE есть занятная функция «Получить идею»: на соответствующей странице генерируются полезные советы, которые могут пригодиться вам в работе.
Сервис ESK.ONE
Функция запроса идей в ESK.ONE
Mockingbird
На этой платформе можно на протяжении 6 дней создавать проекты без регистрации. Она подходит для создания макетов с низкой детализацией. Этим объясняются простота интерфейса и ограниченный функционал. Мы рекомендуем использовать этот вариант, когда нужно быстро накидать простой макет.
Платформа Mockingbird
NinjaMock
Этот сервис выделяется визуальным оформлением макетов: все прототипы, созданные в нем, будто рисовали от руки. Эффект создают специфичный шрифт, неровные края фигур и т.д. Эта особенность никак не влияет на качество и скорость работы.
Используя бесплатный тариф NinjaMock, вы сможете создать только один проект, состоящий не более чем из 200 элементов. При этом учтите: проекты, сделанные на этом тарифе, доступны для просмотра всем пользователям сервиса.
Функционал сервиса довольно широк, что позволяет создавать прототипы любой сложности.
Сервис NinjaMock
Ошибки, которые допускаются при создании прототипа
Обратите внимание на самые частые ошибки, которые допускают новички при создании своего первого прототипа лендинга:
Мы надеемся, что теперь вы сможете избежать каждой из этих ошибок.
Почему прототип обязателен
Отказываясь от разработки прототипа, будьте готовы к следующему: