Что такое мокап? Как его используют графические и веб-дизайнеры

Время чтения 7 мин
Читать статью

Чтоб качественно презентовать разработанный дизайн, исполнители пользуются мокапами. С их помощью созданий сайт, логотип либо фирменный стиль, можно показать на объектах, а не просто на белом фоне. Наглядно демонстрирует, как наработка будет смотреться в реальном мире: на вывеске, буклете, визитке, кружке, одежде, экране устройства.

Мокап — обычно PSD файл (Photoshop) со специальным слоем (смарт-обьектом), на который добавляется заготовленный эскиз.

Если кратко о том, что такое mockup – шаблонная картинка с предметом, на который можно добавлять любой стиль. Готовое изображение выглядит реалистично и красочно показывает будущий продукт. При наложении нового дизайна учитывается расположение объекта, углы, тени, перспектива.

В веб-дизайне mockup, также означает макет сайта, что передает его визуальный стиль. Об этом ниже.

Mock-up — экономия времени и денег

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

Чтоб запустить масштабное производство товаров, нужно убедиться, что все расположено гармонично. Печатать — дорого и трудоемко. А если будут правки, все придется делать по новой? Сделать мокап проще и он покажет конечный результат с разных сторон.

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

Где искать мокапы?

  1. Скачать готовые шаблоны со специальных сайтов и наложить свой эскиз. Делается в Figma, но популярней Adobe Photoshop.
  2. Онлайн-генераторы. Если нужно сделать быстро и нет графических редакторов.
  3. Создать самостоятельно, на основе фото товаров заказчика. Трудоемкий процесс. Но есть случаи, когда ни один с представленных заготовок не подходит для проекта.

5 веб-ресурсов для скачивания mock-up:

  1. Freepik.com — тут есть векторные иллюстрации, фотографии и мокапы. В строке поиска впишите «мокап», в фильтрах выберите PSD. Есть бесплатные и платные варианты.  
  2. Mockupworld — большая библиотека. Удобная сортировка по категориям: продукты Apple, косметика, мода/одежда, еда/напитки, постеры/картинки и др. Можно работать прямо в браузере, не загружая в фотошоп.
  3. CSS Author — мокапы, шрифты, иконки, кодирование, фотографии, теми для WordPress и многое другое. Отдельно есть категория для Figma.
  4. PSD Freebies — кроме mock-up, тут можно найти веб-елементы (иконки, баннеры), веб-шаблоны, заготовки для печатных изделий.
  5. Freemockup – на русском языке с сортировкой по категориям. 

5 популярных онлайн-генераторов:

  1. Smartmockups — можно редактировать фон, изменять цвета изображений, настраивать тень.
  2. Mockuper – большой выбор заготовок для презентации веб-разработок на различных гаджетах. Есть и другие категории.
  3. Renderforest — кроме мокапов, конструктор веб-сайтов, шаблоны видео, конструктор логотипов.
  4. Mockdrop – очень быстрый генератор. Для создания презентаций веб-проектов на устройствах.
  5. 5.    Dimmy.Club — выбор различных цветов девайсов, к изображению можно добавлять свой текст, применять эффекты.

      У всех перечисленных библиотек есть бесплатные шаблоны и платные расширения.

Как использовать готовые мокапы в Photoshop

Готовые PSD мокапы — самые популярные. Удобные в деле и качественный результат.

Как это работает:

  1. Скачиваем шаблон с ресурса
  2. Открываем файл в фотошоп
  3. В окне справа, находим нужный слой (smart object). Если у объекта есть несколько сторон, на которые нужно добавить стиль, будет несколько слоев. 
  4. Нажимаем на подходящий слой 2 раза левой кнопкой мыши
  5. В открытое окно вставляем подготовленный эскиз
  6. Удаляем шаблонный дизайн, если был (в окне справа)
  7. Сохраняем изменения «Ctrl+S” либо «Файл» и «Сохранить»

Онлайн-генераторами пользоваться еще проще и быстрее:

  1. Выбираем подходящий макет
  2. Загружаем картинку со своим дизайном, если презентуем сайт, можно вставить URL
  3. Подгоняем размер, выравниваем
  4. Скачиваем

Как создать mockup в Photoshop самому

Такой макет создается на основе фотографии продукта и состоит из слоев: фон, предмет, smart object.

Рассмотрим на примере кружки, на которую нужно вставить свой принт:

  1. Загружаем фото в редакторов
  2. Отделяем кружку от фона (вырезаем), чтоб ее редактировать, менять цвет, добавлять блики
  3. Вставляем на нужный фон
  4. Где будет располагаться принт, добавляем прямоугольник и преобразовываем его в смарт-обьект.
  5. Выбираем «Деформацию», придаем фигуре округлость, чтоб новый рисунок гармонично ложился на предмет
  6. Нажимаем на значок смарт-обьекта. Откроется окно, куда перетаскиваем нужный эскиз
  7. Сохраняем

Разница между mock-up, wireframe, sketch и prototype

Выше, мы больше говорили об мокапе, как «безликой» заготовке, на которую можно наложить свой дизайн, чтоб презентовать его заказчику. Но при создании сайтов, это понятие, еще применяют для определения макета будущего веб-продукта.

Кроме мокапа, макетами называют вайрфреймы, протопипы, а иногда даже скетчи. И тут происходит путаница. Разберем по порядку.

Скетч

Рисунок от руки. Главная задача — быстро набросать основную идею. Рисуют, чтоб визуализировать задумку с головы или представить ее команде.

Что такое вайрфрейм

Черно-белая схема веб-продукта. Главная задача — передать структуру будущего проекта.

Упор на расположение элементов и структурных блоков. Какой будет контент, где будет размещаться. Для описания интерактива или анимации тут добавляют комментарии.

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

Красочный макет проекта

Главная задача — передать визуальную концепцию.

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

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

Прототип сайта

Функциональный макет

Главная задача — оценить работу сайта, удобность интерфейса.

Кликабельные кнопки, ссылки, интерактивные элементы. Дает возможность протестировать роботу веб-ресурса, и устранить недостатки.

Главная задача mockup — красивая презентация дизайнерского проекта. Это готовая картинка с предметом, на который можно разместить уникальный фирменный стиль. В контексте разработки сайтов, это понятие обозначает разноцветный макет.

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