Макет-мокап

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

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

Не путать с mock-объектом

Английское mock встречается в разработке и в другом смысле. Mock-объект в тестировании — подставной объект, который имитирует настоящую зависимость, например платёжный шлюз. К дизайну он отношения не имеет, совпадает только слово.

Пример: что проверить в макете карточки товара

• Длинные данные. Название из трёх строк, цена с шестью цифрами, отсутствие фото. Если в макете только «Диван Comfort» на одной строке, верстальщик будет угадывать.
• Состояния. Наведение и нажатие на кнопку, неактивная кнопка «Нет в наличии», ошибка в поле количества, загрузка.
• Мобильная версия. Как ведут себя галерея, таблица характеристик и кнопка покупки на ширине 360 пикселей.
• Шрифты. Есть ли у гарнитуры кириллица, разрешена ли она для веба по лицензии.
• Повторяемость. Совпадают ли отступы и цвета на разных экранах или каждый нарисован «на глаз».

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

Как мокап связан с остальной документацией

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