Как создавать прототипы лендингов (продающих сайтов), для чего это делается, и сколько на этом можно зарабатывать?

Что такое прототип landing page и зачем он нужен?

Прототип сайта (др. словами макет, эскиз, скетч, блок-схема, структура, визуальный сценарий) — черно-белое схематическое изображение сайта, которое создается еще до дизайна и верстки, в целях экономии времени и во избежание правок в будущем.

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

Пример прототипа первого экрана landing page

 

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

Цели создания прототипа

• Для последовательной разработки лендинга и сбора информации по проекту в единый документ;
• Для утверждения структуры и контента продающего сайта с заказчиком или членами команды еще до дизайна;
• Для удобства прорисовки дизайна. Тогда дизайнеру не нужно задумываться над контентом (или ставить “рыбный” контент) и ему остается выполнить прямую задачу — разработать интерфейс для пользователя и передать эмоции через сочетание цветов, типографики и др. визуальные составляющие;
• Функциональные прототипы (или лендинги на шаблоне) иногда используют для тестирования ниши или гипотезы;
• Проектирования многостраничных сайтов, интернет-магазинов, приложений для смартфонов, где не обойтись ручкой с листком А4.

Уровни детализации прототипов

На счет ручки и листка А4… Это вполне себе способ прототипирования. Он относится к первому уровню детализации. Скетч (или эскиз), нарисованный рукой проектировщика (чаще даже заказчика сайта), чтобы изобразить первые мысли и идеи относительно структуры сайта или размещения контента (элементов).

Пример эскизов и структуры страниц сайта на бумаге (этот пример еще достаточно профессиональный) 

 

А есть и такие прототипы, которые предоставляют заказчики для разработки сайтов (прошу не смеяться, это хороший вариант прототипа, бывали и веселее, как-то даже акварелью прототип рисовал заказчик, но это уже другая история):

Пример прототипа/эскиза одного из блоков лендинга от заказчика

 

Есть прототипы любительского типа. Я их так называю. Они несерьезно выглядят и используются в кругах фриланса и при быстрой разработке дешевых лендингов или сайтов. Такие прототипы встречаются на WorkZilla (дешевый фриланс), или от собственников бизнеса. Этот прототип детальнее предыдущего, но все также непрофессионально сделан — не наполнен текстами и неаккуратный, а ведь аккуратность прототипа приветствуется.

Пример любительского прототипа

 

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

Этот прототип разработан в программе Adobe Muse, но про инструменты поговорим чуть ниже.

Пример прототипа лендинга, который разрабатываем мы

 

Еще одни пример прототипа, но уже админпанели/аккаунта сервиса. Adobe Muse дает возможность создавать детальные и гибкие элементы, а не просто набор блоков и квадратиков с подписью.

 

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

Примеры прототипов, слева направо: скетч/эскиз, лоскутный прототип, блок-схема

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

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

Пример детального прототипа

Пример детального прототипа

 

А для лендингов хватает прототипа средней детализации. Все опять же зависит от проекта, его бюджета, сроков и целей прототипирования.

Этапы прототипирования лендинга

Подготовительная часть — то, что делается до того, как начать прототипировать landing page:

• Понять проект и цель его создания (какую роль играет лендинг в цепочке касаний или воронке продаж, или туннеле из лендингов);
• Определяется целевая аудитория, на которую будет ориентирован лендинг. Аудитория делится на сегменты и анализируется (делайте в майндкарте);
• Анализируются сайты конкурентов и аналоги, а также кросс-тематические проекты;
• Прорабатываются смыслы (что важно для ца, и определили на прошлых этапах и в целях проекта) и УТП, заголовки;
• Прописываем структуру лендинга по блокам. Структура формируется из анализа ца и иногда из запросов в Wordstat'е.

Основная часть прототипирования:

• Набрасываете эскиз на бумаге (если делаете впервые, так будет проще);
• Переносите все в программу прототипирования;
• Детализируете элементы сайта, пишете продающие тексты на основе анализа целевой аудитории и смыслов, которые подготовили ранее.

Этап исследования (иногда пропускают, зависит от проекта):

• Проведите исследование по старым или потенциальным (важно именно Потенциальным, а не брат и сестра или друг) клиентам. Минимум 20-30 людей: прозвоните или покажите вживую, все ли им нравится с точки зрения текстов и УТП, а также воспринимается ли оффер.

Этап доведения до ума и последние штрихи:

• Исправляете с учетом обратной связи.

Дальше передаете в работу дизайнеру.

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

Продающая структура лендинга и копирайтинг

На самом деле, это отдельная тема на еще одну такую же статью или даже курс лекций. Но вкратце опишу моменты, на которые нужно обратить внимание:

1. Структура и тексты должны формироваться из целей и смыслов самого проекта. Большую часть текстов нужно брать из анализа целевой аудитории (а это ответы на их потребности, боли, возражения, особенности и т.д.);
2. Часть текстов и смыслов можно написать исходя из интервью заказчика;
3. Тексты пишите в информационном стиле (проверяйте все в glvrd.ru);
4. О том, как писать продающие заголовки, описано в этой статье https://habrahabr.ru/company/yagla/blog/296920/ . Кроме 4У заголовков существуют еще и другие формулы их написания, просто поищите в поисковиках. Но в целом, 4У будет достаточно;
5. Используйте психологические триггеры, об этом тоже есть информация в поисковиках, так как тема обширная. Позже мы напишем статью на эту тему;
6. Можете использовать разные формулы копирайтинга по типу AIDA. А в некоторых случаях отлично работает сторителлинг.

Инструменты и программы для создания прототипов сайтов

Я отобрал лучшие инструменты для прототипирования, по моему мнению. У вас может быть свое мнение, и это нормально:

• Листок А4 + ручка — для первых быстрых зарисовок. Подходит заказчикам, чтобы изобразить то, что они хотят. А также, подходит специалистам, которые только начинают работать в направлении прототипирования (потому что сразу переходить в среду программы или сервиса сложновато новичкам, нужны наброски на бумаге).

Пример прототипа на листке

 

• Moqups и wireframe.cc — хорошие решения для новичков и для разработки прототипов средней степени детализации. Есть ограничения в количестве бесплатных страниц прототипов.

Возможности и интерфейс Moqups

 

Минималистичный интерфейс Wireframe. Часто используют этот сервис именно программисты и верстальщики, чтобы быстро набросать структуру страницы сайта

 

• Axure — инструмент для специалистов, которые разрабатывают большие сайты или интернет-магазины. Нужно привыкнуть к интерфейсу программы, чтобы делать что-то стоящее. Лично мне было сложно работать в Axure, после того как я создал более 30 прототипов лендингов в Adobe Muse (он более гибок и прост, и прототипы аккуратные получаются).

Пример интерфейса Axure

 

• Adobe Muse — отличная среда для разработки прототипов лендингов. Особенно для тех, кто уже умеет создавать сайты/лендинги в Muse. Зачастую, только в нем и работаю, потому что на данный момент это лучшее решение для меня.

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

Как минимум, прототипы получаются аккуратными, и за них не стыдно перед заказчиками, а иногда такие прототипы вызывают даже Wow-эффект у клиентов.

Еще один плюс, это то, что прототип сразу публикуется на вашем домене, что удобно для демонстрации клиентам.

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

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

Структура многостраничного сайта в Adobe Muse

 

Пример интерфейса и среды разработки Adobe Muse

 

Первый экран прототипа лендинга, сделанного в Adobe Muse

 

• Adobe Photoshop — тоже вариант для создания прототипов, но подходит больше дизайнерам, потому что они привыкли уже к его интерфейсу. И если уж рисовать прототип в фотошопе, то это должен делать сам дизайнер, чтобы разместить все элементы сайта/лендинга/магазина на свои места, детально их прорисовать, и лишь потом “раскрасить” цветами, расставить акценты, подобрать картинки и т.д.

Повторюсь еще раз, делать прототип в Adobe Photoshop желательно только тем, кто непосредственно и будет дальше разрабатывать дизайн. Нет смысла создавать прототип в фотошопе самому, а потом этот прототип отдавать дизайнеру. Это двойная работа.

Пример интерфейса и разработки прототипа в Adobe Photoshop

 

Пример детального прототипа в Adobe Photoshop. Разработчики постарались.
После такого прототипа, по сути, остается лишь расставить акценты и подобрать цветовую гамму, и дизайн готов. 

 

• RealtimeBoard — это многофункциональный онлайн-сервис, который можно использовать также для прототипирования или совместного “обмозгования” идей. У вас появляется безграничная доска для рисования/написания текстов/вставок скриншотов/комментирования и т.д. Очень удобный инструмент.

Пример интерфейса RealtimeBoard

 

• Adobe XD — подходит для создания интерактивных (кликабельных) прототипов мобильных приложений, в первую очередь, а также сайтов.

Пример интерфейса Adobe XD

 

Резюмируя, хочу сказать, что у каждого есть свои предпочтения к программам, в которых работать при прототипировании. Есть еще, например, balsamiq.com, тоже на любителя. Попробовать стоит несколько инструментов, и все зависит от ваших целей.

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

Кто должен создавать прототипы лендингов, сайтов и интернет-магазинов?

Хороший вопрос. Из собственного опыта могу сказать, что разрабатывать прототипы могут:

• Проектировщик-прототипист — если выделен такой человек в вашей компании (или веб-студии, у которой заказываете проект). Это роскошь для крупных компаний, которые могут позволить себе содержать человека в штате или специализироваться именно на узком сегменте проектов (магазинов, приложений, или собственный IT-проектов). Может проектировать/продумывать целый сайт или приложение, больше структуру, нежели интерфейс;
• UI/UX-специалист/дизайнер — аналогичная ситуация, как и с предыдущим специалистом, но более понятна и более узконаправленная. Этот человек рисует интерфейсы. Такой человек скорее будет продумывать кнопочки и удобство пользования приложения или админ-панелей, чем разрабатывать лендинг;
• Проджект-менеджер — обычно в агентствах/веб-студиях поручают разработку прототипов этому герою. От лендингов до интернет-магазинов или не очень сложных сервисов;
• Фрилансер на все руки — если нашли такого специалиста, то вы либо получите хороший прототип, либо плохой. 50% на 50%, зависит от настроения фрилансера. Но есть исключения;
• Копирайтер — обычно копирайтеры, которые пишут тексты для продающих сайтов, создают прототипы в Экселе или Ворде. Это издевательство над прототипом как таковым, но что поделать.
• Маркетолог — для разработки лендинга это лучший вариант. В связке с сильным копирайтером и иногда с собственником бизнеса (если он знает свою целевую аудиторию и компетентен в вопросах маркетинга/продвижения);
• Веб-дизайнер — при разработке простых проектов, при создании landing page;
• Собственник бизнеса — если знает, что делает, и если у него есть на это время.

Разработкой прототипа лендинга лучше заниматься маркетолог + копирайтер + собственник бизнеса + менеджер проекта. Костяк людей может меняться.

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

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

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

Как научиться разрабатывать прототипы?

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

Прототип — это фундамент всего проекта.

Чтобы научиться создавать прототипы landing page с нуля, то, по моему мнению, вам нужно:

1. Прочитать вдумчиво эту статью с самого начала 2-3 раза;
2. Поискать еще статьи на эту тему или видео на youtube;
3. Понять суть проекта, для которого вы будете создавать прототип, и пройтись по всем подготовительным этапам;
4. Выбрать подходящий вам сервис/программу для разработки прототипа;
5. Начать создавать прототип. Все зависит от вашей усидчивости и навыков, которые вы приобретали ранее;
6. Получить обратную связь от клиентов или тех, кто разбирается в создании прототипов;
7. Набить руку на создании 2-3-5-7 прототипов. То есть вам нужна практика. Этот пункт для тех, кто хочет и кому нужно постоянно работать с прототипированием сайтов.

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

В скором времени мы выпустим специализированный курс и видео-уроки по созданию прототипов лендингов и сайтов.

Сколько на этом можно зарабатывать?

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

Варианты заработка зависят от того, кем и где вы работаете:

• Если вы копирайтер или маркетолог на удаленке (или как фрилансер), то прототипирование сайтов это дополнительные от 20 до 50% доходов (зависит от того, по какой стоимости вы делаете прототипы);
• Если вы веб-дизайнер на удаленке (или как фрилансер), то это ваши доп. 20-30% доходов к основной работе;
• Если вы проджект-менеджер или веб-дизайнер в какой-то веб-студии/агентстве, то прототипирование, скорее всего, это ваша одна из должностных обязанностей. И теперь все зависит от вашей заработной платы. На hh.ru можно найти вакансии проджектов или веб-дизайнеров с зп от 20 до 150 тыс. руб. (в зависимости от города и вашего уровня) или проектную работу;
• UI/UX дизайнеры или проектировщики по данным hh.ru могут получать от 50 до 200 тыс. руб. в месяц;

Если говорить о проектной работе (чистый фриланс), то все зависит от того, что входит в объем работ по прототипированию:

• Прототип обычного лендинга: себестоимость* от 5000 руб. до 10000 руб.;
• Прототип многостраничного сайта: себестоимость от 10000 руб. до 20000 руб.;
• Прототип интернет-магазина: себестоимость от 10000 руб. до 30000 руб.;
• Прототип сложного проекта: себестоимость от 30000 руб. и выше. Например, недавно я разрабатывал прототип веб-сервиса за 85 тыс. руб.

* — адекватная относительная себестоимость, которая зависит от объема работ и навыков. Все цифры/данные взяты в период марта—апреля 2018 года. Если читаете намного позже эту статью, то смотрите на стоимость за тот период.

Агентства или посредники могут продавать этап прототипирования в несколько раз дороже или в процентном соотношении от стоимости создания всего проекта, и обычно это от 10 до 30% от стоимости проекта. Если сайт стоит 100 тыс. руб., то адекватно на прототип выделить от 10 до 30 тыс. руб.

Уровень заработка при попроектной работе зависит от количества выполненных проектов. То есть, чем больше сделали проектов, тем больше заработали. Нужно уметь искать подобные проекты, если вы фрилансер. Как вариант, можете написать 50-100 веб-студиям, предложить свои услуги с приложенным портфолио и начнете получать заказы.

Выводы

Вот несколько тезисов, которые будут итогом для этой статьи:

1. Прототип лендинга или сайта, или приложения — фундамент всего проекта;
2. Создавайте прототипы в той среде, в которой вам удобно работать, где они хорошо получаются и где они презентабельно выглядят (если вы делаете их на заказ). Лучше всего подходят для этих целей Adobe Muse или Moqups;
3. Зарабатывать на создании прототипов можно, но это как дополнительный заработок, а не основной (исключение, если работаете в штате, и прототипирование — это ваша одна из обязанностей);
4. Научиться делать прототипы landing page и сайтов могут все, главное практика;
5. Прототипированием лендингов, желательно, заниматься тому, у кого это лучше всего получается. А так, это должен делать либо маркетолог, либо копирайтер, либо менеджер проекта (в связке с клиентом, если клиент компетентен в этом вопросе), либо веб-дизайнер (но зависит от проекта).

Автор статьи

Статью подготовил Садовский Геннадий — маркетолог, автор паблика в ВК https://vk.com/makeleadzzpro