Creați machete de dispozitive în browser cu DeviceMock

Puteți găsi numeroase machete gratuite de dispozitive online, de la PSD-uri la fișiere Sketch. Dar dacă ai putea repede a construi machete de dispozitive pe-the-fly în browserul dvs.?

Ei bine, datorită oamenilor din rm-labo, poți! Plug-in-ul gratuit jQuery, DeviceMock.js, vă permite înfășurați un dispozitiv vectoric în jurul oricărui element de pagină, folosind JavaScript simplu și SVG-uri.

Deci, exact cum funcționează acest lucru?

Mai întâi ai nevoie o copie a jQuery și o versiune a pluginului DeviceMock de la GitHub. Acesta are un fișier JS, un fișier CSS și câteva fișiere SVG pentru a crea dispozitivele reale.

Poti vizați orice tip de element pe pagină, de la o imagine simplă la o div divină sau chiar un element încorporat, cum ar fi o iframe. Asta înseamnă că ai putea chiar construi un mini-browser cool chiar pe site-ul dvs. cu un iframe pe o altă pagină.

Acest plugin acceptă cinci tipuri diferite de dispozitive:

1. browser web
2. Smartphone
3. Comprimat
4. Spațiul de lucru
5. Laptop

Toate aceste machete folosesc stiluri de design plate deoarece acestea sunt construite cu ajutorul SVG-urilor. Și, toate arata destul de asemănătoare cu dispozitivele Apple, de exemplu, smartphone-ul fiind o clonă a iPhone-ului și a monitorului desktop care arată în mod vizibil ca un iMac.

Toate aceste vectori sunt ușor de adăugat și lucrează fiecare browser cu suport SVG.

Puteți chiar schimbarea proprietăților cum ar fi dimensiunea machetei, tema (alb / negru) și orientarea (peisaj portret).

Dacă utilizați macheta de browser puteți chiar specificați o adresă URL falsă în bara de adrese. Aceasta este o modalitate amuzantă de a adăuga și mai multă personalizare.

Acordarea acestei biblioteci nu va fi folositoare pentru toată lumea, ci pentru aceasta rezolvă o problemă de nișă că mulți dezvoltatori UI / UX se confruntă atunci când prototip.

Pentru a afla mai multe, vizitați Pagina GitHub sau verificați site live pentru o demonstrație activă.