Чтоб качественно презентовать разработанный дизайн, исполнители пользуются мокапами. С их помощью созданный сайт, логотип либо фирменный стиль можно показать на объектах, а не просто на белом фоне. Мокапы наглядно демонстрируют, как наработка будет смотреться в реальном мире: на вывеске, буклете, визитке, кружке, одежде, экране устройства.
Мокап — обычно PSD-файл (Photoshop) со специальным слоем (смарт-объектом), на который добавляется заготовленный эскиз.
Если кратко о том, что такое mockup — шаблонная картинка с предметом, на который можно добавлять любой стиль. Готовое изображение выглядит реалистично и красочно показывает будущий продукт. При наложении нового дизайна учитывается расположение объекта, углы, тени, перспектива.
В веб-дизайне mockup также означает макет сайта, который передает его визуальный стиль. Об этом ниже.
Mock-up — экономия времени и денег
Заказчику проще сделать вывод о дизайне, увидев его на своем продукте. Значит, меньше исправлений, недопониманий, ближе готовый проект. Плюс для обеих сторон.
Чтоб запустить масштабное производство товаров, нужно убедиться, что все расположено гармонично. Печатать — дорого и трудоемко. А если будут правки, все придется делать по новой? Сделать мокап проще, и он покажет конечный результат с разных сторон.
Также с помощью мокапов удобно демонстрировать адаптивность и отзывчивость веб-разработок. Можно показать, как будет выглядеть ресурс на разных устройствах.
Где искать мокапы?
- Скачать готовые шаблоны со специальных сайтов и наложить свой эскиз. Делается в Figma, но популярней Adobe Photoshop.
- Онлайн-генераторы. Если нужно сделать быстро и нет графических редакторов.
- Создать самостоятельно на основе фото товаров заказчика. Трудоемкий процесс. Но есть случаи, когда ни одна из представленных заготовок не подходит для проекта.
4 веб-ресурса для скачивания mock-up:
- Freepik.com — тут есть векторные иллюстрации, фотографии и мокапы. В строке поиска впишите «мокап», в фильтрах выберите PSD. Есть бесплатные и платные варианты.
- Mockupworld — большая библиотека. Удобная сортировка по категориям: продукты Apple, косметика, мода/одежда, еда/напитки, постеры/картинки и др. Можно работать прямо в браузере, не загружая в фотошоп.
- CSS Author — мокапы, шрифты, иконки, кодирование, фотографии, темы для WordPress и многое другое. Отдельно есть категория для Figma.
- PSD Freebies — кроме mock-up, тут можно найти веб-элементы (иконки, баннеры), веб-шаблоны, заготовки для печатных изделий.
5 популярных онлайн-генераторов:
- Smartmockups — можно редактировать фон, изменять цвета изображений, настраивать тень.
- Mockuper — большой выбор заготовок для презентации веб-разработок на различных гаджетах. Есть и другие категории.
- Renderforest — кроме мокапов, конструктор веб-сайтов, шаблоны видео, конструктор логотипов.
- Mockdrop — очень быстрый генератор. Для создания презентаций веб-проектов на устройствах.
- Dimmy.Club — выбор различных цветов девайсов, к изображению можно добавлять свой текст, применять эффекты.
У всех перечисленных библиотек есть бесплатные шаблоны и платные расширения.
Как использовать готовые мокапы в Photoshop
Готовые PSD-мокапы — самые популярные. Удобные в деле и качественный результат.
Как это работает:
- Скачиваем шаблон с ресурса
- Открываем файл в фотошопе
- В окне справа находим нужный слой (smart object). Если у объекта есть несколько сторон, на которые нужно добавить стиль, будет несколько слоев.
- Нажимаем на подходящий слой 2 раза левой кнопкой мыши
- В открытое окно вставляем подготовленный эскиз
- Удаляем шаблонный дизайн, если был (в окне справа)
- Сохраняем изменения «Ctrl + S» либо «Файл» и «Сохранить»
Онлайн-генераторами пользоваться еще проще и быстрее:
- Выбираем подходящий макет
- Загружаем картинку со своим дизайном, если презентуем сайт, можно вставить URL
- Подгоняем размер, выравниваем
- Скачиваем
Как создать mockup в Photoshop самому
Такой макет создается на основе фотографии продукта и состоит из слоев: фон, предмет, smart object.
Рассмотрим на примере кружки, на которую нужно вставить свой принт:
- Загружаем фото в редактор
- Отделяем кружку от фона (вырезаем), чтоб ее редактировать, менять цвет, добавлять блики
- Вставляем на нужный фон
- Там, где будет располагаться принт, добавляем прямоугольник и преобразовываем его в смарт-объект.
- Выбираем «Деформацию», придаем фигуре округлость, чтоб новый рисунок гармонично ложился на предмет
- Нажимаем на значок смарт-объекта. Откроется окно, куда перетаскиваем нужный эскиз
- Сохраняем
Разница между mock-up, wireframe, sketch и prototype
Выше мы больше говорили о мокапе как о «безликой» заготовке, на которую можно наложить свой дизайн, чтоб презентовать его заказчику. Но при создании сайтов это понятие еще применяют для определения макета будущего веб-продукта.
Кроме мокапа, макетами называют вайрфреймы, прототипы, а иногда даже скетчи. И тут происходит путаница. Разберем по порядку.
Скетч
Рисунок от руки. Главная задача — быстро набросать основную идею. Рисуют, чтоб визуализировать задумку из головы или представить ее команде.
Что такое вайрфрейм
Черно-белая схема веб-продукта. Главная задача — передать структуру будущего проекта.
Упор на расположение элементов и структурных блоков. Какой будет контент, где будет размещаться. Для описания интерактива или анимации тут добавляют комментарии.
Что такое мокап сайта
Красочный макет проекта.
Главная задача — передать визуальную концепцию.
Исполнитель учитывает структуру сайта и накладывает на него дизайн. Такой макет статичен, без интерактива. Особенно он важен там, где все держится на визуальной подаче: на сайтах с wow-эффектом и анимацией именно мокап первым показывает, какое настроение будет у готового проекта.
Также помним, что мокапы применяют для демонстрации веб-продуктов на различных устройствах и разрешениях экрана.
Прототип сайта
Функциональный макет.
Главная задача — оценить работу сайта, удобство интерфейса.
Кликабельные кнопки, ссылки, интерактивные элементы. Дает возможность протестировать работу веб-ресурса и устранить недостатки.
Главная задача mockup — красивая презентация дизайнерского проекта. Это готовая картинка с предметом, на который можно разместить уникальный фирменный стиль. В контексте разработки сайтов это понятие обозначает разноцветный макет.
Всем, кто хочет произвести хорошее впечатление на заказчика и продемонстрировать свою работу в лучшем свете, нужно работать с мокапами.