Инструменты, чтобы поместить экраны приложения или сайта в рамку телефона, ноутбука или планшета и показать дизайн на товарах — футболках, коробках, визитках. Сначала решите, где будет использоваться изображение: страница в магазине приложений, лендинг, соцсети или презентация для клиента требуют разных размеров.
Что нужно знать: Условия бесплатного использования зависят от инструмента и тарифа. Если в карточке не указано ограничение, относящееся именно к этому инструменту, проверьте квоты, водяные знаки и условия экспорта на официальной странице.
Mockuuups Studio — редактор мокапов, в котором вы перетаскиваете свой дизайн на тысячи мокапов устройств и печатной продукции; он доступен в браузере, как настольное приложение и через плагины для Figma, Sketch, Penpot и Adobe Express.
Создание мокапов
Placeit — веб-инструмент для дизайна от Envato, который предлагает мокапы для одежды, цифровых устройств, печатной продукции и товаров с печатью по требованию, а также конструктор логотипов, шаблоны дизайна и видеоинструменты; безлимитные загрузки доступны по подписке.
Создание мокапов
Rotato — генератор мокапов, который помещает ваш собственный дизайн приложения или сайта на экраны более чем 30 готовых 3D-устройств и превращает его в анимированное видео или изображение; есть приложение для macOS и веб-версия в публичной бета-версии.
Создание мокапов
Что нужно знать: Нужна установка на компьютер.
Shots.so — веб-приложение для мокапов, которое превращает скриншоты продуктов в изображения для презентаций или короткие видео с рамками устройств, фонами и анимированным движением.
Создание мокапов
Загрузите свой скриншот или макет и оцените результат в натуральную величину: не размывается ли текст в рамке, естественно ли выглядят углы и блики. Экспортируйте одну и ту же сцену в нескольких размерах и посмотрите, какой остаётся чётким.
Для готовых шаблонов мокапов прочитайте на странице лицензии условия коммерческого использования, указания авторства и перепродажи и уточните на официальной странице, нет ли у бесплатного экспорта водяного знака или ограничения разрешения. Некоторым шаблонам нужна отдельная программа вроде Photoshop, другие работают в браузере.
Можно ли использовать мокапы на скриншотах в магазине приложений? Магазины задают размеры скриншотов и правила для их содержания; проверьте в актуальных требованиях магазина, насколько допустимы рамки устройств, текст и фоны.
Мокап — это то же, что прототип интерфейса? Нет. Мокап показывает готовый дизайн в реалистичной сцене, а прототип позволяет проверить кликабельный переход между экранами. Чтобы протестировать сценарий, посмотрите инструменты дизайна интерфейсов и прототипирования.
Сравнение основано на опубликованной официальной документации. Это не практическое тестирование и не рейтинг качества. Неизвестные функции не считаются подтверждёнными.
| Название приложения | Где будете использовать? | Бесплатный результат | Без регистрации | Без водяного знака | Без интернета | Пакетная обработка | Язык контента | Что нужно знать / Источники и дата проверки |
|---|---|---|---|---|---|---|---|---|
| Mockuuups Studio | Веб-сайт | Да | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Источники и дата проверки |
| Placeit | Веб-сайт | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Источники и дата проверки |
| Rotato | Компьютер | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Нужна установка на компьютер. Источники и дата проверки |
| Shots.so | Веб-сайт | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено | Не подтверждено |