Как использовать мокапы: 3 простых шага
С постоянно растущей тенденцией к электронной торговле и цифровому брендингу важно, чтобы дизайнеры имели уникальный, реалистичный набор мокапов в своем арсенале. Реалистичный шаблон макета может помочь вам обойти конкуренцию. Проще говоря, правильный мокап может помочь клиенту визуализировать то, как будет выглядеть конечный продукт с большей ясностью. В этой статье мы рассмотрим, как использовать файлы PSD с помощью Смарт-слоев в 3 простых шага.
Шаг №1: Поиск и загрузка
Вы можете найти множество файлов мокапов PSD для работы на сайте Mockupdownload. Сначала важно познакомиться с структурой папок шаблона профессионального макета. Когда вы загружаете мокап PSD, он обычно сохраняется как заархивированный файл. После того как вы извлечете его содержимое, внимательно ознакомьтесь с тем, что включено внутри. В идеале там должными присутствовать следующими файлами:
Шаг №2: Открыть и найти смарт-объект
В Photoshop Smart Objects представляют собой слои, которые несут данные изображения из растровых или векторных изображений. Они сохраняют содержимое изображения, что позволяет выполнять редактирование слоя. Слой, содержащий смарт- объект, имеет конкретный значок над ним, который выглядит примерно как квадратик внизу картинки.
Шаг №3: Поместите свой контент
Последний шаг заключается в замене содержимого макета шаблона на собственный пользовательский контент. Для этого просто нажмите значок Smart Object на этом слое. Это откроет новое окно Photoshop, в котором будут отображаться только те изображения, которые вы собираетесь заменить.
Просто замените на желаемое изображение содержимое, которое вы только что открыли. Нажмите кнопку сохранить, как только вы закончите. Теперь вернитесь к исходному файлу PSD, и там все изменится автоматически.
Использование макетов шаблонов довольно просто. Все, что вам нужно сделать, это выполнить эти три основных шага, и ваша работа будет выполнена.
Что такое мокапы, и какую пользу они могут принести при разработке интерфейсов
Создание интерфейса — сложная и трудоёмкая задача, состоящая из множества этапов. На каждом шаге дизайнер может использовать инструменты, ускоряющие процесс разработки макета. Клиенты быстрее получают графическое воплощение своих продуктов, а у дизайнеров остаётся больше времени на креатив.
В статье поговорим о мокапах. Разберёмся, как правильно их использовать, и в каких случаях шаблоны оказываются бесполезными.
Что такое мокапы
Мокапы — готовые графические шаблоны разных объектов, которые используются для демонстрации внешнего вида будущего продукта. Например, дизайнер может загрузить мокап бейджиков, чтобы наложить визуальный стиль компании. Клиент увидит, как будет выглядеть карточка сотрудника, а дизайнеру не надо отрисовывать его с нуля.
В большинстве случаев мокапы распространяются в формате psd для графического редактора Photoshop. Исходные файлы состоят из слоёв, поэтому при необходимости можно легко внести изменения в готовые объекты. Некоторые дизайнеры считают шаблоны настоящим спасением, а другие напрочь от них отказываются.
Новички часто путают скетчи, вайрфреймы, мокапы и прототипы. Чтобы разрешить все споры, кратко расскажем про каждый инструмент. Скетч — набросок от руки, который очень далёк от реального продукта. Wireframe — схема проекта, отражающая только визуальный «скелет» без иллюстраций и декоративных элементов. Прототип — рабочая модель, которая уже походит на конечный продукт. И наконец мокап — графическая «оболочка», похожая на проект исключительно внешним видом.
Mockup не показывает продукт в динамике, он отражает только визуальную составляющую. Например, мокап Tesla покажет внешнюю красоту, но ничего не расскажет о внутреннем устройстве автомобиля. При желании можно сделать шаблон интерактивным, но такие задачи приходится решать крайне редко.
Каждый инструмент содержит в себе часть продукта, но в разных пропорциях. Скетч подходит для презентации заказчику, а вайрфрейм или прототип можно показать всем членам команды. Скетч помогает быстро передать идею от дизайнера к другим участникам процесса, а вайрфрейм рассказывает о деталях будущего проекта.
Мокап — вайрфрейм в красивой обёртке. Вместо чёрно-белых линий и скучных схем появляются иллюстрации и цвета. Инструмент часто сравнивают с макетом, но эти формы представления отличаются. У каждого формата свои особенности и преимущества, поэтому очень важно не путаться в них и подбирать правильные решения под конкретную задачу
В списке инструментов проектирования не хватает главного компонента, который находится на первом месте. Это прототип, самый точный набросок будущего проекта. Если вайрфрейм отражает визуальный ряд, прототип концентрируется на динамике. Пользователи могут проверить, как работает меню или другие компоненты. Модель из бумаги превращается в физический объект, обладающий уникальными свойствами.
Недостаточно просто знать инструменты прототипирования, надо правильно их использовать и уметь выбирать идеальные решения. Если стоит задача презентовать идею — выбираем скетч, когда есть время на раскрытие деталей — вайрфрейм. Если важна точность и композиция — на помощь приходит мокап. Дизайнеру необязательно в совершенстве знать особенности каждого инструмента. В большинстве случаев приложения и сайты превращаются в готовые продукты из вайрфреймов и макетов в Photoshop.
Особенности мокапов
Хороший mockup — высокоточный прототип продукта, который должен получиться в результате. Он создаёт устойчивый визуальный образ и раскрывает все стороны интерфейса. Участники команды заказчика могут не просто увидеть набросок на бумаге или чёрно-белый вайрфрейм без деталей, а по-настоящему погрузиться в разработку.
Мокапы — не панацея, они подходят для определённых задач, о которых мы поговорим в следующем разделе статьи. Благодаря визуальной точности готовые шаблоны идеально подходят для презентации цифровых продуктов. Их главная задача — собрать обратную связь и защитить дизайнера от бесконечных доработок.
Предположим, что клиент попросил разработать дизайн курьерского приложения под iOS и чётко обозначил сроки. Исполнитель сначала делает вайрфрейм, утверждает базовую структуру, а только потом переходит к разработке макета. Когда наступает время презентовать будущий проект, он вспоминает о мокапах и готовит презентацию с несколькими слайдами.
Дизайнер загружает мокап разных моделей iPhone и показывает, как будет выглядеть приложение в реальности. Заказчик быстро находит критичные недочёты, а дизайнер понимает, над чем ещё надо поработать. Готовые шаблоны экономят время всех участников рабочего процесса.
Одно из главных преимуществ мокапа — высокая точность. В примере выше мы видим не просто визуальную часть iPhone 11, но и особенности, которые проявляются в динамике. При разработке приложения для мобильных устройств нельзя просто наложить картинку на виртуальный смартфон.
Такой подход работает исключительно для презентации. На реальном устройстве картинка может сильно отличаться. Учитывать особенности устройства должен не только программист, который превращает графический проект в реальный продукт. Дизайнеру тоже надо погрузиться в цифровую среду, чтобы почувствовать себя частью целевой аудитории.
Если у дизайнера никогда не было iPhone, надо обязательно получить практический опыт использования. Попросить у друга или сходить в ближайший магазин электроники. Ответственность дизайнера не заканчивается картинкой на экране. Именно он превращает идею в цифровой инструмент, который будет приносить пользу людям.
Мокапы отлично помогают в рабочих процессах, поэтому не стоит их избегать. Готовые шаблоны гибкие, как пластилин. Можно использовать готовый образец, отредактировать его под свои задачи и сэкономить время для творчества.
Какие задачи можно решать с помощью мокапов
Мы уже выяснили, что мокапы подходят для презентации продукта и максимального погружения в его атмосферу. У дизайнеров и заказчиков часто возникают разногласия в процессе создания макета, а готовые шаблоны будут максимально полезны в таких ситуациях. Клиенты смогут лучше представить, как будет выглядеть готовый продукт, а дизайнеры избавятся от цикла правок.
Важно понимать, что mockup тоже не идеален. Придётся потратить время, чтобы найти готовый шаблон под свои задачи, который сможет раскрыть характеристики digital-проекта. В интернете много сайтов с библиотеками мокапов, но точно придётся перебрать несколько готовых вариантов, чтобы найти подходящее решение.
Сделать быструю презентацию
Для этой задачи мокапы подходят лучше всего. Скетчи и вайрфреймы отдалённо отражают суть продукта, а шаблоны вплотную приближаются к решению задачи. Это как смотреть фильм на большом экране телевизора. Сначала возникает эйфория от нового чуда техники, но очень быстро эффект пропадает. Особенно, когда под рукой появляются очки дополненной реальности.
Так вот мокапы — это VR-очки, позволяющие в деталях рассмотреть проект, который должен получиться после завершения разработки. Они созданы для быстрой презентации, но подходят не для всех задач. В некоторых случаях лучше обойтись без готовых шаблонов и сосредоточиться на быстром прототипировании или полноценном макете.
Мокапы часто используют логомейкеры. С их помощью они показывают, как будет выглядеть новый лого на разных корпоративных атрибутах. Достаточно один раз скачать набор стандартных элементов и можно использовать его на постоянной основе. Клиенты смогут быстро выбрать подходящий вариант фирменного знака благодаря тому, что увидят, как концепты отображаются на разных носителях.
Наполнить UI
Скетчи и вайрфреймы подходят в качестве базовых инструментов прототипирования, но они перестают быть актуальными на более поздних стадиях разработки. Мокапы можно использовать для быстрого расширения визуальной композиции. Например, добавить изображения телевизоров в интернет-магазин электроники или вставить монитор в макет сервиса для управления личными финансами.
При использовании готовых шаблонов отталкивайтесь от особенностей проекта. Их должно быть ровно столько, сколько понадобится для создания визуального ряда. Не вставляйте картинки для красоты.
Для создания максимально реалистичной атмосферы внутри макета, выделите главные особенности будущего продукта и используйте их для поиска подходящих объектов. В примере ниже дизайнер показывает, как из смартфона появляется чек. Шаблон отлично подходит под целевое действие. Видно, что на телефоне отображается форма заказа. Чек плавно перемещается из виртуального мира в реальный и падает в руку.
Получить обратную связь
На каждом этапе разработки цифрового продукта важна связь и идеально выстроенные коммуникации между заказчиком и графическим дизайнером. Можно использовать мокапы для ускоренного создания образа проекта и презентации. Представители клиента внесут корректировки, а специалист по графике быстрее доработает проект.
Аналогичный подход можно использовать и для тестирования на фокус-группах. Показывать целевой аудитории скетч или вайрфрейм нет смысла, так как они сильно отличаются от решения, которое появится после завершения разработки. Мокапы очень близки к реальному продукту, поэтому они идеально подходят для сбора фидбека.
Лучше заранее предупредить всех участников разработки, как будет строиться рабочий процесс, чтобы при обсуждении деталей и внесения корректировок не возникло недоразумений. Некоторые дизайнеры сильно увлекаются мокапами и забывают о том, что цифровой продукт выходит за рамки готовых шаблонов. У него есть уникальные особенности, которые надо ставить на первое место и проектировать интерфейс на основе этих атрибутов.
Найти критичные недочёты
До появления продукта в открытом доступе надо исправить все ошибки. Особенно те, которые сильно влияют на пользовательский опыт. В условиях высокой конкуренции нельзя давать целевой аудитории лишний повод усомниться в надёжности компании. Сайт или приложение отражают подход бизнеса к выстраиванию взаимоотношений с клиентами. Если интерфейс будет неудобным или непродуманным, люди будут ассоциировать негативный опыт с компанией.
Мокапы помогут обнаружить недостатки, которые не видны при проектировании интерфейса без учёта особенностей системы, под которую он будет адаптирован. У мобильных операционных систем свои нюансы, а в десктопных интерфейсах больше пространства для творчества.
Устранение недочётов на этапе проектирования поможет сохранить деньги, нервы и репутации компании. Часто случается так, что после выхода приложения в открытый доступ приходится экстренно выпускать корректирующие обновления. Этого можно избежать в том числе и с помощью мокапов, как инструмента создания прототипов повышенной точности.
Как использовать мокапы
Как и в любой сфере, в дизайне интерфейсов важно называть вещи своими именами. Мокапы — шаблоны объектов, которые находятся в открытом доступе. Это файлы со слоями, которые можно использовать в Photoshop или других графических редакторах. Готовые концепты интерфейсов, созданные на основе вайрфреймов — это тоже мокапы.
Если речь идёт о работе с шаблонами в формате графических программ, то надо просто загрузить подходящий файл, открыть его в редакторе и вставить в свой макет. Или предварительно открыть в новом окне, внести изменения и только потом добавлять в рабочую область.
Самый распространённый вариант использования мокапов — создание корпоративной атрибутики. У любой компании периодически возникает необходимость обновить фирменный стиль, а вместе с ней и визитки, конверты, бейджики и другие носители. Напечатать новый логотип на упаковке или вывеске стоит дорого. На помощь приходят мокапы, которые позволяют создать детализированный образ поверхности с быстрой интеграцией визуальных элементов.
При разработке айдентики важно правильно выбрать мокапы. Нельзя взять первые готовые шаблоны из интернета. Надо подобрать носители, которые совпадают с реальными носителями. Например, если компания сначала заказывает логотип, а только потом визитки, надо понять, как будет отображаться фирменный знак на чёрном или сером фоне.
Некоторые графические дизайнеры используют для разработки интерфейсов нестандартную схему. На первом шаге они делают каркас или вайрфрейм, затем переходят к мокапу и передают его разработчику. В данном случае под мокапом подразумевается готовый шаблон, который уже можно переносить в вёрстку. Сторонники этого подхода утверждают, что прототипы можно легко исключить из цикла разработки. Якобы они отнимают много времени, а без них проектирование ускорится в несколько раз.
Пропускать этап создания прототипов можно, но только если речь идёт о маленьком проекте. Например, создании приложения с одной формой. Пользователь загружает приложение, устанавливает, заполняет несколько полей и отправляет заявку на обработку. Тогда есть смысл не тратить время на прототип, а переходить от детализированного шаблона к разработке. Схема будет работать, только если дизайнер до конца понял задачу, а представители клиента смогли рассказать о важных особенностях.
Зарубежные компании часто используют альтернативный подход. Сначала собирается каркас, затем прототип низкой точности, после него детализированный мокап и в конце снова прототип. В этой схеме главная цель использования мокапов — показать визуальные эффекты продукта. Первый прототип создаётся для базового понимания возможностей, которые будут заложены в проекте. Последний — отражает идею в динамике и создается после тщательного юзабилити-тестирования.
Проблемы мокапов
Дизайнеры, которые часто работают с готовыми шаблонами, знают, что найти идеальный вариант очень сложно. Нужен образец, максимально похожий на носители, с которыми планируют работать заказчики. Упаковки или сувениры часто бывают нестандартными, поэтому стоит заранее приготовиться к длительным поискам.
В некоторых случаях проще отрисовать объекты самостоятельно. Это актуально только если у дизайнера есть соответствующие навыки. Тем, кто создаёт интерфейсы в Фигме, будет непросто создать с нуля дизайн смартфона или бейджика. Лучше потратить время на поиск подходящего шаблона и воспользоваться его преимуществами для презентации.
Проблема выбора мокапов не такая незначительная, как может показаться. Внешний вид визитки и шаблона на экране может быть одинаковым, но из-за разницы форматов окажется, что реальный носитель сильно отличается от утверждённого концепта.
При использовании цифровых носителей важна точность, поэтому некоторые дизайнеры берут фотографии сувениров или упаковок заказчика, обрабатывают их в графических редакторах и показывают результат, максимально приближённый к реальности.
Мокапы — максимально полезное изобретение дизайнеров, которое можно использовать для решения разных задач. В интернете большое количество готовых объектов с бесплатными исходниками в разных форматах. Достаточно ввести ключевой запрос, проверить источник на надёжность и отредактировать файл при необходимости.
Веб-студия IDBI разработает цифровое воплощение любых идей. Свяжитесь с нами, чтобы обсудить детали проекта.
Что такое mockup (мокап psd). Кому и зачем они нужны?
Чтобы показать работу в более реалистичном виде используется psd mockup. Трехмерное изображение объекта позволяет заказчику оценить продукцию и при необходимости внести корректировки.
Что такое мокап (mock-up)?
Мокап – это макет, который дизайнеры используют для демонстрации своей работы. Таким способом заказчик может просмотреть визитную карточку, фотоальбом, логотип, фирменный стиль, гайдлайн, брендбук, наружную рекламу, дизайн сайта на экране компьютера или мобильных устройствах и т.д. Благодаря мокапу можно получить не просто плоскую фотографию, а реалистичное изображение.
Использование шаблона упрощает взаимодействие дизайнера и заказчика. Макеты часто используют при тестировании полиграфической продукции ещё на стадии разработки.
Mockup для фотошопа состоит из специально подготовленного файла в формате psd, на котором можно размещать свой дизайн.
Кому нужны мокапы для фотошопа?
Шаблоны активно используют фрилансеры, художники и дизайнеры, которые хотят презентовать свои работы клиентам в лучшем виде.
К примеру, пользователь нарисовал визитку и решил показать ее заказчику. Для демонстрации работы можно воспользоваться готовый шаблоном мокапа. Исполнителю нужно всего лишь скачать мокап бесплатно и перетащить на него готовую работу (собственный дизайн).
Шаблон мокапа создает эффект реальности и показывает визитку с более выгодной стороны. Фрилансеры активно используют мокапы при создании логотипов, фирменного стиля, полиграфической продукции. Необходимость использования готового шаблона мокапа возникает и при разработке сайта. Демонстрация веб-дизайна в реалистичном виде с помощью мокапа уменьшает количество доработок, которое может потребоваться для устранения недостатков.
Как использовать psd mockup
Вы скачиваете готовый шаблон мокапа в формате psd (например, вы можете найти необходимый мокап на нашем сайте).
После этого мокап нужно открыть в Photoshop и найти слой, содержащий смарт-объект. Чем он отличается от обычной картинки? Смарт-объект включает в себя контейнер, который позволяет работать с изображением без потери качества. Причина их использования заключается в том, что Photoshop искажает картинки.
Дизайнер может трансформировать, повернуть или переместить объект в нужное место. При этом исходные характеристики содержимого контейнера не изменятся.
Большинство шаблонов ориентировано на англоязычную аудиторию. В мокапах можно найти текстовый слой, который называется «You design here». Для внесения изменений достаточно кликнуть по нему 2 раза.
Перед дизайнером должно открыться новое окно, в которое нужно перетащить картинку с вашим дизайном. На завершающем этапе необходимо сохранить изменения в смарт-объекте и уже после сохранить общее изображение мокапа с вашим дизайном.
Что такое мокапы и зачем они дизайнеру
Задача современного дизайнера — не просто разработать оригинальный авторский дизайн, но также наглядно и эффектно его презентовать. Один из наиболее простых, но при этом действенных инструментов для этого — мокапы.
Мокап (mockup) — это специальный макет, изображение реального предмета, на которое накладывается элемент дизайна: логотип, обложка, скриншот и прочее. Мокапы позволяют сразу увидеть, как объект будет выглядеть в реальности.
Например, дизайн сайта на экране ноутбука, логотип на фирменной сувенирной продукции и тому подобное.
С технической точки зрения, мокап — это обычно PSD-файл со слоями и редактируемыми смарт-объектами. С такими файлами можно удобно работать в Photoshop, размещая элементы собственного дизайна буквально в несколько кликов. Хотя есть и более простые мокапы — обычные jpeg-изображения, на которые накладываются дизайнерские элементы.
Для чего нужны мокапы?
Mockup — это незаменимый инструмент для дизайнеров, художников, фотографов и других специалистов, работающих с визуальным контентом. Они позволяют демонстрировать свои наработки не в «вакууме», а в связке с предметами, для которых они разрабатываются.
Лучше всего продемонстрировать это на реальных примерах. Для начала взгляните на такой вариант визуализации дизайна веб-сайта:
В целом все понятно, каждый элемент заметен и находится на своем месте. Но дает ли такая подача понимание, как этот сайт будет выглядеть в реальности? Да еще и на разных устройствах? Нет!
А теперь посмотрите на вариант презентации с мокапами:
Совсем другое дело, не так ли? Сразу видно, сколько контента поместится на экране того или иного устройства и как сайт будет выглядеть в реальности. Да и с эстетической точки зрения вариант с мокапами выигрывает.
Мы хотим акцентировать ваше внимание, что мокапы — это не украшение, а практический инструмент. Он наглядно демонстрирует изображаемый объект в реальности — так, как его и увидит конечный потребитель в итоге. Будь то сайт, визитка, меню ресторана, приложение для смартфона или бутылка дорогого вина — что угодно.
Путаница в терминологии
Существует очень мало проектов, где используются все эти стадии разработки и демонстрации наработок. Но вот мокапы применяются практически повсеместно. Потому что это, во-первых, недорого. Во-вторых, быстро. А в-третьих, наглядно.
Где брать мокапы для своих проектов?
Наиболее «творческий» способ — создать самостоятельно. Например, в трехмерном редакторе или просто сфотографировав нужный объект. Но оба способа связаны со сложностями. Далеко не все умеют и хотят работать в 3D-редакторах. Да и с фото тоже не все просто — нужно продумать композицию, расставить свет, сделать массу кадров, «почистить» удачные снимки от различных дефектов, подготовить PSD-файл, разбить его на слои и смарт-объекты. Хотите ли вы этим заниматься? Ответ очевиден.
Существует просто масса ресурсов с бесплатными (и платными) мокапами, а также онлайн-инструментов для работы с ними. Вот лишь некоторые из них:
Также достойны внимания площадки: Veed, Screenly, MockJar, MockDrop, MagicMockups и другие. Их десятки, если не сотни. И очень многие — совершенно бесплатные. Так что необходимости создавать собственные мокапы в большинстве случаев просто нет. Можно использовать готовые решения, сэкономив время и нервы.
Могут ли возникнуть трудности при работе с мокапами?
Безусловно, без трудностей не обходится. В особенности при поиске подходящих мокапов. Если речь идет об изображениях мониторов, смартфонов или планшетов — никаких хлопот. Их масса! Но вот с различными кружками, значками, кепками, фартуками, бутылками и тому подобным сложнее. Подходящие вам и вашему клиенту изображения придется еще поискать. А использовать первые попавшиеся — не выход, потому что итоговый вариант может сильно отличаться от показанного вами. Клиент вряд ли окажется доволен.
Что делать, если мокап вам все-таки не подходит?
Поэтому убедительная рекомендация: скачивайте мокапы только на профильных ресурсах, где они действительно распространяются бесплатно и их использование не повлечет за собой неприятных последствий. Маловероятно, что вас в принципе привлекут к административной ответственности, но лишний раз рисковать не стоит.
Базовое руководство по работе с PSD-мокапами в Photoshop
В работе с PSD-мокапами нет ничего сложного. Для примера возьмем такой мокап макбука:
Далее действуем по простой схеме:
Mockup: что это?
Это макет, изображение реального предмета, на который накладывается дизайн: логотип, обложка, скриншот, прочее.
Можно ли обойтись без мокапов дизайнеру?
Можно! Но без них у вас вряд ли получится наглядно и эффектно презентовать разработанный дизайн. А у клиента не сформируется правильное понимание того, как все это будет выглядеть в реальности.
Мокапы — это обычно экраны телефонов, планшетов и ноутбуков?
Часто это действительно так, ведь мокапы регулярно используются в веб-разработке. Но по большому счету мокапом может стать изображение любого объекта: шариковой ручки, кружки, фартука, строительной каски, холодильника и даже космической станции.
Правда, что чем красочнее мокап, тем лучше?
Нет! Главная задача мокапа — не сделать ваш дизайн красивее, а дать аудитории четкое понимание, как объект будет выглядеть в реальности. Реалистичность мокапа обычно важнее его красоты. Поэтому, к примеру, лучше сфотографировать билборд на улице своего города и использовать его как мокап, чем найти макет такого же борда на фоне небоскребов Нью-Йорка. Не жертвуйте реалистичностью в угоду красоте.
Что будет, если использовать чужие мокапы без разрешения автора?
Это прямое нарушение законов об авторских правах, которое влечет за собой административную ответственность. То есть, штраф. Сумма может быть как небольшой, так и очень внушительной в зависимости от обстоятельств. Поэтому лучше лишний раз не рисковать и пользоваться только проверенными открытыми источниками для поиска и скачивания мокапов.