Что такое мокап и с чем его едят
Начинающие дизайнеры наверняка слышали про такую вещь, как мокап. Сегодня мы научимся с ним работать, ведь мокап – это действительно эффективный способ дополнить фирменный стиль, а также увидеть свои наработки на живом продукте.
Что же такое мокап?
Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.
Давайте рассмотрим примеры мокапов.
Здесь мы видим мокапы книг. К примеру, вы разработали дизайн обложки книги. Дабы не тратить много времени, сил и денег на создание готового образца, вы можете наложить дизайн на макет и посмотреть, органично ли будет смотреться обложка до печати.
Здесь же у нас мокапы листовок. Как вы можете заметить, большинство мокапов обычно представляют собой какой-либо продукт на однотонном фоне. Но не все мокапы такие.
Мокапы различных гаджетов тоже очень ценятся: зачастую их используют для визуализации веб-сайтов/приложений.
А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.
Как видите, мокапы бывают разными. Давайте разберемся, где эти мокапы искать и как правильно использовать!
Лучшие библиотеки мокапов
Я отобрал 5 лучших сайтов с богатыми библиотеками мокапов. Итак, знакомьтесь:
Работаем с мокапом в Photoshop
Давайте скачаем мокап по этой ссылке.
Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».
Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «[YOUR IMAGE HERE]».
Два раза нажимаем на миниатюру возле имени слоя левой кнопкой мыши. Вуаля – дизайн обложки нашей книги открылся в новом проекте!
В этот слой мы можем добавлять все, что нам заблагорассудится. К примеру, я вставил сюда обложку книги «1984» Джорджа Оруэлла.
Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!
Давайте рассмотрим другой пример. Я решил взять мокап магазинной вывески, в котором можно менять логотип.
Здесь у нас редактируются обе вывески, но мне интересна верхняя, так что я методом исключения выясняю, в какой группе слоев находится шаблон для изменения логотипа.
С названием слоев у нас та же песня (оба мокапа с одного сайта).
Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.
Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.
Сохраняем файл и открываем основной проект. Готово!
Вот мы и разобрались со спецификой мокапов, рассмотрели лучшие библиотеки шаблонов и научились работать с ними в Photoshop.
Что такое мокапы и зачем они дизайнеру
Они существуют, чтобы показывать печатную продукцию заказчику и не вносить правки до бесконечности. Так, чтобы ни одно дерево не пострадало.
Мокапы (от англ. mock-up — макет) — это изображения, которые используют, чтобы показать заказчику дизайн фирменного стиля на объектах реального мира. Обычно это готовые файлы в формате psd со слоями, позволяющими дизайнеру наложить элементы дизайна на фотографию предмета.
Кстати, так могут называться любые макеты: модели самолетов, миниатюры архитектурных сооружений или отрисованные веб-страницы, которые клиент утверждает перед вёрсткой.
Англ. identity — синоним словосочетания «фирменный стиль»
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Зачем нужны мокапы
Дизайн не существует в вакууме: изображение неотделимо от предмета, на который оно нанесено. Бывает трудно оценить оформление упаковки в раскладке:
Зато по реалистичному изображению на мокапе сразу всё ясно.
Печать — дорогое удовольствие даже для маленькой упаковки, не говоря уже о вывесках и билбордах. Если клиенту захочется внести правки в дизайн, печатать придётся не один раз. Чтобы оптимизировать работу, придумали мокапы. С их помощью заказчик может рассмотреть дизайн на конкретных предметах и в разных ракурсах.
Мокап — это детализированное изображение реального предмета. Не нужно путать его со скетчем — наброском дизайна на бумаге или в электронном виде, не подразумевающем проработку деталей. Или с макетом для печати — свёрстанным изображением с линиями сгиба, типографскими метками и отрегулированной под тип бумаги суммой красок.
Кстати, мокап полезен и самому дизайнеру. Он поможет на любом этапе работы понять, как творческие идеи будут реализованы на реальных предметах. Но основное его назначение — демонстрация проекта клиенту.
При создании логотипа или айдентики подбирают мокапы, соответствующие предполагаемым носителям, и согласовывают с заказчиком их внешний вид. Готовые реалистичные картинки помещают в руководство по использованию фирменного стиля.
Как использовать готовые мокапы
Есть много ресурсов, где можно купить или скачать бесплатно готовые мокапы. В предлагаемых архивах — обычно в формате zip — помимо самих мокапов может находиться инструкция и/или требования лицензии.
Формат архивации данных для сжатия файлов без потерь
Если открыть файл мокапа в Photoshop, видно, что он состоит из множества слоёв.
Растровый формат файлов для работы в Adobe Photoshop.
Векторный формат файлов для работы в Adobe Illustrator.
Иногда в готовом мокапе можно не только накладывать на объекты картинки со своим дизайном, но менять цвет предметов и фон. В нашем примере есть такие опции: для бэкграунда и цвета мороженого.
Чем больше опций, тем удобнее. Цвета предметов тоже важны для презентации дизайна заказчику и могут быть частью задумки. Также иногда требуется поменять фон, убрать или добавить тени. В хороших мокапах всё это есть и легко настраивается с помощью видимости слоёв.
Откуда можно скачать мокап
Есть много сайтов, где можно взять готовые мокапы. Вот несколько из них:
Подобных источников много, но бесплатные мокапы на них часто повторяются.
Если хочется найти что-то более оригинальное, лучше ввести соответствующие запросы на Behance или Dribbble — здесь люди иногда бесплатно делятся своими наработками.
В чём трудности работы с готовыми мокапами
Сувениры, документы, каталоги, упаковка, униформа или предметы интерьера, которые оформлены в фирменном стиле компании.
Часто упаковка товаров, униформа и сувениры имеют нестандартную форму. Поэтому трудно найти то, что хочет клиент.
Даже если речь об обычных визитках и календарях, могут возникнуть проблемы. Большинство бесплатных мокапов в интернете американские, а их форматы полиграфии отличаются от наших. Конечно, можно подобрать более-менее подходящие варианты и показать приблизительный дизайн заказчику. Но в таком подходе есть опасности.
Например, если радиус круглой баночки на картинке больше, чем в реальности, есть риск, что надписи на этикетке окажутся слишком длинными и не будут читаемы с одного ракурса. А если форматы визитки на мокапе и в макете для печати будут различаться, их внешний вид тоже может оказаться ощутимо разным.
По сути, такая презентация дизайна не выполняет своих функций: не может показать, как будут выглядеть реальные напечатанные носители.
Если готовый мокап вам не подходит
Иногда важно продемонстрировать дизайн на носителях с точным соблюдением всех пропорций. Для этого можно самостоятельно сделать мокап для заказчика, взяв за основу фотографии его упаковок, сувениров или униформы. Но это трудоёмкая работа: придётся с помощью инструментов Photoshop создать перспективные искажения, вручную добавить тени, полутени, освещение и блики.
Если проект недорогой, а точность презентации не критична, для демонстрации дизайна стараются подобрать готовые мокапы.
Хотите научиться разрабатывать фирменный стиль, работать с готовыми мокапами или создавать их собственноручно? Записывайтесь на наш курс по графическому дизайну.
20 бесплатных инструментов для создания мокапов
Хочу поделиться с вами небольшой, но полезной подборкой онлайн инструментов и приложений для работы с мокапами. Отличный вариант для тех, у кого нет возможности использовать Photoshop, но необходимо быстро сделать красивый мокап для сайта или презентации.
Большая платформа для создания мокапов. От мобильных устройств до упаковки еды и одежды. По словам разработчиков, это самый быстрый веб-сервис для создания мокапов, он простой в использовании — не нужны дополнительные навыки или опыт в дизайне. Быстрорастущая библиотека профессиональных мокапов.
Приложение для создания мокапов доступное для Windows, Mac и Linux. В арсенале имеется более 700 различных мокапов с техникой и красивыми сценами. Мокапы имеют высокое разрешение 5472×3648.
Мощный генератор мокапов от Envato. Библиотека насчитывает более 30 различных тысяч объектов и сцен.
Первое онлайн-приложение для графического дизайна, в основном ориентированное на макеты продуктов. Создавайте, анимируйте, работайте совместно и делитесь своими проектами с помощью обширной библиотеки ресурсов и шаблонов прямо в браузере. В библиотеке имеется больше 1290 мокапов для ваших проектов. Один из самых мощных редакторов подобного типа.
Удобный онлайн инструмент, который позволяет легко генерировать красивый мокапы и скачивать их в высоком разрешении.
Позволяет выбирать 3d модели и готовые шаблоны сцен и крутить их как душе угодно.
Бесплатный и простой инструмент для создания макетов устройств для вашего приложения и дизайна веб-сайтов.
Минус: Не поддерживает Safari.
Позволяет создавать бесплатные анимированные макеты продуктов с видео и анимированные GIF-файлы.
Приложение, которое позволяет легко добавлять кадры устройства в записи экрана для создания красивых макетов видео.
Создавайте пользовательские макеты 3D-устройств в своем браузере.
Создавайте бесплатно макеты устройств в высоком разрешении со снимками экрана вашего веб-сайта или мобильного приложения.
Очень удобный инструмент который позволяет создать предварительный просмотр вашего приложения в App Store без необходимости его публикации.
Файлы изображений и эскизов популярных устройств.
Простой Генератор мокапов устройств для ваших скриншотов.
Небольшая библиотека с бесплатными и красивыми мокапами для презентаций. Из минуса: нет онлайн редактирования.
Одно из лучших приложений на Mac для создания анимационных мокапов. Постоянно пользуюсь сам. Рекомендую.
Не совсем мокапы, но инструмент полезный. Простой и быстрый способ добавить субтитры и многое другое к вашим видео в интернете.
Делайте чистые скриншоты любого веб-сайта.
Мгновенно превратите свои скриншоты в красивые мокапы рабочего стола.
712+ реалистичных мокапов для вашего дизайна. Мощный и удобный редактор.
Небольшая коллекция мокапов. С простым редактированием.
Простой и быстрый инструмент для создания мокапов для телефонов, планшетов и ноутбуков.
⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin. Там ты найдешь больше интересных материалов о дизайне.
В статье какой-то утиль из прошлого века
Я улучшил статью и добавил предлагаемые вами ссылки. Заслуживает ли теперь материал вашего лайка?
Ну не все утиль ) Есть попроще инструменты, есть посложнее. Спасибо за ссылки. Есть действительно крутые сервисы, не знал о них.
Спасибо большое. Полезные ссылочки
Добавил в закладки, спасибо!
песня для автора поста
Очень хорошая песня, спасибо.
Ничего не удешевляет дизайн, как эти бесплатные мокапы)
Жаль, что Rotato уже платный(((
Ведомство посчитало продукцию запрещённой для ввоза, дистрибутор обжаловал решение.
Инструмент: Создание интерактивных макетов приложений при помощи Mockup.io Статьи редакции
Менторы рубрики «Интерфейсы» на vc.ru приступают к публикации кейсов и инструментов российских компаний, которые будут полезны представителям индустрии.
Сегодня в выпуске — обзор инструмента для прототипирования приложений Mockup.io, подготовленный его командой.
Разработка приложения для мобильного устройства — это сложный и трудоемкий процесс. В его основе лежат четыре основных этапа: планирование, дизайн, программирование, тестирование.
Какой из этих шагов важнее — решить сложно. Но их объединяет то, что на каждом из этих этапов очень важно правильно и эффективно выстроить взаимоотношения между всему участниками процесса: от заказчика до разработчика. В этой цепи очень полезными оказываются прототипы:
Что такое Mockup.io
Mockup.io — это коммуникационная платформа, которая, позволяет:
В основном она предназначена для UI/UX-дизайнеров и разработчиков мобильных приложений. Но и обычный предприниматель — например, заказчик приложения тоже сможет пользоваться ею без труда.
Существенным преимуществом Mockup.io является то, что ее создатель — компания Alterplay — уже много лет занимается разработкой мобильных приложений. Поэтому функциональность Mockup.io основана на реальном опыте команды и решении насущных проблем аудитории.
Стоимость
Mockup.io — это сервис, работающий по подписке. Существуют три подписных плана. Все они позволяют приглашать в проект неограниченное число коллег и не имеют ограничений по функциональности. Приложения для iOS и Android устройств бесплатны.
Если вам нужны специальные условия подписки, можно обратиться напрямую в компанию.
Пользователи имеют возможность подписаться на более дорогой или более дешевый план в любой момент. При обновлении плана вся информация о проектах остается неизменной.
Основными конкурентами Mockup.io являются такие приложения, как Notism, InVision, RedPen, Marvell App. Все они основаны на работе с готовыми мокапами страниц.
Основные преимущества каждой из платформ:
| Mockup.io | InVision | Marvell | RedPen | Notism |
| Неограниченное число приглашенных пользователей проекта | Просмотрщик прототипов на Apple Watch | Экспорт прототипов в app (.apk) приложение | Точечные отзывы на прототипах | Инструменты для рисования |
| Предварительный просмотр иконки для iOS, Apple Watch и Android-устройств | Одновременное комментирование в режиме реального времени | Таймер для отсрочки транзишенов (переходов) в интерактивных прототипах | Контроль версий | Одновременное комментирование в режиме реального времени |
| Нативное Android приложение | Доски для мокапов с разными статусами (Kanban style) | Синхронизация с Dropbox | Синхронизация с Basecamp и Asana | |
| Нативное iOS-приложение | Инструменты для рисования | Прикрепеленные прототипы (embedded) | Экспорт всего проекта в PDF | |
| Папки в проектах | Создание to-do-списков из отзывов | Импорт из Sketch, PhotoShop | Создание to-do-списков | |
| Автоматическое обрамление всех мокапов в рамки выбранного устаройства | Запись поведения пользователя и его мимики (Lookback.io) | Запись поведения пользователя и его мимики (Lookback.io) | Настраиваемый вид предварительного просмотра всего проекта | |
| Доступные цены | Импорт из Sketch, PhotoShop | Контроль версий | ||
| Метки для мокапов | Синхронизация с Dropbox | |||
| Контроль версий |
Существуют также более сложные приложения, такие, например, как UXPin, Balsamique, или Avocode. Но это, в первую очередь, конструкторы, которые позволяют создавать прототипы страниц с нуля.
Основные возможности Mockup.io
Презентация дизайна приложения
Автоматическое обрамление загруженных мокапов в виртуальные фреймы устройств: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо абстракного устройства (для кастомных размеров экранов). В новой версии уже добавлен фрейм для iPad Pro.
Создание интерактивных прототипов
Создание кликабельных областей, их линковка с другими экранами приложения, установка различных анимированных переходов (transitions) между экранами.
Совместная работа
Приглашение нескольких пользователей в проект для одновременной работы над ним: просмотра, комментирования, создания интерактивных областей, тестирования юзабилити, прочее.
Предварительный просмотр иконки
Загрузка нескольких иконок в проект — позволяет загрузить несколько разных икокнок и увидеть, как каждая из них будет выглядеть в реальном контексте: на домашнем экране устройства или в магазине (App Store или Play Market).
Тестирование прототипа на реальном устройстве
Нативные iOS и Android для тестирования прототипа на реальных устройствах: iPhone, iPad, Android Phone, Android Tablet.
Организация проекта
Папки и метки позволяют структурировать проект, упрощают поиск и доступ к необходимым макетам.
Настраиваемая система меток позволяет присваивать мокапам различные статусы: «в работе», «утверждено», «ждет обсуждения».
Поддержка анимаций и скрола
Приложении поддерживает GIF-анимированные макеты и «длинные» страницы (при загрузке в Mockup.io автоматически трансформируются в страницы со скроллом).
Использование приложения
При создании проекта необходимо выбрать устройство, для которого вы будете прототипировать: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо пользовательское устройство (необходимо указать размеры экрана).
Управление проектом осуществляется через меню настроек (Project Settings). Оно доступно внутри каждого проекта, в правом верхнем углу. Это меню позволяет:
Контекстное меню проекта (вызывается правой кнопкой мыши) позволяет:
Хотелось бы отдельно остановиться на возможности предварительного просмотра иконки. Тот, кто сталкивался с разработкой и продвижением приложения в App Store или Google Play Market, знает, как сильно иконка влияет на восприятие приложения целевой аудиторией. Особенно при первом визуальном контакте. Хорошая иконка может существенно улучшить уровень продаж, привлекает внимание пользователя, влияет на запоминаемость приложения.
В Mockup.io есть возможность загрузить несколько вариантов иконки и оценить их внешний вид в реальном контексте: на экране устройства, в листинге или на страничке приложения в App Store или Play Market.
Основная работа с макетами — настройка ссылок и прокрутки, присвоение меток, переименование, удаление, обновление — осуществляются через контекстное меню макета.
Например, для создания интерактивных ссылок в прототипе используется меню «Links and Scrolling». Интерактивная (кликабельная) зона выделяется левой кнопкой мышки. В появившемся окне можно выбрать экран, на который эта зона будет ссылаться.
Не забываем и про нативные iOS или Android-анимированные переходы между страницами (transitions). В Mockup.io можно выбрать любую из существующих анимаций перехода от страницы к странице.
С одним из последних обновлений в приложение была добавлена возможность одновременного редактирования интерактивных зон. Теперь несколько человек могут работать с ними, при этом все изменения сделанные одним из пользователей мнгновенно отобразяться на экране других.
Кроме линковки страниц, меню «Links and Scrolling» позволяет работать с «длинными» страницами — настраивать фиксированные зоны для скроллинга. Для того, чтобы эти зоны можно было устанавливать максимально точно, в Mockup.io предусмотрена небольшая лупа. Она немного увеличивает ту зону, в которой устанавливается фиксатор.
Общение между участниками проекта происходит через сообщения. Их можно создавать на странице каждого мокапа. Это упрощает взаимопонимание. Кроме этого, если один из пользователей какое-то время не следил за общением, он легко может восстановить всю хронологию обсуждения и внесенных изменений.
Как мы говорили ранее, любой из прототипов для iOS или Android-устройств можно запустить на реальном телефоне или планшете. Для этого потребуется скачать и установить приложение из App Store или Google Play.
После запуска Mockup.io на устройстве вы попадете в список доступных проектов (созданных вами или в которые вы приглашены). Выбрав нужный проект и экран, с которого необходимо начать работу с прототипом, нажимаете кнопку Play.
При этом интерактивные зоны на каждом их мокапов будут подсвечены голубой рамкой. В приложении поддерживаются GIF-анимированные мокапы. «Длинные» страницы будут отображены как страницы со скроллингом.
Для удобства новых пользователей, в веб-приложении создан демонстрационный проект, который отображает основные возможности Mockup.io. Он доступен в тот момент, когда проект уже создан, но в него не загружено ни одного мокапа.
Планы и прогнозы
За последние годы приложения для мобильных телефонов становятся must-have для многих компаний. Это уже не прихоть, а необходимость: пользователь все больше и больше действий совершает с мобильных устройств, пользуется электронными аксессуарами.
Именно этот тренд и определеяет востребованность таких платформ, как Mockup.io. Они помогают в разработке приложений, упрощают коммуникацию с клиентами и внутри команды, помогают экономить временные и денежные ресурсы.
Главные преимущества Mockup.io:
Mockup.io относится к инструментам прототипирования, которые работают с готовыми мокапами страниц: это могут быть схематические макеты или полностью нарисованные дизайны. Она не предназначена для построения страниц приложения «с нуля» и не поддерживает работу со слоями. Альтернативой работы со слоями может служить поддержка GIF-анимированных макетов.
Несмотря на свою простоту, Mockup.io — очень продуманный инструмент. В процессе работы с ним открываешь для себя очень много приятных «мелочей», которые существенно упрощают работу. Это еще раз доказывает тот факт, что инструмент создавался специалистами, которые постоянно работают с прототипами и знают, как можно улучшить и упростить работу с ними.
Присылайте собственные интерфейсные кейсы, в результате которых вам удалось заметно улучшить (или, наоборот, ухудшить) показатели проекта, а также описания инструментов, которые будут полезны представителям индустрии. Интересные материалы обязательно попадут на страницы рубрики «Интерфейсы».