Что такое мокап: примеры использования + библиотека бесплатных мокапов

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

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

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

Мокапов в мире дизайна не меньше, чем птиц в майском лесу. Вот несколько основных типов:

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

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

3. Мокапы рекламных конструкций показывают, как вывески и афиши вписываются в городскую среду. Листайте слайды.

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

5. Мокапы печатной продукции — визитки, книги, журналы. Показывают, как текст и логотип будут смотреться после печати. Проще согласовать с заказчиком мокап, чем потом постфактум разбираться, почему не сделали тиснение фольгой и «всё золотом».

Чтобы не корпеть часами над Фотошопом и Фигмой, мы со студентами обычно берём мокапы из бесплатных библиотек.

Вот подборка моих любимых:

Asylab. Это сайт с большой подборкой мокапов. Не все из них бесплатны: чтобы выбрать тот, за который точно не придётся платить, зайдите в раздел с бесплатными версиями мокапов, добавьте нужные в корзину и в поле оплаты введите промокод, который вы найдёте на страничке мокапа.

Сreatsy. Для тех, кто хочет что-то поинтереснее, нежели прототип упаковки. Тут вы найдёте и мокап наклейки на авокадо, и плед на траве, и рулон ткани… Экспериментируйте и творите!

LS Graphics. Простой в использовании сайт с бесплатными мокапами, представленными в разных ракурсах и формах.

MrMockup. Обширная библиотека разнообразных мокапов. Чтобы скачать, зайдите в раздел с free-версиями и кликните на Download. Вас перекинет на другую страницу (не пугайтесь, это нормально!) , где можно будет скачать понравившийся образец.

Pixeden. Бесплатные мокапы в прикольных сценах и декорациях. Можно использовать для подборки референсов, так как в их превью лежат сотни интересных работ.

Работать с мокапами самому не так сложно, как кажется. Мы со студентами онлайн-школы «Логомашина» обычно используем вот такие шаги по созданию базового мокапа:

• Выбираем основу. Определяем, что нам нужно — фотографию устройства или простой белый фон.
• Добавляем контент. Размещаем на мокапе элементы дизайна с помощью инструментов вырезания и расположения слоёв.
• Редактируем и стилизуем. Подгоняем размер, цвет и другие параметры элементов дизайна для достижения желаемого внешнего вида.
• Придаём реалистичности. Балуемся с тенями, бликами, текстурами и другими эффектами, чтобы было как в жизни. Главное — не переборщить!
• Экспортируем. Сохраняем готовый мокап в подходящем формате для дальнейшего использования или публикации.
• Готово, мы и вы великолепны!

Не забывайте, что мокапы кто-то создал, а значит они кому-то принадлежат. Чтобы избежать проблем с авторскими правами, важно разобраться с видами лицензий:

• Бесплатные лицензии (Free License). Такие мокапы с бесплатной лицензией можно использовать без оплаты, а зачастую и без упоминания имени автора.
• Лицензии Creative Commons (Creative Commons License). Creative Commons — это некоммерческая организация, разрабатывающая стандартные лицензии для различных типов контента, включая мокапы. Существует несколько типов Creative Commons лицензий, которые могут определять различные условия использования, такие как атрибуция (указание авторства), запрет на коммерческое использование, обязательное распространение на тех же условиях и т. д.

Например, лицензия Attribution (BY) даёт право на личное и коммерческое использование, но с обязательным указанием авторства, при этом вы можете вносить свои изменения. А лицензия No Derivatives (ND) позволяет использовать в личных и коммерческих целях, но при этом вносить в мокап изменения по ней запрещено.

Всегда внимательно смотрите на вид лицензии!

• Платные лицензии (Paid License). Некоторые мокапы доступны только за определённую плату. При покупке лицензии обычно предоставляются расширенные права использования, включая возможность использования мокапа в коммерческих проектах без необходимости указания авторства.

• Расширенные лицензии (Extended License). Предоставляют пользователям дополнительные права на использование контента, которые обычно не включены в стандартные лицензии. Обычно это означает, что пользователь получает возможность использовать мокапы в коммерческих проектах с большей свободой и гибкостью. Эти лицензии обычно дороже, чем обычные лицензии, но предоставляют больше свободы в использовании контента.

Самое важное мы уже рассказали. Хочу оставить дружеское напутствие: реалистичный мокап не возникнет сам из ниоткуда без практики.

Не ругайте себя, если первый прототип выйдет совсем не таким красивым, каким был в голове. В дизайне всё решает практика: чем больше времени и усилий прикладываешь, тем круче результат. Не бойтесь пробовать!

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

Ставьте лайк, если нашли ответ на свой вопрос. А если нет — пишите вопрос в комментариях.