Erstellen Sie Gerätemodelle im Browser mit DeviceMock

Sie können Tonnen von kostenlosen Gerätemodellen online finden, von PSDs bis hin zu Sketch-Dateien. Aber was wäre, wenn Sie schnell könnten Erstellen Sie Gerätemodelle im Handumdrehen in Ihrem Browser?

Nun, danke an die Leute bei rm-labo! Ihr kostenloses jQuery-Plugin DeviceMock.js ermöglicht es Ihnen Wickeln Sie ein Vektorgerät um ein beliebiges Seitenelement, mit einfachem JavaScript und SVGs.

Wie genau funktioniert das??

Nun, zuerst brauchst du eine Kopie von jQuery und eine Version des DeviceMock-Plugins von GitHub. Dazu gehören eine JS-Datei, eine CSS-Datei und einige SVG-Dateien, um die tatsächlichen Geräte zu erstellen.

Sie können ziele auf jede Art von Element auf der Seite, von einem einfachen Bild bis zu einem ganzen div oder sogar einem eingebetteten Element wie einem iframe. Das heißt du könntest es sogar Baue einen coolen Mini-Browser direkt auf Ihrer Website mit einem iframe zu einer anderen Seite.

Dieses Plugin unterstützt fünf verschiedene Gerätetypen:

1. Webbrowser
2. Smartphone
3. Tablette
4. Desktop
5. Laptop

Alle diese Modelle werden verwendet flache Designstile da sie mit SVGs gebaut sind. Und alle sehen Apple-Geräten sehr ähnlich. Beispielsweise ist das Smartphone ein Klon des iPhone und der Desktop-Monitor wirkt auffällig wie ein iMac.

Alle diese Vektoren lassen sich leicht hinzufügen und funktionieren Jeder Browser mit SVG-Unterstützung.

Du kannst sogar Eigenschaften ändern wie die Modellgröße, das Thema (weiß / schwarz) und die Ausrichtung (Hochformat).

Wenn Sie das Browser-Modell verwenden, können Sie sogar Geben Sie eine Dummy-URL an in der Adressleiste. Auf diese unterhaltsame Weise können Sie noch mehr Anpassungen hinzufügen.

Zugegeben, diese Bibliothek wird nicht für alle nützlich sein löst ein Nischenproblem dass viele UI / UX-Entwickler beim Prototyping konfrontiert sind.

Um mehr zu erfahren, besuchen Sie die GitHub-Seite oder check das aus Live-Site für eine aktive Demo.