Москва +7 (495) 772 97 91

Что такое мокап, зачем он нужен и какие они бывают

Когда я работал в веб-студии, наш дизайнер для презентации будущего сайта делала макет его будущего вида на разных устройствах. Затем на встрече при присутствии менеджера она демонстрировала макеты клиентам. Это и были мокапы, о которых мы сейчас поговорим.

Что такое мокап

Это разновидность графического контента в виде PSD-файла со смарт-объектами и слоями. Простыми словами, мокап — это 3D-модель какого-либо объекта для демонстрации его дизайна еще до физического воплощения.

Смарт-объекты — это слои с данными изображения из векторных или растровых изображений.

В дальнейшем на такой шаблон можно наложить свою айдентику, создать дизайн упаковки и увидеть, как продукт отвечает рекламным запросам.

Зачем нужны мокапы

  1. Демонстрация заказчику проекта в том виде, в каком его сможет увидеть и протестировать конечный пользователь.
  2. Сокращение и упрощение коммуникативной цепочки между исполнителем и заказчиком.
  3. Перенос собственных идей и наработок на «боевые» объекты и тестирование их жизнеспособности. Например, можно посмотреть, как корешок будущей книги будет смотреться на книжной полке: ярко выделяться среди остальных изданий или безнадежно теряться.
  4. Допроизводственная дополнительная проверка прототипа и то, как смотрится дизайн при увеличении или уменьшении размеров объектов. Также можно еще на мокап-тестировании увидеть, что на блокнотах логотип хорошо различим, текст читается, а на ручках он же сливается в одно желто-зеленое пятно с закорючками.
  5. Ускорение работы с шаблонами. Например, у вас маркетплейс и надо показать одно и то же платье в карточке товара в восьми вариантах цвета. Согласитесь, куда проще на лету их «перекрасить» и «прифотошопить» другой фасон, чем нанимать фотографа, устраивать фотосессию и потом все это обрабатывать.

Примеры мокапов

Скажем так: о них нужно не рассказывать, а показывать.

Визитки

Надо быть уверенным, что ваша визитка даст о вас верное реноме — как текстом, так и дизайном.

Лаконичный темный и светлый дизайн. Смотрите, какой будет ваша визитка!
Лаконичный темный и светлый дизайн. Смотрите, какой будет ваша визитка!

Книги

При их подготовке важно понимать, каким будет внешний вид, ведь от этого тоже зависят продажи. Простой пример — творение Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай» многие называют «Оранжевая книга».

Оцените дизайн обложки, объем издания и то, как будут выглядеть ее внутренности
Оцените дизайн обложки, объем издания и то, как будут выглядеть ее внутренности

Канцелярские принадлежности

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

Оптимально, когда в рамках одного мокапа показаны, ручки, блокноты, конверты и прочая «канцелярщина». Все в едином стиле!
Оптимально, когда в рамках одного мокапа показаны, ручки, блокноты, конверты и прочая «канцелярщина». Все в едином стиле!

Кружки

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

Смотрим, из чего мы будем пить чаек-кофеек долгими зимними вечерами!
Смотрим, из чего мы будем пить чаек-кофеек долгими зимними вечерами!

Журналы

Приятно взять только что вышедший из типографии журнал,вдохнуть запах краски… Но и посмотреть на то, как будет сверстаны его полосы на макете — не менее интересно!

Красиво и типографически верно оформленный журнальный разворот —половина успеха!
Красиво и типографически верно оформленный журнальный разворот —половина успеха!

Гаджеты

Считаю, что такие мокапы крайне важны для верстальщиков, которые приводят свое видение и видение веб-дизайнера в жизнеспособную форму. И, конечно, клиенту тоже надо это показать!

Так вы узнаете, как будет выглядеть сайт на смартфоне, планшете и ноутбуке. И кактусы :)
Так вы узнаете, как будет выглядеть сайт на смартфоне, планшете и ноутбуке. И кактусы :)

Музыкальные носители

Те, кто постарше, покупали CD не только из-за музыки, хоть это главное, но и чтобы посмотреть состав песен, кто принимал участие в записи, почитать тексты и т. п. С мокапом это можно сделать без покупки :)

Меломаны всегда интересуются, что будет напечатано на самом компакте, на лицевой, тыловой и внутренней сторонах обложки
Меломаны всегда интересуются, что будет напечатано на самом компакте, на лицевой, тыловой и внутренней сторонах обложки

Как правильно выбрать мокап

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

Оправдывайте ожидания!
Оправдывайте ожидания!

Итак, когда мы выбираем мокап, необходимо:

  1. Смотреть на пропорции и размеры объектов. Это вроде и банально, но иногда из головы вылетает, что дизайн на листах A4 — вовсе не то, что на A5, и что полиграфические стандарты в разных регионах отличаются между собой. Отсюда вывод: показывать размеры именно те, о которых заявил клиент.
  2. Прорабатывать блики, тени и отражения, чтобы они подчинялись законам физики и геометрии. Если мокап хороший, а дизайнер — профессионал, все будет выглядеть так, как в реальности. В противном случае можно будет применить «костыли» в виде верного «Фотошопа» или вовсе все переделать заново.
  3. Делать картинки предельно реалистичными. Бывает, что даже не профессионал поймет, что перед ним дурно сделанная компьютерная графика, которая имеет отдаленное отношение к действительности. Напомним, что речь у нас идет не о дизайнах, а о мокапах!
  4. Следить за трендами и актуальностью создаваемых изображений. Как-то в нашей студии веб-дизайнер разработала мокап и предварительно показала ее начальнице. Та сначала ничего не заметила, но спустя некоторое время попросила его переделать. Дело в том, что еще и аккаунт-менеджер посмотрел и увидел, что присутствуют устаревшие версии iPhone и iPAD. Век живи, век учись, что называется!

Топ-5 лучших мокап-библиотек

К радости дизайнерского сообщества и тех, кому по каким-то причинам надо демонстрировать мокапы в интернете, есть библиотеки, где их можно найти и скачать на платной или бесплатной основе.

«Бесплатные мокапы»

Сайт:https://freemockup.ru/

Главная страница с бесплатными мокапами
Главная страница с бесплатными мокапами

Файлы разнесены по пяти типам устройств (все — Apple), брендингу (логотип, футболки, фирменный стиль), предметам (одежда, обувь, компьютеры, бумага, блокнот) и виду (сверху, изометрия и перспективным).

Все мокапы отсортированы по категориям. Радует, что везде русский язык.

MOCKUP DOWNLOAD

Сайт:https://mockupdownload.ru/

Главная страница Mockup Download
Главная страница Mockup Download

Файлы отсортированы по 20 категориям. Есть раздел с FAQ. Также есть раздел с новинками. Плюс — возможность скачать с сайта руководства «Как сделать Mockup с помощью программы Photoshop (Фотошоп)».

PSD MOCKUP.RU

Сайт:https://psdmockup.ru/

Главная страница PSD MOCKUP.RU
Главная страница PSD MOCKUP.RU

Здесь вы найдете не только бесплатные мокапы, собранные в категории, но и PSD-макет, почитаете статьи и узнаете о проекте. Сервис уверенно говорит о себе: «PSDmockup.ru — самая большая и самая удобная в поиске база мокапов в рунете».

Mockupworld

Сайт:https://www.mockupworld.co/

Главная страница Mockupworld
Главная страница Mockupworld

Это уже зарубежный сервис, где файлы распределены по таким категориям как Paper & Books, Posters & Pictures, Signs & Billboards, Packaging, iPhone, iPad, MacBook, iMac, Apple Watch, Android Devices и др.

Интересен раздел «No Photoshop». Если вы перейдете в него в него, то увидите, что здесь предлагают использовать мокапы прямо в вашем браузере.

CSSAuthor

Сайт:https://cssauthor.com/mockups/

Главная страница CSSAuthor
Главная страница CSSAuthor

Бесплатные мокапы более чем в 100 категориях — Figma Mockup, Advertising, Apparel, Apple Product, Device, Food Mockup, Holiday, Miscellaneous, Packaging и др. По заявлению сервиса, общее число файлов — более 10 000.

Заключение

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

Оценить статью
1 ответов
+7 (495) 772 97 91
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течении дня, спасибо!