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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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