Что такое мокапы и зачем они дизайнеру

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

Мокап (mockup) — это специальный макет, изображение реального предмета, на которое накладывается элемент дизайна: логотип, обложка, скриншот и прочее. Мокапы позволяют сразу увидеть, как объект будет выглядеть в реальности.

Например, дизайн сайта на экране ноутбука, логотип на фирменной сувенирной продукции и тому подобное.

С технической точки зрения, мокап — это обычно PSD-файл со слоями и редактируемыми смарт-объектами. С такими файлами можно удобно работать в Photoshop, размещая элементы собственного дизайна буквально в несколько кликов. Хотя есть и более простые мокапы — обычные jpeg-изображения, на которые накладываются дизайнерские элементы.

Для чего нужны мокапы?

Mockup — это незаменимый инструмент для дизайнеров, художников, фотографов и других специалистов, работающих с визуальным контентом. Они позволяют демонстрировать свои наработки не в «вакууме», а в связке с предметами, для которых они разрабатываются.

Лучше всего продемонстрировать это на реальных примерах. Для начала взгляните на такой вариант визуализации дизайна веб-сайта:

В целом все понятно, каждый элемент заметен и находится на своем месте. Но дает ли такая подача понимание, как этот сайт будет выглядеть в реальности? Да еще и на разных устройствах? Нет!

А теперь посмотрите на вариант презентации с мокапами:

Совсем другое дело, не так ли? Сразу видно, сколько контента поместится на экране того или иного устройства и как сайт будет выглядеть в реальности. Да и с эстетической точки зрения вариант с мокапами выигрывает.

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

Путаница в терминологии

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

• Мокап (мок ап, mockup) — это неработающая модель, исключительно визуализация. Это пока еще не дизайн, так как дизайном она станет при появлении интерактивности. Да, мокапы тоже могут быть интерактивными и динамичными, но это тема для отдельного разговора.
• Sketch — первоначальный набросок, сделанный, как правило, от руки.
• Wireframe — схема или чертеж, своего рода «скелет» страницы веб-сайта, приложения и т. д. В нем нет как такового дизайна, только примерные размеры заголовков, изображений, баннеров, текстовых блоков и прочих элементов.
• Prototype — модель тестирования концепции или процесса. В некоторых случаях уже содержит изображения, цвето-тональные градации и прочие элементы дизайна.
• Simulation — симуляции, используемые при разработке дизайна сайтов и приложений. Они позволяют изображать страницы максимально близко к их финишному виду. Здесь уже работают выпадающие списки, анимации, навигация и прочее.

Существует очень мало проектов, где используются все эти стадии разработки и демонстрации наработок. Но вот мокапы применяются практически повсеместно. Потому что это, во-первых, недорого. Во-вторых, быстро. А в-третьих, наглядно.

Где брать мокапы для своих проектов?

Наиболее «творческий» способ — создать самостоятельно. Например, в трехмерном редакторе или просто сфотографировав нужный объект. Но оба способа связаны со сложностями. Далеко не все умеют и хотят работать в 3D-редакторах. Да и с фото тоже не все просто — нужно продумать композицию, расставить свет, сделать массу кадров, «почистить» удачные снимки от различных дефектов, подготовить PSD-файл, разбить его на слои и смарт-объекты. Хотите ли вы этим заниматься? Ответ очевиден.

Существует просто масса ресурсов с бесплатными (и платными) мокапами, а также онлайн-инструментов для работы с ними. Вот лишь некоторые из них:

• Smartmockups — удобная платформа для быстрого создания мокапов прямо в браузере. Разработчики называют Smartmockups самым быстрым подобным веб-сервисом, для работы с которым не требуются специальные навыки и опыт. Плюс здесь большая база профессиональных мокапов для скачивания.

• Mockuuups Studio — приложение для создания мокапов, которое работает в Windows, MacOS и Linux. В библиотеке более 700 самых разных мокапов. В первую очередь это мокапы различной техники.

• Artboard Studio — площадка для работы с мокапами и макетами продуктов непосредственно в браузере. В библиотеке насчитывается около 1300 готовых мокапов, и количество постоянно растет.

• Device Shots — довольно простой и удобный веб-сервис для быстрого создания макетов устройств со снимками веб-сайта или мобильного приложения.

• Rotato — популярная программа для подготовки анимированных мокапов под MacOS. Версий для Windows и Linux, к сожалению, нет.

Также достойны внимания площадки: Veed, Screenly, MockJar, MockDrop, MagicMockups и другие. Их десятки, если не сотни. И очень многие — совершенно бесплатные. Так что необходимости создавать собственные мокапы в большинстве случаев просто нет. Можно использовать готовые решения, сэкономив время и нервы.

Могут ли возникнуть трудности при работе с мокапами?

Безусловно, без трудностей не обходится. В особенности при поиске подходящих мокапов. Если речь идет об изображениях мониторов, смартфонов или планшетов — никаких хлопот. Их масса! Но вот с различными кружками, значками, кепками, фартуками, бутылками и тому подобным сложнее. Подходящие вам и вашему клиенту изображения придется еще поискать. А использовать первые попавшиеся — не выход, потому что итоговый вариант может сильно отличаться от показанного вами. Клиент вряд ли окажется доволен.

Что делать, если мокап вам все-таки не подходит?

1. Взять за основу фотографии, предоставленные заказчиком — униформа, сувениры, упаковка и прочее.
2. Если проект недорогой и фотографическая точность не в приоритете, используйте те мокапы, которые подходят больше всего, пусть и не на 100%.
3. Создавайте мокапы с нуля. Это рационально только для дорогих заказов, где подобная потеря времени будет оправданной и компенсируется хорошей оплатой.

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

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

Базовое руководство по работе с PSD-мокапами в Photoshop

В работе с PSD-мокапами нет ничего сложного. Для примера возьмем такой мокап макбука:

Далее действуем по простой схеме:

1. Открываем скачанный файл в Photoshop, смотрим на панель слоев и смарт-объектов в правом нижнем углу: Нас интересует слой с подписью «PUT YOUR SCREEN HERE» (может отличаться). Во многих мокапах он так и прописывается, чтобы вы сразу увидели, куда нужно вставлять свой макет. Кстати, если нажать на изображение глаза слева от этого слоя, картинка на экране ноутбука исчезнет. 
2. Дважды кликаем на пиктограмму слоя с изображением, которое мы будем менять на свое. Обратите внимание: не на название, а именно на пиктограмму. Возможно, в этот момент Photoshop выдаст окно с сообщением об отсутствии встроенного профиля. Здесь можно ничего не менять, а просто нажать «Ок». Сразу после этого в окне программы появится только изображение из ноутбука, а на панели слоев изменятся пункты.
3. Теперь нам остается только взять нужное нам изображение (наш дизайн) из папки на компьютере и перетащить в окно Photoshop. Прямо поверх существующей картинки. Как видите, наше изображение не перекрывает нижний слой полностью. Можно просто зажать левую кнопку мыши на любой из точек по периметру и потянуть в сторону, чтобы растянуть до нужных размеров. В старых версиях Photoshop, чтобы картинка сохраняла пропорции, нужно зажать Shift.
4. Если выделение пропало, нажмите CTRL+T (или CMD+T в MacOS), чтобы оно появилось снова. Ненужный нам слой с исходным изображением в мокапе можно удалить. Кликните на него на панели слоев и нажмите Delete.
5. После вставки, подгонки размера и удаления предыдущего слоя получаем такой результат:
6. Последний шаг. Нажимаем CTRL+S (или CMD+S), чтобы сохранить изменения и переходим во вкладку с нашим мокапом. Она должна быть первой в списке. И вот мы видим, что исходное изображение сменилось на наше, а сам мокап остался без изменений.
7. Далее остается только выбрать в окне программы Photoshop меню «Файл — Сохранить как…», указать желаемый формат и сохранить изображение на компьютер. Готово! Достаточно пару раз поработать с подобными мокапами, и эта процедура будет занимать у вас буквально секунды. Зато разница между просто дизайном в вакууме и на мокапе очевидна.

FAQ

Mockup: что это?

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

Можно ли обойтись без мокапов дизайнеру?

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

Мокапы — это обычно экраны телефонов, планшетов и ноутбуков?

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

Правда, что чем красочнее мокап, тем лучше?

Нет! Главная задача мокапа — не сделать ваш дизайн красивее, а дать аудитории четкое понимание, как объект будет выглядеть в реальности. Реалистичность мокапа обычно важнее его красоты. Поэтому, к примеру, лучше сфотографировать билборд на улице своего города и использовать его как мокап, чем найти макет такого же борда на фоне небоскребов Нью-Йорка. Не жертвуйте реалистичностью в угоду красоте.

Что будет, если использовать чужие мокапы без разрешения автора?

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