Мокап что это: как показать сайт, упаковку или товар клиенту до запуска

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

Слово пришло из английского mock-up, «модель, имитация». В дизайне так называют файл-заготовку с фотографией или 3D-изображением предмета, где есть специальная область под ваш дизайн. Вы вставляете туда картинку, и программа сама подгоняет перспективу, свет, тени и складки ткани.

Самые частые виды мокапов:

• Устройства. Ноутбук, телефон, планшет, монитор. Так показывают сайты, лендинги и приложения.
• Упаковка. Коробки, банки, пакеты, бутылки, этикетки.
• Полиграфия. Визитки, листовки, меню, буклеты, плакаты на стене.
• Одежда и сувениры. Футболки, худи, кружки, шопперы, кепки.
• Наружная реклама и интерьер. Вывеска на фасаде, билборд, стенд на выставке, табличка в офисе.

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

Мокап, макет и прототип: в чём разница

Эти три слова путают постоянно, и подрядчики тоже называют их по-разному. Вот как их обычно различают.

Порядок такой: сначала прототип (что и где на странице), потом макет (как это нарисовано), потом мокап (как это показать). Подробно про первый шаг, зачем он нужен и как не пропустить его на сайте, мы разбирали в статье прототип сайта. А про то, как принимать сам дизайн-макет и что проверить перед оплатой, есть отдельный материал: заказать дизайн сайта.

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

Зачем мокап бизнесу: пять ситуаций

1. Согласовать дизайн. Логотип, упаковку или вывеску проще утвердить, когда видно их в реальном размере и окружении. Решение принимается быстрее, правок меньше.
2. Продать до производства. Новый вкус, новая коробка, мерч для корпоратива: клиенту можно показать картинку и собрать предзаказы до печати тиража.
3. Сделать картинки для сайта и рекламы. Скриншот сайта на белом фоне выглядит сухо. Тот же экран на телефоне в руке смотрится живее и сразу объясняет, что это сайт.
4. Оформить портфолио. Подрядчики, дизайнеры, типографии показывают работы на мокапах, чтобы заказчик видел результат, а не плоские файлы.
5. Проверить идею. Два варианта упаковки на полке среди конкурентов помогают понять, какая заметнее, ещё до печати.

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

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

Где взять бесплатные мокапы

Шаблонов в открытом доступе тысячи. Ищут их по запросам вроде «laptop mockup free», «мокап коробки бесплатно», «t-shirt mockup psd». Основные источники:

• Фотостоки и библиотеки графики. Большие каталоги с бесплатным и платным разделом. Часть зарубежных сервисов из России работает с ограничениями по оплате, а иногда и по доступу.
• Сообщество Фигмы. В разделе Community дизайнеры выкладывают файлы мокапов, которые можно скопировать к себе и править прямо в браузере.
• Сайты-подборки мокапов. Там собраны PSD-файлы от разных авторов, у каждого свои условия.
• Онлайн-генераторы мокапов. Загружаете картинку, выбираете сцену, скачиваете результат. Удобно, но бесплатная версия часто даёт водяной знак или маленькое разрешение.

Главное, что нужно проверить перед использованием, это лицензия. Например, у Freepik по условиям лицензии бесплатные материалы требуют указать автора, а платная подписка эту обязанность снимает. У других авторов бывают ограничения «только для личного использования» или запрет на перепродажу. Для коммерческого проекта прочитайте файл с лицензией, который лежит в архиве с мокапом, и сохраните его вместе с проектом.

Как сделать мокап самому: по шагам

Самый простой путь — готовый шаблон и редактор. Займёт 10–30 минут.

1. Подготовьте дизайн. Экспортируйте макет в PNG или JPG в хорошем разрешении. Для сайта это скриншот первого экрана нужной ширины: под ноутбук, например, 1440 пикселей, под телефон около 390.
2. Выберите сцену под задачу. Для сайта услуг подойдёт ноутбук на рабочем столе, для доставки еды телефон в руке, для упаковки полка магазина или стол с реквизитом.
3. Откройте шаблон. В Фотошопе мокап обычно устроен через смарт-объект: это слой-контейнер, внутри которого лежит ваш дизайн. По справке Adobe его содержимое открывается двойным щелчком по миниатюре, а после сохранения картинка обновляется во всём файле. В Фигме мокап — обычная рамка, куда вы вставляете изображение.
4. Вставьте дизайн и сохраните. Перспектива, отражения и тени подстроятся сами, если шаблон сделан хорошо.
5. Проверьте на телефоне. Откройте готовую картинку на смартфоне: читается ли главное, не потерялся ли логотип, не обрезался ли текст.
6. Сделайте нужные размеры. Для сайта, соцсетей и рекламы часто нужны разные пропорции: квадрат, вертикаль, широкий формат.

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

Как сделать мокап нейросетью

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

Поэтому рабочая схема из двух шагов:

1. Нейросеть делает сцену с пустым местом. Просите «пустой экран ноутбука», «белая коробка без надписей», «чистая футболка на вешалке». Подойдут нейросети с доступом из России, например Алиса AI от Яндекса или Kandinsky от Сбера; обзор инструментов есть в статье нейросеть для дизайнера.
2. Дизайн вставляете сами. В Фигме или Фотошопе кладёте свой макет на пустую область и подгоняете перспективу. Так логотип и текст останутся точными.

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

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

Условный пример: сколько стоит мокап и что он даёт

Пример условный, не кейс студии. Небольшое производство мёда в Башкирии готовит новую подарочную упаковку к Новому году. Тираж коробок — 1 000 штук, примерно 90 000 ₽, срок печати три недели.

Кроме того, мокап можно сразу пустить в дело: поставить на сайт в раздел «подарочные наборы», показать оптовым покупателям и собрать предзаказы, пока коробки печатаются. Если на предзаказ откликнутся 30 клиентов, это 30 продаж до появления упаковки на складе. Цифры условные: стоимость образцов и тиража зависит от типографии и материала.

Мокапы в рекламе и на сайте: что можно, а что нельзя

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

• Товар должен совпадать с реальным. Закон «О рекламе» запрещает недостоверную рекламу, в том числе с неверными сведениями о характеристиках товара. Если на мокапе банка 500 мл, а продаётся 300 мл, это проблема.
• Помечайте, что товар ещё в производстве. Для предзаказа честно напишите «так будет выглядеть упаковка» или «изображение может отличаться».
• Проверяйте требования площадок к картинкам. В Яндекс Директе, например, для изображений есть требования к размерам и пропорциям, а при показе картинку могут обрезать под разные форматы, о чём сказано в справке Директа. Главный объект держите ближе к центру.
• Не используйте чужие бренды. Шаблон с телефоном конкретной марки или чужим логотипом на кружке может создать проблемы с правообладателем и модерацией. Берите сцены с нейтральными устройствами.

Сами баннеры и рекламные креативы нейросетью мы подробнее разбирали в статье нейросеть для баннеров. Там про размеры, модерацию и маркировку.

Частые ошибки с мокапами

Как мы используем мокапы в работе над сайтом

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

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