Кейсы

О студии

Блог

Контакты

12+

Карта

Тех. поддержка (на тильде)

8 (800) 555-01-19

Обсудить задачу

Сайты на Tilda

Разработка сайта

Разработка дизайна

Проектирование

Тех. поддержка (на тильде)

Редизайн сайта

Как создать прототип сайта на основе маркетинговых исследований

Блог

Главная

Как создать прототип сайта

маркетинг

Следите за внутренней кухней студии в нашем телеграм-канале

Содержание

1. Зачем нужен прототип в разработке

2. Маркетинговый анализ

3. Три основных этапа создания прототипа

4. Как мы делаем прототип сайта

5. Виды прототипов сайта

6. Выбор программы

7. Заключение

Создание прототипа сайта — неотъемлемый и самый трудозатратный по времени этап digital-разработки. В нашем агентстве работа над сайтом начинается именно с прототипирования.

Маркетолог проводит маркетинговые исследования и готовит прототип — схему, наглядную структуру будущего сайта, содержащую в себе основные блоки с подзаголовками, текстами, кнопками, формами.

Для чего нужен прототип и какие шаги нужно совершить в процессе его создания? Какие сервисы для прототипирования сайтов можно использовать? Расскажем в нашей новой статье.

Узнайте стоимость и сроки разработки прототипа сайта в нашей студии

Зачем нужен прототип сайта в разработке

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

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

Пример прототипа сайта.

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

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

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

С маркетинговой точки зрения прототип является важнейшим этапом создания сайта. И вот почему:

Сайт разрабатывается не ради галочки, а на основе маркетингового анализа продукта, целевой аудитории, конкурентов и поведенческих факторов;
Заказчик видит каждый этап разработки и понимает ценность продукта. Маркетолог детально вникает в его бизнес-процессы, ситуацию на рынке услуг, ищет идеи для отстройки, пытается создать лучшее решение в нише. Такая работа изначально не может стоить дешево;
Клиент понимает, какие фотографии или видеоматериалы нужно собрать и заранее планирует фотосессию команды, продукта, офиса или склада;
Процесс согласования проекта сокращается в разы, так как маркетолог может внести правки в режиме онлайн и тут же показать их заказчику;
В прототипе удобно оставлять комментарии по дизайну. Дизайнер заранее получает доступ к прототипу и может совместно с маркетологом работать над разработкой структуры;
Маркетолог и дизайнер работают не параллельно, а в едином ключе: совместно обсуждают структуру, заложенный в прототипе контент, маркетинговые фишки. Обмен опытом и разносторонний взгляд на создание сайта увеличивает шансы на более высокую конверсию и удобство пользователя.

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

Маркетинговый анализ как основной этап прототипирования сайта

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

Мы выделяем 3 группы исследований при разработке прототипа сайта:

Изучаем текущий сайт и соцсети клиента, маркетинг-киты, коммерческие предложения, презентации, мессенджеры. Смотрим, как сейчас упакован продукт, какие преимущества выделяет владелец компании и менеджеры по продажам.

1. Брифование заказчика и изучение продукта и компании

Индивидуальный бриф может содержать от 30 до 60 вопросов. Информация пригодится сразу для нескольких страниц — главная, о компании, контакты, FAQ. Чем больше данных собрано, тем детальнее и глубже получится прототип.

Узнаем информацию из личной беседы с директором и маркетологом компании, созваниваемся с исполнителями услуги, разбираем продукт и компанию на более мелкие детали:

статистику по компании и услуге;
этапы оказания услуги;
гарантии;
преимущества;
выгоды от сотрудничества;
результаты клиента от покупки продукта.

Конкуренты зачастую снимают видео на темы, которые волнуют вашу целевую аудиторию, а также публикуют видеоотзывы довольных клиентов.

Выберите 10−15 конкурентов из поисковой и рекламной выдачи, запросите список прямых конкурентов у заказчика и проанализируйте их сайты:

насколько подробно и понятно расписана услуга;
дает ли компания гарантии;
какие целевые действия представлены на сайте, работают ли кнопки и формы;
какие акции предлагают конкуренты.

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

3. Анализ конкурентов

2. Анализ целевой аудитории

Сведите данные анализа в единую таблицу, оцените сильные и слабые стороны вашего торгового предложения.

Изучение целевой аудитории включает:

анализ форумов и тематических статей;
анализ социальных сетей конкурентов — ищите комментарии и вопросы клиентов, читайте отзывы тех, кто уже купил продукт;
анализ ключевых запросов в Яндекс Wordstat подсказок Google — так вы поймете, как потенциальный клиент ищет товар или услугу в интернете;

Если основной вид трафика будет идти из социальных сетей, ищите сайты конкурентов в ВК и Инстаграмм. Заодно оцените соцсети конкурентов (что именно они публикуют, как часто, какие посты наиболее интересны целевой аудитории).

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

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

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

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

Если продукт широко известен, посмотрите комментарии потенциальных покупателей под видео в YouTube по вашей тематике.

3 основных этапа создания прототипа сайта — практика от NAJES

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

Зависит от 2 критериев: целей нашего заказчика и конкурентов.

Шаг 1 — определяем вид будущего сайта

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

1. Цели заказчика.
Какой конечный результат он хочет получить? Рассказать о компании? Продать отдельный товар? Запустить акцию или лид-магнит? Собрать базу для рассылки? Повысить доверие к компании?

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

— одностраничный сайт. Используем для продажи отдельного товара/услуги для одного сегмента целевой аудитории.

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

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

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

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

Какие блоки нужно спроектировать, а что только отпугнет потенциального покупателя? Какие страницы нужны обязательно? Все это сильно зависит от анализа портрета потенциального покупателя:

Шаг 2 — продумываем прототип сайта

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

стадии принятия решения;

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

осознанности покупателей;

Лендинг для нового, а также для сложного товара/услуги всегда длиннее, чем для продукта, который всем известен и понятен. При этом у нас нет четкого количества экранов под каждую услугу — все индивидуально. Часто бывает, что лучше создать корпоративный сайт и в него внедрить лендинг под услугу.

потребностей клиента;

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

Разрабатывая прототип страницы сайта, мы детально продумываем каждый блок: подзаголовок, текст, визуальное наполнение (фотография, скриншот, видеоролик).

Шаг 3 — проработка отдельных блоков

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

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

Используем майнд-карту целевой аудитории, чтобы:

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

— ответить на самые популярные вопросы потенциальных покупателей, связанные с услугой/товаром.

Все всегда зависит от задач, которые ставит заказчик и от ситуации на рынке, если все конкуренты продвигаются за счет лендингов, то с помощью многостраничного сайта вы можете выглядеть солиднее и вызывать больше доверия. Не стоит продавать 2,3,5,10 услуг или товаров на одном landing page, так как в конце концов вы не сможете донести ценность и потенциальные покупатели пойдут закрывать свои потребности к вашим конкурентам.

Как мы делаем прототип сайта: 5 ключевых правил от NAJES

1) Лендинг — не панацея для бизнеса

Мы придерживаемся нешаблонного подхода к созданию сайтов. Поэтому у нас нет стандартных предложений. Каждый проект разрабатывается маркетологом исходя из целей клиента и потребностей его покупателей.

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

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

Чем плохи стандартные лендинги? Их подзаголовки не несут никакого смысла:

наши преимущества;
команда профессионалов;
гарантии;
наши услуги.

2) Одна мысль — один экран

3) Каждый подзаголовок несет пользу для клиента

Проскролльте подобный сайт и подумайте, что нового вы узнали, не читая основной текст? Интересно ли вам вчитываться, если вы не видите конечной пользы?

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

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

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

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

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

5) Каждый экран выполняет одну из маркетинговых целей:

Которая заставляет читателя задуматься о покупке (зависит от продукта, который продаем).
Например:

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

4) Весь сайт транслирует одну ключевую выгоду

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

Основному целевому действию отдаем отдельный блок с полноэкранной формой, делаем визуальный акцент именно на этом CTA.

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

6) Целевые действия заточены под клиента:

Виды прототипов сайта

Прототип страницы сайта может быть совершенно разными: от наброска на листе бумаги до полноценного высокодетализированного интерактивного проекта.

Основные критерии для классификации мы выбрали такие:

Уровень детализации: низкая детализация, высокая детализация;
Уровень взаимодействия с прототипом: статичный, интерактивный.

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

Выбор программы для прототипирования сайта

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

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

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

1) Eskone

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

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

Прототипировщики отметили несколько преимуществ Eskone:

Русская техподдержка;
Множество иконок и большой функционал для создания простых прототипов.

Из минусов — картинки и фото возможно загружать только на самом дорогом тарифе за 5 евро в месяц.

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

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

2) Moqups

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

3) Figma

Минусы:
В одном прототипе не может быть более 3 редакторов. Увеличение проектов влечет ограничения по общему числу редакторов, приходится более точечно распределять роли и удалять права доступа в старых проектах.

Есть бесплатный тариф, ограниченный 3 проектами, которые хранятся не более 30 дней. Редакторские права доступны только 2 специалистам команды, количество зрителей неограниченно.

Что говорят сами прототипировщики о Moqups?

В чем плюсы данного сервиса, по мнению прототипировщиков:

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

Плюсы:

можно создавать шаблоны, что экономит время при создании прототипов сайта;
не требует обучения — можно освоить за 1−2 дня;
быстро грузятся фотографии, сложные коллажи, сервис не виснет;
удобно проектировать многостраничные проекты за счет удобной архитектуры; проектов (есть главные и дочерние проекты).

Минусы:

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

Минусы:

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

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

Наша команда использует Moqups в качестве основной программы для создания прототипов, некоторые маркетологи команды работают в Figma.

Не самый популярный среди прототипировщиков сервис, хотя по своим функциям он ничем не уступает Moqups. Платные тарифы начинаются от 5 долларов в месяц. Есть пробный вариант на 1 проект, правда его нельзя экспортировать и есть ограничение по элементам — всего 200 элементов в 1 прототипе.

4) NinjaMock

Какие плюсы можно выделить при работе с NinjaMock:

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

Сервис позволяет вести командную работу: комментировать прототипы, распределять роли, экспортировать проекты, вносить правки.

Сервис платный: 3 тарифа от 25 долларов за индивидуальную работу и 42 доллара за команду. Программа рассчитана на продвинутых прототипировщиков, которые готовы постоянно обучаться и осваивать новые фишки от создателей сервиса.

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

5) Axure

Какие плюсы отмечают сами прототипировщики:

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

Использование Axure уместно, если вам нужны прототипы с высокой визуальной и функциональной точностью.

Заключение

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

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

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

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

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