Что такое мокапы, и какую пользу они могут принести при разработке интерфейсов
Создание интерфейса — сложная и трудоёмкая задача, состоящая из множества этапов. На каждом шаге дизайнер может использовать инструменты, ускоряющие процесс разработки макета. Клиенты быстрее получают графическое воплощение своих продуктов, а у дизайнеров остаётся больше времени на креатив.
В статье поговорим о мокапах. Разберёмся, как правильно их использовать, и в каких случаях шаблоны оказываются бесполезными.
Placeit
Библиотека готовых изображений и видео шаблонов для загрузки в них пользовательских фотографий
С помощью этого сервиса вы увидите, как выглядит сайт на экране компьютера или создадите оригинальные слайды для презентации, рекламы.
Categories
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site, we will assume that you are happy with it. Accept
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Где взять готовые мокапы
Шаблоны мокапов в большом количестве находятся в сети, многими можно пользоваться бесплатно. После небольшой корректировки готовый образец можно переустановить и адаптировать под свои задачи. Достаточно загрузить подходящий файл или скриншот со своего устройства, открыть его в редакторе системы, затем добавить в свой макет и использовать в презентации.
Вот список бесплатных сервисов и приложений, в которых можно найти шаблоны мокапов:
Smartmockups
Платформа-генератор мокапов, которая позволяет оперативно создавать проекты прямо в браузере.
- Все мокапы можно использовать в дальнейшем без ограничений, в том числе для личных или коммерческих нужд.
- Есть система поиска макето в по тегам. Все шаблоны разбиты на категории для удобства пользователя.
- Количество макет ов — более 150 единиц.
Mockuuups Studio
Сервис предоставляет коллекцию готовых мокапов с разными устройствами в одном приложении.
- Более 700 готовых вариантов.
- При загрузке скриншота продукта со своего устройства на сайт , изображение применяется ко всем шаблонам одновременно.
- Есть возможность сортировки вариантов по заданным параметрам поиска.
Device Shots
Простой веб -сервис для быстрого создания макет ов устройств со снимками сайта или мобильного приложения.
- Система тестирования продукт а через загрузку изображения или скриншота в формате jpg, png, gif, svg.
- Доступен выбор между различными устройствами, включая телефоны, компьютеры, часы и даже гаджеты для дома.
- Параметрами можно управлять и задавать размер или направление изображения по своему желанию.
Placeit
Веб-приложение для создания мокапов в режиме онлайн с сотней готовых шаблонов.
- Есть поиск с фильтром по тегам. Приложение позволяет сортировать мокапы в зависимости от типа устройства.
- После выбора мокапа нужно загрузить своё изображение или скриншот.
- В сервисе можно сделать готовый логотип для компании.
Где используются мокапы
Итак, мокап — это макет реального объекта, на который накладывается картинка, фотография, логотип, обложка, надпись. В результате создается реальный объемный визуальный образ продукта в рабочей среде.
Мокапы используются в:
- полиграфии;
- упаковке;
- наружной рекламе;
- веб-разработке при создании сайтов, приложений;
- в интернет-рекламе при создании рекламных объявлений и баннеров.
Мокапами широко пользуются дизайнеры, чтобы показать свою работу заказчику в наилучшем свете.
Иногда заказчику бывает сложно представить, как будет выглядеть брендбук на упаковке товара или этикетке, что из себя будет представлять обложка брошюры, маркетинг-кита, как будет смотреться наружная реклама или сайт. Мокап ему в помощь!
Мокап помогает оптимизировать работу дизайнеру и сохранить денежные ресурсы заказчика.
Напечатать готовый образец даже небольшой этикетки стоит денег. А если будут правки и придется печать несколько раз? Денег будет затрачено немало. Мокап помогает решить все проблемы еще на берегу.
Просто наложите рабочий дизайн на макет, и вы увидите трехмерную модель вашего продукта в реальной жизни.
Что делать, если мокапа нет (15:35)
Если у вас нет мокапа и его не хочется искать в Creative Market, воспользуйтесь шаблонами в самом сервисе Canva.
Для этого нужно так же выбрать формат будущей картинки — у меня это презентация, а вы можете выбрать обложку Фейсбук группы или сторис Инстаграма. Затем нужно зайти в раздел «Элементы», вбить в поиск то, что вы ищете, и выбрать фото или графический объект.
Для своей цели я выбрала графический объект, изображающий экран Macbook. В поиске их довольно много стоимостью около 1$, но можно найти и те, у которых есть пометка «free». А дальше я повторяю действия из предыдущего раздела: накладываю на мокап обложку видео, а сверху — иконку «Play».
Картинка, сделанная этим способом, выглядит попроще, но зато не стоит мне ни копейки, так как я потратила время и нашла бесплатный графический объект.
ТОП — 4 сайта с бесплатными источниками для мокапов
Сделать мокап (mock-up) можно самому, например, в Photoshop, используя бесплатные для коммерческих целей изображения или воспользоваться специализированными сервисами. Такими как:
- mockuuups.studio — сервис с огромной базой мокапов, подробнее о котором я пишу ниже
- freemockup.ru — удобный русскоязычный ресурс со ссылками на источники готовых мокапов — PSD исходников с удобной организацией слоев.
- mockupworld.co — англоязычный сайт с мокапами разной тематики, разбитыми по категориям.
- freepik.com — сток, где так же расположены ссылки на ресурсы с бесплатными PSD исходниками. Есть как бесплатные, так и платные варианты.
Если вы знаете еще полезные ресурсы, где можно найти бесплатные исходники мокапов — оставляйте ссылки в комментариях.
Примеры mock-up
И напоследок покажем мокапы для фотошопа для разных продуктов.
Канцелярия и полиграфия
На канцелярии и полиграфии часто помещают элементы фирменного стиля (мокап логотипа, шрифт, фирменные цвета). Именно такие мелочи позволяют компании произвести приятное первое впечатление.
Упаковка
Найти подходящий готовый шаблон для мокапа упаковки ― высший пилотаж. Здесь нет никаких стандартов, как это принято в полиграфии. Однако библиотеки шаблонов уже настолько обширные, что поискать нужный объект стоит. Вот, например, шаблон упаковки для крема:
Вывеска
Если вы готовите дизайн для наружной рекламы или мокап вывески, лучше показывать на макете, который сымитирует элементы городского пространства. Хотя бы немного.
Если вы смогли создать дизайн для продукта, сделать его презентацию для вас не будет сложной задачей. Особенно с таким количеством сервисов-помощников. Не торопитесь делать мокап. Выделите на него время.
Чем убедительнее вы представите свою работу, тем меньше правок понадобится вносить в проект. Старайтесь делать макеты объёмными. Если вы рисуете их с нуля, не забывайте про тени. Удачи в творческом пути!
