Mock-up в работе с клиентами

web_design
Аудио дорожка
6590

Mock-up — это, как правило, многослойные изображения в формате PSD, в которые легко интегрируется дизайн фирменного стиля. Если говорить простыми словами, то это «заготовка», которую можно наполнять любым графическим контентом, корректировать его, вносить правки и прочее, не меняя саму «заготовку». 

mockup-gratis-papeleria-corporativa-branding-01

Напомним, что у нас уже есть исчерпывающая статья «Что такое мокапы и зачем они дизайнеру». Рекомендуем ознакомиться! Сегодня же мы поговорим немного о другом — как использовать мокапы в работе с клиентами и почему это нужно делать.

Почему мокапы лучше обычных макетов при демонстрации дизайна клиенту

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

1. Логотип Starbucks «как есть»:

190424_9816

2. Мокап стаканчика с логотипом Starbucks:

b8aatv9a-900

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

Работа с мокапами дает сразу несколько важных преимуществ:

  1. Помогает лучше презентовать продукт и сформировать более корректное представление о нем.
  2. Сокращает количество правок, так как клиент сразу видит, как дизайн будет выглядеть на продукте и нужны ли какие-либо доработки.
  3. Существенно экономит бюджет, так как не нужно печатать пробные баннеры, визитки, вывески и прочее.

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

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

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

Вот лишь несколько сайтов с бесплатными мокапами:

Если нужный вам мокап найти не удалось (а это почти исключено), задача усложняется: нужно будет искать подходящее изображение, фотографировать объект или даже создавать его в редакторе, «разбивать» на слои, настраивать смарт-объекты и многое другое. Процесс весьма трудоемкий, поэтому мы и рекомендуем использовать готовые мокапы — все уже сделано за вас.

Как использовать мокапы в Photoshop

В работе с готовыми мокапами нет особых сложностей. По сути процесс состоит из трех этапов:

1. Скачиваем мокап в формате PSD и открываем его в Photoshop. На панели слоев нужно найти слой с названием «Your design here», «Ваш дизайн» или нечто подобное.

Как использовать мокапы в Photoshop

2. Два раза кликаем на иконке смарт-слоя — в Фотошопе открывается новое окно с пустым фоном, куда нужно перенести ваш дизайн: логотип, фото, макет сайта и т. д.

Как использовать мокапы

3. Закрываем окно и нажимаем «Да», когда появится окно с предложением сохранить изменения.

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

Все готово! Ваше изображение добавлено на мокап. Более того, если это предусмотрено, оно автоматически меняет пропорции, перспективу и другие параметры, заданные самим мокапом. Очень удобно!

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

Как использовать мокапы в Фигме

Figma — удобный инструмент для дизайнера, но в плане работы с мокапами конкурировать с Photoshop пока не может. В каталоге онлайн-редактора есть наборы мокапов, которые можно устанавливать в виде плагинов. Их сравнительно немного, но базовые мокапы в наличии — можете использовать.

Гораздо больше возможностей предоставляет плагин Artboard Studio Mockups. В нем огромное количество мокапов — от классических смартфонов, планшетов и ноутбуков до цветочных горшков, тюбиков с кремом и спортивных снарядов. В блоге Figma есть небольшая статья и видео по работе с Artboard Studio Mockups. Здесь описаны базовые возможности и функционал инструмента.

mokapy-dlya-figma-18-1024x582

Как прокачать навык работы с мокапами всего за 45 минут

Специально для всех, кто уже работает с мокапами или только планирует начать, мы создали онлайн-интенсив «Используй Мокапы». И вам стоит его посетить!

Курс "Используй мокапы"

Используй мокапы

Хочешь получить обучение от Дианы Смеликовой?

На интенсиве:

  • Поговорим о том, как использовать мокапы в работе и красиво презентовать информацию клиенту.
  • От вас нужен установленный Photoshop (будем работать в нем и ссылки на загрузку фотошопа прикрепим)

Почему это круто?

  1. Максимум новых знаний и практики всего за 45 минут.
  2. Вы сами выбираете удобное время интенсива.
  3. Цена — всего $12.99.

А тех, кто хочет с нуля освоить профессию веб-дизайнера, приглашаем на авторский офлайн-курс Wezom Академии «Graphic Design». Станьте востребованным digital-специалистом, изучите функции и возможности самых актуальных инструментов дизайнера: Photoshop, Adobe Illustrator, Adobe After Effect, научитесь работать со смарт-объектами и многое другое. Минимум теории, максимум практики и фидбек!