Мокап — цифровой макет для презентации дизайна¶
Мокап (от англ. mock up — «макет, образец») — это цифровое изображение или интерактивная модель, имитирующая внешний вид и размещение проектируемого объекта — интерфейса, логотипа, упаковки, печатного издания — в реалистичном контексте. Мокапы используются дизайнерами для визуализации концепции, презентации заказчику и тестирования решений до перехода к финальной реализации.
¶Происхождение термина
Слово «mock up» происходит от английского глагола to mock — «подделывать, имитировать». В традиционном промышленном и полиграфическом проектировании макетом называли физический образец изделия в натуральную величину, изготовленный из подручных материалов (картона, пластика, дерева) для проверки пропорций и эргономики. С развитием цифровых технологий термин перешёл в компьютерный дизайн, обретя новое значение: теперь под мокапом понимают программно созданный визуальный прототип.
¶Виды мокапов
По назначению мокапы делятся на несколько категорий:
- Интерфейсные (UI-мокапы) — имитации экранов сайтов и мобильных приложений. Показывают, как вёрстка и графика выглядят на конкретном устройстве.
- Брендинговые — презентация логотипа, фирменного стиля или айдентики на носителях: визитках, бланках, вывесках, одежде.
- Упаковочные — изображение дизайна упаковки товара в объёмном виде: коробки, бутылки, банки, пакеты.
- Печатные — макеты журналов, книг, постеров, флаеров в развёрнутом или изометрическом виде.
- Устройства — изображения интерфейса на экранах смартфонов, ноутбуков, планшетов, смарт-часов, телевизоров.
По уровню проработки выделяют мокапы низкой детализации (wireframe-подобные, серые заливки, без графики) и высокой (фотореалистичные, с реальными тенями, отражениями и текстурами).
¶Форматы и инструменты
Мокапы создаются в растровых и векторных редакторах — Adobe Photoshop, Adobe Illustrator, Figma, Sketch, Affinity Designer. Ключевую роль играет технология Smart Objects в Photoshop: слой-объект, в который дизайнер помещает свой макет, после чего программа автоматически накладывает его на шаблон с сохранением перспективы, теней и искажений. Это позволяет одним файлом показать десятки вариантов оформления.
Существуют специализированные онлайн-сервисы и библиотеки мокапов, предоставляющие готовые шаблоны: Mockup World, GraphicBurger, Placeit, Shots.so, LS Graphics. Многие из них распространяются бесплатно под свободными лицензиями.
Типовые файлы мокапов распространяются в форматах PSD (Photoshop), Sketch, Figma, а также в виде PNG-изображений с прозрачным фоном.
¶Применение в дизайнерской практике
Основные сценарии использования мокапов:
- Презентация концепции заказчику. Мокап переводит абстрактный макет в узнаваемый контекст — экран телефона, вывеску на фасаде, упаковку на полке. Это упрощает принятие решения и снижает количество правок.
- Портфолио. Дизайнеры показывают работы в виде мокапов, а не плоских изображений: так проект выглядит завершённым и профессиональным.
- Юзабилити-тестирование. Интерактивные мокапы (прототипы) позволяют проверить сценарии взаимодействия пользователя с интерфейсом до начала разработки.
- Маркетинг и предпродажи. Мокап продукта может использоваться в рекламных материалах ещё до запуска производства.
- Внутренняя коммуникация. В продуктовых командах мокапы служат общим визуальным языком между дизайнерами, разработчиками и менеджерами.
¶Мокап и прототип: различия
В узком UX-смысле мокап отличается от прототипа (prototype) степенью интерактивности. Мокап — статичное или малоинтерактивное изображение, отвечающее на вопрос «как это выглядит». Прототип — кликабельная модель, отвечающая на вопрос «как это работает». В широком, бытовом употреблении эти термины часто смешиваются: словом «мокап» называют и интерактивные макеты в Figma.
¶Ограничения
Мокапы не заменяют полномасштабное тестирование: реалистичность шаблона может создавать ложное впечатление завершённости проекта. Кроме того, шаблонные мокапы ограничивают креатив — нестандартный формат или необычная композиция требуют создания собственного шаблона с нуля.
Источники:
- Круглов Д. «UX/UI дизайн: полный курс»
- Хоул Т. «Дизайн для реального мира»
- Документация Adobe Photoshop (раздел Smart Objects)
- Сайты библиотек мокапов: Mockup World, LS Graphics, GraphicBurger