Buat Mockup Perangkat di Browser dengan DeviceMock

Anda dapat menemukan banyak mockup perangkat gratis online, mulai dari PSD hingga file Sketsa. Tapi, bagaimana jika Anda bisa cepat buat mockup perangkat saat bepergian di browser Anda?

Yah, terima kasih kepada orang-orang di rm-labo, Anda bisa! Plugin jQuery gratis mereka, DeviceMock.js, memungkinkan Anda bungkus perangkat vektor di sekitar elemen halaman apa pun, menggunakan JavaScript dan SVG sederhana.

Jadi, bagaimana tepatnya cara kerjanya?

Yah, pertama-tama kamu perlu salinan jQuery dan versi plugin DeviceMock dari GitHub. Ini dilengkapi dengan file JS, file CSS, dan beberapa file SVG untuk membuat perangkat yang sebenarnya.

Kamu bisa menargetkan semua jenis elemen pada halaman, dari gambar sederhana ke seluruh div, atau bahkan elemen yang disematkan seperti iframe. Ini berarti Anda bahkan bisa membangun browser mini yang keren tepat di situs Anda dengan iframe ke halaman lain.

Plugin ini mendukung lima jenis perangkat yang berbeda:

1. Browser web
2. Telepon pintar
3. Tablet
4. Desktop
5. Laptop

Semua maket ini digunakan gaya desain datar karena mereka dibangun dengan SVG. Dan, mereka semua terlihat sangat mirip dengan perangkat Apple, misalnya smartphone yang merupakan tiruan dari iPhone dan monitor desktop yang tampak seperti iMac..

Semua vektor ini mudah ditambahkan dan berfungsi setiap browser dengan dukungan SVG.

Anda bahkan bisa ubah properti seperti ukuran mockup, tema (putih / hitam) dan orientasi (lanskap potret).

Jika Anda menggunakan mockup browser, Anda bahkan dapat tentukan URL dummy di bilah alamat. Ini adalah cara yang menyenangkan untuk menambahkan lebih banyak penyesuaian.

Memang perpustakaan ini tidak akan berguna untuk semua orang kecuali itu tidak memecahkan masalah niche yang dihadapi banyak pengembang UI / UX saat membuat prototipe.

Untuk mempelajari lebih lanjut, kunjungi Halaman GitHub atau lihat situs hidup untuk demo aktif.