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