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

Редакция «Текстерры»

Обновил: Сергей Ломакин

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

Mock-up в переводе с английского — «макет». Это шаблонные 3D-объекты разного назначения, на которых можно размещать эскизы, логотипы и другие элементы фирменного стиля. Мокап нужен, чтобы продемонстрировать готовый дизайн «в реальности».

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

Чаще мокапы нужны графическим дизайнерам, которые занимаются визуальным оформлением продукции, — это возможность красиво презентовать проект. Это удобно и позволяет сократить количество правок, а, значит, сэкономить время и силы. Чаще всего мокапы создаются в формате .psd в редакторе Adobe Photoshop. Исходники состоят из слоев, поэтому, при необходимости, можно быстро внести изменения в готовые модели.

Святослав Грошев, старший дизайнер TexTerra:

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

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

Вот пять важных задач, когда выручат мокапы:

1. Проверка любых проектных идей. Мокапы позволяют быстро визуализировать и протестировать различные варианты дизайна продукта. Также они используются для демонстрации функциональных возможностей продукта. Так что основные или сопутствующие проблемы в дизайне можно выявить еще на ранних стадиях запуска продукта.
2. Пользовательские тестирования. В этом случае собирается фидбэк от тех, кто будет пользоваться продуктом. Участники тестирования могут взаимодействовать с интерактивным макетом и высказывать мнение сразу же. Важно убедиться, что в конечном итоге дизайн отвечает потребностям пользователей.
3. Демонстрация концепций. Мокапы помогают продемонстрировать сложные концепции дизайна заинтересованным сторонам в наглядной форме, что позволяет получить одобрение на дальнейшие итерации создания продукта. Или, например, продемонстрировать нестандартные рабочие процессы, которые нуждаются в дополнительных разъяснениях
4. Для уточнения деталей. Это касается и физически существующих изделий, и электронных. Мокапы помогают дизайнерам понять, насколько правильны размеры, расположение, интервалы между элементами в реальном масштабе, прежде чем тратить силы на создание первого прототипа.
5. Создание чертежа. После утверждения мокапа его можно использовать в качестве образца для последующих этапов разработки продукта. Мокап продемонстрирует, как будут сочетаться все элементы дизайна и функциональность друг с другом

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

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

Или «интерактивные» макапы, в которых можно нажимать на кнопки, вводить текст, взаимодействовать с элементами интерфейса продукта иначе — для проверки работоспособности, изучения юзабилити. То есть такие мокапы продемонстрируют, как продуктом будут пользоваться реальные люди. Интерактивные мокапы создаются с помощью специализированных конструкторов (лучшие примеры — InVision, Justinmind, MockFlow).

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

Вот еще несколько сценариев использования мокапа:

• Привлечение ЦА.

Визуально привлекательные мокапы могут привлечь потенциальную аудиторию, так как она увидит внешние и функциональные достоинства продукта;

• Тестирование дизайна продукта без кодинга.

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

• Спецификации для разработчиков.

Мокапы облегчаю задачу разработчикам и программистам, так как у них появляются четкие ориентиры, которым они должны следовать при создании UI и UX;

• Продвижение перед запуском.

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

• Итерации (правки) на основе реальных откликов.

Катерина Проскурина, руководитель студии дизайна KPD.DESIGN, архитектор-дизайнер

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

А для одного крупного торгового центра делали мокап освещения. Были сымитированы сценарии света в разных помещениях ТЦ. Заказчик не мог определиться, вставлять ли светильник в грильято (решетчатый потолок), либо подвесить светильник под грильято. Благодаря мокапу решение было принято быстро.

Также мокапы нужны галереям, чтобы «примерить» картины в интерьере. Как правило, либо совершается выезд стилиста на объект вместе с картинами, либо делается коллаж в фотошопе, где в фотографию интерьера вставляют картину, которую хотят продать. Мы неоднократно занимались такими мокапами с галеристами и стилистами. Кстати, слово “примерка” было бы отличной версией слова “мокап” на русском языке».

Виды мокапов

Формат мокапа зависит от целей и задач, которые поставил заказчик дизайнеру. Рассмотрим наиболее распространенные виды.

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

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

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

• Мокапы социальных сетей. Позволяют увидеть как будет выглядеть ваша публикация в конкретной соцсети. Кроме того, используя этот мокап, можно проверить, как смотрится контент с мобильных устройств — все ли помещается на экране и хорошо ли читается.

Где взять готовые мокапы

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

• Mockup Download — подборка PSD-паттернов разных мокапов. Все можно скачать бесплатно. Здесь есть визитки, упаковка, лого, печатные форматы и многое другое.
• Бесплатные PSD мокапы — одна из самых больших коллекций мокапов в рунете. Можно скачать каждый вариант бесплатно. Все в PSD-формате, что очень удобно.
• Mockup – Бесплатные векторные изображения и PSD для скачивания — доступно более миллиона шаблонов. Есть мокапы как в PSD-формате, так и в растрах. Бесплатное коммерческое использование и качественная графика — что еще нужно?
• Бесплатные мокапы — здесь можно скачать разные PSD-мокапы в пару кликов. Не особо большая коллекция, но есть интересные варианты.
• Adobe Stock — магазин стоков. Предлагает доступ к огромному количеству материалов, иллюстраций и объектов.
• Renderforest — это мощный инструмент для создания различной графики прямо в браузере. Позволяет быстро и легко создать уникальные объекты.
• World Mockup — сайт, где можно найти мокапы, разбитые по темам. Если у вас есть конкретный запрос, можно воспользоваться поиском. Библиотека сайта пополняется постоянно.
• Mockupdownload — отличный сайт, работать на котором можно без регистрации. Также здесь можно скачать шаблоны мокапов.

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

Существует множество онлайн-сервисов для создания собственных макетов. Лучшие из них — Placeit и Mockup World.

Процесс создания мокапа в онлайн-сервисах максимально оптимизирован:

1. Вы выбираете готовый шаблон, соответствующего требованиям будущего мокапа.
2. Загружайте свой вариант дизайна.
3. Корректируйте дизайна в шаблоне.
4. Скачиваете готовый мокап.

Какие ресурсы использовать

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

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

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

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

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

Photopea — Онлайновая альтернатива Photoshop с большим количеством шаблонов для создания самых разнообразных мокапов (не только рамки экранов). Также как и в предыдущих инструментах здесь вся функциональность доступна абсолютно бесплатно.

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

Будко Виктория, маркетолог, преподаватель:

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

https://mrmockup.com/free-mockups/

https://ru.freepik.com/search?format=search&query=mockup

https://psdmockup.ru/

Есть также удобный плагин для Figma — Vectary 3D Elements. Главное преимущество мокапов — возможность работы с ними без риска дисбаланса (нужные пропорции и тени уже продуманы), отсутствие необходимости обладать продвинутыми дизайнерскими навыками (то, как обновить изображение, нередко прилагается к пошаговой инструкции файла) и, конечно, экономичность (это гораздо дешевле фотосессии или целого тестового производства)».

Александр Гречко, web designer компании Crm-group

«Есть несколько популярных ресурсов, на которых можно найти бесплатные и платные мокапы:

Mockup Download. Здесь можно найти бесплатный шаблон для любого случая: от мокапа фургона автомобиля до мокапа последней модели айфона.

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

PSDmockup.ru — сайт с гибким фильтром и тонкой настройкой поиска, где можно найти шаблоны определенного цвета или на заданную тематику. Помимо этого пользователям доступна база других дизайнерских наработок в формате .psd, например иконок, иллюстраций, логотипов и тому подобного. Множество доступных плагинов с мокапами есть в Figma, в разделе Community».

Как создавать мокапы — пошаговая инструкция

Выберите инструмент для создания макета. Самые лучшие результаты вы получите в платных редакторах:

• Figma (бесплатный онлайн-инструмент).
• Adobe XD.
• InVision Studio.
• Canva (ограниченная функциональность).

Мокап во всех онлайн-инструментах создается примерно одинаково:

1. Создаем холст. Определитесь с устройством(ами), которое(ые) вы хотите макетировать, и создайте для них один или несколько фреймов. Например, добавляем рамку экрана iPhone.
2. Импортируем ранее созданный дизайн или создаем его с нуля. В первом случае — импортируем все имеющиеся экраны сайта или приложения. Во втором — экраны создаем непосредственно в инструменте макетирования.
3. Добавляем изображение устройства. В большинстве онлайн-сервисов уже есть готовые шаблоны разных экранов, которые перетаскиваем в проект за пару секунд. При необходимости меняем их размер, чтобы они соответствовали размеру фреймов.
4. Размещаем дизайн. Перетаскиваем UI-экраны в заданные фреймы устройств. При необходимости изменяем их размер или подгоняем иначе (часто, например, нужно поправлять края).
5. Дорабатываем визуал. Для этого добавляем любые дополнительные элементы, которые должны быть в окончательном мокапе (например, руки, держащие устройство, бэкграунды). Обязательно поиграем с тенями, так как без них предметы в мокапе будут выглядеть искусственно.
6. Экспортируем / сохраняем полученный мокап.

Примеры мокапов

Ниже мы покажем несколько вариантов готовых мокапов.

Мокап визитки салона красоты. В дизайне используются типичные инструменты beauty-мастера:

Мокап стаканчиков кофе для кафе:

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

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

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

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

• Adobe Photoshop
• Adobe Illustrator
• Figma

Стоит ли создавать мокап с нуля

Максим Майко, backend developer веб-студии Risen Sun:

«Мокап можно создать с нуля, в соответствии с техническим заданием клиента. Мокапами могут быть фотографии или анимация, написанная посредством Figma. Кроме того, мокапом можем выступать файл .psd, реализованный в Photoshop. Если говорить о разработке сайтов, иногда верстальщики отдают предпочтение классическим мокапам с уже написанными шаблонами (к примеру, сайты на Wordpress). Если у вас мокап-картинка, то подойдет Adobe Illustator, Canva. Adobe Photoshop (мне он нравится меньше в плане мокапов, если выбирать из тех, что я здесь озвучил). Для мокап-анимации — Figma, Adobe Premier».

Алина Шестерикова, старший эксперт по дизайну «Билайна»

«Мокапы с нуля чаще создают большие маркетинговые агентства и дизайнеры-профессионалы,­ если проект большой, а бюджет позволяет прибегнуть к такому методу. В таком подходе есть ряд преимуществ. У вас есть возможность собрать сцену именно так, как вы ее видите, выстроить свет и собрать презентацию продукта из оригинальных предметов. Этот мокап будет отличаться индивидуальностью и поможет достичь наилучших результатов при продаже концепции дизайна. Вы можете самостоятельно собрать предметы с помощью 3D-программ, сфотографировать предметы. После сбора фото или 3D-макетов их необходимо обработать, скорректировать сцену и цветовой баланс, настроить свет и поместить ваш дизайн в макет. Для этого используют профессиональные программы: Adobe Phototshop, Affinity Photo и Gimp. Для обработки и создания анимации используют After Effects, Cinema 4d, Blender. Конечно, этот метод имеет ряд недостатков. Его высокая стоимость не всегда покрывает расходы, а созданные мокапы можно использовать только один раз. Кроме того, вы должны уверенно владеть некоторыми программами. Поэтому стоит подумать, насколько этот способ эффективен для вашего проекта, покроются ли расходы на созданные мокапы».

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

Как сделать мокап в Фотошопе: пошаговая инструкция

Для создания своего макета в Photoshop способом вам потребуется следующее:

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

Откройте Photoshop и создайте новый документ. Выберите ширину и высоту, которые будут соответствовать вашему дизайну. Далее выполните следующие действия:

1. Импортируйте все необходимые элементы будущего мокапа. Часто это не только шаблон-оригинал, но и логотипы, иконки, надписи.
2. Разместите импортированные элементы на холсте в нужном месте.
3. Используйте инструменты для работы с типографикой. На этом этапе делаются заголовки, подзаголовки, надписи на кнопках.
4. Для придания макету реалистичности используйте фон, границы, тени и эффекты сворачивания страниц. Это поможет сделать мокап еще более реалистичным.
5. Вставьте мокап в рамку экрана устройства (если вы делаете именно такой дизайн). Удобство Photoshop в том, что в нем уже предусмотрены шаблоны для всех популярных размеров экранов (от ноутбуков до смартфонов и планшетов).
6. Примените корректировки для придания реалистичности. Например, добавьте тени, градиенты, шумы, цветокор. Все это сделает мокап более живым, интересным, запоминающимся.
7. Добавьте дополнительные детали: блики на экране, отпечатки пальцев, кнопки устройства.
8. Сохраните файл в Photoshop и экспортируйте созданный мокап в нужный формат. Самые частые варианты JPG, PNG и PDF.

Как сделать мокап в Фигме: пошаговая инструкция

Создайте новый файл Figma и задайте размер фрейма. Можно выбрать один из предустановленных вариантов или создать собственный. Далее выполните следующие действия:

1. Перетащите все элементы будущего мокапа в рабочую область редактора. Обратите внимание: у Figma большая коллекция графических элементов, обязательно проверьте её. Там можно найти красивые иконки, кнопки, другие элементы.
2. Перетащите прямоугольник, затем измените его размер таким образом, чтобы он был похож на экран нужного вам устройства.
3. Перетащите скриншоты приложения или сайта внутрь созданных.
4. Измените размеры изображений, чтобы они соответствовали фреймам.
5. Добавьте дополнительные элементы. В Figma есть хорошие библиотеки элементов для макетов, которые можно использовать.
6. Отрегулируйте порядок слоев, чтобы элементы правильно располагались (элементы макета — назад, экраны – вперед).
7. Добавьте тонкие тени за рамками устройств. Хорошо работают градиенты. Все это сделает мокап более реалистичным.
8. Группируйте связанные элементы и используйте слои для разделения объектов переднего и заднего плана.

Экспортируйте созданный мокап в нужный формат. Лучший вариант — PNG (идеален для статичных мокапов).

Как сделать мокап в Иллюстраторе

Откройте Illustrator и создайте новый артборд. Выберите размер и ориентацию, соответствующий будущему мокапу.

Далее выполните следующие действия:

1. Принесите в проект логотипы, иконки, другие векторные и растровые элементы, которые будут в мокапе.
2. Используйте инструмент Text для добавления заголовков, надписей и других текстовых элементов. Оформите текст в соответствии с главной идеей мокапа.
3. В Illustrator уже есть встроенные шаблоны рамок смартфонов, планшетов, ноутбуков и других экранов. Находятся они в разделе Window > Components
4. С помощью команды Object > Fit to Frame пропорционально масштабируйте и выровняйте свое изображение согласно рамке.
5. Вручную измените положение всех элементов дизайна в рамке экрана, чтобы добиться нужного расположения и перекрытия.
6. С помощью панели "Внешний вид" можно изменить форму рамки, добавить скосы, тени, цвета и другие эффекты.
7. Наложения, отражения на экране, трещины, износ сделают мокап визуально привлекательным. В Illustrator эти эффекты можно добавлять с помощью дополнительных форм и градиентов.
8. Применяйте стили к тексту и объектам, чтобы обеспечить постоянство цветов, теней, эффектов и стилей.
9. Сохраните созданный файл и экспортируйте его для дальнейшего использования. В Illustrator можно экспортировать мокап в AI, PDF, PNG, JPG.

Как работать с мокапами

Работа с мокапами может сильно различаться — в зависимости от носителя и цели мокапа. Но вот общие рекомендации как создать сильный макет:

1. Не делайте один идеальный макет. Сделайте несколько итераций, чтобы проверить различные идеи и доработать дизайн в дальнейшем;
2. Используйте мокапы, чтобы расположить элементы максимально удачно. Важно заранее предусмотреть, как пользователи будут перемещаться по страницам или экранам;
3. Протестируйте различные мокапы и посмотрите, что работает лучше всего;
4. В цифровых вариантах смоделируйте взаимодействие с кнопками, ссылками и формами ввода, чтобы создать реалистичное представление о работе пользователя;
5. Используйте условные обозначения. На ранних этапах создания мокапа вполне допустимо применять общий текст или общие изображения. Позднее, когда дизайн будет окончательно доработан, можно добавить реальный контент;
6. Всегда демонстрируйте каждую итерацию мокапа целевым пользователям, чтобы собрать отзывы и улучшить дизайн до начала разработки. Часто бывает, что после какой-то доработки люди вообще перестают понимать, как работает определённая функциональность продукта, например;
7. Попросите пользователей оценить конкретные аспекты мокапа (простота использования, ясность, эстетика, функциональность). Включите их предложения в следующую итерацию;
8. Учитывайте ограничения макетов, ведь мокапы не являются идеальным представлением продукта — они могут имитировать внешний вид, но не производительность продукта или далеко не всю его функциональность.
9. Используйте окончательный, утвержденный мокап для согласования действий заинтересованных сторон перед началом разработки реального продукта или прототипа.

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

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

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

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

В продажах мокапы используются для демонстрации продукта ЦА.

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

Читайте также:

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

Шаблон или уникальный дизайн: что выбрать для сайта

Разработка сайта на нашем шаблоне «Текстерра-шоп»