Мок-ап
Синонимы: mockup, макет, visual mockup, дизайн-макет, static design
NAME
Мок-ап — дизайн и ux
DESCRIPTION
Мок-ап (mockup) — статичное визуальное представление страницы с полным дизайном: цвета, шрифты, изображения, иконки, отступы. Это «фотография» будущего сайта. В отличие от wireframe (схема) и прототипа (интерактив), мок-ап показывает как сайт будет выглядеть, но не как будет работать (кнопки не кликаются).
Место мок-апа в процессе дизайна:
Wireframe (структура) → Мок-ап (визуал) → Прототип (интерактив) → Разработка
Что включает мок-ап:
- Типографика — размеры шрифтов, начертания, интерлиньяж
- Цветовая палитра — основные, акцентные, фоновые цвета
- UI-элементы — кнопки, формы, чекбоксы, переключатели
- Изображения — реальные фото или качественные плейсхолдеры
- Иконки — в едином стиле (линейные, залитые, 3D)
- Отступы и сетка — точные пиксели (spacing system)
Типы мок-апов:
| Тип | Назначение | Детализация |
|---|---|---|
| Концепт | 1-2 главных экрана, показать стиль | Высокая |
| Дизайн-система | Все компоненты в разных состояниях | Максимальная |
| Экраны продукта | Все страницы сайта/приложения | Полная |
| Презентационный | Для инвесторов, маркетинга | «Идеальная картинка» |
| Device mockup | Экран внутри рамки устройства (iPhone, Mac) | Для портфолио |
Правила хорошего мок-апа:
- Pixel-perfect — чёткие размеры, кратные 8 (8, 16, 24, 32 px)
- Реальный контент — не Lorem ipsum, а настоящие тексты
- Все состояния — hover, active, disabled, error
- Адаптивность — мобильная + планшет + десктоп версии
- Аннотации — комментарии для разработчиков (шрифты, отступы, поведение)
Инструменты:
- Figma — абсолютный стандарт (90% рынка)
- Sketch — классика для macOS (теряет позиции)
- Adobe XD — экосистема Adobe (закрывается)
- Photoshop — для сложной графики и фотореалистичных мокапов
- Framer — для интерактивных презентаций
Передача в разработку (handoff):
- Dev Mode в Figma — разработчик видит CSS-свойства каждого элемента
- Экспорт ассетов — иконки в SVG, изображения в WebP
- Спецификация — документ с описанием анимаций и логики
- Дизайн-токены — JSON с цветами, шрифтами, отступами
Кейс WEBVISUAL: Клиент — премиальный ресторан (Москва). Задача: сайт с бронированием столов и онлайн-меню. Создали 3 концепта мок-апа главной страницы в разных стилях:
- Концепт A: минимализм, много воздуха, чёрно-белые фото
- Концепт B: тёмная тема, акценты золотом, видео-фон
- Концепт C: editorial-стиль (как журнал), крупная типографика
Клиент выбрал концепт C. На его основе сделали 18 экранов (меню, шеф-повар, бронирование, события, контакты). Передали разработчикам через Figma Dev Mode. Результат: сайт запущен за 6 недель без единой правки «сделайте кнопку побольше». Бронирования через сайт выросли в 3.2 раза по сравнению со старым сайтом. Бюджет дизайна: 180 000 ₽.