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

Коротко. Мокап (от английского mockup — макет) — это реалистичное изображение предмета, на которое накладывают дизайн, чтобы увидеть его в контексте: логотип на вывеске, упаковку на полке, приложение на экране смартфона. Чаще всего это файл PSD со смарт-объектом: дизайн вставляется внутрь него, а тени, блики и складки подставляются автоматически. Мокапы нужны, чтобы показать работу заказчику, проверить идею до печати и собрать презентабельное портфолио.

Зачем дизайнеру мокап

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

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

Отсюда четыре задачи, которые решает мокап:

Показать идею заказчику. Клиент редко умеет мысленно переносить картинку на продукт. Плоский файл он воспринимает хуже, чем фотографию своего будущего кофейного стаканчика.

Проверить дизайн в контексте. Размер, читаемость шрифта, поведение цвета на материале, соседство с окружением — все это видно только на предмете.

Сэкономить деньги. Не печатать пробную партию футболок, чтобы понять, что принт великоват.

Собрать портфолио. Работа, показанная на мокапе, выглядит как реализованный проект, а не как файл в папке.

Чем мокап отличается от макета, прототипа и вайрфрейма

Здесь начинается путаница, из-за которой новички не понимают друг друга на собеседованиях. Разберем термины по порядку.

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

Мокап в графическом дизайне — реалистичная подложка с предметом, куда вставляют дизайн. Кружка, футболка, билборд, разворот журнала.

Мокап в UX/UI-дизайне — это другое. Здесь так называют статичный макет интерфейса высокой детализации: с настоящими цветами, шрифтами, иконками и контентом, но без интерактива.

В интерфейсном дизайне выстраивается своя цепочка:

• Вайрфрейм — черновая схема экрана из серых прямоугольников. Отвечает на вопрос «что где лежит»
• Мокап — тот же экран, но уже в цвете и с реальным оформлением. Отвечает на вопрос «как это выглядит»
• Прототип — кликабельная версия, где экраны связаны переходами. Отвечает на вопрос «как это работает»

Рендер — трехмерное изображение объекта, созданное в 3D-редакторе. Многие качественные мокапы устройств и упаковки сделаны именно рендером, а не фотографией.

Практический вывод: если вам говорят «пришли мокап», уточните контекст. Графическому дизайнеру нужна визуализация на предмете, продакт-менеджеру — макет экрана.

Какие бывают мокапы

Мокапы устройств. Смартфон, ноутбук, планшет, монитор, часы. Внутрь вставляется скриншот сайта или приложения. Самый ходовой тип у веб- и UX-дизайнеров.

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

Мокапы печатной продукции. Визитки, листовки, брошюры, обложки книг, развороты журналов, постеры. Помогают оценить размер и читаемость.

Мокапы наружной рекламы. Билборды, сити-форматы, вывески, витрины, растяжки. Показывают дизайн в городской среде, где он конкурирует за внимание с десятком других вывесок.

Мокапы мерча и брендинга. Футболки, худи, шоперы, кружки, канцелярия, бейджи. Основа презентации фирменного стиля: один логотип разложен по десятку носителей.

Мокапы в интерьере. Постеры на стене, меню на столе, ценники в зале. Полезны, когда важно показать дизайн в конкретной обстановке.

Как устроен мокап изнутри

Стандартный мокап — это файл PSD, внутри которого спрятан смарт-объект.

Смарт-объект — это контейнер в Photoshop, содержимое которого можно редактировать отдельно от основного файла. В мокапе он уже деформирован под форму предмета: изогнут по кружке, наклонен под углом экрана, вписан в перспективу билборда.

Работа с ним выглядит так: вы находите слой с говорящим названием вроде «Your design here», кликаете дважды по его миниатюре, в открывшемся окне вставляете свой дизайн и сохраняете сочетанием клавиш. Окно закрывается, а в основном файле дизайн уже лежит на предмете со всеми тенями и бликами.

Реалистичность обеспечивают отдельные слои поверх смарт-объекта: тени, блики, текстура материала, шум. Именно поэтому дизайн выглядит напечатанным, а не приклеенным сверху.

Кроме PSD встречаются и другие форматы: онлайн-конструкторы, где ничего скачивать не нужно, плагины для Figma и 3D-сцены для тех, кто умеет работать с рендером.

Где брать готовые мокапы

Источников несколько, и выбор зависит от бюджета и требований к качеству.

Бесплатные стоки. Freepik, Mockups Design, Good Mockups, psdmockup и десятки похожих сайтов. Выбор большой, качество разное — от отличного до откровенно плохого.

Платные площадки. Creative Market, Yellow Images, Envato Elements. Здесь качество стабильно выше, а мокапы реже встречаются в чужих портфолио.

Онлайн-конструкторы. Smartmockups, Placeit, Mediamodifier. Работают в браузере, Photoshop не нужен: загружаете дизайн, выбираете сцену, скачиваете результат. Удобно для новичка, но бесплатные тарифы обычно ограничены водяными знаками или разрешением.

Плагины Figma. Mockuuups Studio, Angle Mockups, Artboard Studio. Позволяют не выходить из привычного редактора — особенно удобно UI-дизайнерам, которые и так работают в Figma.

Собственные мокапы. Фотография своего объекта или 3D-рендер. Дольше всего, зато результат уникален и точно подходит под задачу.

Про лицензии: важный момент

О нем часто забывают, а последствия бывают неприятными. Бесплатный мокап не означает «можно все».

У большинства бесплатных файлов лицензия ограничивает использование личными проектами. Как только вы вставляете туда логотип клиента и выставляете счет, использование становится коммерческим — и требует другой лицензии.

Что проверять перед скачиванием:

• Разрешено ли коммерческое использование
• Нужно ли указывать автора
• Можно ли перепродавать результат, например в составе шаблона
• Не входит ли мокап в подписку, которая закончилась

Отдельная история — брендовые устройства. Изображения iPhone, MacBook и других узнаваемых гаджетов защищены правами производителя, и у Apple, например, есть собственные правила использования изображений устройств в маркетинговых материалах.

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

Как выбрать хороший мокап

Плохой мокап портит впечатление сильнее, чем его отсутствие. На что смотреть.

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

Сохранение теней и бликов. Хороший мокап после вставки дизайна оставляет складки ткани, блики на глянце, тени от предметов. Плоская картинка без них выглядит как наклейка.

Соответствие реальному носителю. Уточните у заказчика формат продукции и берите мокап того же типа. Дизайн для А5 на мокапе плаката А1 введет клиента в заблуждение.

Актуальность устройств. Приложение в мокапе смартфона десятилетней давности выглядит несовременно и сразу выдает новичка.

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

Как сделать мокап в Photoshop

Если подходящего готового файла не нашлось, мокап несложно собрать самому.

Шаг 1. Сфотографируйте объект или найдите качественное фото. Важно ровное освещение и хорошо читаемая поверхность, куда ляжет дизайн.

Шаг 2. Откройте фото в Photoshop и создайте новый слой. Инструментом «Прямоугольник» нарисуйте фигуру поверх области, где будет дизайн.

Шаг 3. Превратите этот слой в смарт-объект: правый клик по слою, «Преобразовать в смарт-объект».

Шаг 4. Подгоните форму под перспективу объекта. Свободное трансформирование, затем режим «Искажение» — тяните за углы, пока прямоугольник не совпадет с поверхностью.

Шаг 5. Дважды кликните по миниатюре смарт-объекта. Откроется отдельное окно — вставьте туда свой дизайн, подгоните по размеру и сохраните.

Шаг 6. Вернитесь в основной файл: дизайн уже на предмете. Чтобы проступили тени с исходного фото, поставьте слою режим наложения «Умножение».

Шаг 7. При необходимости добавьте реалистичности: чуть снизьте непрозрачность, добавьте маску, подчеркните блики отдельным слоем.

Сохраните файл как PSD — в следующий раз достаточно будет заменить содержимое смарт-объекта.

Как сделать мокап в Figma

UI-дизайнеры чаще работают в Figma, и выходить из нее не обязательно.

Простой способ — плагины. Mockuuups Studio и Angle Mockups подставляют выбранный фрейм в готовую сцену за пару кликов: выделяете макет экрана, запускаете плагин, выбираете устройство и ракурс.

Ручной способ — вставить в файл изображение устройства с прозрачным экраном и подложить под него свой макет. Работает, но с наклонными ракурсами возникают сложности: полноценной перспективной деформации в Figma нет.

Отдельный вариант — экспортировать экран как PNG и собрать мокап в онлайн-конструкторе. Для быстрой презентации этого чаще всего достаточно.

Мокапы и нейросети

За последние пару лет появился еще один путь: генеративные инструменты умеют достраивать окружение вокруг объекта или создавать сцену с нуля по текстовому описанию.

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

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

Ошибки при работе с мокапами

Мокап вместо дизайна. Красивая сцена не спасет слабую работу. Если логотип неудачный, на кружке он останется неудачным.

Одинаковые мокапы во всем портфолио. Когда все проекты показаны на одном и том же популярном бесплатном шаблоне, работы сливаются, а насмотренный арт-директор сразу узнает файл.

Слишком много мокапов. Двадцать носителей с одним логотипом утомляют. Достаточно трех-пяти, показывающих разные ситуации использования.

Дизайн, растянутый не в тех пропорциях. Внутри смарт-объекта легко случайно изменить соотношение сторон. Логотип поплывет, и заказчик это заметит.

Игнорирование теней. Дизайн, вставленный без режима наложения, выглядит наклеенным поверх фото.

Неподходящий масштаб. Визитка размером с открытку или билборд, на котором текст читается как в книге, — признак того, что мокап выбирали не глядя.

Мокап скрывает проблемы. Мелкий текст на красивой фотографии кажется читаемым за счет размытия. Проверяйте критичные элементы отдельно, в реальном размере.

Нарушение лицензии. Разобрано выше и остается самой дорогой ошибкой.

Чек-лист перед отправкой мокапа заказчику

• Дизайн вставлен без искажения пропорций
• Тени и блики сохранены, дизайн не выглядит наклейкой
• Формат мокапа соответствует реальному носителю
• Устройства актуальные, окружение не отвлекает
• Разрешение достаточное для показа на большом экране
• Лицензия позволяет коммерческое использование
• Показаны разные ситуации, а не десять вариаций одной
• Критичные мелкие элементы дополнительно проверены в реальном размере

Коротко о главном

Мокап — это реалистичная модель предмета, на которую накладывают дизайн, чтобы увидеть его в контексте. Технически это чаще всего PSD-файл со смарт-объектом, куда достаточно вставить свою работу.

Главное, что стоит держать в голове: мокап — инструмент презентации и проверки, а не замена дизайну. Он помогает поймать проблемы с размером и читаемостью до печати, объяснить идею заказчику и собрать портфолио, которое выглядит как набор реализованных проектов. И перед коммерческим использованием всегда проверяйте лицензию.

Умение подать работу ценится не меньше, чем умение ее сделать: одна и та же идея, показанная в контексте и без него, получает разную реакцию заказчика. Освоить графический и веб-дизайн с нуля, включая работу в Photoshop и Figma, можно на курсе Pro Design в PROWEB — 6 месяцев, с 14 лет. Если вас больше интересуют интерфейсы, посмотрите направления в разделе курсов, а определиться поможет бесплатный IT-тест.

Часто задаваемые вопросы

Что такое мокап простыми словами?

Это реалистичное изображение предмета — кружки, футболки, смартфона, билборда, — на которое накладывают дизайн, чтобы увидеть, как он будет выглядеть в жизни. Обычно мокап представляет собой файл PSD со смарт-объектом, куда вставляют свою работу.

Чем мокап отличается от макета?

Макет — это готовый к производству файл, который отправляют в типографию: с нужным разрешением, форматом и вылетами. Мокап нужен только для показа и проверки, в печать он не идет.

Чем мокап отличается от прототипа?

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

Где скачать бесплатные мокапы?

На стоках вроде Freepik, Mockups Design и Good Mockups, а также в онлайн-конструкторах Smartmockups и Placeit и в плагинах Figma. Перед коммерческим использованием обязательно проверьте условия лицензии.

Можно ли использовать бесплатные мокапы в работе для клиента?

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

Как вставить свой дизайн в мокап?

Открыть PSD в Photoshop, найти слой со смарт-объектом, дважды кликнуть по его миниатюре, вставить свой дизайн в открывшемся окне и сохранить. После закрытия окна дизайн появится на предмете вместе с тенями и деформацией.

В какой программе делают мокапы?

Чаще всего в Photoshop — он умеет работать со смарт-объектами и перспективной деформацией. Для интерфейсов подходят плагины Figma, а без установки программ можно обойтись онлайн-конструкторами.

Сколько мокапов нужно для презентации проекта?

Обычно достаточно трех-пяти, показывающих разные ситуации использования: например, вывеска, упаковка и мерч. Большое количество однотипных визуализаций утомляет и размывает внимание.

Нужен ли мокап, если дизайн только цифровой?

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