Що таке мокап? Як його використовують графічні та вебдизайнери

Час читання 7 хв.
Читaти статтю

Щоб якісно презентувати розроблений дизайн, виконавці користуються мокапами. З їх допомогою створений сайт, логотип або фірмовий стиль, демонструють на об’єктах, а не просто на білому тлі. Показують, як напрацювання виглядатимуть на вивісці, буклеті, візитці, одязі, дисплеї пристрою.

Мокап – зазвичай PSD файл (Photoshop) зі спеціальним шаром (смарт-об’єктом), на який додається заготовлений ескіз.

Якщо коротко про те, що таке mockup – шаблонна картинка з предметом, на який додають унікальний стиль. Готове зображення виглядає реалістично і барвисто показує майбутній продукт. При накладенні нового дизайну, враховується розташування об’єкта, кути, тіні, перспектива.

У вебдизайні mockup, також означає макет сайту, що передає його візуальний стиль. Про це нижче.

Mock-up – економія часу і грошей

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

Щоб запустити масштабне виробництво, потрібно переконатися, що все розташовано гармонійно. Друкувати – дорого і складно. А якщо будуть правки, доведеться друкувати ще раз? Зробити мокап простіше і він покаже кінцевий результат з різних сторін.

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

Де шукати мокап?

  1. Завантажити готові шаблони зі спеціальних сайтів та накласти свій ескіз. Робиться в Figma, але популярніший Adobe Photoshop.
  2. Онлайн-генератори. Якщо потрібно зробити швидко і немає графічних редакторів.
  3. Створити самостійно на основі фото товарів замовника. Трудомісткий процес, але є випадки, коли жоден з представлених шаблонів не підходить для проєкту.

5 вебресурсів для завантаження mock-up:

1. Freepik.com – тут є векторні ілюстрації, фотографії та мокапи. У рядку пошуку впишіть «мокап», у фільтрах виберіть PSD. Є бесплатні та платні варіанти.

2. Mockupworld – велика бібліотека. Зручне сортування за категоріями: продукти Apple, косметика, мода/одяг, їжа/напої, постери/картинки та ін. Можна працювати прямо в браузері, не завантажуючи в фотошоп.

3. CSS Author – мокапи, шрифти, іконки, кодування, фотографії, теми для WordPress і багато іншого. Окремо є категорія для Figma.

4. PSD Freebies – крім mock-up, тут можна знайти вебелементи (іконки, банери), вебшаблони, шаблони для друкованих виробів.

5. Freemockup – російською мовою з сортуванням по категоріях.

5 популярних онлайн-генераторів:

1. Smartmockups – можна редагувати фон, змінювати кольори зображень, налаштовувати тінь.

2. Mockuper – великий вибір для презентації веброзробок на різних гаджетах. Є й інші категорії.

3. Renderforest – крім мокапів є конструктори вебсайтів, шаблони відео, конструктор логотипів.

4. Mockdrop – дуже швидкий генератор. Для створення презентацій вебпроєктів на пристроях.

5. Dimmy.Club – вибір різних кольорів девайсів. До зображення можна додавати свій текст, застосовувати ефекти.

У всіх перерахованих бібліотек є безплатні шаблони та платні розширення.

Як використовувати готові мокап в Photoshop

Готові PSD мокапи –  найпопулярніші. Зручні в використанні та дають якісний результат.

Як це працює:

1. Завантажуємо шаблон з ресурсу

2. Відкриваємо файл у фотошоп

3. У вікні праворуч, знаходимо потрібний шар (smart object). Якщо в об’єкта є кілька сторін, на які потрібно додати стиль, буде кілька шарів.

4. Натискаємо на відповідний шар 2 рази лівою кнопкою миші

5. У відкрите вікно вставляємо підготовлений ескіз

6. Видаляємо шаблонний дизайн, якщо був (у вікні праворуч)

7. Зберігаємо зміни «Ctrl + S” або “Файл” і “Зберегти”

Онлайн-генераторами користуватися ще простіше і швидше:

  1. Вибираємо відповідний макет
  2. Завантажуємо картинку зі своїм дизайном, якщо презентуємо сайт, можна вставити URL
  3. Підганяємо розмір, вирівнюємо
  4. Зберігаємо

Як створити mockup в Photoshop самому

Такий макет створюється на основі фотографії продукту і складається з шарів: фон, предмет, smart object.

Розглянемо на прикладі горнятка, на яке потрібно вставити свій принт:

1. Завантажуємо фото в редактор

2. Відокремлюємо горнятко від фону (вирізаємо), щоб його редагувати, змінити колір, додати відблиски

3. Вставляємо на потрібний фон

4. Там, де буде розташовуватися принт, додаємо прямокутник і перетворюємо його в смарт-об’єкт.

5. Вибираємо «Деформацію», надаємо фігурі округлість, щоб новий малюнок гармонійно лягав на предмет

6. Натискаємо на значок смарт-об’єкта. Відкриється вікно, куди перетягуємо потрібний ескіз

7. Зберігаємо

Різниця між mock-up, wireframe, sketch і prototype

Вище, ми більше говорили про мокап, як «безлику» картинку товару, на яку можна накласти свій дизайн, щоб презентувати його замовнику. Але при створенні сайтів, це поняття ще застосовують для визначення макету майбутнього вебпродукту.

Крім мокапу, макетами називають вайрфрейми, протопипи, а іноді навіть скетчі. І тут відбувається плутанина. Розберемо по черзі.

Скетч

Малюнок від руки.

Головне завдання – швидко зафіксувати основну ідею.

Малюють, щоб візуалізувати задум з голови або представити її команді.

Що таке вайрфрейм

Чорно-біла схема вебпродукту.

Головне завдання – передати структуру майбутнього проєкту.

Упор на розташування елементів і структурних блоків. Який буде контент, де буде розміщуватися. Для опису інтерактиву або анімації тут додають коментарі.

Що таке мокап сайту

Кольоровий макет проєкту

Головне завдання – передати візуальну концепцію.

Виконавець враховує структуру сайту і накладає на нього дизайн. Такий макет є статичним, без інтерактиву.

Також пам’ятаємо, що мокап застосовують для демонстрації вебпродуктів на різних пристроях і розширеннях екрану.

Прототип сайту

Функціональний макет

Головне завдання – оцінити роботу сайту, зручність інтерфейсу.

Клікабельні кнопки, посилання, інтерактивні елементи. Дає можливість протестувати роботу вебресурсу та усунути недоліки.

Головне завдання mockup – красива презентація дизайнерського проєкту. Це готова картинка з предметом, на який можна розмістити унікальний фірмовий стиль. У контексті розробки сайтів, це поняття означає різноколірний макет.

Всім, хто хоче справити хороше враження на замовника і продемонструвати свою роботу в кращому світлі, потрібно працювати з мокапами.