Когда заказчик приходит за новым сайтом, ему не терпится увидеть красивый дизайн. Цвета, шрифты, фотографии — это наглядно и понятно. А тут разработчик предлагает сначала посмотреть на какие-то серые схемы с прямоугольниками. Зачем тратить на это время и деньги?
Ответ простой: прототип — самый дешёвый способ найти и исправить ошибки в будущем сайте. В этой статье расскажем, что это такое, как он создаётся и почему мы не начинаем дизайн без него.
Что такое прототип
Прототип — это схематичное изображение страницы, которое показывает, какие на ней будут блоки, в каком порядке и что в каждом блоке будет содержаться. В нём нет цветов, фотографий и декоративных элементов. Только структура и содержание.
Можно сравнить прототип с планировкой квартиры. Прежде чем выбирать обои и мебель, нужно решить, где будут стены, двери и окна. Переносить стену после ремонта — дорого и долго. Переставить её на плане — дело нескольких минут.
Чем прототип отличается от дизайна
Прототип отвечает на вопросы: что будет на странице? В каком порядке? Как посетитель будет перемещаться по сайту? Что произойдёт при нажатии на кнопку?
Дизайн отвечает на вопрос: как это будет выглядеть? Какие цвета, шрифты, изображения, отступы, стиль иконок?
Разделение этих этапов позволяет сосредоточиться на одном типе решений за раз. При обсуждении прототипа никто не отвлекается на оттенок синего, а при обсуждении дизайна уже не возникает вопросов о структуре.
Виды прототипов
Карта сайта
Схема всех разделов и страниц с их иерархией. Показывает, из каких частей состоит сайт и как они связаны. Это первый шаг проектирования.
Схематичные прототипы
Простые чёрно-белые схемы страниц, где блоки обозначены прямоугольниками с подписями. Делаются быстро и позволяют оценить общую структуру.
Детальные прототипы
Схемы с реальными или близкими к реальным текстами, точным составом элементов в каждом блоке, формами, кнопками. По ним уже можно понять, как будет работать страница.
Интерактивные прототипы
Кликабельные схемы, в которых можно переходить между страницами, открывать меню, нажимать на кнопки. Позволяют проверить сценарии использования до начала разработки.
Почему прототип экономит деньги
Ранние правки дешевле
Изменить порядок блоков в прототипе — минуты работы. Изменить его в готовом дизайне — часы. В свёрстанном сайте — ещё больше. Чем позже найдена ошибка в структуре, тем дороже её исправление.
Меньше кругов правок в дизайне
Когда структура согласована, дизайнер работает над визуальной частью, не возвращаясь к вопросам содержания. Правки дизайна становятся точечными и предсказуемыми.
Точная оценка разработки
По детальному прототипу программист может точно оценить объём работ. Видно, какие функции нужны, сколько уникальных шаблонов, какие интеграции. Это снижает риск неожиданного роста бюджета.
Подготовка контента
Прототип показывает, какие тексты и изображения понадобятся для каждой страницы. Заказчик может начать готовить материалы параллельно с дизайном, а не после него.
Как создаётся прототип
- Сбор информации. Изучаем бизнес, аудиторию, конкурентов, поисковые запросы, пожелания заказчика.
- Карта сайта. Определяем разделы и страницы.
- Сценарии. Описываем, как разные типы посетителей будут пользоваться сайтом: что ищут, куда переходят, где оставляют заявку.
- Схемы ключевых страниц. Главная, страница услуги, карточка товара, каталог, контакты — всё, что имеет уникальную структуру.
- Обсуждение и правки. Показываем прототип, объясняем логику, собираем замечания.
- Согласование. Утверждённый прототип становится основой для дизайна.
Что обсуждать на этапе прототипа
Когда вам показывают прототип, не стесняйтесь задавать вопросы и вносить предложения. Это именно тот момент, когда правки ничего не стоят. На что обратить внимание:
- Все ли важные для клиентов вопросы освещены?
- Логичен ли порядок блоков? Не слишком ли далеко от начала страницы оказалась ключевая информация?
- Понятно ли, что делать на каждой странице?
- Нет ли лишних блоков, которые не несут пользы?
- Как страница будет выглядеть на телефоне?
- Реально ли подготовить контент для всех блоков?
Типичные возражения
«У меня простой сайт, прототип не нужен»
Даже у сайта из пяти страниц есть структура, которую стоит продумать. Для небольших проектов прототип делается быстро и занимает небольшую часть бюджета, но при этом защищает от переделок.
«Я хочу сразу увидеть красоту»
Понимаем. Но красивый дизайн, построенный на неудачной структуре, не будет приносить заявок. Лучше потратить несколько дней на проектирование и получить сайт, который работает.
«Я не понимаю эти схемы»
Хороший проектировщик объяснит каждый блок и логику страницы. Можно также попросить прототип с реальными текстами — он гораздо нагляднее.
Прототип и тестирование
Интерактивный прототип можно показать реальным пользователям ещё до дизайна и разработки. Попросите нескольких человек из вашей целевой аудитории выполнить типичные задачи: найти услугу, узнать цену, оставить заявку. Наблюдайте, где они путаются и что ищут. Это даст ценную информацию для улучшения структуры.
Час, потраченный на проектирование, экономит дни разработки.
Инструменты прототипирования
Прототипы можно рисовать на бумаге, в графических редакторах или в специализированных сервисах для проектирования интерфейсов. Мы чаще всего используем тот же инструмент, в котором потом делается дизайн. Это удобно: заказчик получает ссылку, может посмотреть схемы на любом устройстве, оставить комментарии прямо к нужному блоку, а дизайнер затем продолжает работу в том же файле, не перенося структуру вручную.
Для обсуждения важно не только показать схему, но и объяснить, почему блоки стоят именно так. Поэтому прототип сопровождается короткими пояснениями: какую задачу решает каждый блок, на какие вопросы клиента он отвечает, что посетитель должен сделать дальше.
Сколько времени занимает прототипирование
Для лендинга прототип обычно готовится за два-три дня. Для сайта компании с несколькими типами страниц — за неделю. Для интернет-магазина или сложного сервиса — дольше, потому что нужно продумать каталог, фильтры, корзину, личный кабинет и связи между ними. В масштабах всего проекта это небольшая доля времени, которая окупается многократно на следующих этапах.
Прототип для существующего сайта
Прототипирование полезно не только при создании нового сайта. Если вы планируете переработать отдельные страницы текущего сайта — например, страницы услуг, которые плохо конвертируют, — начните с прототипа новой версии. Это позволит обсудить изменения и оценить их влияние до того, как тратить деньги на дизайн и вёрстку.
Итог
Прототип — это фундамент сайта. Он позволяет продумать структуру, проверить логику и найти ошибки на самом раннем этапе, когда их исправление ничего не стоит. Он делает дизайн и разработку предсказуемыми, а итоговый сайт — удобным для посетителей.
Мы начинаем каждый проект с прототипирования и подробно обсуждаем его с заказчиком. Если хотите увидеть, как будет устроен ваш будущий сайт, — оставьте заявку, и мы начнём с проектирования.