Нужно ли передавать мокапы в разработку, если есть дизайн-система?

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

UX и дизайнUI-дизайнПроцесс дизайна

Мокап интерфейса

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

КРАТКО

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

СИНОНИМЫ:мокапмакет интерфейсамокап интерфейсаMockup

Мокап — это «фотография» будущего экрана. Он не заменяет прототип и не показывает, как продукт работает в движении, но прекрасно объясняет, как он будет выглядеть.

Когда мокап незаменим

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

Что обычно включает

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

КОГДА ПРИМЕНЯТЬ

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

КОГДА НЕ СТОИТ

На очень ранних этапах — мокап слишком «дорогой» и его жалко переделывать
Для проверки сценариев и логики — здесь нужен прототип

ПРИМЕР

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

КАК ИСПОЛЬЗОВАТЬ В SHTAB

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

Попробовать бесплатно

Вопросы про «Мокап интерфейса»

Это разные инструменты для разных задач. Мокап показывает, как выглядит. Прототип показывает, как работает. В большинстве серьёзных проектов используются оба: сначала прототип для согласования логики, потом мокап для финального вида.

Ещё из «UX и дизайн»

Вся категория →

Atomic Design (атомарный дизайн)

Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».

Mobile-first (сначала мобильная версия)

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

UX и UI: в чём разница

UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.

Применяйте термины на практике

База знаний, задачи и цели — в одном сервисе. Бесплатно — без лимита по числу людей.

Попробовать бесплатно Все термины