Skapa Device Mockups i webbläsare med DeviceMock

Du kan hitta massor av gratis apparatmockups på nätet, allt från PSD till Sketch-filer. Men, om du kunde snabbt bygga enhetsmockups på flyget i din webbläsare?

Tja, tack vare folket på rm-labo kan du! Deras gratis jQuery-plugin, DeviceMock.js, låter dig Vik en vektoranordning kring ett sidelement, med hjälp av enkla JavaScript och SVG.

Så, hur exakt fungerar det här?

Tja, först behöver du en kopia av jQuery och en version av DeviceMock-plugin från GitHub. Detta kommer med en JS-fil, CSS-fil och vissa SVG-filer för att skapa de aktuella enheterna.

Du kan rikta mot vilken typ av element som helst på sidan, från en enkel bild till en hel div, eller till och med ett inbäddat element som en iframe. Det betyder att du kan ens bygg en cool mini-webbläsare direkt i din webbplats med en iframe till en annan sida.

Denna plugin stöder Fem olika enhetstyper:

1. webbläsare
2. Smartphone
3. Tablett
4. Desktop
5. Bärbar dator

Alla dessa mockups använder plana design stilar eftersom de är byggda med SVGs. Och de ser alla ganska ut som Apple-enheter, till exempel smarttelefonen är en klon i iPhone och skrivbordsskärmen ser iögonfallande ut som en iMac.

Alla dessa vektorer är lätta att lägga till och de arbetar i varje webbläsare med SVG-support.

Du kan till och med ändra egenskaper som mockupstorlek, tema (vit / svart) och orientering (stående landskap).

Om du använder webbläsarens mockup kan du även Ange en dummyadress i adressfältet. Det här är ett roligt sätt att lägga till ännu mer anpassning.

Beviljas detta bibliotek kommer inte vara användbart för alla men det löser ett nischproblem att många UI / UX utvecklare möter när prototyper.

För mer information, besök GitHub sida eller kolla in levande webbplats för en aktiv demonstration.