Opprett Device Mockups i nettleser med DeviceMock

Du kan finne tonnevis av gratis enheter mockups online, alt fra PSD til Sketch-filer. Men, hva om du kunne raskt bygge enheten mockups on-the-fly i nettleseren din?

Vel, takk til folkene på rm-labo, kan du! Deres gratis jQuery-plugin, DeviceMock.js, lar deg pakk en vektor enhet rundt et hvilket som helst sideelement, bruker enkle JavaScript og SVGer.

Så, hvordan fungerer dette nøyaktig?

Vel, først trenger du en kopi av jQuery og en versjon av DeviceMock-plugin fra GitHub. Dette kommer med en JS-fil, CSS-fil og noen SVG-filer for å lage de aktuelle enhetene.

Du kan mål hvilken som helst type element på siden, fra et enkelt bilde til en hel div, eller til og med et innebygd element som en iframe. Dette betyr at du kan til og med bygge en kul mini-nettleser rett på nettstedet ditt med en iframe til en annen side.

Denne plugin støtter Fem forskjellige enhetstyper:

1. nettleser
2. smart~~POS=TRUNC
3. Tablett
4. Desktop
5. Laptop

Alle disse mockups bruker flate design stiler siden de er bygd med SVGs. Og alle ser ganske ut som Apple-enheter, for eksempel at smarttelefonen er en klone på iPhone og skrivebordsbeskjermen ser påfallende som en iMac.

Alle disse vektorene er enkle å legge til og de jobber inn Hver nettleser med SVG-støtte.

Du kan til og med endre egenskaper som mockup størrelse, tema (hvit / svart) og orientering (stående landskap).

Hvis du bruker nettleseren, kan du til og med spesifiser en dummy-URL i adressefeltet. Dette er en morsom måte å legge til enda mer tilpasning.

Gitt dette biblioteket vil ikke være nyttig for alle, men det løser et nisjeproblem at mange UI / UX-utviklere møter når prototyping.

For å lære mer, besøk GitHub side eller sjekk ut live nettsted for en aktiv demonstrasjon.