Создание макетов устройств в браузере с помощью DeviceMock

Вы можете найти множество бесплатных макетов устройств в Интернете, начиная от PSD до файлов Sketch. Но что, если бы вы могли быстро создавать макеты устройств на лету в своем браузере?

Что ж, благодаря ребятам из rm-labo, вы можете! Их бесплатный плагин JQuery, DeviceMock.jsПозволяет обернуть векторное устройство вокруг любого элемента страницы, используя простые JavaScript и SVG.

Итак, как именно это работает?

Ну, во-первых, вам нужна копия jQuery и версия плагина DeviceMock от GitHub, Это идет с файлом JS, файлом CSS и некоторыми файлами SVG для создания реальных устройств.

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

Читайте также: Просмотр и публикация эскизов в Интернете с помощью Sketch Viewer

Этот плагин поддерживает пять различных типов устройств:

1. веб-браузер
2. смартфон
3. таблетка
4. рабочий стол
5. портативный компьютер

Все эти макеты используют стили плоского дизайна, так как они построены с SVG. И все они очень похожи на устройства Apple, например, смартфон является клоном iPhone, а настольный монитор заметно похож на iMac.

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

Вы даже можете изменить свойства, такие как размер макета, тема (белая / черная) и ориентация (портретная ориентация).

Если вы используете макет браузера, вы можете даже указать фиктивный URL в адресной строке. Это интересный способ добавить еще больше настроек.
Конечно, эта библиотека не будет полезна для всех, но она решает нишевую проблему, с которой сталкиваются многие разработчики UI / UX при создании прототипов.

Чтобы узнать больше, посетите Страница GitHub или проверить живой сайт для активной демонстрации.

Читайте также: 40 креативных журналов PSD для скачивания