Maak apparaatmodellen in de browser met DeviceMock

Je vindt talloze gratis apparaatmodellen online, variërend van PSD's tot Sketch-bestanden. Maar wat als u snel mockups van apparaten in uw browser zou kunnen bouwen ?

Nou, dankzij de mensen van rm-labo, dat kan! Met hun gratis jQuery-plug-in, DeviceMock.js, kun je een vectorapparaat rond elk pagina-element wikkelen, met behulp van eenvoudige JavaScript en SVG's.

Hoe werkt dit precies?

Nou, eerst heb je een kopie van jQuery en een versie van de DeviceMock-plugin van GitHub nodig . Dit wordt geleverd met een JS-bestand, een CSS-bestand en enkele SVG-bestanden om de eigenlijke apparaten te maken.

U kunt elk type element op de pagina targeten, van een eenvoudige afbeelding tot een volledige div of zelfs een ingesloten element, zoals een iframe. Dit betekent dat je zelfs een coole mini-browser op je site kunt bouwen met een iframe naar een andere pagina.

Deze plug-in ondersteunt vijf verschillende apparaattypen :

1. webbrowser
2. smartphone
3. Tablet
4. Desktop
5. laptop

Al deze mockups gebruiken platte ontwerpstijlen omdat ze zijn gebouwd met SVG's. En ze lijken allemaal erg op Apple-apparaten, bijvoorbeeld omdat de smartphone een kloon van de iPhone is en de desktopmonitor opvallend veel op een iMac lijkt.

Al deze vectoren zijn eenvoudig toe te voegen en ze werken in elke browser met SVG-ondersteuning .

U kunt zelfs eigenschappen wijzigen, zoals de mockup-grootte, het thema (wit / zwart) en de richting (portretlandschap).

Als u de browsermodelup gebruikt, kunt u zelfs een dummy-URL opgeven in de adresbalk. Dit is een leuke manier om nog meer maatwerk toe te voegen.

Toegegeven, deze bibliotheek zal niet voor iedereen bruikbaar zijn, maar lost wel een nicheprobleem op dat veel UI / UX-ontwikkelaars tegenkomen bij het maken van prototypen.

Ga voor meer informatie naar de GitHub-pagina of bekijk de live-site voor een actieve demo.