Opret Device Mockups i Browser med DeviceMock

Du kan finde masser af gratis enhed mockups online, lige fra PSD'er til Sketch-filer. Men hvad hvis du kunne hurtigt bygg enheden mockups on-the-fly i din browser?

Nå takket være folkene på rm-labo kan du! Deres gratis jQuery-plugin, DeviceMock.js, lader dig Indpak en vektor enhed omkring ethvert sideelement, ved hjælp af simple JavaScript og SVGs.

Så hvordan virker dette netop?

Nå, først har du brug for det en kopi af jQuery og en version af DeviceMock plugin fra GitHub. Dette kommer med en JS-fil, CSS-fil og nogle SVG-filer til at oprette de aktuelle enheder.

Du kan målrette enhver type element på siden, fra et simpelt billede til en hel div, eller endda et indlejret element som en iframe. Det betyder at du endda kunne opbyg en cool mini-browser lige i dit websted med en iframe til en anden side.

Dette plugin understøtter fem forskellige enhedstyper:

1. webbrowser
2. Smartphone
3. Tablet
4. Desktop
5. Bærbar

Alle disse mockups bruger flad design stilarter da de er bygget med SVG'er. Og de ser alle meget ud som Apple-enheder, for eksempel at smartphone er en klon af iPhone og skrivebordsklæret ser iøjnefaldende ud som en iMac.

Alle disse vektorer er nemme at tilføje, og de arbejder i Hver browser med SVG-support.

Du kan endda ændre egenskaber som mockup størrelse, tema (hvid / sort) og orientering (portræt landskab).

Hvis du bruger browser mockup kan du endda Angiv en dummy URL i adresselinjen. Dette er en sjov måde at tilføje endnu mere tilpasning på.

Bevilget dette bibliotek vil ikke være nyttigt for alle, men det løser et nicheproblem at mange UI / UX-udviklere står over for når prototyping.

For at lære mere, besøg GitHub side eller tjek den live site for en aktiv demo.