Създайте макети на устройства в браузъра с DeviceMock

Можете да намерите много безплатни макети на устройства онлайн, вариращи от PSD до Sketch файлове. Но какво, ако можеш бързо изграждане на макети на устройството в движение в браузъра си?

Е, благодарение на хората в rm-labo, можете! Безплатният им jQuery плъгин, DeviceMock.js, ви позволява увийте векторно устройство около всеки елемент на страницата, използване на прости JavaScript и SVG.

И така, как точно работи това?

Е, първо трябва копие на jQuery и версия на приставката DeviceMock от GitHub. Това идва с JS файл, CSS файл и някои SVG файлове за създаване на действителните устройства.

Можеш насочете всеки тип елемент на страница, от просто изображение до цял div или дори вграден елемент, като например iframe. Това означава, че може дори изгради готин мини-браузър направо в сайта си с вградена рамка към друга страница.

Този плъгин поддържа пет различни типа устройства:

1. уеб браузър
2. Smartphone
3. таблетка
4. работен плот
5. Лаптоп

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

Всички тези вектори са лесни за добавяне и работят всеки браузър с SVG поддръжка.

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

Ако използвате макета на браузъра, можете дори укажете фиктивен URL адрес в адресната лента. Това е забавен начин да добавите още повече персонализиране.

Тази библиотека не е полезна за всички, освен за нея решава проблем в ниша много програмисти за UI / UX се сблъскват при създаването на прототипи.

За да научите повече, посетете Страница GitHub или проверете на живо за активно демо.