Прототип сайта: что это, из чего состоит и как сделать

Что такое прототип сайта и чем он отличается от структуры, вайрфрейма сайта и макета

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

В студии мы делаем текстовый прототип сайта: на странице услуг он описан как «весь текст, но пока без цвета», с оффером, УТП и призывами к действию внутри. Его можно показать клиенту, проверить на логике и сдать дизайнеру как готовую основу.

Зачем нужен прототип до дизайна

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

• Править текст дешевле, чем править макет. Заголовок в прототипе меняется за минуту. Тот же заголовок в готовом макете двигает кнопку, ломает сетку и тянет за собой соседние блоки.
• Дизайнер работает с настоящими словами. Блок под заголовок из трёх слов и блок под абзац на шесть строк выглядят по-разному. Рисовать на условном тексте значит рисовать дважды.
• Заказчик согласует смысл. Когда нет цветов и картинок, обсуждать нечего, кроме сути: правильно ли названа проблема клиента, не пропущено ли возражение, тот ли порядок блоков.
• Порядок блоков решается один раз. Первые экраны читают почти все, нижние единицы. Если самое важное оказалось ниже, это видно в схеме, а не после запуска рекламы.

Текстовый прототип сайта: из чего он состоит

Хороший прототип состоит из шести частей. Если какой-то нет, дизайнеру или заказчику придётся додумывать.

Как мы делаем прототип: пять шагов

Прототип в студии «Имя.» — третий этап из шести, и сам по себе он не делается. Перед ним идут структура и аналитика, после него дизайн. Подробно весь путь описан на странице процесса разработки сайта, здесь только то, что касается прототипа.

1. 1
   Интервью с владельцем

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

2. 2
   Аналитика аудитории и конкурентов

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

3. 3
   Карта смыслов и структура

   Из собранного формируем список ценностей и раскладываем по блокам: что говорим, в каком порядке, зачем. На выходе документ на 3–6 страниц, который вы утверждаете до написания текстов.

4. 4
   Тексты и идеи иллюстраций

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

5. 5
   Сборка и презентация

   Собираем блоки в прототип и показываем его на созвоне на 30 минут: объясняем, зачем нужен каждый блок и почему он стоит именно здесь. После этого вносим правки.

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

Прототип сайта: пример на реальном лендинге школы маникюра

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

Каждый блок прототипа отвечает на один вопрос, который у посетителя возникает в этот момент. Вот как это разложено по порядку:

Что в этом прототипе видно сразу, без дизайна:

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

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

Какие бывают прототипы сайта: от наброска до кликабельного

В выдаче по запросу «прототипирование сайта» прототипы делят по степени детализации. Для выбора нужна не классификация, а ответ на вопрос «что я сейчас проверяю».

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

Типичные ошибки при создании прототипа

• Прототип без аналитики. Блоки собраны из шаблона «преимущества, этапы, отзывы, контакты». Такая страница выглядит как у всех и не отвечает на реальные вопросы вашей аудитории.
• Условный текст «рыба». Заглушки вместо настоящих формулировок прячут главное: на них нельзя проверить, убеждает ли страница.
• Порядок «как удобно рассказывать». Владельцу удобно начинать с истории компании. Посетителю с рекламы нужно сначала понять, решит ли ему проблему этот сайт.
• Всё в одном прототипе. Структура, тексты и дизайн-пожелания смешаны в один документ, и обсуждение уходит в оттенки кнопок.
• Согласование частями. Руководитель смотрит первый экран, менеджер отдел продаж, юрист отзывы. Каждый правит своё, а логика целого рассыпается. Лучше согласовать общую логику на одной встрече, потом идти в детали.

Что убрать из прототипа: 11 вещей, которые снижают конверсию

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

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

Как проверить прототип до дизайна: десять вопросов

Пройдите прототип сверху вниз и ответьте на каждый вопрос. Если на какой-то ответ «нет» или «не знаю», вернитесь к блоку.

• Понятно ли из первого экрана, что вы предлагаете, кому и в чём результат?
• У каждого блока есть задача, которую можно сказать одной строкой?
• Каждое возражение, которое называет целевая аудитория, закрыто хотя бы одним блоком?
• За каждым громким утверждением стоит доказательство: кейс, цифра, документ, отзыв?
• Порядок блоков соответствует тому, что человек хочет узнать в этот момент, а не порядку, в котором удобно рассказывать вам?
• Первые два-четыре экрана содержат самое важное для холодного посетителя?
• Призыв к действию стоит после доказательств, а не раньше?
• Заголовки читаются отдельно от текста и всё равно передают главные ценности?
• Для каждой иллюстрации описано, что должно быть на картинке и какую мысль она показывает?
• Все данные, которых вам не хватает, вынесены в пометки, а не заполнены догадками?

Если вы заказываете прототип у студии или фрилансера, этот список можно использовать как приёмку.

Как презентовать прототип: что говорить и чего не делать

Презентация нужна не только чтобы получить меньше правок. Она показывает клиенту, как люди ведут себя на сайтах, и объясняет логику решений, поэтому на ней вы заранее отвечаете на вопросы, которые иначе всплыли бы позже. Хватает 15–30 минут, формат два: живой созвон или видеозапись с голосом.

Что стоит сказать:

1. 1
   Ключевой смысл каждого блока

   Один на блок, и за счёт чего он передан: заголовок, цифра, порядок.

2. 2
   Почему именно этот смысл

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

3. 3
   Почему блоки стоят в таком порядке

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

4. 4
   Какую задачу решает блок

   Какой вывод или эмоцию вы хотите получить у читателя.

5. 5
   Какие идеи клиента не вошли и почему

   Если вы отказались от его решения, назовите причину.

6. 6
   Что нужно проверить

   Вы не эксперт в его нише, и некоторые детали могут быть неточны. Лучше сказать об этом самим и показать места, где ошибки наиболее вероятны.

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

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

Чем делать прототип сайта

Инструмент вторичен, главное — чтобы в нём помещались блоки с текстом, заглушками под картинки и комментарии.

Сколько стоит и сколько занимает прототип

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

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

Частые вопросы