You can find tons of free device mockups online, ranging from PSDs to Sketch files. But, what if you could quickly build device mockups on-the-fly in your browser?
So, how exactly does this work?
Well, first you need a copy of jQuery and a version of the DeviceMock plugin from GitHub. This comes with a JS file, CSS file, and some SVG files to create the actual devices.
You can target any type of element on the page, from a simple image to an entire div, or even an embedded element such as an iframe. This means you could even build a cool mini-browser right in your site with an iframe to another page.
This plugin supports five different device types:
- Web browser
All of these mockups use flat design styles since they’re built with SVGs. And, they all look quite similar to Apple devices, for instance the smartphone being a clone of the iPhone and the desktop monitor looking conspicuously like an iMac.
All of these vectors are easy to add and they work in every browser with SVG support.
You can even change properties such as the mockup size, theme (white/black) and orientation (portrait landscape).
If you use the browser mockup you can even specify a dummy URL in the address bar. This is a fun way to add even more customization.
Granted this library won’t be useful for everyone but it does solve a niche problem that many UI/UX developers face when prototyping.
Read Also: 40 Creative Magazine PSD Mockups to Download