Что такое мокап в дизайне и как его использовать

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

Что такое мокап

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

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

С помощью мокапов визуализируют:

• упаковки товаров;
• интерфейс приложений, игр и сайтов;
• развороты и обложки журналов, книг;
• баннеры и рекламные щиты;
• товары с фирменным стилем.

Мокапы делают идеи более понятными и привлекательными для клиентов и коллег.

Научиться делать мокапы можно в онлайн-университете Skypro на курсе «Графический дизайнер». За двенадцать месяцев вы научитесь делать дизайн для баннеров, лендингов, логотип и упаковки товаров. Опытные преподаватели объяснят всё на примерах и простыми словами.

Источник: sky.pro

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

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

• Проверить, как впишется идея в окружающую обстановку. Рекламный баннер будет по-разному смотреться в исторической и современной частях города.
• Посмотреть, как проект будет выглядеть во всех размерах объекта. Логотип на визитке и на карте города в формате А1 может сильно отличаться.
• Оценить жизнеспособность идеи. Владелец магазина может проверить, как новая вывеска будет смотреться на здании.
• Ускорить однотипную работу. Например, если нужно показать, как название бренда будет смотреться на футболке восьми разных цветов.
• Разрабатывать фирменный стиль. Дизайнер примеряет заготовку на разных корпоративных атрибутах: визитках, футболках, зонтиках или машинах.
• Экономить бюджет. Если одностраничную брошюру распечатать не проблема, то изготовить баннер — уже затратно.

Какие бывают мокапы

Каждый тип показывает идеи и задумки на разных продуктах.

• Мокапы печатной продукции

  Это визитки, упаковки, буклеты и другая печатная продукция. Например, мокап на упаковке нового продукта покажет, как товар будет выглядеть на полке магазина.

  

  Источник: sky.pro

• Мокапы устройств

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

  

  Источник: sky.pro

• Мокапы корпоративной атрибутики

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

  

  Источник: freepik.com

Чем отличается мокап, прототип, каркас и скетч

Мокап часто путают со скетчем, прототипом и каркасом. Скетч — это быстрый набросок, который делает дизайнер перед тем, как начать проектировать интерфейс. Каркас — более структурированная схема, которая показывает, где будут размещаться элементы и общий интерфейс, но нет детализированного дизайна. Это структура дизайна. А прототип — это более детальный и интерактивный эскиз, который показывает, как всё будет работать, например кликабельный сайт. Мокап же просто показывает, как будет выглядеть интерфейс, без интерактивных элементов.

Где брать готовые мокапы

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

PSD Freebies — много вариантов бесплатных макетов в разных категориях.

CSS Author — бесплатные шаблоны, которые разбиты на 17 категорий, а те — на подкатегории.

Mockup world — бесплатные и платные мокапы. Есть раздел No Photoshop, где можно создать мокап прямо из браузера.

Mockups-design — очень много бесплатных мокапов в разных ракурсах.

PSD MOCKUP — бесплатные макеты, которые разбиты по категориям. Сайт и поиск — на русском языке.

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

Как подобрать подходящий мокап

Чтобы выбрать подходящий макет, нужно учитывать несколько факторов:

• Оцените, насколько реалистичен объект и его окружение — так проект будет выглядеть правдоподобнее. Например, картину лучше показать не на голой стене, а в интерьере.
• Убедитесь, что модели гаджетов актуальны. Не показывайте дизайн интерфейса на старом iPhone 5, если уже вышла шестнадцатая модель.
• Ищите мокапы с тенями, бликами и отражениями — так проект будет выглядеть живо.
  

  Источник: sky.pro

• Ищите необычные стоковые макеты, посмотрите варианты нужного предмета на разных сайтах.

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

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

Вот несколько популярных сервисов.

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

Источник: deviceshots.com

MockupsJar. Помогает сразу сделать готовый проект в браузере.

Источник: mockupsjar.com

ShotSnapp. Много вариантов готовых гаджетов, но большинство из них платные.

Источник: app.shotsnapp.com

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

Как работать с мокапом в фотошопе

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

1. Скачайте мокап в формате .psd и откройте в программе.
   
2. В правой части экрана найдите панель «Слои».
3. Найдите слой, который будете редактировать. Выберите нужный объект и дважды кликните по нему мышкой.
   
4. Загрузите дизайн или картинку. Перетащите свой файл, например логотип или изображение, в окно Photoshop или используйте меню «Файл» — «Поместить встроенный».
5. Если нужно, измените размер дизайна. Для этого удерживайте клавишу Shift и потяните за угловые точки.
6. Разместите слой с вашим дизайном на всех нужных объектах.
   
7. В конце сохраните файл. Нажмите «Файл» — «Сохранить как» и выберите нужный формат, например JPEG или PNG.
8. Скачайте готовый мокап. Нажмите «Файл» — «Экспортировать» — «Сохранить для веб» и выберите нужные параметры.

В Skypro на курсе «Графический дизайнер» освоите фотошоп, Figma, Adobe Illustrator, After Effects и другие полезные программы. А еще научитесь задавать правильные вопросы заказчику, презентовать свои работы и соберете классное портфолио, которое поможет устроиться на работу.

Главное: что такое мокап

• Мокап — это визуальная модель или макет, который заранее показывает, как будет выглядеть конечный продукт.
• Есть много готовых шаблонов, например, на сайтах: PSD Freebies, CSS Author, Mockup world.
• Можно использовать специальные сервисы: Device Shots, MockupsJar и ShotSnapp и создать свой макет прямо в браузере, используя готовые детали и элементы.
• Photoshop — основная программа для работы с мокапами. Чтобы изменить готовый макет, не нужно специальное образование.
• Найти подходящий макет бывает сложно и иногда нужно показывать проект в реальных условиях, поэтому лучше научиться создавать макеты самостоятельно.