Що таке мокап
Мокап (від англ. mockup — «макет») — це статичне зображення, яке показує, як виглядатиме готовий продукт. У вебдизайні це детальний макет сторінки сайту чи екрана застосунку з реальними кольорами, шрифтами, іконками й фотографіями, але без робочих кнопок.
У графічному дизайні мокапом також називають шаблон, куди вставляють свій дизайн, щоб побачити його «в житті»: логотип на чашці чи футболці, обкладинку на книжці, сайт на екрані ноутбука або смартфона.
Довідкова таблиця
| Етап | Що показує | Деталізація | Інтерактивність |
|---|---|---|---|
| Вайрфрейм (wireframe) | структуру: де які блоки й кнопки | низька, сірі блоки без кольорів | немає |
| Мокап (mockup) | як продукт виглядатиме: кольори, шрифти, зображення | висока | немає |
| Прототип (prototype) | як продукт працює: переходи, натискання | від середньої до високої | є |
Як це працює
У процесі створення інтерфейсу мокап займає місце між вайрфреймом і прототипом (див. таблицю). Вайрфрейм — схема з сірих блоків, яка показує структуру сторінки. Мокап «одягає» цю структуру у фірмовий стиль: кольори, типографіку, зображення. Прототип додає інтерактивність — можна натискати кнопки й переходити між екранами, щоб перевірити зручність.
Мокапи інтерфейсів створюють у редакторах для дизайну на кшталт Figma чи Sketch, а також у Photoshop. Для мокапів товарів і пристроїв існують готові шаблони: дизайнер замінює спеціальний шар на свій макет, і зображення автоматично накладається з перспективою та тінями.
Оскільки мокап статичний, його швидше створити й змінити, ніж робочий прототип чи код. Тому на цьому етапі зручно погоджувати з замовником візуальний стиль.
Навіщо потрібен мокап
Мокап допомагає всім учасникам проєкту побачити результат до того, як витрачено час на розробку. Замовник оцінює стиль і може попросити зміни, поки вони дешеві. Розробники отримують точні розміри, кольори й відступи. Маркетологи використовують мокапи товарів для презентацій, інвесторів і реклами.
Для дизайнера-початківця мокапи — спосіб гарно оформити портфоліо: той самий логотип, показаний на вивісці, візитці та сайті, виглядає переконливіше, ніж на білому тлі.
Використовуючи готові мокапи з інтернету, перевіряйте ліцензію: частина шаблонів безкоштовна лише для особистого використання, а для комерційних проєктів потрібна окрема ліцензія або зазначення автора.
Часті питання
- Мокап це що простими словами?
- Це реалістична «картинка» майбутнього продукту: як виглядатиме сайт, застосунок, упаковка чи футболка з принтом. Вона показує зовнішній вигляд, але не працює як справжній продукт.
- Чим мокап відрізняється від прототипу?
- Мокап статичний і показує лише вигляд. Прототип інтерактивний: у ньому можна натискати кнопки й переходити між екранами, щоб перевірити, як продукт працює.
- Чим мокап відрізняється від вайрфрейму?
- Вайрфрейм — спрощена схема розташування блоків без кольорів і зображень. Мокап — детальний макет із фінальним візуальним стилем.
- У якій програмі зробити мокап?
- Мокапи інтерфейсів роблять у Figma, Sketch чи Photoshop. Для мокапів товарів і пристроїв використовують готові шаблони для Photoshop або онлайн-генератори мокапів.
- Що таке мокап сайту?
- Це детальне зображення сторінок майбутнього сайту з фінальними кольорами, шрифтами, текстами й фото. За ним верстальник і розробник відтворюють сайт, а замовник заздалегідь бачить, як він виглядатиме.
Джерела: Sketch — Wireframe vs mockup vs prototype.