Прототип сайта: зачем он нужен и как его сделать
Прототип — схема страницы без дизайна: какие блоки на ней есть и в каком порядке идут. Цветов и шрифтов в нём нет специально, чтобы обсуждать смысл, а не оттенки. Он нужен, чтобы договориться о содержании до дорогой работы: передвинуть блок на схеме — минуты, на свёрстанной странице — часы.
- Обновлено
- Чтение
- 4 минуты
- Рубрика
- SEO
Коротко о главном
- Схема без дизайна. Серые блоки вместо картинок.
- Делает не дизайнер. Тот, кто отвечает за содержание.
- Экономит круги правок. А не деньги напрямую.
- Нужен не всегда. Для одной страницы хватит списка блоков.
Что такое прототип
Прототип — это схема страницы без дизайна: где что расположено и в каком порядке идёт.
Выглядит он нарочито просто: серые прямоугольники вместо фотографий, полоски вместо текста, подписи вроде «форма заявки» или «отзывы». Цвета, шрифтов и красоты в нём нет специально — чтобы обсуждать смысл, а не оттенки.
Задача у него одна: договориться о содержании и порядке блоков до того, как начнётся дорогая работа. Менять прямоугольник на схеме — пять минут. Менять свёрстанную страницу — день.
Из чего он состоит
Для каждой страницы прототип отвечает на четыре вопроса.
Какие блоки на странице. Первый экран, описание услуги, цены, примеры работ, отзывы, вопросы, форма.
В каком порядке они идут. Это и есть главное решение: что человек видит первым, а что после.
Что внутри каждого блока. Не текст целиком, а состав: заголовок, три пункта, кнопка, изображение.
Куда ведут кнопки и ссылки. На какую страницу или к какой форме.
Хороший прототип делается сразу в двух видах — для компьютера и для телефона. Порядок блоков на узком экране часто отличается, и решать это лучше на схеме.
Кто его делает и сколько это занимает
Прототип — работа не дизайнера, а того, кто отвечает за содержание: маркетолога, руководителя проекта или самого владельца бизнеса.
Причина простая: дизайнер не знает, какие вопросы задают ваши клиенты и в каком порядке их нужно закрывать. Он умеет сделать это красиво, но не решает, что сказать первым.
По времени: схема на пять-семь страниц обычно занимает несколько дней с учётом обсуждений. Дольше всего согласовывают не расположение блоков, а тексты, которых на этом этапе ещё нет, — поэтому договоритесь заранее, что на прототипе обсуждается только состав и порядок.
Инструмент не важен. Прототип рисуют в специальных сервисах, в презентации и на бумаге — работает любой вариант, который можно показать и обсудить.
Что он экономит на самом деле
Экономия не в деньгах напрямую, а в количестве кругов переделок.
Правки становятся дешевле. Передвинуть блок на схеме — минуты. После вёрстки — часы, и не бесплатно.
Обсуждение идёт про дело. Без прототипа разговор о макете сваливается в оттенки и шрифты, а не в то, хватает ли человеку информации для решения.
Видно, чего не хватает. На схеме сразу заметно, что нет цен, нет ответа на частый вопрос, нет доказательств.
Понятно, сколько писать текста. Копирайтер получает не «напишите про услугу», а конкретные блоки с назначением.
Проще сравнивать подрядчиков. С готовым прототипом вы просите оценить одну и ту же работу, а не абстрактный сайт.
Когда без него можно обойтись
Прототип нужен не всегда, и настаивать на нём в простых случаях — трата времени.
Сайт собирается из готовых блоков конструктора. Порядок блоков виден прямо в редакторе, схема дублирует работу.
Одна страница. Для простого одностраничника хватает списка блоков в столбик.
Берёте готовый шаблон и меняете только содержимое. Расположение уже задано.
А вот когда прототип нужен точно: несколько типов страниц, каталог с карточками, сложная форма, интеграция с учётной системой или ситуация, когда решение принимает несколько человек. В последнем случае схема экономит больше всего — на ней договариваются до того, как каждый представил себе свой сайт.
Как проверить прототип до вёрстки
Пять вопросов к готовой схеме. Проверяются за полчаса.
- Понятно ли с первого экрана, что вы продаёте и кому. Без пролистывания.
- Есть ли цена или хотя бы её порядок. Её отсутствие — первая причина ухода.
- Закрыты ли вопросы, которые задают по телефону. Выпишите пять самых частых и найдите их на схеме.
- Есть ли чему поверить. Фотографии работ, сроки, гарантия, отзывы, реквизиты.
- Понятно ли, что делать дальше. Одно очевидное действие на экран, а не пять кнопок подряд.
Если по какому-то пункту ответа нет, дешевле добавить блок сейчас. Что ещё мешает людям оставлять заявки — в отдельной статье. А общий список подготовки к запуску — здесь.
Как это делаем мы
Мы не рисуем прототипы как отдельную услугу, но всегда просим показать схему до вёрстки, если сайт только делается. Смотрим на ней две вещи: есть ли отдельная страница под каждую услугу и закрыты ли вопросы, которые клиент задаёт перед покупкой. Это дешевле поправить на схеме, чем на готовом сайте — а на продвижение влияет напрямую. Это часть создания сайта.
Прототип нужен не ради красоты процесса, а чтобы спор о сайте случился в самом дешёвом месте. Когда обсуждают готовую страницу, любое замечание стоит денег и времени, поэтому его проще не высказывать — и сайт выходит не таким, каким был нужен. На схеме из серых прямоугольников спорить не жалко.
Вагиз Хасанов, основатель Seo Rezult
Читайте по теме:
SEO-продвижение сайта →Частые вопросы о прототипе
Что такое прототип сайта?
Схема страницы без дизайна: серые прямоугольники вместо фотографий, полоски вместо текста, подписи блоков. Показывает, что расположено на странице и в каком порядке, чтобы обсуждать содержание, а не оформление.
Из чего состоит прототип?
Из ответов на четыре вопроса: какие блоки есть на странице, в каком они порядке, что внутри каждого и куда ведут кнопки. Хорошая схема делается сразу в двух видах — для компьютера и для телефона.
Кто должен делать прототип?
Тот, кто отвечает за содержание: маркетолог, руководитель проекта или владелец бизнеса. Дизайнер не знает, какие вопросы задают ваши клиенты и в каком порядке их нужно закрывать.
Сколько времени занимает?
Схема на пять-семь страниц — несколько дней с учётом обсуждений. Дольше всего согласовывают тексты, которых на этом этапе ещё нет, поэтому стоит заранее договориться: на прототипе обсуждается только состав и порядок блоков.
Можно ли обойтись без прототипа?
Можно, если сайт собирается из готовых блоков конструктора, если это одна страница или если берётся готовый шаблон и меняется только содержимое. Нужен он там, где несколько типов страниц, каталог, сложная форма или решение принимает несколько человек.
Как проверить готовую схему?
Пять вопросов: понятно ли с первого экрана, что вы продаёте и кому; есть ли цена или её порядок; закрыты ли частые вопросы клиентов; есть ли чему поверить; понятно ли, что делать дальше.
Автор статьи
Вагиз Хасанов
Основатель Seo Rezult
Больше 10 лет в SEO. Основал Seo Rezult: сейчас в команде больше 10 специалистов и больше 280 проектов. В блоге пишет о продвижении сайтов в Яндексе и Google простыми словами.
- В команде
- Seo Rezult: 10 лет, 10+ специалистов, 280+ проектов
- Впервые опубликовано