Мокап: что это и как его сделать
Мокап показывает дизайн так, как он будет выглядеть в жизни: сайт на экране телефона, логотип на кружке, обложку на книге. Разбираем, зачем он нужен и как сделать его бесплатно за полчаса.
Вайрфрейм, мокап и прототип
Эти три слова часто путают, хотя это три разных шага работы над дизайном.
- Вайрфрейм (wireframe): схема из серых блоков. Где меню, где заголовок, где кнопка. Цвета и картинок нет, задача одна: договориться о структуре.
- Мокап (mockup): статичная картинка, которая выглядит как готовый продукт. Цвета, шрифты, фотографии, иногда вставленные в экран телефона или в предмет.
- Прототип (prototype): кликабельная версия. Можно нажать на кнопку и попасть на следующий экран, так проверяют, удобно ли пользоваться.
Небольшому сайту или логотипу прототип часто не нужен, а вот мокап нужен почти всегда: без него заказчик видит «просто картинку» и не может оценить, как дизайн будет смотреться в жизни.
Какие бывают мокапы
- Экраны: сайт или приложение на ноутбуке, телефоне, планшете. Нужны для портфолио, презентации и карточки товара.
- Полиграфия: визитки, листовки, плакаты, книги, меню ресторана.
- Упаковка: коробки, банки, пакеты, этикетки на бутылках.
- Одежда и сувениры: футболки, кружки, кепки, значки. Без такого мокапа не обойтись, если вы продаёте мерч.
- Вывески и интерьер: логотип на фасаде, на стене офиса, на стойке ресепшена.
Как сделать мокап бесплатно
Figma. Откройте раздел Community и найдите «device mockup» или «phone mockup». Скопируйте файл к себе, вставьте свой экран в рамку устройства и экспортируйте картинку. Бесплатного тарифа для этого хватает.
Photopea. Онлайн-редактор в браузере, который открывает файлы Photoshop. Большинство мокапов в интернете продаются и раздаются как PSD со смарт-объектом. В Photopea дважды щёлкните по слою смарт-объекта, вставьте свой дизайн, сохраните, и он сам ляжет в перспективу экрана, книги или коробки.
Canva. Загрузите свою картинку и выберите мокап из встроенного набора: телефон, ноутбук, футболка, кружка. Это самый быстрый путь, но рамки там одинаковые у всех.
Пять правил хорошего мокапа
- Правильные пропорции. Экран телефона вытянутый (около 9:19,5), ноутбука широкий (16:10 или 16:9). Если вставить в телефон сайт, свёрстанный для компьютера, он сожмётся до нечитаемого. Для телефона нужна мобильная версия, о ней статья про адаптивный дизайн.
- Высокое разрешение. Вставляйте дизайн в два раза крупнее, чем он будет на картинке: на экранах с высокой плотностью пикселей мелкий макет выглядит мыльным.
- Настоящий текст. «Lorem ipsum» в мокапе выдаёт заготовку. Вставьте реальные заголовки и цены, тогда видно, помещается ли текст.
- Спокойный фон. Мокап показывает ваш дизайн, а не стол из дорогого дерева. Фон не должен спорить по цвету с макетом: подобрать тон поможет цветовой круг.
- Честность. В карточке товара мокап не должен приукрашивать: если кружка на самом деле печатается в один цвет, не показывайте её в пяти.
Лицензия: что можно делать с бесплатным мокапом
Слово «бесплатно» на странице мокапа не значит «для любых целей». Встречаются три варианта: только для личного использования, для коммерческого использования без перепродажи и полностью свободная лицензия. Если мокап нужен для продажи товара или для портфолио, за которое платят, выбирайте второй или третий. Отдельно проверьте фотографию внутри мокапа: людей и брендовые предметы на ней тоже могут защищать права.
Мокап для сайта
Если вы показываете заказчику будущий сайт, начните с готового шаблона: среди шаблонов сайтов найдётся близкий по структуре, и вместо рисования с нуля останется подставить свои тексты и палитру. Снимите экран на телефоне и компьютере, вставьте в мокапы устройств, и у вас готова презентация, по которой можно сразу сделать настоящий сайт.
Частые вопросы
Что такое мокап простыми словами?
Это картинка, на которой ваш дизайн вставлен в реальный предмет: экран ноутбука, футболку, коробку. Мокап помогает заказчику и покупателю представить готовую вещь.
Чем мокап отличается от прототипа?
Мокап статичный: это просто картинка. В прототипе можно нажимать кнопки и переходить между экранами. Вайрфрейм ещё проще мокапа: серые блоки без цвета и картинок.
Где сделать мокап бесплатно?
В Figma (готовые мокапы в разделе Community), в онлайн-редакторе Photopea, который открывает PSD-мокапы со смарт-объектами, или в Canva. Все три работают в браузере.
Можно ли использовать бесплатный мокап в коммерческом проекте?
Только если это разрешает лицензия. Многие бесплатные мокапы разрешены лишь для личного использования. Прочитайте лицензию на странице, откуда скачали файл.
