Mockup

Общее #

Мокап (от англ. “mockup”) - это визуальная модель будущего продукта, обычно используемая в дизайне и маркетинге для демонстрации того, как будет выглядеть конечный продукт. Мокапы могут быть созданы для различных целей, например, для тестирования дизайна, оценки визуальных решений или презентации клиенту.

Ключевая особенность мокапа — статичность: он показывает, как продукт выглядит, но не как он работает. Интерактивность (переходы, анимация, работающие сценарии) — это уже территория прототипа. Мокап — это «фотография» интерфейса, а не его «действующая модель».

Мокапы могут быть созданы в разных форматах, например, в виде ручных эскизов, цифровых чертежей, фотографий или 3D-моделей. Они могут использоваться для создания макетов сайтов, приложений, упаковки, рекламных материалов и других продуктов. В целом, мокапы помогают дизайнерам и разработчикам лучше понимать и визуализировать их идеи, а также снижать риски и ошибки в конечном продукте.

Типы мокапов #

UI-мокапы (макеты интерфейса). Статичные изображения экранов продукта с финальным дизайном: цветами, шрифтами, реальным или близким к реальному контентом. Создаются в Figma, Sketch или Photoshop и служат промежуточным звеном между вайрфреймом и прототипом: на них утверждают визуальный стиль до того, как в него будет вложена работа по интерактивности.

Презентационные мокапы (мокапы-шаблоны). Готовые изображения-сцены, на которых продукт «помещается» в окружение: интерфейс приложения на экране телефона, сайт на мониторе ноутбука, логотип на фирменной кружке или визитке. Используются в маркетинге и продажах: для презентаций заказчику, портфолио, лендингов и рекламных материалов.

Составление #

Составление мокапа может зависеть от его цели и формата, но в целом процесс составления мокапа может включать следующие шаги:

Определите цель мокапа. Что вы хотите продемонстрировать своему клиенту или команде? Какой продукт вы создаете?

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

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

Создайте детальный макет. Перенесите эскиз на цифровую платформу, например, в Adobe Photoshop, Sketch или Figma, и начните добавлять детали. Включите в него все элементы интерфейса, цвета, шрифты и графику.

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

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

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

Что отображает #

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

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

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

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

Цвета и шрифты. Мокап может включать использованные цвета и шрифты, чтобы продемонстрировать стиль и брендинг продукта.

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

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

Когда используется #

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

При создании прототипа. Мокапы могут быть использованы в качестве первоначального этапа разработки прототипа. Они позволяют быстро проверить идеи и концепции без необходимости создания полноценного прототипа.

При демонстрации продукта. Мокапы могут быть использованы для демонстрации продукта клиенту или команде. Они помогают визуализировать конечный продукт и получить обратную связь от пользователей.

При обновлении дизайна продукта. Мокапы могут быть использованы для обновления дизайна продукта или интерфейса. Они позволяют быстро оценить изменения внешнего вида продукта и убедиться, что они соответствуют брендингу компании и требованиям пользователей.

При разработке сайта или приложения. Мокапы могут быть использованы при разработке сайта или приложения. Они позволяют оценить дизайн и пользовательский интерфейс продукта, а также проверить его функциональность и работоспособность.

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

Отличие от вайрфрейма и прототипа #

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

Вайрфрейм отвечает на вопрос «что где находится»: это грубая схема структуры страницы без оформления, чёрно-белые блоки и заглушки. Мокап отвечает на вопрос «как это выглядит»: та же структура, но уже с финальными цветами, шрифтами, графикой и реальным контентом. Прототип отвечает на вопрос «как это работает»: интерактивная модель, по которой можно кликать и проходить сценарии.

Чем правее по цепочке wireframe → mockup → прототип, тем дороже обходятся изменения. Поэтому структуру утверждают на вайрфреймах, визуальный стиль — на мокапах, и только потом инвестируются ресурсы в интерактивный прототип и разработку.

Отличие от дизайна #

Мокапы и дизайн - это два разных понятия, хотя они тесно связаны друг с другом. Главное отличие мокапа от дизайна заключается в том, что мокап - это предварительная модель или прототип продукта, который включает в себя основные элементы и детали конечного продукта, но не является полностью завершенным продуктом. В то время как дизайн - это процесс создания внешнего вида продукта, его стиля и компоновки, включая выбор цветовой палитры, типографии, компоновку элементов и т.д.

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

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

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