Даже самый классный дизайн не существует сам по себе, он решает конкретные проблемы клиента. Показать, как визуал работает в реальной жизни, помогают мокапы. К тому же они помогают графическим и UX/UI-дизайнерам презентовать дизайн-проект. Разберём, что такое мокапы, почему дизайнеру важно уметь их делать. А также покажем примеры мокапов и дадим инструкцию, как сделать их в Photoshop.
Что такое мокап
Мокап — это визуализация продукта, которая показывает, как будет выглядеть дизайн в реальном мире.
Часто мокапы используют для печатной продукции. Источник изображения: designmodo.com
Чтобы показать свою концепцию, дизайнеры накладывают визуал на шаблонное изображение предмета (например, рекламного щита). Чаще всего такой шаблон — это PSD-файл с редактируемыми слоями или макет 3D-модели. С ним удобно работать в Photoshop, размещая элементы собственного дизайна в несколько кликов. Дизайнер как бы «примеряет» свои наработки на модели реальных предметов: визитки, сумки или пакеты кефира. В основном мокапы используют, чтобы презентовать заказчику дизайн и продать ему концепцию.
Мокапы применяют для создания:
- фирменного стиля и брендбука,
- обложек книг и журналов,
- упаковки продукции,
- рекламных баннеров и вывесок,
- печатной продукции (блокноты, визитки),
- корпоративного мерча.
Представим, что вам заказали разработать мерч для компании. Вы придумали варианты сумок, футболок и термокружек. Чтобы заказчик увидел, как всё это будет выглядеть в жизни, вы делаете эффектную презентацию в виде мокапов.
Важное преимущество мокапов — для работы с ними не нужно обладать продвинутыми дизайнерскими навыками. А ещё сделать десяток мокапов дешевле, чем производить тестовый прототип товара или делать фотосессию.
С помощью мокапа можно поместить логотип, например, на коробку с пиццей. Источник изображения: free-mockup.com
Как применяют мокапы в веб-дизайне?
В мире разработки и UX/UI-дизайна тоже применяют мокапы. Там мокап играет роль визуализации сайта, мобильного или веб-приложения. Эта визуализация показывает, как работают цвета, шрифты, элементы навигации сайта, и в целом передаёт общее ощущение от дизайна будущего цифрового продукта.
Мокапы делают, чтобы выбрать лучший вариант визуального решения внутри команды и согласовать дизайн продукта с клиентом.
В разработке сайтов и приложений mockup — это этап между варфреймом (набросок структуры продукта) и прототипом (кликабельная модель цифрового продукта). Это ещё не прототип, где можно открывать окна и тыкать по кнопкам, но уже обобщённая картинка сайта.
Мокап мобильного приложения. Источник: dribbble.com
Мокап отражает несколько составляющих дизайн-концепции продукта.
Отображение контента на экране. Например, контент может быть расположен в соответствии с принципами диаграммы Гутенберга, или по F- и Z- паттернам (всё это модели поведения пользователей при просмотре веб-страниц).
Цветовая схема. Разные цвета вызывают у пользователей разные эмоции. Поэтому цвета интерфейса заметно влияют на взаимодействие пользователей с сайтом или приложением. При создании мокапов оценивают и цветовой контраст, чтобы текст был читаемым, а элементы видны.
Типографика. Шрифты, их размер и стиль, интервалы и выравнивание — ничто не должно усложнять чтение или отвлекать.
«Воздух». Негативное (пустое) пространство — один из самых мощных инструментов дизайна. «Воздух» помогает достичь баланса, когда страница наполнена, но не перегружена.
Элементы навигации. Речь о выпадающих меню, колонтитулах, стрелках, переключателях и ползунках, которые тоже влияют на общее эстетическое впечатление от продукта.
Зачем нужны мокапы
Основная цель мокапа — показать, каким будет результат, когда сам продукт ещё не готов. Это сильно упрощает общение с заказчиком и преподносит идею в лучшем виде.
Рассмотрим, с чем помогают дизайнерам мокапы.
Показать дизайн в контексте. То есть на упаковках, мерче, полиграфии и экране гаджета. В таком формате лучше видны плюсы и минусы визуальной концепции и становится понятно, работает ли дизайн на цели заказчика.
Смотришь на мокап и понимаешь, как будет выглядеть продукт на полке в супермаркете. Источник изображения: adindex.ru
Быстрее донести идею до клиента. Можно тысячу раз объяснить заказчику, что такой-то вариант макета будет хорошо смотреться на остановке общественного транспорта. Но лучше сразу показать ему мокап.
Мокап придаёт реалистичность концепции дизайна. Источник изображения: freemockupworld.com
«Потестить» дизайн на реальных объектах. Мокап — это способ увидеть ошибки дизайна, которые могут быть незаметны ранее, и посмотреть итоговый проект в разных ракурсах. И не нужно печатать прототип упаковки или рекламного баннера каждый раз, когда заказчик захочет внести правки. Такой метод «заглядывать в будущее» — попросту дешевле.
Визуализировать фирменный стиль в брендбуке. При разработке айдентики компании дизайнеры показывают, как можно использовать фирменные цвета, шрифты и логотип для оформления продукции и мерча. Такие примеры на страницах брендбука помогают маркетологам компании понять, как использовать фирменный стиль для продвижения бренда.
Мокапы брендинга помогают понять, какие идеи подходят для вашей компании. Источник изображения: visme.co
Ускорить работу дизайнера. Мокапы позволяют быстро сделать много вариантов одного продукта. Когда нужно поштурмить внутри команды и выбрать лучший вариант дизайна, например, корпоративной толстовки, проще взять мокап и менять на нём цвета и надписи.
Где брать шаблоны для мокапов: полезные сервисы
Для создания мокапа необязательно быть профессиональным дизайнером, хотя кое-какие навыки понадобятся. Для работы можно взять готовые шаблоны на специальных сайтах.
Расскажем о нескольких бесплатных сервисах с коллекциями шаблонов-мокапов.
«Бесплатные мокапы»
Онлайн-библиотека бесплатных мокапов в формате PSD. В коллекции много мокапов для устройств Apple и брендинга (футболки, пакеты, упаковка, вывески).
В каталоге есть разбивка по предметам, например, одежда, обувь, компьютеры, бумага, блокнот. Макеты доступны для скачивания в PSD, после скачивания нужно использовать смарт-объекты, чтобы заменить брендинг (как это сделать, расскажем в следующем разделе).
Мокап коробки для пиццы с Free Mockup
World Mockup
Сайт с бесплатными мокапами в PSD, разбитыми по темам: полиграфия, плакаты, рекламные щиты, упаковка, одежда и другие. Библиотеку сайта постоянно пополняют.
Нужные мокапы можно искать через каталог или строку поиска на сайте. Шаблоны скачиваются в виде многослойных PSD-файлов со смарт-объектами и изменяемым цветом фона. Сайт англоязычный, но интерфейс простой и разобраться можно за пару кликов.
Мокап банки с краской на World Mockup
Mockup Download
Сайт со множеством фотореалистичных макетов, где можно работать бесплатно и без регистрации. В библиотеке есть мокапы для фотошопа, фирменного стиля, упаковки, логотипов, визиток, баннеров и других носителей.
Файлы мокапов можно скачивать в виде архива с PSD-шаблонов, а затем работать с ними в Adobe Photoshop. Коллекцию мокапов регулярно пополняют, кажется, здесь можно найти бесплатный шаблон для любого случая: от мокапа виниловой пластинки до строительного шлема.
Мокап для упаковки кремов на Mockupdownload
Smartmockups
Сайт для создания мокапов по шаблону с понятным интерфейсом. С макетами можно работать прямо в браузере, никакие программы скачивать не нужно. Для работы с редактором может понадобиться VPN.
В коллекции сайта есть шаблоны для полиграфии, социальных сетей, упаковки, одежды и множества других предметов. В редакторе можно менять фон, цвет объекта и кадрировать изображение. Когда мокап готов, его легко экспортировать в высоком разрешении.
Примеры шаблонов из Smartmockups
Как сделать мокап в Photoshop: пошаговая инструкция
Коротко расскажем, как работать с файлом мокапа в фотошопе.
- Скачиваем мокап. Обычно это файл в формате .psd. Открываем его в Photoshop.
- Находим слой с названием Edit me или что-то в этом духе. Он будет реализован смарт-объектом. В нашем случае это слой Your design here.
- Кликаем на него, после чего открывается новый файл. Иногда там просто пусто, иногда там плейсхолдер от автора мокапа.
- Подставляем туда нужное изображение и сохраняем его, тем самым обновляя смарт-объект в родительском файле.
- Готово. Теперь, если мокап позволяет, можно поменять цвет фона и/или объектов.
Потом выбираем в меню «Файл» пункт «Сохранить как», указываем нужный формат и сохраняем изображение на компьютер.
Если вам не подходят шаблоны мокапов и вы хотите делать всё с нуля
Иногда можно скачать подходящий мокап в хорошем качестве и редактировать его. Но бывают случаи, когда нужного макета нет в бесплатном доступе или вы не владеете фотошопом. В такой ситуации есть несколько вариантов действий.
- Взять фото более-менее подходящего объекта (или даже сфотографировать его самому) и прифотошопить туда свой логотип, этикетку или надпись.
- Если возможности создать мокап своими руками нет, и в интернете не нашлось ничего подходящего, можно воспользоваться услугами знающего дизайнера.
- Когда проект требует уникальности, целесообразно сделать мокап самому. Для этого пригодятся навыки работы с дизайнерским софтом. Самые популярные программы для создания и редактирования графики это: Adobe Photoshop, Figma, Adobe Illustrator.
Какую программу выбрать, зависит от цели. Мокапы сайтов лучше делать в Figma. Иногда верстальщики берут уже готовые шаблонные решения, например, на WordPress. Если вы работаете с полиграфией или упаковкой и используете готовые шаблоны, подойдёт Adobe Photoshop. Делать мокап самостоятельно с нуля проще в Adobe Illustrator.
Скилы для работы в этих программах можно прокачать на специализированных курсах. Там же научат делать мокапы как профессионал и выгодно презентовать их заказчикам, а также создавать айдентику бренда для печати и в вебе.
Курсы по Adobe Photoshop
Курсы по Adobe Illustrator
Курсы по Figma
* Instagram — социальная сеть, которая запрещена в РФ.
