Maak apparaatmodellen in de browser met DeviceMock

Je vindt talloze gratis apparaatmodellen online, variërend van PSD's tot Sketch-bestanden. Maar wat als je snel kon zijn bouw mockups op het apparaat in je browser?

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

Dus, hoe werkt dit precies?

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

Jij kan richten op elk type element op de pagina, van een eenvoudige afbeelding tot een volledige div, of zelfs een ingesloten element, zoals een iframe. Dit betekent dat je zelfs zou kunnen bouw een coole mini-browser op uw site 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.

Je kan zelfs verander eigenschappen zoals de mockup-grootte, thema (wit / zwart) en oriëntatie (portretlandschap).

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

Toegegeven, deze bibliotheek is niet bruikbaar voor iedereen behalve voor deze lost een nicheprobleem op die 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.