Когда я работал в веб-студии, наш дизайнер для презентации будущего сайта делала макет его будущего вида на разных устройствах. Затем на встрече при присутствии менеджера она демонстрировала макеты клиентам. Это и были мокапы, о которых мы сейчас поговорим.
Что такое мокап
Это разновидность графического контента в виде PSD-файла со смарт-объектами и слоями. Простыми словами, мокап — это 3D-модель какого-либо объекта для демонстрации его дизайна еще до физического воплощения.
Смарт-объекты — это слои с данными изображения из векторных или растровых изображений.
В дальнейшем на такой шаблон можно наложить свою айдентику, создать дизайн упаковки и увидеть, как продукт отвечает рекламным запросам.
Зачем нужны мокапы
- Демонстрация заказчику проекта в том виде, в каком его сможет увидеть и протестировать конечный пользователь.
- Сокращение и упрощение коммуникативной цепочки между исполнителем и заказчиком.
- Перенос собственных идей и наработок на «боевые» объекты и тестирование их жизнеспособности. Например, можно посмотреть, как корешок будущей книги будет смотреться на книжной полке: ярко выделяться среди остальных изданий или безнадежно теряться.
- Допроизводственная дополнительная проверка прототипа и то, как смотрится дизайн при увеличении или уменьшении размеров объектов. Также можно еще на мокап-тестировании увидеть, что на блокнотах логотип хорошо различим, текст читается, а на ручках он же сливается в одно желто-зеленое пятно с закорючками.
- Ускорение работы с шаблонами. Например, у вас маркетплейс и надо показать одно и то же платье в карточке товара в восьми вариантах цвета. Согласитесь, куда проще на лету их «перекрасить» и «прифотошопить» другой фасон, чем нанимать фотографа, устраивать фотосессию и потом все это обрабатывать.
Примеры мокапов
Скажем так: о них нужно не рассказывать, а показывать.
Визитки
Надо быть уверенным, что ваша визитка даст о вас верное реноме — как текстом, так и дизайном.
Книги
При их подготовке важно понимать, каким будет внешний вид, ведь от этого тоже зависят продажи. Простой пример — творение Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай» многие называют «Оранжевая книга».
Канцелярские принадлежности
Такая демонстрация важна для людей, которые даже в этой сфере ценят бредовость. Тяжело спорить, что, например, на мокапы Parker вы обратите большее внимание, чем на никому не известную китайскую пластмассу.
Кружки
Все просто: я например, хочу кружку с любимым киногероем и до покупки смогу оценить, как изображение будет выглядеть на изогнутой поверхности.
Журналы
Приятно взять только что вышедший из типографии журнал,вдохнуть запах краски… Но и посмотреть на то, как будет сверстаны его полосы на макете — не менее интересно!
Гаджеты
Считаю, что такие мокапы крайне важны для верстальщиков, которые приводят свое видение и видение веб-дизайнера в жизнеспособную форму. И, конечно, клиенту тоже надо это показать!
Музыкальные носители
Те, кто постарше, покупали CD не только из-за музыки, хоть это главное, но и чтобы посмотреть состав песен, кто принимал участие в записи, почитать тексты и т. п. С мокапом это можно сделать без покупки :)
Как правильно выбрать мокап
Это нетривиальный вопрос. Дело в том, что то, что вы выдаете в качестве прототипа будущего предмета, может в корне не совпадать с видением заказчика или конечного пользователя.
Итак, когда мы выбираем мокап, необходимо:
- Смотреть на пропорции и размеры объектов. Это вроде и банально, но иногда из головы вылетает, что дизайн на листах A4 — вовсе не то, что на A5, и что полиграфические стандарты в разных регионах отличаются между собой. Отсюда вывод: показывать размеры именно те, о которых заявил клиент.
- Прорабатывать блики, тени и отражения, чтобы они подчинялись законам физики и геометрии. Если мокап хороший, а дизайнер — профессионал, все будет выглядеть так, как в реальности. В противном случае можно будет применить «костыли» в виде верного «Фотошопа» или вовсе все переделать заново.
- Делать картинки предельно реалистичными. Бывает, что даже не профессионал поймет, что перед ним дурно сделанная компьютерная графика, которая имеет отдаленное отношение к действительности. Напомним, что речь у нас идет не о дизайнах, а о мокапах!
- Следить за трендами и актуальностью создаваемых изображений. Как-то в нашей студии веб-дизайнер разработала мокап и предварительно показала ее начальнице. Та сначала ничего не заметила, но спустя некоторое время попросила его переделать. Дело в том, что еще и аккаунт-менеджер посмотрел и увидел, что присутствуют устаревшие версии iPhone и iPAD. Век живи, век учись, что называется!
Топ-5 лучших мокап-библиотек
К радости дизайнерского сообщества и тех, кому по каким-то причинам надо демонстрировать мокапы в интернете, есть библиотеки, где их можно найти и скачать на платной или бесплатной основе.
«Бесплатные мокапы»
Файлы разнесены по пяти типам устройств (все — Apple), брендингу (логотип, футболки, фирменный стиль), предметам (одежда, обувь, компьютеры, бумага, блокнот) и виду (сверху, изометрия и перспективным).
Все мокапы отсортированы по категориям. Радует, что везде русский язык.
MOCKUP DOWNLOAD
Сайт:https://mockupdownload.ru/
Файлы отсортированы по 20 категориям. Есть раздел с FAQ. Также есть раздел с новинками. Плюс — возможность скачать с сайта руководства «Как сделать Mockup с помощью программы Photoshop (Фотошоп)».
PSD MOCKUP.RU
Здесь вы найдете не только бесплатные мокапы, собранные в категории, но и PSD-макет, почитаете статьи и узнаете о проекте. Сервис уверенно говорит о себе: «PSDmockup.ru — самая большая и самая удобная в поиске база мокапов в рунете».
Mockupworld
Сайт:https://www.mockupworld.co/
Это уже зарубежный сервис, где файлы распределены по таким категориям как Paper & Books, Posters & Pictures, Signs & Billboards, Packaging, iPhone, iPad, MacBook, iMac, Apple Watch, Android Devices и др.
Интересен раздел «No Photoshop». Если вы перейдете в него в него, то увидите, что здесь предлагают использовать мокапы прямо в вашем браузере.
CSSAuthor
Сайт:https://cssauthor.com/mockups/
Бесплатные мокапы более чем в 100 категориях — Figma Mockup, Advertising, Apparel, Apple Product, Device, Food Mockup, Holiday, Miscellaneous, Packaging и др. По заявлению сервиса, общее число файлов — более 10 000.
Заключение
Оптимальным действием после прочтения этой статьи для вас будет скачивание понравившегося мокапа и, возможно, работа с ним в плане применения ваших идей и видения. Удачи!
.png)
.png)
.png)
