Главная » Adobe Photoshop, Веб-дизайн, Графика и анимация » Мокап или как презентовать проект заказчику

Мокап или как презентовать проект заказчику

Мокап или как презентовать проект заказчикуКак лучше презентовать свой проект заказчику? Будь то дизайн мобильного приложения, сайта или фирменного стиля. Конечно, вы можете просто показать свои макеты, выполненные в Photoshop или другом редакторе заказчику, но при этом есть большая вероятность сходу получить правки. Их количество можно минимизировать, если вы предоставите не просто макеты проекта, а используете мокап (Mock-up). Об этом поподробнее.

Что такое Мокап (Mock-up)

Мокап (Mock-up) – это подготовленный в графическом редакторе файл, где макет вашего проекта нанесен на реальные предметы, например, на монитор компьютера или смартфона если речь идет о сайте. Таким образом, заказчик может сразу представить, как будет выглядеть проект в реальной жизни, и насколько удобен будет пользовательский интерфейс на всех устройствах. Элементы фирменного стиля можно нанести на изображение визитки, ручки, кружки, футболки. Вариантов много.

Мокап или как презентовать проект заказчикуПример мокапа для презентации сайта

Бесплатные исхоники мокапов

Сделать мокап (mock-up) можно самому, например, в Photoshop, используя бесплатные для коммерческих целей  изображения или воспользоваться специализированными сервисами. Такими как:

  • mockuuups.studio  — сервис с огромной базой мокапов, подробнее о котором я пишу ниже
  • freemockup.ru — удобный русскоязычный ресурс со ссылками на источники готовых мокапов — PSD  исходников с удобной организацией слоев.
  • mockupworld.co — англоязычный сайт с мокапами разной тематики, разбитыми по категориям.
  • freepik.com — сток, где так же расположены ссылки на ресурсы с бесплатными PSD исходниками. Есть как бесплатные, так и платные варианты.

Если вы знаете еще полезные ресурсы, где можно найти бесплатные исходники мокапов — оставляйте ссылки в комментариях.

Мокап в web-дизайне. Примеры

В настоящее время существуют инструменты, с помощью которых дизайнер может подготовить прототип сайта или мобильного приложения с демонстрацией вариантов пользовательского опыта. Это можно сделать в Figma или Sketch.

ЧИТАЙТЕ ТАКЖЕ
анимация для сайтаАнимация для сайта. Узнайте, с помощью каких инструментов и программ можно сделать анимированный прототип сайта.

Но тем не менее статичные мокапы не утратили своей актуальности.

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

Рассмотрим, как с помощью ресурса mockuuups.studio можно сделать презентацию своего проекта.

В данном случае нужно будет установить приложение на компьютер для MacOs или Windows. У меня Windows, поэтому я выбрала соответствующую опцию.

Мокап или как презентовать проект заказчику

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

Мокап или как презентовать проект заказчику

Правда большинство картинок будет закрыто замками (то есть для их использования нужно заплатить 9$  в месяц). Но есть бесплатный тестовый период на 7 дней. Для его открытия, щелкните по замочку около любой картинки и следуя инструкции, зарегистрируйте свой почтовый ящик. На него придет ссылка для открытия этого тестового периода. Перетаскивая картинку на панель в правом углу вы сможете увидеть, как она будет выглядеть на предоставленных шаблонах.

Мокап или как презентовать проект заказчику

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

Как будет выглядеть меню…

Мокап или как презентовать проект заказчику

Статья…

Мокап или как презентовать проект заказчику

Картинка…

Мокап или как презентовать проект заказчику

Теже самые элементы на других устройствах…

Мокап или как презентовать проект заказчику

Мокап или как презентовать проект заказчику

Мокап или как презентовать проект заказчику

Мокап или как презентовать проект заказчику

Реклама…

Мокап или как презентовать проект заказчику

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

Мокап в графическом дизайне. Примеры

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

Например, я выбрала вот такой вариант с кепкой.

мокап или как презентовать проект заказчику

Скачала бесплатный исходник с мокапом. Открыла его в Photoshop. В панели слоев там уже была открыта папка со смарт слоями, которые можно редактировать. Это слой с логотипом и 2 слоя с текстурой кепки и ее козырька.

мокап или как презентовать проект заказчику

Щелкнула по слою с логотипом — открылся новый документ в Photoshop.

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

мокап с кепкой

Или вот такой пример с кружкой.

мокап с кружкой

Такая презентация проекта поможет вам произвести наиболее приятное впечатление на заказчика и минимизировать правки с его стороны.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна

(Visited 1 611 times, 1 visits today)

3 комментарии на “Мокап или как презентовать проект заказчику

    1. Как заявляет разработчик, программа для версий позднее windows7, значит должно работать. У меня windows 7, поэтому ничего не могу сказать. Обратитесь в службу поддержки (на английском, гугл переводчик вам в помощь). Они охотно отвечают.

Добавить комментарий

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