Безкоштовно · українською · 6 хв читання
Що таке мокап і як його зробити: покроково для початківців
Що таке мокап у дизайні: макет інтерфейсу і презентація роботи на фото предмета. Чим мокап відрізняється від вайрфрейму й прототипу і як зробити свій.
- Два значення слова «мокап» і коли яке потрібне
- Чим мокап відрізняється від вайрфрейму й прототипу
- Як вставити свій дизайн у мокап-шаблон у Photoshop
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік
П'ять кроків до мокапа
- 1
Крок 1
Зрозумійте, який мокап від вас чекають
- 2
Крок 2
Мокап інтерфейсу: від вайрфрейму до готового екрана
- 3
Крок 3
Презентаційний мокап: оберіть сцену
- 4
Крок 4
Вставте дизайн у шаблон
- 5
Крок 5
Перевірте чесно й покажіть іншим
- 1504
- учасники спільноти
- 8915
- повідомлень із запитаннями з липня 2024
- 9
- дизайн-ігор з вересня 2024
- 759
- людей писали в чат
Цей гайд для вас, якщо ви
Чуєте слово «мокап» і плутаєтеся
Вам кажуть «скинь мокап», а ви не впевнені, чого чекають: екран інтерфейсу, картинку на футболці чи прототип.
Готуєте роботу для портфоліо
Маєте логотип, упаковку чи екрани застосунку й хочете показати їх так, як вони виглядатимуть у реальному житті.
Вчитеся UI/UX
Переходите від вайрфреймів до візуального дизайну й хочете розуміти, що від мокапа чекають у команді.
Коротко
- У UI/UX мокап — це статичний детальний макет інтерфейсу з кольорами, шрифтами й зображеннями.
- У графічному дизайні мокапом називають презентацію роботи на фото предмета: футболки, телефона, коробки.
- Вайрфрейм показує структуру, мокап — вигляд, прототип дає перевірити взаємодію.
- Готові мокап-шаблони зручні, але перевіряйте ліцензію: не кожен безкоштовний файл можна використовувати де завгодно.
- Мокап не замінює перевірки наживо: друкований зразок чи екран телефона покажуть те, чого не видно на гарному фото.
П'ять кроків до мокапа
- 1
Крок 1
Зрозумійте, який мокап від вас чекають
Слово «мокап» у дизайні вживають у двох значеннях, і плутанина тут дуже поширена. Перш ніж братися до роботи, уточніть, про що йдеться:
- мокап інтерфейсу (UI mockup, design comp): за глосарієм Nielsen Norman Group, це статична детальна симуляція запропонованого дизайну інтерфейсу з візуальними деталями: кольорами й зображеннями;
- презентаційний мокап: ваш дизайн, вставлений у фото чи 3D-сцену реального предмета, наприклад логотип на вивісці, принт на футболці, екрани на телефоні;
- поруч живуть ще два терміни: вайрфрейм — каркас макета, що показує структуру й функції ще до візуального дизайну, і прототип — рання версія дизайну, на якій перевіряють ідеї та взаємодію.
💡 Якщо замовник чи викладач просить «мокап», спитайте одним реченням: «Вам потрібен макет екрана чи показати дизайн на предметі?» Так ви не витратите час на роботу не в тому напрямку.
- 2
Крок 2
Мокап інтерфейсу: від вайрфрейму до готового екрана
UI-мокап зазвичай роблять у Figma чи схожій програмі на основі вайрфрейму. Вайрфрейм уже відповів на питання «що де стоїть», тепер треба відповісти на «як це виглядає». NN/g описує точність прототипу через три виміри: інтерактивність, візуал і контент. Якщо скористатися цією шкалою, мокап має високий рівень візуалу й контенту, але не має взаємодії:
- замініть сірі блоки й «lorem ipsum» на реалістичний текст і зображення: так видно, чи вміщуються довгі назви і чи не розвалюється сітка;
- задайте типографіку: один-два шрифти з кирилицею, кілька розмірів для заголовків і тексту;
- задайте палітру й перевірте контраст: стандарт WCAG вимагає для звичайного тексту щонайменше 4.5:1;
- намалюйте не лише «ідеальний» екран, а й важливі стани: порожній список, помилку, завантаження.
💡 Мокап легко сприйняти за готовий продукт. Якщо показуєте його людям на ранньому етапі, кажіть прямо, що це ще не фінал і ви чекаєте коментарів до суті, а не лише до кольору кнопки.
Покажіть мокап до публікації
Свіжий погляд одразу помітить, де сцена перетягує увагу чи дизайн розмився. У спільноті діляться роботами й отримують фідбек. Заходьте, це безкоштовно.
Показати свій мокапБезкоштовно. 1504 дизайнери вже в спільноті.
- 3
Крок 3
Презентаційний мокап: оберіть сцену
Презентаційний мокап потрібен, щоб людина побачила роботу в контексті: як логотип виглядає на вивісці, а принт — на футболці. Сцена має відповідати задачі, а не просто бути гарною. Шукайте або створюйте сцену з урахуванням кількох речей:
- правдоподібність: предмет і ситуація мають бути такими, де ваш дизайн справді житиме;
- ракурс: для першого знайомства з роботою краще фронтальний вигляд, а складні ракурси — як доповнення;
- роздільність: файл мокапа має бути достатньо великим, щоб дрібні деталі вашого дизайну не розмилися;
- ліцензія: багато мокап-шаблонів у мережі безкоштовні лише для особистого використання, а для комерційного потрібна інша ліцензія чи вказання автора. Прочитайте умови перед завантаженням і збережіть їх разом із файлом.
💡 Мокап не має відволікати. Якщо перше, що помічають на картинці, — модна кав'ярня чи рослина на столі, а не ваш дизайн, оберіть спокійнішу сцену.
- 4
Крок 4
Вставте дизайн у шаблон
Більшість готових мокап-шаблонів для Photoshop зроблені на смарт-об'єктах (Smart Objects): шар, усередині якого лежить ваш дизайн, а перспектива, деформація й тіні вже налаштовані автором шаблону. Як це працює за довідкою Adobe:
- відкрийте панель шарів (Window → Layers) і знайдіть шар смарт-об'єкта, зазвичай його підписано на кшталт «Your design here»;
- клацніть правою кнопкою на шарі й оберіть Replace Contents, потім виберіть файл свого дизайну й натисніть Place: новий файл замінить старий, а всі трансформації збережуться;
- у Figma можна зробити простий мокап самостійно: вставте фото пристрою чи предмета і розмістіть свій екран чи дизайн поверх нього за допомогою маски.
💡 Готуйте дизайн у тих самих пропорціях, що й область смарт-об'єкта. Інакше він розтягнеться чи обріжеться, і мокап видасть, що робота під нього не готувалася.
Мокап виглядає несправжнім? Покажіть його спільноті → - 5
Крок 5
Перевірте чесно й покажіть іншим
Мокап — інструмент презентації, а не доказ, що дизайн працює. Гарне фото може приховати дрібний текст, який не прочитається на тканині, чи кнопку, у яку незручно влучити пальцем. Тому перед тим, як ставити мокап у портфоліо чи надсилати клієнту:
- перевірте UI-мокап на реальному екрані телефона, а не лише на моніторі;
- для друкованих робіт роздрукуйте хоча б фрагмент у реальному розмірі;
- у портфоліо підпишіть, що це концепт чи навчальний проєкт, якщо робота не була реалізована;
- поруч із мокапом покажіть і сам дизайн окремо: так видно і контекст, і деталі.
💡 Викладіть мокап у спільноті й спитайте: «Що ви бачите першим?» Якщо відповідають «гарне фото», а не «ваш логотип», мокап працює проти вас.
Ви не самі з цими питаннями
Ми порахували, про що найчастіше питають у нашій спільноті. Портфоліо й кейси — у трійці лідерів. А мокап — те, з чого починається враження від кейсу.
Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.
Практика з дедлайном і живим фідбеком
Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.
Дизайн-гра · січень 2026
Редизайн сайту НАОМА
Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.
AI-челендж · травень 2025
Лендинг, створений AI
Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.
Воркшоп · квітень 2026
Figmosha: AI у Figma
Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.
Безкоштовно. 1504 дизайнери вже в спільноті.
Як приєднатися — 1 хвилина
- 1
Натисніть кнопку
Відкриється Telegram зі спільнотою Spaceberry.
- 2
Приєднайтеся
Це безкоштовно: достатньо акаунта в Telegram.
- 3
Представтеся
Напишіть, з чого починаєте, і поставте перше питання.
Часті питання
Не знайшли відповіді? Поставте питання в спільноті — там відповідають.
Чим мокап відрізняється від прототипу й вайрфрейму?
За глосарієм Nielsen Norman Group, вайрфрейм — це каркас макета, що показує структуру й функції до візуального дизайну. Мокап — статичний детальний макет із кольорами й зображеннями. Прототип — рання версія дизайну, на якій перевіряють ідеї та взаємодію. Як зробити клікабельний прототип, читайте в гайді [Прототип у Figma](/guides/figma-prototype).
Де брати мокап-шаблони?
Шаблони є на стокових сайтах і в авторів, які викладають їх безкоштовно чи за гроші. Перед завантаженням читайте ліцензію: часто безкоштовні мокапи дозволені лише для особистого використання або вимагають вказати автора. Можна зробити мокап і самостійно: сфотографувати предмет і вставити дизайн у фото.
Чи можна зробити мокап без Photoshop?
Так. Простий мокап можна зібрати в Figma: вставити фото пристрою чи предмета й розмістити дизайн поверх нього з маскою. Але більшість готових шаблонів з перспективою і тінями розраховані саме на смарт-об'єкти Photoshop. Основи програми — у гайді [Photoshop для початківців](/guides/photoshop-for-beginners).
Чи можна ставити мокапи в портфоліо?
Так, мокапи допомагають показати роботу в контексті. Але не видавайте концепт за реалізований проєкт: якщо логотип ніколи не висів на вивісці, підпишіть роботу як концепт чи навчальну. І обов'язково покажіть поруч сам дизайн, щоб було видно деталі.
Чи платна спільнота Spaceberry?
Ні. Spaceberry Community — безкоштовна спільнота в Telegram, яку підтримує громадська організація Spaceberry Foundation, що працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram. Усередині — 1504 дизайнери, обговорення робіт і регулярні дизайн-ігри: однакове завдання для всіх, дедлайн і голосування спільноти.
Ваш мокап — на фідбек
Приєднуйтеся до 1504 дизайнерів, які вчаться, діляться роботами й грають у дизайн-ігри. Покажіть свій мокап і дізнайтеся, чи працює він на вашу роботу.
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік