11 крутых Figma-плагинов с мокапами

Mockup — плагин для поиска, редактирования и вставки качественных и популярных мокапов из библиотеки LS Graphics. Также позволяет создавать перспективное искажение для выбранного шейпа. Мокапы бесплатны для личных и коммерческих проектов

Angle Mockups — подставляет макет в 3D-мокапы: под нужным углом и в перспективе. Создатели записали краткую инструкцию по использованию плагина

Artboard Studio Mockups — доступ к библиотеке из +5300 мокапов: телефонов, планшетов, компьютеров, бутылок, книг, визиток, упаковок и т.д. В бесплатной версии можно использовать ограниченное число мокапов, расширенный пакет стоит 12 $ в месяц

Artboard Studio Mockups

Clay Mockups 3D — позволяет вставлять фреймы в мокапы девайсов, в том числе в модели для iPhone, Pixel 4 и Macbook Pro. Можно настроить цвет, угол камеры и модель устройства

Clay Mockups 3D

Vectary 3D Elements — легко добавляет недостающее третье измерение в 2D-проекты

Vectary 3D Elements

All Hands Mockup Generator — добавляет мокапы девайсов в руке

All Hands Mockup Generator

Mockuuups Studio — содержит более 1700 мокапов девайсов. Бесплатный для личного и коммерческого использования

BrandBird — быстро превращает любое изображение в пост в социальных сетях

MockRocket – 3D Mockups — создает 3D-мокапы последних моделей iPhone, MacBook, iMac и других. Есть настройка теней, цветов, отражений и прозрачного фона

MockRocket – 3D Mockups

Figmockups — позволяет создавать и настраивать красивые 3D-мокапы для любых интерфейсов и презентаций

Display by WeScreen — помогает отображать проекты на различных мобильных устройствах

Mock-up у роботі з клієнтами

Mock-up це, як правило, багатошарові зображення у форматі PSD, в які легко інтегрується дизайн фірмового стилю. Якщо говорити простими словами, то це заготівля, яку можна наповнювати будь-яким графічним контентом, коригувати його, вносити правки та інше, не змінюючи саму заготівлю.

Нагадаємо, що ми вже маємо вичерпну статтю “Що таке мокапи та навіщо вони дизайнеру” . Рекомендуємо ознайомитись! Сьогодні ж ми поговоримо трохи про інше – як використовувати мокапи у роботі з клієнтами та чому це потрібно робити.

Чому мокапи кращі за звичайні макети при демонстрації дизайну клієнту

Макет — це, якщо можна сказати, зображення, відірване від зовнішнього світу. Воно існує в якомусь вакуумі та не дає коректного уявлення, як виглядатиме насправді. Наприклад, як виглядає сайт на екрані планшета або як виглядає логотип компанії на календарі. Для наочності подивимося на два варіанти подачі одного й того ж логотипу:

1. Логотип Starbucks “як є”:

2. Мокап стаканчика з логотипом Starbucks:

Різниця у сприйнятті очевидна. У першому прикладі ми бачимо просто зображення без контексту, у другому наочно з демонстрацією його виду на реальному об’єкті. В даному випадку на склянці кави.

Робота з мокапами дає одразу кілька важливих переваг:

1. Допомагає краще презентувати продукт і сформувати коректніше уявлення про нього.
2. Скорочує кількість правок, так як клієнт відразу бачить, як дизайн виглядатиме на продукті та чи потрібні будь-які доробки.
3. Істотно економить бюджет, тому що не потрібно друкувати пробні банери, візитки, вивіски та інше.

Мокапи у своїй роботі використовують як веб-дизайнери, так й фахівці інших профілів. Наприклад, архітектори, будівельники, дизайнери інтер’єрів тощо.

Як зробити мокап у Фотошопі

Наша головна порада: перед тим, як зробити mockup з нуля, переконайтеся, що вам дійсно це необхідно. Швидше за все, потрібний вам мокап вже давно є в Мережі, він безкоштовний і доступний до скачування.

Ось лише кілька сайтів із безкоштовними мокапами:

Якщо потрібний вам мокап знайти не вдалося (а це майже виключено), завдання ускладнюється: потрібно буде шукати відповідне зображення, фотографувати об’єкт або навіть створювати його в редакторі, розбивати на шари, налаштовувати смарт-об’єкти та багато іншого. Процес дуже трудомісткий, тому ми й рекомендуємо використовувати готові мокапи – все вже зроблено за вас.

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

У роботі із готовими мокапами немає особливих складнощів. По суті процес складається із трьох етапів:

1. Завантажуємо мокап у форматі PSD та відкриваємо його у Photoshop. На панелі шарів потрібно знайти шар з назвою Your design here, Ваш дизайн або щось подібне.

2. Двічі клацаємо на іконці смарт-шару – у Фотошопі відкривається нове вікно з порожнім тлом, куди потрібно перенести ваш дизайн: логотип, фото, макет сайту і т.д.

3. Закриваємо вікно та натискаємо «Так», коли з’явиться вікно із пропозицією зберегти зміни.

Все готово! Ваше зображення додано на мокап. Більше того, якщо це передбачено, воно автоматично змінює пропорції, перспективу та інші параметри, задані самим мокапом. Дуже зручно!

Природно, ви можете будь-якої миті знову відкрити смарт-шар, відредагувати його, замінити зображення і т. д. Мокап оновиться відразу після збереження.

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

Figma – зручний інструмент для дизайнера, але у плані роботи з мокапами конкурувати з Photoshop поки що не може. У каталозі онлайн-редактора є набори мокапів, які можна встановлювати як плагіни. Їх порівняно небагато, але базові мокапи в наявності – можете використати.

Набагато більше можливостей надає плагін Artboard Studio Mockups. У ньому величезна кількість мокапів – від класичних смартфонів, планшетів та ноутбуків до квіткових горщиків, тюбиків із кремом та спортивних снарядів. У блозі Figma є невелика стаття та відео по роботі з Artboard Studio Mockups. Тут описані базові можливості та функціонал інструменту.

Як прокачати навичку роботи з мокапами всього за 45 хвилин

Спеціально для всіх, хто вже працює з мокапами або лише планує розпочати, ми створили онлайн-інтенсив «Використовуй Мокапи» . І вам варто його завітати!

Що таке мокап і навіщо вони дизайнеру

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

Мокап (mockup) – це спеціальний макет, зображення реального предмета, на яке накладається елемент дизайну: логотип, обкладинка, скріншот та інше. мокап дозволяють відразу побачити, як об’єкт буде виглядати в реальності.

Наприклад, дизайн сайту на екрані ноутбука, логотип на фірмовій сувенірної продукції тощо.

З технічної точки зору, мокап – це зазвичай PSD-файл з шарами і редагуються смарт-об’єктами. З такими файлами можна зручно працювати в Photoshop, розміщуючи елементи власного дизайну буквально в кілька кліків. Хоча є і більш прості мокап – звичайні jpeg-зображення, на які накладаються дизайнерські елементи.

Для чого потрібні мокапи?

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

Найкраще продемонструвати це на реальних прикладах. Для початку погляньте на такий варіант візуалізації дизайну веб-сайту:

В цілому все зрозуміло, кожен елемент помітний і знаходиться на своєму місці. Але чи дає така подача розуміння, як цей сайт буде виглядати в реальності? Та ще й на різних пристроях? Ні!

А тепер подивіться на варіант презентації з мокап:

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

Ми хочемо акцентувати вашу увагу, що мокап – це не прикраса, а практичний інструмент. Він наочно демонструє зображуваний об’єкт в реальності – так, як його і побачить кінцевий споживач в результаті. Будь то сайт, візитка, меню ресторану, додаток для смартфона або пляшка дорогого вина – що завгодно.

Плутанина в термінології

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

• мокап ( мок ап , mockup) — це непрацююча модель, виключно візуалізація. Це поки ще не дизайн, так як дизайном вона стане при появі інтерактивності. Так, мокап теж можуть бути інтерактивними і динамічними, але це тема для окремої розмови.
• Sketch — первісний начерк, зроблений, як правило, від руки.
• Wireframe — схема або креслення, свого роду «скелет» сторінки веб-сайту, додатки і т. д. У ньому немає як такого дизайну, тільки приблизні розміри заголовків, зображень, банерів, текстових блоків та інших елементів.
• Prototype — модель тестування концепції або процесу. У деяких випадках вже містить зображення, кольорово-тональні градації та інші елементи дизайну.
• Simulation — симуляції, використовувані при розробці дизайну сайтів і додатків. Вони дозволяють зображати сторінки максимально близько до їх фінішного виду. Тут вже працюють випадають списки, анімації, навігація та інше.

Існує дуже мало проектів, де використовуються всі ці стадії розробки і демонстрації напрацювань. Але ось мокап застосовуються практично повсюдно. Тому що це, по-перше, недорого. По-друге, швидко. А по-третє, наочно.

Де брати мокап для своїх проектів?

Найбільш «творчий» спосіб – створити самостійно. Наприклад, в тривимірному редакторі або просто сфотографувавши потрібний об’єкт. Але обидва способи пов’язані зі складнощами. Далеко не всі вміють і хочуть працювати в 3D-редакторах. Та й з фото теж не все просто – потрібно продумати композицію, розставити світло, зробити масу кадрів, «почистити» вдалі знімки від різних дефектів, підготувати PSD-файл, розбити його на шари і смарт-об’єкти. Чи хочете ви цим займатися? Відповідь очевидна.

Існує просто маса ресурсів з безкоштовними (і платними) мокап, а також онлайн-інструментів для роботи з ними. Ось лише деякі з них:

• Smartmockups – зручна платформа для швидкого створення мокап прямо в браузері. Розробники називають Smartmockups найшвидшим подібним веб-сервісом, для роботи з яким не потрібні спеціальні навички і досвід. Плюс тут велика база професійних мокап для скачування.

• Mockuuups Studio – додаток для створення мокап, яке працює в Windows, MacOS і Linux. У бібліотеці понад 700 найрізноманітніших мокап. В першу чергу це мокап різної техніки.

• Artboard Studio – майданчик для роботи з мокап і макетами продуктів безпосередньо в браузері. У бібліотеці налічується близько 1300 готових мокап, і кількість постійно зростає.

• Device Shots – досить простий і зручний веб-сервіс для швидкого створення макетів пристроїв зі знімками веб-сайту або мобільного додатку.
• Rotato – популярна програма для підготовки анімованих мокап під MacOS. Версій для Windows і Linux, на жаль, немає.

Також варті уваги майданчики: Veed, Screenly, MockJar, MockDrop, MagicMockups і інші. Їх десятки, якщо не сотні. І дуже багато – абсолютно безкоштовні. Так що необхідності створювати власні мокап в більшості випадків просто немає. Можна використовувати готові рішення, заощадивши час і нерви.

Чи можуть виникнути труднощі при роботі з мокап?

Безумовно, без труднощів не обходиться. Особливо при пошуку відповідних мокап. Якщо мова йде про зображення моніторів, смартфонів або планшетів – ніяких клопотів. Їх маса! Але ось з різними гуртками, значками, кепками, фартухами, пляшками і тому подібним складніше. Відповідні вам і вашому клієнту зображення доведеться ще пошукати. А використовувати перші-ліпші – не вихід, тому що підсумковий варіант може сильно відрізнятися від показаного вами. Клієнт навряд чи виявиться задоволений.

Що робити, якщо мокап вам все-таки не підходить?

1. Взяти за основу фотографії, надані замовником – уніформа, сувеніри, упаковка та інше.
2. Якщо проект недорогий і фотографічна точність не в пріоритеті, використовуйте ті мокап, які підходять найбільше, нехай і не на 100%.
3. Створюйте мокап з нуля. Це раціонально тільки для дорогих замовлень, де подібна втрата часу буде виправданою і компенсується гарною оплатою.

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

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

Базове керівництво по роботі з PSD-мокап в Photoshop

У роботі з PSD-мокап немає нічого складного. Для прикладу візьмемо такий мокап макбука:

Далі діємо за простою схемою:

1. Відкриваємо скачаний файл в Photoshop, дивимося на панель шарів і смарт-об’єктів в правому нижньому кутку: Нас цікавить шар з підписом «PUT YOUR SCREEN HERE» (може відрізнятися). У багатьох мокап він так і прописується, щоб ви відразу побачили, куди потрібно вставляти свій макет. До речі, якщо натиснути на зображення ока зліва від цього шару, картинка на екрані ноутбука зникне.
2. Двічі натискаємо на піктограму шару з зображенням, яке ми будемо міняти на своє. Зверніть увагу: не на назву, а саме на піктограму. Можливо, в цей момент Photoshop видасть вікно з повідомленням про відсутність вбудованого профілю. Тут можна нічого не міняти, а просто натиснути «Ок». Відразу після цього в вікні програми з’явиться тільки зображення з ноутбука, а на панелі шарів зміняться пункти.
3. Тепер нам залишається тільки взяти потрібне нам зображення (наш дизайн) з папки на комп’ютері і перетягнути у вікно Photoshop. Прямо поверх існуючої картинки. Як бачите, наше зображення не перекриває нижній шар повністю. Можна просто затиснути ліву кнопку миші на будь-який з точок по периметру і потягнути в сторону, щоб розтягнути до потрібних розмірів. У старих версіях Photoshop, щоб картинка зберігала пропорції, потрібно затиснути Shift.
4. Якщо виділення пропало, натисніть CTRL + T (або CMD + T в MacOS), щоб воно з’явилося знову. Непотрібний нам шар з вихідним зображенням в мокап можна видалити. Натисніть на нього на панелі шарів і натисніть Delete.
5. Після вставки, підгонки розміру і видалення попереднього шару отримуємо такий результат:
6. Останній крок. Натискаємо CTRL + S (або CMD + S), щоб зберегти зміни і переходимо у вкладку з нашим мокап. Вона повинна бути першою в списку. І ось ми бачимо, що вихідне зображення змінилося на наше, а сам мокап залишився без змін.
7. Далі залишається тільки вибрати у вікні програми Photoshop меню «Файл – Зберегти як . », вказати бажаний формат і зберегти зображення на комп’ютер. Готово! Досить пару раз попрацювати з подібними мокап, і ця процедура займатиме у вас буквально секунди. Зате різниця між просто дизайном в вакуумі і на мокап очевидна.

Курс “Використовуй мокапи”

Хочеш отримати навчання від Діани Смєлікової?

• Поговоримо про те, як використовувати мокапи у роботі та красиво презентувати інформацію клієнту.
• Від вас потрібен встановлений Photoshop (працюватимемо в ньому і посилання на завантаження фотошопу прикріпимо)