мокап для иконки приложения

20 бесплатных инструментов для создания мокапов

Хочу поделиться с вами небольшой, но полезной подборкой онлайн инструментов и приложений для работы с мокапами. Отличный вариант для тех, у кого нет возможности использовать Photoshop, но необходимо быстро сделать красивый мокап для сайта или презентации.

Большая платформа для создания мокапов. От мобильных устройств до упаковки еды и одежды. По словам разработчиков, это самый быстрый веб-сервис для создания мокапов, он простой в использовании — не нужны дополнительные навыки или опыт в дизайне. Быстрорастущая библиотека профессиональных мокапов.

Приложение для создания мокапов доступное для Windows, Mac и Linux. В арсенале имеется более 700 различных мокапов с техникой и красивыми сценами. Мокапы имеют высокое разрешение 5472×3648.

Мощный генератор мокапов от Envato. Библиотека насчитывает более 30 различных тысяч объектов и сцен.

Первое онлайн-приложение для графического дизайна, в основном ориентированное на макеты продуктов. Создавайте, анимируйте, работайте совместно и делитесь своими проектами с помощью обширной библиотеки ресурсов и шаблонов прямо в браузере. В библиотеке имеется больше 1290 мокапов для ваших проектов. Один из самых мощных редакторов подобного типа.

Удобный онлайн инструмент, который позволяет легко генерировать красивый мокапы и скачивать их в высоком разрешении.

Позволяет выбирать 3d модели и готовые шаблоны сцен и крутить их как душе угодно.

Бесплатный и простой инструмент для создания макетов устройств для вашего приложения и дизайна веб-сайтов.

Минус: Не поддерживает Safari.

Позволяет создавать бесплатные анимированные макеты продуктов с видео и анимированные GIF-файлы.

Приложение, которое позволяет легко добавлять кадры устройства в записи экрана для создания красивых макетов видео.

Создавайте пользовательские макеты 3D-устройств в своем браузере.

Создавайте бесплатно макеты устройств в высоком разрешении со снимками экрана вашего веб-сайта или мобильного приложения.

Очень удобный инструмент который позволяет создать предварительный просмотр вашего приложения в App Store без необходимости его публикации.

Файлы изображений и эскизов популярных устройств.

Простой Генератор мокапов устройств для ваших скриншотов.

Небольшая библиотека с бесплатными и красивыми мокапами для презентаций. Из минуса: нет онлайн редактирования.

Одно из лучших приложений на Mac для создания анимационных мокапов. Постоянно пользуюсь сам. Рекомендую.

Не совсем мокапы, но инструмент полезный. Простой и быстрый способ добавить субтитры и многое другое к вашим видео в интернете.

Делайте чистые скриншоты любого веб-сайта.

Мгновенно превратите свои скриншоты в красивые мокапы рабочего стола.

712+ реалистичных мокапов для вашего дизайна. Мощный и удобный редактор.

Небольшая коллекция мокапов. С простым редактированием.

Простой и быстрый инструмент для создания мокапов для телефонов, планшетов и ноутбуков.

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin. Там ты найдешь больше интересных материалов о дизайне.

В статье какой-то утиль из прошлого века

Я улучшил статью и добавил предлагаемые вами ссылки. Заслуживает ли теперь материал вашего лайка?

Ну не все утиль ) Есть попроще инструменты, есть посложнее. Спасибо за ссылки. Есть действительно крутые сервисы, не знал о них.

Спасибо большое. Полезные ссылочки

Добавил в закладки, спасибо!

песня для автора поста

Очень хорошая песня, спасибо.

Ничего не удешевляет дизайн, как эти бесплатные мокапы)

Жаль, что Rotato уже платный(((

Егор Мостовщиков написал, что больше не хочет заниматься изданием.

Источник

Инструмент: Создание интерактивных макетов приложений при помощи Mockup.io Статьи редакции

Менторы рубрики «Интерфейсы» на vc.ru приступают к публикации кейсов и инструментов российских компаний, которые будут полезны представителям индустрии.

Сегодня в выпуске — обзор инструмента для прототипирования приложений Mockup.io, подготовленный его командой.

Разработка приложения для мобильного устройства — это сложный и трудоемкий процесс. В его основе лежат четыре основных этапа: планирование, дизайн, программирование, тестирование.

Какой из этих шагов важнее — решить сложно. Но их объединяет то, что на каждом из этих этапов очень важно правильно и эффективно выстроить взаимоотношения между всему участниками процесса: от заказчика до разработчика. В этой цепи очень полезными оказываются прототипы:

Что такое Mockup.io

Mockup.io — это коммуникационная платформа, которая, позволяет:

В основном она предназначена для UI/UX-дизайнеров и разработчиков мобильных приложений. Но и обычный предприниматель — например, заказчик приложения тоже сможет пользоваться ею без труда.

Существенным преимуществом Mockup.io является то, что ее создатель — компания Alterplay — уже много лет занимается разработкой мобильных приложений. Поэтому функциональность Mockup.io основана на реальном опыте команды и решении насущных проблем аудитории.

Стоимость

Mockup.io — это сервис, работающий по подписке. Существуют три подписных плана. Все они позволяют приглашать в проект неограниченное число коллег и не имеют ограничений по функциональности. Приложения для iOS и Android устройств бесплатны.

Если вам нужны специальные условия подписки, можно обратиться напрямую в компанию.

Пользователи имеют возможность подписаться на более дорогой или более дешевый план в любой момент. При обновлении плана вся информация о проектах остается неизменной.

Основными конкурентами Mockup.io являются такие приложения, как Notism, InVision, RedPen, Marvell App. Все они основаны на работе с готовыми мокапами страниц.

Основные преимущества каждой из платформ:

Существуют также более сложные приложения, такие, например, как UXPin, Balsamique, или Avocode. Но это, в первую очередь, конструкторы, которые позволяют создавать прототипы страниц с нуля.

Основные возможности Mockup.io

Презентация дизайна приложения

Автоматическое обрамление загруженных мокапов в виртуальные фреймы устройств: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо абстракного устройства (для кастомных размеров экранов). В новой версии уже добавлен фрейм для iPad Pro.

Создание интерактивных прототипов

Создание кликабельных областей, их линковка с другими экранами приложения, установка различных анимированных переходов (transitions) между экранами.

Совместная работа

Приглашение нескольких пользователей в проект для одновременной работы над ним: просмотра, комментирования, создания интерактивных областей, тестирования юзабилити, прочее.

Предварительный просмотр иконки

Загрузка нескольких иконок в проект — позволяет загрузить несколько разных икокнок и увидеть, как каждая из них будет выглядеть в реальном контексте: на домашнем экране устройства или в магазине (App Store или Play Market).

Тестирование прототипа на реальном устройстве

Нативные iOS и Android для тестирования прототипа на реальных устройствах: iPhone, iPad, Android Phone, Android Tablet.

Организация проекта

Папки и метки позволяют структурировать проект, упрощают поиск и доступ к необходимым макетам.

Настраиваемая система меток позволяет присваивать мокапам различные статусы: «в работе», «утверждено», «ждет обсуждения».

Поддержка анимаций и скрола

Приложении поддерживает GIF-анимированные макеты и «длинные» страницы (при загрузке в Mockup.io автоматически трансформируются в страницы со скроллом).

Использование приложения

При создании проекта необходимо выбрать устройство, для которого вы будете прототипировать: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо пользовательское устройство (необходимо указать размеры экрана).

Управление проектом осуществляется через меню настроек (Project Settings). Оно доступно внутри каждого проекта, в правом верхнем углу. Это меню позволяет:

Контекстное меню проекта (вызывается правой кнопкой мыши) позволяет:

Хотелось бы отдельно остановиться на возможности предварительного просмотра иконки. Тот, кто сталкивался с разработкой и продвижением приложения в App Store или Google Play Market, знает, как сильно иконка влияет на восприятие приложения целевой аудиторией. Особенно при первом визуальном контакте. Хорошая иконка может существенно улучшить уровень продаж, привлекает внимание пользователя, влияет на запоминаемость приложения.

В Mockup.io есть возможность загрузить несколько вариантов иконки и оценить их внешний вид в реальном контексте: на экране устройства, в листинге или на страничке приложения в App Store или Play Market.

Основная работа с макетами — настройка ссылок и прокрутки, присвоение меток, переименование, удаление, обновление — осуществляются через контекстное меню макета.

Например, для создания интерактивных ссылок в прототипе используется меню «Links and Scrolling». Интерактивная (кликабельная) зона выделяется левой кнопкой мышки. В появившемся окне можно выбрать экран, на который эта зона будет ссылаться.

Не забываем и про нативные iOS или Android-анимированные переходы между страницами (transitions). В Mockup.io можно выбрать любую из существующих анимаций перехода от страницы к странице.

С одним из последних обновлений в приложение была добавлена возможность одновременного редактирования интерактивных зон. Теперь несколько человек могут работать с ними, при этом все изменения сделанные одним из пользователей мнгновенно отобразяться на экране других.

Кроме линковки страниц, меню «Links and Scrolling» позволяет работать с «длинными» страницами — настраивать фиксированные зоны для скроллинга. Для того, чтобы эти зоны можно было устанавливать максимально точно, в Mockup.io предусмотрена небольшая лупа. Она немного увеличивает ту зону, в которой устанавливается фиксатор.

Общение между участниками проекта происходит через сообщения. Их можно создавать на странице каждого мокапа. Это упрощает взаимопонимание. Кроме этого, если один из пользователей какое-то время не следил за общением, он легко может восстановить всю хронологию обсуждения и внесенных изменений.

Как мы говорили ранее, любой из прототипов для iOS или Android-устройств можно запустить на реальном телефоне или планшете. Для этого потребуется скачать и установить приложение из App Store или Google Play.

После запуска Mockup.io на устройстве вы попадете в список доступных проектов (созданных вами или в которые вы приглашены). Выбрав нужный проект и экран, с которого необходимо начать работу с прототипом, нажимаете кнопку Play.

При этом интерактивные зоны на каждом их мокапов будут подсвечены голубой рамкой. В приложении поддерживаются GIF-анимированные мокапы. «Длинные» страницы будут отображены как страницы со скроллингом.

Для удобства новых пользователей, в веб-приложении создан демонстрационный проект, который отображает основные возможности Mockup.io. Он доступен в тот момент, когда проект уже создан, но в него не загружено ни одного мокапа.

Планы и прогнозы

За последние годы приложения для мобильных телефонов становятся must-have для многих компаний. Это уже не прихоть, а необходимость: пользователь все больше и больше действий совершает с мобильных устройств, пользуется электронными аксессуарами.

Именно этот тренд и определеяет востребованность таких платформ, как Mockup.io. Они помогают в разработке приложений, упрощают коммуникацию с клиентами и внутри команды, помогают экономить временные и денежные ресурсы.

Главные преимущества Mockup.io:

Mockup.io относится к инструментам прототипирования, которые работают с готовыми мокапами страниц: это могут быть схематические макеты или полностью нарисованные дизайны. Она не предназначена для построения страниц приложения «с нуля» и не поддерживает работу со слоями. Альтернативой работы со слоями может служить поддержка GIF-анимированных макетов.

Несмотря на свою простоту, Mockup.io — очень продуманный инструмент. В процессе работы с ним открываешь для себя очень много приятных «мелочей», которые существенно упрощают работу. Это еще раз доказывает тот факт, что инструмент создавался специалистами, которые постоянно работают с прототипами и знают, как можно улучшить и упростить работу с ними.

Присылайте собственные интерфейсные кейсы, в результате которых вам удалось заметно улучшить (или, наоборот, ухудшить) показатели проекта, а также описания инструментов, которые будут полезны представителям индустрии. Интересные материалы обязательно попадут на страницы рубрики «Интерфейсы».

Источник

50+ премиум мокапов (скачать бесплатно). Обновлено в 2021 году

6 комментариев 30.03.2019 обновлено 4 месяца назад

Мокап – это файл, созданный в графическом редакторе, на котором пользователь может разместить информацию о своем бренде (например, рекламу). Широко используется в продвижении любого вида товаров или услуг. Поэтому, если вы запланировали маркетинговую кампанию или просто хотите презентовать свой дизайн в портфолио, будет уместно скачать несколько мокапов по нужной вам тематике.

Представленные мокапы хорошо подойдут для рекламы IT-продукции, цифровых услуг, мероприятий, и мобильных оболочек. Однако, также присутствуют несколько вариантов для женской косметики, алкоголя и художественных работ.

Оглавление

Animated in Photoshop Mockup – IPhone

Анимированный мокап, который работает в Фотошопе. Когда вы вставите свой дизайн на первый экран, мокап автоматически подтянет отражение на второй.

Animated in Photoshop Mockup – Office

Анимированный мокап телефона для Фотошопа. Полностью совместим с пакетом мокапов I`m Creator. В этом варианте отражения также полностью анимированы.

iPhone Mockup

В этом макете экраны – это отдельные настраиваемые элементы.

Perspective. T-Shirt Mockup

Отличный макет футболки в комплекте с картой смещения для реалистичного просмотра. Все изолировано и включает в себя цветные маски.

Perspective. Stationery Mockup

Все элементы настраиваются отдельно, перемещайте их, используйте цветовые маски и меняйте цвет, как вам заблагорассудится.

Frontview. Stationery Mockup

Мокап конверта, сумки и ярлыка. Включены функции предыдущего мокапа – все элементы настраивается отдельно, их можно перемещать и менять им цвет.

Frontview. Stationery Mockup – I am Creator

Еще один отличный макет с папкой, ярлыком и сумкой. Доступна настройка цветовой палитры и перемещение предметов.

Topview. Stationery Mockup

Отличный мокап конверта. Можно менять его расположение и цветовую палитру.

Fancy Items. Hero Image

Отличный вариант для любого веб-проекта. Вы можете менять расположение и цвет каждого элемента.

iPad Pro Mockups

Мокап знаменитого планшета. Настраивайте фон дисплея и перемещайте карандашом по экрану, имитируя свайпы.

Scene For Presenting your work

Каждый элемент изолирован и имеет цветовые маски, вы можете перемещать элементы, создавать собственную композицию или менять цвета. Совместимо с паком I am Creator.

Animated iPhone 7 Mockup for Photoshop

Мокап в разрешении Full HD. Может быть использован в форматах GIF, PNG и JPG. Совместим с Photoshop CS6 Extended или CC +.

Animated iPad Pro Mockup for Photoshop

Мокап аналогичный предыдущему, только вместо телефона здесь используется планшет. Экспортируйте файл в удобный вам формат (GIF, PNG, JPG) и версию программы (CS6 Extended или CC +).

Hero-Header image – Play

Каждый элемент изолирован и имеет цветовые маски. Перемещайте элементы и меняйте цветовую палитру, чтобы создать собственную композицию. Часть набора OhMy для дизайнера. Совместимо с Photoshop CS4 +.

Hero-Header image – Cake

Мокам из того же набора, что и предыдущий. Элементы изолированы, можно менять их расположение и цвет.

Cosmetics Branding Mockup

Каждый элемент изолирован и имеет цветовые маски, вы можете перемещать элементы, создавать собственную композицию или менять цвета. Часть Beauty Mockup Scene Generator, полная версия состоит из 530+ предметов в 3-х измерениях. Совместим с Photoshop CS4 +.

Three Branding Scenes in 3 Angles

Макет часть каталога Beauty Mockup Scene Generator. Предметы перемещаются, также доступна настройка композиции и цветовой палитры.

IPhone 7 Mockup for Sketch and Photoshop

iPhone 7 Макет с различными вариантами настроек. Мокап является частью UI Presentation Kit. Совместим с Photoshop CS4 + и Sketch.

Landing Huge UI Kit, for Photoshop and Sketch

Набор мокапов для интрефейса вашего интернет-ресурса. Изображения взяты с набора OhMy! Инструментарий для дизайнера не включен. Совместим с программами Photoshop и Sketch.

Animated Sketchy Mockup for Photoshop

Бесплатный анимированный макет iPhone. Файл редактрируется в Фотошопе. Для экспорта в виде статического изображения доступно 120 кадровов с разрешением 1920 × 1080 px.

7 Boxes Mockups for Photoshop

Макеты коробок предназначены для презентации ID или логотипа. Включено 7 сцен. Каждая сцена включает в себя 2 материала: полноцветный и картонный, просто выберите то, что вам нужно, в панели слоев Photoshop.

Wireframe Prototyping System for Sketch

Для презентации мобильного приложения или интернет ресурса отлично подойдут эти карты навыгации. Подробные блок-схемы помогут составить прототип UI проекта. Также файл содержит стрелки, метки и другие элементы. Он полностью настраиваемый – измените основные цвета и обновите стили, весь проект также будет обновлен.

Мокап полностью поддается ресайзингу. Если вам нужно больше стрелок и меток, просто измените размер карты. Все продумано для комфортной и быстрой работы. Также можно настроить стили, шрифты и линии. И этот пакет доступен в 4 цветах.

Toro Concept (Concept Library) for Sketch and Photoshop

Красивый мокап для вашего сайта. Можно менять цвета, шрифты и блоки на веб-страницах.

Free Minimalistic Phone Mockups for Your Presentations for Photoshop and Sketch

Мокап смартфонов в минималистическом стиле, который поможет провести презентацию UI или мобильной версии сайта. Макет отлично подходит для демонстрации интерфейса. Содержимое смарт-объекта можно изменить за несколько секунд.

Free Paper Mockups for Photoshop

Мокап в виде листа для проекта презентации или рекламы мероприятия.

WuHoo! Customizable Hero/Header image for Photoshop

Полностью настраиваемый мокап для вашего следующего проекта. Включены такие функции: цветные маски для изменения цвета, множество мелких объектов в высоком разрешении, которые подойдут для печати или больших экранов, регулируемая полупрозрачная тень.

8 Black Matte Apple Devices for Photoshop and Sketch

Черные матовые мокапы устройств Apple со сменным фоном, в разрешении 1920 x 1080, совместимые с Sketch и Photoshop.

8 White Matte Apple Devices for Photoshop and Sketch

Аналогичный предыдущему мокап, только в белом варианте.

Resource UI KIt for Photoshop, Sketch and Adobe XD

Макет элементов UI, подходящий для разработки проекта веб-ресурса или мобильного приложения. Доступны две цветовые вариации: темная и светлая.

Animated Mockup for Photoshop. IPhone X

Раз стилизованный зацикленный анимированный мокап iPhone X. Экспортируйте каждый кадр отдельно как статический макет, доступно 120 кадров.

Fabric Wrinkles Mockup

Отличный мокап фабричных пакетов со складками и высоким разрешением ткани. Работает с Photoshop CC.

Free iPhone X Mockup

Мокап полностью совместим с паком Presentation Kit. Доступно высокое разрешение и разные стили. Также включены сменные цветовые макеты.

Bottle Logo Mockup

Качественный мокап для продвижения алкоголя. Файл отличается высоким разрешением, а содержимое смарт-объекта меняется в несколько кликов.

Control Panel – Free Design System

Apple Watch Mockups

Мокап Apple Watch. Высокое качество рендеринга, а также изменяемые цвета.

IPhone X Mockups 4k Resolution​​​​​​​

8 мокапов IPhone X для Sketch и Adobe Photoshop в разрешении 4К.

Simple iPhone X Mockups

Чистые и минималистичные мокапы iPhone X с потрясающими функциями настройки и огромным разрешением.

Free iMac Pro Mockups

Бесплатный мокап iMac Pro. Доступно четыре цвета. Совместимо с Sketch и Photoshop.

Samsung Galaxy S9 Mockups

Бесплатные макеты Samsung Galaxy S9 в виде сверху. Высокое качество рендеринга, изменяемые цвета и черный и белый вариант корпуса.

WuHoo!

Изолированные объекты и мокапы для Photoshop. Создавайте безумные композиции, легко меняйте цвета и используйте его для личных и коммерческих проектов.

iPhone 1st Generation Mockup​​​​​​​

Для любителей ретро мокап самого первого iPhone. Совместимо с серией Presentation Kit. Высокое разрешение и разные стили.

Free Mesh Gradients

100 различных градиентов для вашего дизайна.

Free Bag Mockup Scene

Бесплатный образец мокапа сумки из набора Branding Presentation Kit. Доступен материал в виде золотой и серебряной фольги. Доступна настройка смарт-объекта, цветовой палитры и теней.

Free iPhone X Longscroll Mockup

Макет iPhone для интерфейсов с длинной прокруткой и мобильных веб-страниц.

Free Transparent Wrinkled A4 Mockup

Мокап плаката со складками в высоком разрешении. Работает с Photoshop CC +. Особенности: изменяемый фон, регулируемые тени и отражения, настройка мокапа в пару кликов, текстурированные, прозрачные и окрашенные варианты.

Free Crumpled Paper Mockup for Photoshop

Макет плакатов со складками для печатных презентаций. Высокое качество и разрешение (6000х4500) отлично подойдет как для небольших брошюр, так и для огромных билбордов.

Free Huawei Mate X Phone (Fold) Mockup

Мокап только что анонсированного смартфона от Huawei. Ваш продукт может отлично смотреться на этом потрясающем складном телефоне.

N.Mockups Free Sample

Большой пакет шаблонов. Вы можете изменить любую деталь: непрозрачные тени, изменить цвет каждого элемента, а также добавлять и изменять свет. В версии для Sketch вам потребуется установить плагин.

IPad Pro Mockup (2018)

Используйте макет для iPad Pro 2018 для презентации UI проекта. Высокое разрешение – 6000х4500 ppx. Содержимое смарт-объекта меняется в несколько кликов.

Free iPhone XS Mockups

Этот мокап также хорошо подойдет для презентации UI вашего мобильного или веб-проекта. Высокое разрешение – 6000х4500, 6 различных материалов, настраиваемые цвета, тени и отражения.

Samsung Galaxy S9 Mockups

Макет смартфона от корейского гиганта, который вы сможете использовать в рекламе. Высокое качество рендеринга, изменяемые цвета и варианты в черном и белом корпусе. Совместимо с Photoshop и Sketch.

Free iPhone XR Mockups

Отлично подходит для презентаций пользовательского интерфейса. Включено 8 материалов, используются официальные цвета.

Free Notepad Mockup

Мокап в виде блокнота в высоком разрешении (6000х4500), который поможет продвинуть ваш продукт или мероприятие. Все элементы можно легко изменить.

Free Plastic Pouch Mockup

Бесплатный мокап пластикового мешочка в высоком разрешении (4500х3000). Настраиваемые цвета тени и отражения. Совместим с Photoshop CS4 +. Отличный вариант для продвижения бренда.

Автор, руководитель творческой группы. Чел, который отвечает на каждый ваш вопрос.

Источник