Что такое мокап в дизайне, зачем он нужен

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

мокап

В основном мокапы используются для демонстрации:

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

Для нужен мокап?

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

ноутбук мокап

В чем отличие мокапа от прототипа или вайрфрейма?

Прототип сайта - это окончательный схематичный концепт будущего сайта.

Вайрфрейм - это схематичный набросок, который отображает структуру страницы или сайта.

Где найти мокапы?

Мокапы можно создать самому в программах:

  • Adobe Photoshop
  • illustrator

Или же скачать готовые на сайтах:

  • freepik.com
  • unsplash.com
  • vexels.com
  • free-mockup.com
  • pixabay.com

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

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

apple мокап