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

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

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

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

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

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

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

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

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

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

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

Если вы используете макет браузера, вы можете даже указать фиктивный URL в адресной строке. Это интересный способ добавить еще больше настроек.

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

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