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

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

Мокап (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 меню «Файл - Зберегти як ...», вказати бажаний формат і зберегти зображення на комп'ютер. Готово! Досить пару раз попрацювати з подібними мокап, і ця процедура займатиме у вас буквально секунди. Зате різниця між просто дизайном в вакуумі і на мокап очевидна.

FAQ

Mockup: що це?

Це макет, зображення реального предмета, на який накладається дизайн: логотип, обкладинка, скріншот, інше.

Чи можна обійтися без мокап дизайнеру?

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

Мокап - це зазвичай екрани телефонів, планшетів і ноутбуків?

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

Правда, що чим яскравіше мокап, тим краще?

Ні! Головне завдання мокап - не зробити ваш дизайн гарніше, а дати аудиторії чітке розуміння, як об'єкт буде виглядати в реальності. Реалістичність мокап зазвичай важливіше його краси. Тому, наприклад, краще сфотографувати білборд на вулиці свого міста і використовувати його як мокап, ніж знайти макет такого ж борда на тлі хмарочосів Нью-Йорка. Чи не жертвуйте реалістичністю на догоду красі.

Що буде, якщо використовувати чужі мокап без дозволу автора?

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