Mock-up у роботі з клієнтами
Mock-up це, як правило, багатошарові зображення у форматі PSD, в які легко інтегрується дизайн фірмового стилю. Якщо говорити простими словами, то це заготівля, яку можна наповнювати будь-яким графічним контентом, коригувати його, вносити правки та інше, не змінюючи саму заготівлю.
Нагадаємо, що ми вже маємо вичерпну статтю "Що таке мокапи та навіщо вони дизайнеру". Рекомендуємо ознайомитись! Сьогодні ж ми поговоримо трохи про інше - як використовувати мокапи у роботі з клієнтами та чому це потрібно робити.
Чому мокапи кращі за звичайні макети при демонстрації дизайну клієнту
Макет — це, якщо можна сказати, зображення, відірване від зовнішнього світу. Воно існує в якомусь вакуумі та не дає коректного уявлення, як виглядатиме насправді. Наприклад, як виглядає сайт на екрані планшета або як виглядає логотип компанії на календарі. Для наочності подивимося на два варіанти подачі одного й того ж логотипу:
1. Логотип Starbucks "як є":
2. Мокап стаканчика з логотипом Starbucks:
Різниця у сприйнятті очевидна. У першому прикладі ми бачимо просто зображення без контексту, у другому наочно з демонстрацією його виду на реальному об'єкті. В даному випадку на склянці кави.
Робота з мокапами дає одразу кілька важливих переваг:
- Допомагає краще презентувати продукт і сформувати коректніше уявлення про нього.
- Скорочує кількість правок, так як клієнт відразу бачить, як дизайн виглядатиме на продукті та чи потрібні будь-які доробки.
- Істотно економить бюджет, тому що не потрібно друкувати пробні банери, візитки, вивіски та інше.
Мокапи у своїй роботі використовують як веб-дизайнери, так й фахівці інших профілів. Наприклад, архітектори, будівельники, дизайнери інтер'єрів тощо.
Як зробити мокап у Фотошопі
Наша головна порада: перед тим, як зробити mockup з нуля, переконайтеся, що вам дійсно це необхідно. Швидше за все, потрібний вам мокап вже давно є в Мережі, він безкоштовний і доступний до скачування.
Ось лише кілька сайтів із безкоштовними мокапами:
Якщо потрібний вам мокап знайти не вдалося (а це майже виключено), завдання ускладнюється: потрібно буде шукати відповідне зображення, фотографувати об'єкт або навіть створювати його в редакторі, розбивати на шари, налаштовувати смарт-об'єкти та багато іншого. Процес дуже трудомісткий, тому ми й рекомендуємо використовувати готові мокапи – все вже зроблено за вас.
Як використовувати мокапи у Photoshop
У роботі із готовими мокапами немає особливих складнощів. По суті процес складається із трьох етапів:
1. Завантажуємо мокап у форматі PSD та відкриваємо його у Photoshop. На панелі шарів потрібно знайти шар з назвою Your design here, Ваш дизайн або щось подібне.
2. Двічі клацаємо на іконці смарт-шару - у Фотошопі відкривається нове вікно з порожнім тлом, куди потрібно перенести ваш дизайн: логотип, фото, макет сайту і т.д.
3. Закриваємо вікно та натискаємо «Так», коли з'явиться вікно із пропозицією зберегти зміни.
Все готово! Ваше зображення додано на мокап. Більше того, якщо це передбачено, воно автоматично змінює пропорції, перспективу та інші параметри, задані самим мокапом. Дуже зручно!
Природно, ви можете будь-якої миті знову відкрити смарт-шар, відредагувати його, замінити зображення і т. д. Мокап оновиться відразу після збереження.
Як використовувати мокапи у Фігмі
Figma – зручний інструмент для дизайнера, але у плані роботи з мокапами конкурувати з Photoshop поки що не може. У каталозі онлайн-редактора є набори мокапів, які можна встановлювати як плагіни. Їх порівняно небагато, але базові мокапи в наявності - можете використати.
Набагато більше можливостей надає плагін Artboard Studio Mockups. У ньому величезна кількість мокапів – від класичних смартфонів, планшетів та ноутбуків до квіткових горщиків, тюбиків із кремом та спортивних снарядів. У блозі Figma є невелика стаття та відео по роботі з Artboard Studio Mockups. Тут описані базові можливості та функціонал інструменту.
Як прокачати навичку роботи з мокапами всього за 45 хвилин
Спеціально для всіх, хто вже працює з мокапами або лише планує розпочати, ми створили онлайн-інтенсив «Використовуй Мокапи». І вам варто його завітати!
Чому це круто?
- Максимум нових знань та практики всього за 45 хвилин.
- Ви самі вибираєте зручний час інтенсиву.
- Ціна — лише $12.99.
А тих, хто хоче з нуля опанувати професію веб-дизайнера, запрошуємо на авторський офлайн-курс Wezom Академії «Graphic Design». Станьте затребуваним digital-фахівцем, вивчіть функції та можливості найактуальніших інструментів дизайнера: Photoshop, Adobe Illustrator, Adobe After Effect, навчитеся працювати зі смарт-об'єктами та багато іншого. Мінімум теорії, максимум практики та фідбек!
