Как самому сделать прототип сайта

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

Что прототип показывает:

• Структуру страниц и их последовательность
• Какие блоки есть на каждой странице и в каком порядке
• Какой текст и какой контент идёт в каждый блок
• Где будут кнопки, формы, изображения

Чего прототип не показывает:

• Цвета и шрифты
• Финальный дизайн
• Анимации и интерактивность

Без прототипа дизайнер начинает рисовать макет по собственному пониманию задачи. Итог — вы смотрите на готовый дизайн и говорите: «А я хотел по-другому. И блок с ценами должен быть раньше. И вот этого вообще не нужно». Переделывать готовый дизайн, это время и деньги. Переделывать структуру прямо в готовом сайте — ещё дороже. А если правки влекут за собой изменение логики всей страницы, то это почти пересборка с нуля.

Прототип экономит:

• Время на переделки
• Бюджет на правки
• Нервы, ваши и дизайнера

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

Есть три варианта:

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

Клиент готовит материалы. Не рисует прототип в программе, а структурирует тексты и описывает содержание каждого блока. Это вполне достаточно для старта. Именно об этом большая часть этой статьи.

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

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

• Оставить заявку на консультацию
• Позвонить
• Купить товар
• Записаться на приём
• Скачать прайс
• Написать в мессенджер

Одна цель — один лендинг. Если целей несколько, скорее всего, нужно несколько страниц или чёткая иерархия: главная цель выше, дополнительные ниже.

Посмотрите 5-10 сайтов конкурентов. Что вам нравится? Что нет? Почему? Это поможет понять, чего вы хотите, и чего точно не хотите. Найдите 2-3 сайта из любых ниш, которые нравятся вам визуально. Это называется референс — ориентир по стилю и дизайну. Не обязательно из вашей отрасли: нравится сайт архитектурного бюро — покажите его. Дизайнер возьмёт стилистику, не содержание.

Как правильно передать референс: Не просто ссылка, а с комментарием: «Нравится этот сайт, особенно шрифты и много воздуха. Но цвета хочу другие. У меня бирюзовый фирменный» или «Референс по структуре нравится, хочу такой же первый экран, но фото не нужно, только текст и кнопка».

Запишите список страниц вашего сайта. Для простого лендинга это одна страница. Для корпоративного сайта несколько. Пример структуры многостраничного сайта:

• Главная
• Услуги (или отдельные страницы для каждой услуги)
• Портфолио / Кейсы
• О компании
• Блог
• Контакты

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

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

Главные правила текста для сайта:

• Кратко и по делу, никто не читает длинные абзацы
• Конкретика вместо штампов: не «качественный сервис», а «ответим в течение часа»
• Структура: заголовок + короткое описание, или список, или цифры
• Разбивайте на абзацы, сплошной текст не читают

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

Вот рабочий формат, который я прошу заполнить клиентов. Не нужно никаких программ, обычный Google Doc или текстовый файл:

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

Именно такой формат даёт дизайнеру всё необходимое для старта. Он видит структуру, понимает содержание каждого блока и знает ваши ожидания. Это сокращает количество согласований и правок в несколько раз.

Чем полнее и точнее вы подготовите материалы — тем быстрее получите результат и тем меньше будет правок. Дизайнер не читает мысли. Но с хорошим ТЗ — почти читает 😄