Что такое мокапы и зачем они дизайнеру

Рассказываем про быстрый и эффективный способ презентовать идею заказчику.

Иллюстрация: Polina Vari для Skillbox Media

Полина Старцева

Всюду ищет великую красоту, работает над разумностью потребления.

Что такое мокап

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

Чаще всего мокап — это файл в формате PSD, который содержит слои и смарт-объекты. На подготовленный таким образом шаблон накладывают элементы айдентики, рекламные креативы или образ упаковки.

Что такое айдентика и зачем она нужна? Читайте в нашей статье.

Мокапы пакета для кофе и карточки с металлической прищепкой
*Изображение: Unblast*

Мокап свечи в стеклянном стакане
*Изображение: Unblast*

Мокап плаката в чёрной рамке в минималистичном интерьере
*Изображение: MediaVariety / Deezy*

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

Мокапы как реалистичные 3D-модели нужны в первую очередь графическим дизайнерам. Но используют этот термин и дизайнеры интерфейсов. Мокап в UX/UI — это упрощённый вариант цифрового продукта: в нём видно, как будут решены графические элементы, какие будут шрифты и цвета, даже если вайрфрейм к этому моменту ещё не доработан окончательно. А для презентации готового приложения или сайта используют трёхмерные «девайсные» мокапы — образы смартфонов или компьютеров, на которых показано, как будет выглядеть продукт на устройстве пользователя.

Зачем нужны мокапы

Основное назначение мокапов — продемонстрировать клиенту проект именно таким, каким он должен выглядеть для конечного потребителя. Как правило, дизайн на «реальных» объектах выглядит для заказчика привлекательнее и понятнее.

Новый лимитированный дизайн стаканчиков кофейни «Шоколадница» показан на мокапах
*Изображение: «Шоколадница»*

Мокап металлической вывески на бетонной стене: в нём можно заменить шаблонную надпись на свою, добавить логотип или фирменный знак
*Изображение: Pixelbuddha*

С помощью мокапов можно:

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

Что такое брендбук и где в нём место мокапам? Рассказываем в статье.

Пример размещения брендированной наклейки магазина «Пятёрочка»
*Изображение: «Пятёрочка»*

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

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

на стоках или в специализированных магазинах мокапов — например, Adobe Stock;
в приложениях — веб-сервисах, которые не требуют скачивать файлы, а позволяют вносить изменения в шаблоны прямо в браузере — например, Smartmockups;
на платформах дизайнерских портфолио: некоторые авторы делятся своими наработками и шаблонами на Behance или Dribbble. Чтобы найти их, вводите в поиске Mockups;
для тех, кто работает в Figma, есть специальный плагин.

Ссылки на ресурсы, где можно скачать мокапы, мы собрали в этом материале.

Как правило, в ZIP-архиве, кроме самого мокапа, будет описание лицензии и инструкция по слоям и смарт-объектам.

Лицензии для мокапов могут требовать указания авторства или позволять разные уровни использования:

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

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

Как подобрать подходящий мокап

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

Дизайн вывески для бара показан на готовом мокапе и выглядит реалистично. Рисовать такой объект и стены — трудоёмкий и долгий процесс, и результат может выглядеть не так качественно
*Фото: Ася Иванова / Behance*

Что важно при выборе мокапа:

Будьте внимательны с размерами.

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

Обращайте внимание на блики, отражения и тени.

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

Оценивайте картинку на реалистичность.

Существуют мокапы в виде простых 3D-моделей без серьёзной проработки фактур и бликов. Из-за отсутствия внимания к деталям они выглядят как 3D-графика и не похожи на фотоснимок. Перенести дизайн на такое изображение можно, но результат будет недостаточно убедителен, поскольку дизайн будет показан не в «реальной», а полностью цифровой среде. Лучше отложить такой мокап и попробовать найти более реалистичное изображение.

Если готовый мокап вам не подходит

Когда важно продемонстрировать дизайн на нестандартном предмете и точно соблюсти все пропорции, то можно мокап самостоятельно отрисовать с нуля. В 3ds Max можно создать рендер объекта и в Adobe Photoshop добавить правильные визуальные эффекты.

Также можно взять за основу фотографию подходящего объекта и с помощью Adobe Photoshop перенести в неё макет с учётом перспективных искажений. Резкость, тени и блики придётся контролировать вручную.