Mock-up в работе с клиентами
Mock-up — это, как правило, многослойные изображения в формате PSD, в которые легко интегрируется дизайн фирменного стиля. Если говорить простыми словами, то это «заготовка», которую можно наполнять любым графическим контентом, корректировать его, вносить правки и прочее, не меняя саму «заготовку».
Напомним, что у нас уже есть исчерпывающая статья «Что такое мокапы и зачем они дизайнеру». Рекомендуем ознакомиться! Сегодня же мы поговорим немного о другом — как использовать мокапы в работе с клиентами и почему это нужно делать.
Почему мокапы лучше обычных макетов при демонстрации дизайна клиенту
Макет — это, если так можно выразиться, изображение, оторванное от внешнего мира. Оно существует в некоем вакууме и не дает корректного представления, как будет выглядеть в реальности. Например, как смотрится сайт на экране планшета или как выглядит логотип компании на календаре. Для наглядности посмотрим на два варианта подачи одного и того же логотипа:
1. Логотип Starbucks «как есть»:
2. Мокап стаканчика с логотипом Starbucks:
Разница в восприятии очевидна. В первом примере мы видим просто изображение без контекста, во втором — наглядно с демонстрацией его вида на реальном объекте. В данном случае на стаканчике кофе.
Работа с мокапами дает сразу несколько важных преимуществ:
- Помогает лучше презентовать продукт и сформировать более корректное представление о нем.
- Сокращает количество правок, так как клиент сразу видит, как дизайн будет выглядеть на продукте и нужны ли какие-либо доработки.
- Существенно экономит бюджет, так как не нужно печатать пробные баннеры, визитки, вывески и прочее.
Мокапы в своей работе используют не только веб-дизайнеры, но и специалисты других профилей. Например, архитекторы, строители, дизайнеры интерьеров и так далее.
Как сделать мокап в Фотошопе
Наш главный совет: перед тем, как сделать mockup с нуля, убедитесь, что вам действительно это необходимо. Скорее всего, нужный вам мокап уже давно есть в Сети, он совершенно бесплатный и доступен к скачиванию.
Вот лишь несколько сайтов с бесплатными мокапами:
Если нужный вам мокап найти не удалось (а это почти исключено), задача усложняется: нужно будет искать подходящее изображение, фотографировать объект или даже создавать его в редакторе, «разбивать» на слои, настраивать смарт-объекты и многое другое. Процесс весьма трудоемкий, поэтому мы и рекомендуем использовать готовые мокапы — все уже сделано за вас.
Как использовать мокапы в Photoshop
В работе с готовыми мокапами нет особых сложностей. По сути процесс состоит из трех этапов:
1. Скачиваем мокап в формате PSD и открываем его в Photoshop. На панели слоев нужно найти слой с названием «Your design here», «Ваш дизайн» или нечто подобное.
2. Два раза кликаем на иконке смарт-слоя — в Фотошопе открывается новое окно с пустым фоном, куда нужно перенести ваш дизайн: логотип, фото, макет сайта и т. д.
3. Закрываем окно и нажимаем «Да», когда появится окно с предложением сохранить изменения.
Все готово! Ваше изображение добавлено на мокап. Более того, если это предусмотрено, оно автоматически меняет пропорции, перспективу и другие параметры, заданные самим мокапом. Очень удобно!
Естественно, вы можете в любой момент вновь открыть смарт-слой, отредактировать его, заменить изображение и т. д. Мокап обновится сразу после сохранения.
Как использовать мокапы в Фигме
Figma — удобный инструмент для дизайнера, но в плане работы с мокапами конкурировать с Photoshop пока не может. В каталоге онлайн-редактора есть наборы мокапов, которые можно устанавливать в виде плагинов. Их сравнительно немного, но базовые мокапы в наличии — можете использовать.
Гораздо больше возможностей предоставляет плагин Artboard Studio Mockups. В нем огромное количество мокапов — от классических смартфонов, планшетов и ноутбуков до цветочных горшков, тюбиков с кремом и спортивных снарядов. В блоге Figma есть небольшая статья и видео по работе с Artboard Studio Mockups. Здесь описаны базовые возможности и функционал инструмента.
Как прокачать навык работы с мокапами всего за 45 минут
Специально для всех, кто уже работает с мокапами или только планирует начать, мы создали онлайн-интенсив «Используй Мокапы». И вам стоит его посетить!
Почему это круто?
- Максимум новых знаний и практики всего за 45 минут.
- Вы сами выбираете удобное время интенсива.
- Цена — всего $12.99.
А тех, кто хочет с нуля освоить профессию веб-дизайнера, приглашаем на авторский офлайн-курс Wezom Академии «Graphic Design». Станьте востребованным digital-специалистом, изучите функции и возможности самых актуальных инструментов дизайнера: Photoshop, Adobe Illustrator, Adobe After Effect, научитесь работать со смарт-объектами и многое другое. Минимум теории, максимум практики и фидбек!
